scss -> css: index.css
This commit is contained in:
parent
470954efb0
commit
0bda951b84
6 changed files with 133 additions and 119 deletions
4
.idea/watcherTasks.xml
Normal file
4
.idea/watcherTasks.xml
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
|
||||||
|
</project>
|
10
index.html
10
index.html
|
@ -4,7 +4,11 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Saudade / a petz & friends archive</title>
|
<title>Saudade / a petz & friends archive</title>
|
||||||
<link rel="stylesheet" href="style/style.css">
|
<link rel="stylesheet" href="style/index.css">
|
||||||
|
|
||||||
|
<!-- fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=playfair-display:800i" rel="stylesheet"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="site">
|
<div id="site">
|
||||||
|
@ -48,7 +52,7 @@
|
||||||
|
|
||||||
<!--------------------------------------------- methodology --------------------------------------------------->
|
<!--------------------------------------------- methodology --------------------------------------------------->
|
||||||
|
|
||||||
<p><i><u>methodology:</u></i></p>
|
<h3>methodology:</h3>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
For each site, I re-create each page by hand. Yes! This is tedious, especially for large sites. There are a
|
For each site, I re-create each page by hand. Yes! This is tedious, especially for large sites. There are a
|
||||||
|
@ -89,7 +93,7 @@
|
||||||
|
|
||||||
<!----------------------------------------------- author ------------------------------------------------------>
|
<!----------------------------------------------- author ------------------------------------------------------>
|
||||||
|
|
||||||
<p><i><u>about the author:</u></i></p>
|
<h3>about the author:</h3>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Hello! I'm marley, or mar @ epiphany on forums/Discord, or punkfairie various other places. I own Epiphany,
|
Hello! I'm marley, or mar @ epiphany on forums/Discord, or punkfairie various other places. I own Epiphany,
|
||||||
|
|
122
style/index.css
Normal file
122
style/index.css
Normal file
|
@ -0,0 +1,122 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "CascadiaCode";
|
||||||
|
src: url("fonts/CascadiaCode.woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "CascadiaCode";
|
||||||
|
src: url("fonts/CascadiaCodeItalic.woff2");
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 95%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'CascadiaCode', sans-serif;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 13px;
|
||||||
|
background-image: url(bg.gif);
|
||||||
|
}
|
||||||
|
|
||||||
|
#site {
|
||||||
|
border: 1px solid #000;
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
background-color: #faefe4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 2px dotted #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h1 {
|
||||||
|
font-family: 'Playfair Display', serif;
|
||||||
|
text-transform: lowercase;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
display: table;
|
||||||
|
width: 70%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: left;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h2 {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
display: table;
|
||||||
|
width: 70%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: right;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 2px dotted #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
padding: 10px;
|
||||||
|
overflow: auto;
|
||||||
|
height: 74%;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
width: 70%;
|
||||||
|
border-left: 3px solid #808080;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin: 20px auto 30px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
text-decoration: underline;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#heart {
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 3px 7px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: #4db3da; }
|
||||||
|
|
||||||
|
a:hover, a:visited { color: #268db5; }
|
||||||
|
|
||||||
|
a:hover { text-decoration: underline; text-decoration-style: wavy; }
|
|
@ -1 +0,0 @@
|
||||||
@import"https://fonts.googleapis.com/css2?family=Imprima&family=Playfair+Display:ital,wght@0,800;1,800&display=swap";@font-face{font-family:"CascadiaCode";src:url("fonts/CascadiaCode.woff2")}@font-face{font-family:"CascadiaCode";src:url("fonts/CascadiaCodeItalic.woff2");font-style:italic}html{height:100%;width:100%}body{height:95%;display:flex;justify-content:center;align-items:center;align-content:center;text-align:center;font-family:"CascadiaCode",sans-serif;letter-spacing:1.1px;font-size:13px;background-image:url(bg.gif)}#site{border:1px solid #000;width:600px;height:600px;background-color:#faefe4}#header{padding:10px;border-bottom:2px dotted #000}#header h1{font-family:"Playfair Display",serif;text-transform:lowercase;font-size:40px;font-weight:normal;font-style:italic;display:table;width:70%;margin:0 auto;text-align:left;padding:5px}#header h2{font-weight:normal;font-size:13px;display:table;width:70%;margin:0 auto;text-align:right;padding:5px}#nav{padding:10px;border-bottom:2px dotted #000}#content{padding:10px;overflow:scroll;height:72%}blockquote{width:70%;border-left:3px solid gray;padding-left:10px;margin:20px auto;margin-bottom:30px;text-align:left}p{margin:10px}ol{text-align:left}ol li{margin-bottom:10px}#heart{display:table;margin:0 auto;padding:3px 7px;border:1px solid #000;font-size:16px;font-family:sans-serif}a{color:#4db3da}a:hover,a:visited{color:#268db5}a:hover{text-decoration:underline;text-decoration-style:wavy}/*# sourceMappingURL=style.css.map */
|
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAQ,qHAER,WACC,2BACA,oCAGD,WACC,2BACA,0CACA,kBAGD,KACC,YACA,WAGD,KACC,WACA,aACA,uBACA,mBACA,qBAEA,kBACA,sCACA,qBACA,eACA,6BAGD,MACC,sBACA,YACA,aACA,yBAGD,QACC,aACA,8BAGA,WACC,qCACA,yBACA,eACA,mBACA,kBAEA,cACA,UACA,cACA,gBACA,YAGD,WACC,mBACA,eAEA,cACA,UACA,cACA,iBACA,YAIF,KACC,aACA,8BAGD,SACC,aACA,gBACA,WAGD,WACC,UACA,2BACA,kBACA,iBACA,mBACA,gBAGD,EACC,YAGD,GACC,gBAEA,MACC,mBAIF,OACC,cACA,cACA,gBACA,sBACA,eACA,uBAGD,gBACA,gCACA","file":"style.css"}
|
|
114
style/style.scss
114
style/style.scss
|
@ -1,114 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Imprima&family=Playfair+Display:ital,wght@0,800;1,800&display=swap');
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "CascadiaCode";
|
|
||||||
src: url("fonts/CascadiaCode.woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "CascadiaCode";
|
|
||||||
src: url("fonts/CascadiaCodeItalic.woff2");
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 95%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
align-content: center;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'CascadiaCode', sans-serif;
|
|
||||||
letter-spacing: 1.1px;
|
|
||||||
font-size: 13px;
|
|
||||||
background-image: url(bg.gif);
|
|
||||||
}
|
|
||||||
|
|
||||||
#site {
|
|
||||||
border: 1px solid #000;
|
|
||||||
width: 600px;
|
|
||||||
height: 600px;
|
|
||||||
background-color: #faefe4;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 2px dotted #000;
|
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-family: 'Playfair Display', serif;
|
|
||||||
text-transform: lowercase;
|
|
||||||
font-size: 40px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: italic;
|
|
||||||
|
|
||||||
display: table;
|
|
||||||
width: 70%;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: left;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
display: table;
|
|
||||||
width: 70%;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: right;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav {
|
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 2px dotted #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
padding: 10px;
|
|
||||||
overflow: scroll;
|
|
||||||
height: 72%;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
width: 70%;
|
|
||||||
border-left: 3px solid #808080;
|
|
||||||
padding-left: 10px;
|
|
||||||
margin: 20px auto;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#heart {
|
|
||||||
display: table;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 3px 7px;
|
|
||||||
border: 1px solid #000;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
a { color: #4db3da; }
|
|
||||||
a:hover, a:visited { color: #268db5; }
|
|
||||||
a:hover { text-decoration: underline; text-decoration-style: wavy; }
|
|
Loading…
Reference in a new issue