admin/skato-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: further styled the rest of the static blog

Browse Source
This commit is contained in:
xenobyte
2026-02-01 17:41:06 -05:00
parent e17bf9c449
commit 0bb3367699
6 changed files with 406 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
themes/sukaato/assets/css/base/_site.sass Normal file
View File

@@ -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