From 37c9e6ad89bbe9e10e860e9839ec76c6c1c23c23 Mon Sep 17 00:00:00 2001
From: Alex Tavarez <admin@sukaato.moe>
Date: Sun, 1 Feb 2026 17:42:08 -0500
Subject: [PATCH] updated CSS compilation of SASS styling

---
 themes/sukaato/assets/css/main.css | 428 ++++++++++++++++++++++++++++-
 1 file changed, 418 insertions(+), 10 deletions(-)

diff --git a/themes/sukaato/assets/css/main.css b/themes/sukaato/assets/css/main.css
index 166ade9..9c51818 100644
--- a/themes/sukaato/assets/css/main.css
+++ b/themes/sukaato/assets/css/main.css
@@ -1,22 +1,430 @@
-body {
-  color: #222;
-  font-family: sans-serif;
-  line-height: 1.5;
-  margin: 1rem;
-  max-width: 768px;
+@font-face {
+  font-family: "headerTitle";
+  src: url("fonts/Cronicle.ttf");
+}
+@font-face {
+  font-family: "postTitle";
+  src: url("fonts/Satanic_Demon.ttf");
+}
+@font-face {
+  font-family: "postMatter";
+  src: url("fonts/erika-pl.regular.ttf");
+}
+@font-face {
+  font-family: "postContent";
+  src: url("fonts/faustus.regular.ttf");
+}
+@font-face {
+  font-family: "postFirstChar";
+  src: url("fonts/goudy-initialen.regular.ttf");
+}
+@font-face {
+  font-family: "catTerm";
+  src: url("fonts/CaesarDressing.regular.ttf");
+}
+@font-face {
+  font-family: "navFont";
+  src: url("fonts/black-magnet.regular.otf");
+}
+@font-face {
+  font-family: "pageFont";
+  src: url("fonts/Almendra.regular.ttf");
+}
+@font-face {
+  font-family: "encryptedFont";
+  src: url("fonts/Drachenklaue.ttf");
+}
+@font-face {
+  font-family: "codeFont";
+  src: url("fonts/blockblueprint.medium.ttf");
+}
+pre:has(code) {
+  padding: 15px;
+  border-radius: 3%;
+}
+
+code {
+  font-family: codeFont;
+  font-size: clamp(10pt, 1.5vw, 14pt);
+}
+
+.jtab path {
+  stroke: #cccccc;
+}
+.jtab circle {
+  fill: #cccccc;
+  stroke: none;
+}
+.jtab circle + text {
+  fill: #121212;
+}
+
+::-moz-selection {
+  background-color: #e9b074;
+  color: #121212;
+}
+
+::selection {
+  background-color: #e9b074;
+  color: #121212;
+}
+
+html {
+  background-color: #191816;
+  background-image: url("images/rocky_wall.png");
 }
 
 header {
-  border-bottom: 1px solid #222;
+  border-bottom: 5px solid #e9b074;
   margin-bottom: 1rem;
 }
+header h1 {
+  font-family: headerTitle;
+  text-align: center;
+  font-size: clamp(16pt, 3vw, 72pt);
+}
+header nav {
+  text-align: center;
+  font-family: navFont;
+  font-size: clamp(16pt, 1.5vw, 24pt);
+  margin: 6%;
+}
+header nav > a {
+  padding: 3%;
+  margin: 3%;
+}
+
+body {
+  color: #cccccc;
+  /* line-height: 1.5 */
+  /* margin: 1rem */
+  margin: 0 auto;
+  width: 50vw;
+  max-width: 900px;
+}
+body main {
+  background-color: rgba(18, 18, 18, 0.7);
+  border-radius: 2%;
+}
+
+.directory {
+  padding: 3% 5%;
+}
+
+@keyframes rise-and-shine {
+  0% {
+    top: 0vh;
+  }
+  100% {
+    top: -15vh;
+  }
+}
+@keyframes morningside {
+  0% {
+    background: radial-gradient(circle at 15vw, #121212 60%, #9d1934);
+  }
+  100% {
+    background: radial-gradient(circle at 7.5vw, #121212 66%, #9d1934);
+  }
+}
+.black-hole.wrap {
+  z-index: -1;
+  position: absolute;
+  top: -15vh;
+  text-align: center;
+  filter: drop-shadow(-5px 4px 20px rgba(157, 25, 52, 0.5));
+  animation: rise-and-shine 5s ease-out;
+}
+.black-hole.wrap #black-hole {
+  width: 50vw;
+  max-width: 900px;
+  height: 50vw;
+  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%;
+  background: radial-gradient(circle at 7.5vw, #121212 66%, #9d1934);
+  animation: morningside 5s ease-in;
+  transform: rotate(-90deg);
+}
+
+#page #title {
+  font-family: postTitle;
+  margin-left: 1.5vw;
+}
+
+#content.page {
+  font-family: pageFont;
+  font-size: clamp(10pt, 1.5vw, 18pt);
+  margin: 5% 15% 0;
+  padding: 5% 0 5%;
+}
+
+.expo > #title {
+  padding-top: 0px;
+}
+
+#posts {
+  padding: 3% 10%;
+}
+#posts > a:has(.post) {
+  display: block;
+  transform: rotate(0deg);
+}
+#posts > a:has(.post) > .post {
+  box-shadow: none;
+  border: 1px solid rgba(255, 176, 116, 0.5);
+  transition: box-shadow 3s;
+}
+#posts > a:has(.post) > .post > p {
+  color: #cccccc;
+  font-family: postContent;
+  font-size: clamp(10pt, 1.4vw, 18pt);
+  margin: 2% 0;
+}
+#posts > a:has(.post) > .post > h2 {
+  font-size: clamp(14pt, 2.5vw, 20pt);
+  font-weight: 900;
+  margin: 0;
+}
+#posts > a:has(.post) > .post:hover {
+  box-shadow: inset 0 2px 16px #ffb074;
+}
+#posts > a:has(.post):nth-child(even) {
+  transform: rotate(3deg);
+  transition: transform 2s;
+}
+#posts > a:has(.post):nth-child(odd) {
+  transform: rotate(-3deg);
+  transition: transform 2s;
+}
+#posts > a:has(.post):hover {
+  transform: rotate(0deg);
+}
+
+.post {
+  background-image: linear-gradient(to top right, #121212, rgba(74, 74, 74, 0.1));
+  font-family: postTitle;
+  padding: 3%;
+  margin: 2% 0;
+  border-radius: 4%;
+}
+
+#post {
+  font-family: postTitle;
+}
+#post #content {
+  margin: 0 10%;
+  font-family: postContent;
+  font-size: clamp(12pt, 1.8vw, 18pt);
+}
+#post #content img {
+  filter: saturate(0) contrast(1.75);
+}
+#post #content > img, #post #content > p > img {
+  margin: 2% auto;
+  max-width: 75%;
+  height: auto;
+  display: block;
+  border-top: 12px;
+  border-right: 12px;
+  border-left: 12px;
+  border-bottom: 48px;
+  border-color: #fff;
+  border-style: solid;
+  border-radius: 1%;
+}
+#post #content > img:nth-child(even), #post #content > p > img:nth-child(even) {
+  transform: rotate(2deg);
+}
+#post #content > img:nth-child(odd), #post #content > p > img:nth-child(odd) {
+  transform: rotate(-2deg);
+}
+#post #content > p:first-child::first-letter {
+  font-family: postFirstChar;
+  font-size: clamp(64pt, 3vw, 86pt);
+  float: left;
+  color: #e9b074;
+}
+#post #content figure {
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 2% auto;
+  max-width: 50%;
+  height: auto;
+  border-top: 12px;
+  border-right: 12px;
+  border-left: 12px;
+  border-bottom: 24px;
+  border-color: #fff;
+  border-style: solid;
+  border-radius: 1%;
+  background-color: #fff;
+  text-align: center;
+}
+#post #content figure img {
+  width: 100%;
+}
+#post #content figure figcaption {
+  max-height: 10vh;
+}
+#post #content figure figcaption > p {
+  margin-top: 0;
+  margin-bottom: 0;
+  color: #121212;
+  font-family: postMatter;
+  font-size: clamp(9pt, 1.5vw, 14pt);
+  text-align: justify;
+}
+#post h1:first-child {
+  text-align: center;
+  font-size: 24pt;
+  color: #9d1934;
+  font-weight: bold;
+}
+#post #frontmatter {
+  width: 33%;
+  margin: 0 0 0 auto;
+  padding: 1%;
+  font-family: postMatter;
+}
+#post .terms {
+  max-width: 66%;
+  margin: 25px auto 0;
+  text-align: center;
+}
+#post .terms#label {
+  text-decoration: underline;
+}
+#post .terms#directory {
+  font-family: postMatter;
+  padding: 2% 0 4%;
+}
+#post .terms li {
+  display: inline-block;
+  margin: 0.5%;
+  font-weight: bold;
+}
+#post .terms li a {
+  display: block;
+  padding: 5px;
+  background-color: #9d1934;
+  color: #121212;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 3s;
+}
+#post .terms li a:hover {
+  background-color: #e9b074;
+}
+
+.page.category > div {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+}
+.page.category > div > h1 {
+  font-family: catTerm;
+  flex-basis: 33vw;
+  font-size: clamp(16pt, 1.3vw, 24pt);
+}
+.page.category > div > p {
+  font-family: pageFont;
+  margin-left: 10%;
+  margin-right: 5%;
+  max-height: 15vh;
+  overflow-y: scroll;
+}
+.page.category > img {
+  max-width: 100%;
+  filter: saturate(0) contrast(1.75);
+}
+
+#categories.expo > h1 {
+  font-family: catTerm;
+  font-size: clamp(24pt, 2vw, 32pt);
+}
+
+#categories.directory {
+  padding-top: 0px;
+}
+#categories.directory > .category {
+  min-height: 66px;
+  background-position-y: 34%;
+  background-size: cover;
+  background-blend-mode: saturation;
+  filter: contrast(1.3);
+}
+#categories.directory > .category > h2 {
+  text-shadow: 2px 2px 5px #121212;
+  font-family: catTerm;
+}
+#categories.directory > .category > h2 + p {
+  display: none;
+}
+#categories.directory > .category:hover > h2 + p {
+  display: initial;
+  text-shadow: 2px 2px 5px #121212;
+  font-family: pageFont;
+}
+
+.page.tag > h1 {
+  font-family: postMatter;
+  font-size: clamp(24pt, 2vw, 32pt);
+}
+
+#tags.expo > h1 {
+  font-family: postMatter;
+  font-size: clamp(24pt, 2vw, 32pt);
+}
+
+#tags.directory {
+  padding-top: 0px;
+}
+#tags.directory > dl {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  align-content: space-around;
+  gap: 3%;
+}
+#tags.directory .tag.title {
+  font-family: postMatter;
+  font-weight: bold;
+  font-size: clamp(12pt, 1.5vw, 16pt);
+  background-color: #9d1934;
+  cursor: pointer;
+}
+#tags.directory .tag.title > a {
+  padding: 5px;
+  background-color: #9d1934;
+  color: #121212;
+  text-decoration: none;
+  border-radius: 5px;
+}
+#tags.directory .tag.title:hover + .tag.content::after {
+  display: inline-block;
+  position: absolute;
+  z-index: 1;
+  max-width: 10vw;
+  max-height: 15vh;
+  overflow: scroll;
+  background-color: #e9b074;
+  color: #121212;
+}
 
 footer {
-  border-top: 1px solid #222;
+  border-top: 1px solid #e9b074;
   margin-top: 1rem;
+  font-family: postMatter;
+  font-size: 14pt;
 }
 
 a {
-  color: #00e;
+  color: #9d1934;
   text-decoration: none;
-}
+}/*# sourceMappingURL=main.css.map */
\ No newline at end of file