feature: further styled the rest of the static blog

themes/sukaato/assets/css/abstracts/_fonts.sass

@@ -0,0 +1,12 @@
+@use 'fun'
+
+@include fun.create_font("headerTitle", "Cronicle.ttf")
+@include fun.create_font("postTitle", "Satanic_Demon.ttf")
+@include fun.create_font("postMatter", "erika-pl.regular.ttf")
+@include fun.create_font("postContent", "faustus.regular.ttf")
+@include fun.create_font("postFirstChar", "goudy-initialen.regular.ttf")
+@include fun.create_font("catTerm", "CaesarDressing.regular.ttf")
+@include fun.create_font("navFont", "black-magnet.regular.otf")
+@include fun.create_font("pageFont", "Almendra.regular.ttf")
+@include fun.create_font("encryptedFont", "Drachenklaue.ttf")
+@include fun.create_font("codeFont", "blockblueprint.medium.ttf")

themes/sukaato/assets/css/abstracts/_fun.sass

@@ -0,0 +1,4 @@
+@mixin create_font($name, $font_basename)
+    @font-face
+        font-family: $name
+        src: url('fonts/' + $font_basename)

themes/sukaato/assets/css/abstracts/_palette.sass

@@ -0,0 +1,9 @@
+@use 'sass:color' as brush
+
+$white: #ffffff
+$black: #000000
+$bg: #121212
+$accent: #9d1934
+$fg: #cccccc
+$state: #e9b074
+$canvas: brush.adjust(brush.adjust($bg, $lightness: 1.5%), $red: 3%, $green: 1.75%)

themes/sukaato/assets/css/base/_site.sass

