preprocessed sass files into css

themes/sukaato/assets/css/main.css

@@ -12,7 +12,7 @@
 }
 @font-face {
   font-family: "postContent";
-  src: url("fonts/faustus.regular.ttf");
+  src: url("fonts/vinque.regular.otf");
 }
 @font-face {
   font-family: "postFirstChar";
@@ -70,7 +70,7 @@ code {
 }
 
 html {
-  background-color: #191816;
+  background-color: rgb(29.475, 26.2875, 21.825);
   background-image: url("images/rocky_wall.png");
 }
 
@@ -142,7 +142,6 @@ body main {
   max-height: 900px;
   margin: 0 auto;
   shape-outside: circle(50%);
-  -webkit-clip-path: circle(45vw);
   clip-path: circle(45vw);
   background-color: #121212;
   border-radius: 50%;
@@ -182,9 +181,13 @@ body main {
 #posts > a:has(.post) > .post > p {
   color: #cccccc;
   font-family: postContent;
-  font-size: clamp(10pt, 1.4vw, 18pt);
+  font-size: clamp(11pt, 1.2vw, 16pt);
   margin: 2% 0;
 }
+#posts > a:has(.post) > .post > p::after {
+  content: " [  . . .  ]";
+  color: #9d1934;
+}
 #posts > a:has(.post) > .post > h2 {
   font-size: clamp(14pt, 2.5vw, 20pt);
   font-weight: 900;
@@ -206,7 +209,7 @@ body main {
 }
 
 .post {
-  background-image: linear-gradient(to top right, #121212, rgba(74, 74, 74, 0.1));
+  background-image: linear-gradient(to top right, #121212, rgba(74.1, 74.1, 74.1, 0.1));
   font-family: postTitle;
   padding: 3%;
   margin: 2% 0;
@@ -219,14 +222,14 @@ body main {
 #post #content {
   margin: 0 10%;
   font-family: postContent;
-  font-size: clamp(12pt, 1.8vw, 18pt);
+  font-size: clamp(12pt, 1.1vw, 16pt);
 }
 #post #content img {
   filter: saturate(0) contrast(1.75);
 }
 #post #content > img, #post #content > p > img {
   margin: 2% auto;
-  max-width: 75%;
+  max-width: 50%;
   height: auto;
   display: block;
   border-top: 12px;
@@ -279,9 +282,36 @@ body main {
   font-size: clamp(9pt, 1.5vw, 14pt);
   text-align: justify;
 }
+#post #content .footnotes {
+  font-size: clamp(9pt, 1vw, 12pt);
+  max-height: 33vh;
+  overflow-y: scroll;
+  background: no-repeat url("images/snek.svg") 33% center #cccccc;
+  border-bottom-left-radius: 5%;
+  border-bottom-right-radius: 5%;
+  margin-top: 10%;
+}
+#post #content .footnotes ol {
+  padding-left: 5%;
+}
+#post #content .footnotes li {
+  padding: 0 5%;
+  margin: 5% 5% 5% 0;
+  border-radius: 3%;
+  background-color: #e9b074;
+  color: #121212;
+  text-shadow: 0 0 4px #121212;
+  opacity: 85%;
+}
+#post #content .footnotes li::marker {
+  color: #9d1934;
+}
+#post #content h1, #post #content h2, #post #content h3, #post #content h4, #post #content h6 {
+  color: #e9b074;
+}
 #post h1:first-child {
   text-align: center;
-  font-size: 24pt;
+  font-size: clamp(24pt, 2vw, 72pt);
   color: #9d1934;
   font-weight: bold;
 }
@@ -339,7 +369,7 @@ body main {
   overflow-y: scroll;
 }
 .page.category > img {
-  max-width: 100%;
+  width: 100%;
   filter: saturate(0) contrast(1.75);
 }
 
@@ -369,6 +399,7 @@ body main {
   display: initial;
   text-shadow: 2px 2px 5px #121212;
   font-family: pageFont;
+  backdrop-filter: blur(3px);
 }
 
 .page.tag > h1 {
@@ -417,6 +448,11 @@ body main {
   color: #121212;
 }
 
+#home img {
+  max-width: 100%;
+  margin: 0 auto;
+}
+
 footer {
   border-top: 1px solid #e9b074;
   margin-top: 1rem;