From 0bb33676993986e7e53a482295a5ba2fb5ecdbba Mon Sep 17 00:00:00 2001 From: Alex Tavarez Date: Sun, 1 Feb 2026 17:41:06 -0500 Subject: [PATCH] feature: further styled the rest of the static blog --- .../sukaato/assets/css/abstracts/_fonts.sass | 12 + themes/sukaato/assets/css/abstracts/_fun.sass | 4 + .../assets/css/abstracts/_palette.sass | 9 + themes/sukaato/assets/css/base/_site.sass | 357 ++++++++++++++++++ .../assets/css/components/_cblocks.sass | 23 ++ themes/sukaato/assets/css/main.sass | 1 + 6 files changed, 406 insertions(+) create mode 100644 themes/sukaato/assets/css/abstracts/_fonts.sass create mode 100644 themes/sukaato/assets/css/abstracts/_fun.sass create mode 100644 themes/sukaato/assets/css/abstracts/_palette.sass create mode 100644 themes/sukaato/assets/css/base/_site.sass create mode 100644 themes/sukaato/assets/css/components/_cblocks.sass create mode 100644 themes/sukaato/assets/css/main.sass diff --git a/themes/sukaato/assets/css/abstracts/_fonts.sass b/themes/sukaato/assets/css/abstracts/_fonts.sass new file mode 100644 index 0000000..e847871 --- /dev/null +++ b/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") diff --git a/themes/sukaato/assets/css/abstracts/_fun.sass b/themes/sukaato/assets/css/abstracts/_fun.sass new file mode 100644 index 0000000..ca7d7e2 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/themes/sukaato/assets/css/abstracts/_palette.sass b/themes/sukaato/assets/css/abstracts/_palette.sass new file mode 100644 index 0000000..7d9b156 --- /dev/null +++ b/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%) \ No newline at end of file diff --git a/themes/sukaato/assets/css/base/_site.sass b/themes/sukaato/assets/css/base/_site.sass new file mode 100644 index 0000000..6d32ff2 --- /dev/null +++ b/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 diff --git a/themes/sukaato/assets/css/components/_cblocks.sass b/themes/sukaato/assets/css/components/_cblocks.sass new file mode 100644 index 0000000..3f73b3e --- /dev/null +++ b/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 diff --git a/themes/sukaato/assets/css/main.sass b/themes/sukaato/assets/css/main.sass new file mode 100644 index 0000000..5490e55 --- /dev/null +++ b/themes/sukaato/assets/css/main.sass @@ -0,0 +1 @@ +@forward './base/site' \ No newline at end of file