@@ -0,0 +1,357 @@
+@use '../abstracts/palette' as c
+@use 'sass:color' as brush
+@forward '../abstracts/fonts'
+@forward '../components/cblocks'
+
+::selection
+    background-color: c.$state
+    color: c.$bg
+
+html
+    background-color: c.$canvas
+    background-image: url("images/rocky_wall.png")
+
+header
+    border-bottom: 5px solid c.$state
+    margin-bottom: 1rem
+
+    & h1
+        font-family: headerTitle
+        text-align: center
+        font-size: clamp(16pt, 3vw, 72pt)
+
+    & nav
+        text-align: center
+        font-family: navFont
+        font-size: clamp(16pt, 1.5vw, 24pt)
+        margin: 6%
+
+        & > a
+            padding: 3%
+            margin: 3%
+
+body
+    color: c.$fg
+    /* line-height: 1.5 */
+    /* margin: 1rem */
+    margin: 0 auto
+    // min-width: 33vw
+    width: 50vw
+    max-width: 900px
+
+    & main
+        background-color: rgba(c.$bg, 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, c.$bg 60%, c.$accent)
+    100%
+        background: radial-gradient(circle at 7.5vw, c.$bg 66%, c.$accent)
+
+.black-hole.wrap
+    z-index: -1
+    position: absolute
+    top: -15vh
+    text-align: center
+    filter: drop-shadow(-5px 4px 20px rgba(c.$accent, 0.5))
+    animation: rise-and-shine 5s ease-out
+
+    & #black-hole
+        width: 50vw
+        max-width: 900px
+        height: 50vw
+        max-height: 900px
+        margin: 0 auto
+        shape-outside: circle(50%)
+        clip-path: circle(45vw)
+        background-color: c.$bg
+        border-radius: 50%
+        background: radial-gradient(circle at 7.5vw, c.$bg 66%, c.$accent)
+        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%
+
+    & > a
+        &:has(.post)
+            display: block
+            transform: rotate(0deg)
+
+            & > .post
+                box-shadow: none
+                border: 1px solid rgba(brush.adjust(c.$state, $red: 50), 0.5)
+                transition: box-shadow 3s
+
+                & > p
+                    color: c.$fg
+                    font-family: postContent
+                    font-size: clamp(10pt,1.4vw, 18pt)
+                    margin: 2% 0
+                
+                & > h2
+                    // color: c.$state
+                    font-size: clamp(14pt, 2.5vw, 20pt)
+                    font-weight: 900
+                    margin: 0
+
+                &:hover
+                    box-shadow: inset 0 2px 16px brush.adjust(c.$state, $red: 95)
+
+            &:nth-child(even)
+                transform: rotate(3deg)
+                transition: transform 2s
+
+            &:nth-child(odd)
+                transform: rotate(-3deg)
+                transition: transform 2s
+
+            &:hover
+                transform: rotate(0deg)
+
+.post
+    background-image: linear-gradient(to top right, rgba(c.$bg, 1.0), rgba(brush.adjust(c.$bg, $lightness: 22%), 0.1))
+    // border: 1px solid c.$accent
+    font-family: postTitle
+    padding: 3%
+    margin: 2% 0
+    border-radius: 4%
+
+#post
+    font-family: postTitle
+
+    & #content
+        margin: 0 10%
+        font-family: postContent
+        font-size: clamp(12pt, 1.8vw, 18pt)
+
+        & img
+            filter: saturate(0) contrast(1.75)
+
+        & > img, & > 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%
+
+        & > img:nth-child(even), & > p > img:nth-child(even)
+            transform: rotate(2deg)
+
+        & > img:nth-child(odd), & > p > img:nth-child(odd)
+            transform: rotate(-2deg)
+
+        & > p:first-child::first-letter
+            font-family: postFirstChar
+            font-size: clamp(64pt, 3vw , 86pt)
+            float: left
+            color: c.$state
+
+        & 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
+
+            & img
+                width: 100%
+
+            & figcaption
+                max-height: 10vh
+
+                & > p
+                    margin-top: 0
+                    margin-bottom: 0
+                    color: c.$bg
+                    font-family: postMatter
+                    font-size: clamp(9pt, 1.5vw, 14pt)
+                    text-align: justify
+
+    & h1:first-child
+        text-align: center
+        font-size: clamp(16pt, 24pt, 32pt)
+        color: c.$accent
+        font-weight: bold
+
+    & #frontmatter
+        width: 33%
+        margin: 0 0 0 auto
+        padding: 1%
+        font-family: postMatter
+
+    & .terms
+        max-width: 66%
+        margin: 25px auto 0
+        text-align: center
+
+        &#label
+            text-decoration: underline
+        
+        &#directory
+            font-family: postMatter
+            padding: 2% 0 4%
+
+        & li
+            display: inline-block
+            margin: 0.5%
+            font-weight: bold
+
+            & a
+                display: block
+                padding: 5px
+                background-color: c.$accent
+                color: c.$bg
+                text-decoration: none
+                border-radius: 5px
+                transition: background-color 3s
+
+                &:hover
+                    background-color: c.$state
+
+.page.category
+    & > div
+        display: flex
+        flex-flow: row nowrap
+        justify-content: space-evenly
+
+        & > h1
+            font-family: catTerm
+            flex-basis: 33vw
+            font-size: clamp(16pt, 1.3vw, 24pt)
+
+        & > p
+            font-family: pageFont
+            margin-left: 10%
+            margin-right: 5%
+            max-height: 15vh
+            overflow-y: scroll
+
+    & > 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
+
+    & > .category
+        min-height: 66px
+        background-position-y: 34%
+        background-size: cover
+        background-blend-mode: saturation
+        filter: contrast(1.3)
+
+        & > h2
+            text-shadow: 2px 2px 5px c.$bg
+            font-family: catTerm
+
+            & + p
+                display: none
+
+        &:hover > h2 + p
+            display: initial
+            text-shadow: 2px 2px 5px c.$bg
+            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
+
+    & > dl
+        display: flex
+        flex-wrap: wrap
+        justify-content: center
+        align-items: center
+        align-content: space-around
+        gap: 3%
+
+    & .tag.title
+        font-family: postMatter
+        font-weight: bold
+        font-size: clamp(12pt, 1.5vw, 16pt)
+        // float: left
+        background-color: c.$accent
+        cursor: pointer
+
+        & > a
+            padding: 5px
+            background-color: c.$accent
+            color: c.$bg
+            text-decoration: none
+            border-radius: 5px
+
+        &:hover + .tag.content::after
+            // content: "Lorem ipsum"
+            display: inline-block
+            position: absolute
+            z-index: 1
+            max-width: 10vw
+            max-height: 15vh
+            overflow: scroll
+            background-color: c.$state
+            color: c.$bg
+
+    // & .tag.content
+    //     visibility: collapse
+
+footer
+    border-top: 1px solid c.$state
+    margin-top: 1rem
+    font-family: postMatter
+    font-size: 14pt
+
+a
+    color: c.$accent
+    text-decoration: none

themes/sukaato/assets/css/components/_cblocks.sass

@@ -0,0 +1,23 @@
+@use '../abstracts/palette' as c
+@use 'sass:color' as brush
+@forward '../abstracts/fonts'
+
+pre:has(code)
+    padding: 15px
+    border-radius: 3%
+    // background-image: url('images/parchment.jpg')
+
+code
+    font-family: codeFont
+    font-size: clamp(10pt, 1.5vw, 14pt)
+
+.jtab
+    & path
+        stroke: c.$fg
+
+    & circle
+        fill: c.$fg
+        stroke: none
+
+        & + text
+            fill: c.$bg

themes/sukaato/assets/css/main.sass

@@ -0,0 +1 @@
+@forward './base/site'