xenobyte/sukaato-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added SASS files to be pre-processed as CSS by a file watcher

Browse Source
This commit is contained in:
Alex Tavarez
2025-09-02 21:59:50 -04:00
parent a264077e33
commit 8d34a4a3db
15 changed files with 832 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
assets/sass/themes/default/parts/_banner.sass Normal file
View File

@@ -0,0 +1,80 @@
@use '../palettes/animations' as motion
@use '../palettes/typewriters' as typo
@use '../palettes/stylebook' as book
@use '../palettes/brushes' as hues
@keyframes breathe_one
@include motion.dilating-expanding(15vw, 15vh)
@media (orientation: portrait)
@keyframes breathe_two
@include motion.dilating-expanding(30vw, 30vh)
#banner
text-align: center
#site_nav
background-color: inherit
font-size: clamp(10pt, 1vw, 16pt)
#site_title
font-size: clamp(12pt, 2vw, 64pt)
@media (orientation: landscape)
#banner
padding: book.$topbottom-framing-pad 0
& #site_logo
// width: 10vw
// height: 10vh
width: 15vw
height: 15vh
@media (orientation: portrait)
#banner
& #site_logo
// width: 20vw
// height: 20vh
width: 30vw
height: 30vh
& #site_title
position: relative
bottom: 3vh
@media screen
#banner #site_title
transition: letter-spacing 1s, margin-bottom 1s
&:hover
letter-spacing: 5pt
#banner #site_nav > a
font-weight: bold
font-family: typo.$sys-message-font
margin: 1vw
padding: 10px
border-radius: 10%
&:link
color: hues.$border-helper-base-color
&:active, &:visited
background-color: hues.$bg-helper-highlight-color
color: hues.$border-helper-base-color
box-shadow: inset book.$shared-shadow-depth hues.$bg-helper-lowlight-color
@media (orientation: landscape)
#banner #site_logo
&:hover, &:active
animation: breathe_one 4s infinite
@media (orientation: portrait)
#banner #site_logo
&:hover, &:active
animation: breathe_two 4s infinite
#banner #site_nav
margin-top: -3vh
margin-bottom: 5vh

156
assets/sass/themes/default/parts/_contact.sass Normal file
View File

@@ -0,0 +1,156 @@
@use 'sass:color'
@use '../palettes/brushes' as hues
#affil_wrap
display: flex
flex-direction: row
flex-wrap: nowrap
& > div:first-child
display: flex
flex-direction: column
flex-wrap: nowrap
flex-shrink: 2
padding: 2vh 1vw 2vh
margin-left: 1vw
margin-top: 5vw
margin-bottom: 12vw
& > a
display: flex
flex-direction: row
justify-content: center
align-items: center
width: 2vw
margin: 1vh 0.5vw
padding: 0.5vw
background-color: hues.$fill-icon
border: 1px solid #fff
border-radius: 50% 66%
text-decoration: none
&::after
//z-index: 1
display: block
position: absolute
width: 3.3vw
height: 3vw
border-radius: 50% 66%
background-image: url('/images/themes/default/textures/iridescence.png')
// background-color: #ccc
background-size: 100%
content: ''
// opacity: 0.8
& svg
width: 2vw
fill: color.change(hues.$border-base-notification, $saturation: 50%)
& > div:last-child
// margin: 6vh auto
margin: 3vw auto 0 25%
padding: 2vw
#affil_info
display: flex
flex-direction: column
justify-content: center
// width: 50vw
// height: 33vh
// margin-left: 10%
& a
text-decoration: none
& a:has(article)
cursor: pointer
background-color: #F5F2E8
color: #45413C
border: 1px solid hues.$bg-helper-highlight-color
width: 20vw
height: 33vw
font-size: clamp(9pt, 1vw, 32pt)
position: absolute
border-radius: 3%
box-shadow: 0 2px 2px hues.$bg-helper-highlight-color
// z-index: 1
transition: z-index 3s, box-shadow 3s, transform 2s
$card_siblings: 4
$step: calc(calc(-180 / $card_siblings) / 57.3)
$trans_step: $step + calc(calc(180 / ($card_siblings*2)) / 57.3)
transform: rotate(calc(calc(-180 / $card_siblings) / 57.3)*0.5+rad)
@for $i from 0 through $card_siblings - 1
&:nth-child(#{2*$i})
transform: rotate(($i*$step)+rad)
transition: transform 2s, z-index 3s
&:hover
transform: rotate(($i*0.75*$trans_step)+rad)
z-index: 1
&:active
transform: translateY(-4vh)
&:not(:first-child):nth-child(#{2*$i+1})
transform: rotate(($i*1.5*$step)+rad)
transition: transform 2s, z-index 3s
&:hover
transform: rotate(($i*1.25*$trans_step)+rad)
z-index: 1
&:active
transform: translateY(-4vh)
// &:nth-child(2n)
// transform: rotate(-5deg)
// transition: transform 2s, z-index 3s
// &:hover
// transform: rotate(-2deg)
// z-index: 1
// &:not(:first-child):nth-child(2n+1)
// transform: rotate(-15deg)
// transition: transform 2s, z-index 3s
// &:hover
// transform: rotate(-12deg)
// z-index: 1
&:hover
transform: rotate(calc(calc(-180 / $card_siblings) / 57.3)*0.25+rad)
box-shadow: 0 4px 8px hues.$bg-helper-highlight-color
z-index: 1
&:active
transform: translateY(-4vh)
& span > p
margin: 0 auto
text-align: center
word-break: break-all
max-width: 66%
&.contact_datum
background-color: #45413C
color: #F5F2E8
&::after
position: absolute
background-image: url('/images/themes/default/textures/embossed.png')
background-size: 100%
width: 100%
opacity: 0.9
height: 101%
top: 0
content: ''
& > img
filter: grayscale(100%) contrast(1.8)
margin: 0 auto
width: 50%
transform: rotate(-60deg)

27
assets/sass/themes/default/parts/_intro.sass Normal file
View File

@@ -0,0 +1,27 @@
@use '../palettes/brushes' as hues
#intro
margin-top: 2em
padding: 3em 1% 2em
// max-width: 33vw
font-size: clamp(12pt, 1vw, 24pt)
margin: 0 auto
& #footnotes
max-height: 200px
overflow: scroll
background-color: hues.$fg-helper-lowlight-color
color: hues.$bg-helper-base-color
border-radius: 5% 3%
border: 4px inset hues.$border-helper-base-color
& span a, h1, h2, h3, h4, h5, h6
color: hues.$border-base-notification
@media (orientation: landscape)
#intro
max-width: 35vw
@media (orientation: portrait)
#intro
max-width: 75vw

78
assets/sass/themes/default/parts/_keys.sass Normal file
View File

@@ -0,0 +1,78 @@
@use '../palettes/brushes' as hues
@use '../palettes/stylebook' as book
@keyframes fall
0%
opacity: 0.0
transform: rotate(-60deg) scale(2)
25%
opacity: 0.3
transform: rotate(-36deg) scale(1.7)
50%
opacity: 0.6
transform: rotate(-12deg) scale(1.3)
75%
opacity: 0.9
transform: rotate(0deg) scale(1)
100%
opacity: 1.0
transform: rotate(0deg) scale(1)
@keyframes fadingin
0%
opacity: 0.0
100%
opacity: 1.0
#gpg_link
text-align: center
margin: 0 auto
padding: 5%
border-radius: 2%
& #pubkey_link h1
font-size: clamp(16pt, 5vw, 45pt)
font-weight: bold
& #pubkey_content
cursor: pointer
word-break: break-word
width: 45%
padding: 3em 5em 0
margin: 0 auto
font-size: clamp(10pt, 2.5vw, 14pt)
font-weight: bold
max-height: 33vh
overflow: scroll
scrollbar-width: none
display: none
&:hover
display: block
& a
color: hues.$border-base-notification
& image
box-shadow: 5px 10px 18px hues.$bg-helper-base-color
& svg
cursor: pointer
background-color: hues.$fg-helper-base-color
border-radius: 5%
animation: fall 0.5s linear
& g
fill: hues.$border-base-notification
& svg:hover + span > #pubkey_content
display: block
animation: fadingin 5s ease
/* @media (orientation: landscape) */

79
assets/sass/themes/default/parts/_messages.sass Normal file
View File

@@ -0,0 +1,79 @@
@use '../palettes/brushes' as hues
@use '../palettes/typewriters' as typo
@use '../palettes/stylebook' as book
@use '../palettes/animations' as motion
@media screen
.error_message
font-size: clamp(9pt, 2.25vw, typo.$sys-message-font-size)
font-family: typo.$sys-message-font
.social_message
font-size: clamp(10pt, 2.25vw, typo.$socializing-font-size)
font-family: typo.$journalistic-font
.message
background-color: hues.$bg-base-notification
color: hues.$fg-base-notification
border-width: book.$message-border-width
&.error_message
@include book.set-corners
background-color: hues.$bg-base-notification
border: 5px solid hues.$border-base-notification
body#err_body &.error_message
@include book.set-corners(5px, 5px, 5px, 5px)
padding: 3vw
max-width: 33vw
margin: 0 auto
position: relative
top: 30vh
transform: rotate(5deg)
text-overflow: ellipsis
overflow-y: hidden
&::before
content: "1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9 \a . \a . \a ."
font-family: typo.$sys-message-font
font-size: clamp(9pt, 2.25vw, typo.$sys-message-font-size)
font-weight: bold
color: hues.$border-base-notification
white-space: pre
position: absolute
left: 1vw
top: 3vw
& > span
text-overflow: ellipsis
border-right: 5px solid hues.$border-base-notification
animation: blink .75s step-end infinite
body#default_body > &.error_message
@include book.make-notif
&.social_message
@include book.set-corners(50%, 70%, 10%, 30%)
body#err_body .error_code
font-size: clamp(16pt, 2.5vw, 24pt)
font-style: italic
width: 125px
height: 125px
color: hues.$border-helper-base-color
border: 5px double hues.$border-helper-base-color
border-radius: 50% 50% / 33% 50% 50%
position: absolute
right: 25vw
top: 25vh
z-index: 2
text-align: center
filter: blur(0.05vw)
box-shadow: 2px 2px 5px hues.$border-helper-base-color
& > span
overflow-wrap: visible
text-shadow: 2px 2px 5px hues.$border-helper-base-color
@keyframes blink
@include motion.blinking-border(hues.$border-base-notification)

158
assets/sass/themes/default/parts/_thinkers.sass Normal file
View File

@@ -0,0 +1,158 @@
@use 'sass:color'
@use '../palettes/brushes' as hues
@use '../palettes/typewriters' as typo
// @use '../palettes/stylebook' as book
#influences
margin: 0 auto
font-size: clamp(11pt, 1vw, 23pt)
text-align: justify
& h1, & h2, & h3, & h4, & h5, & h6
color: hues.$border-base-notification
#thinker_gallery
display: flex
margin: 5vh auto 0
padding: 0 10% 3vh
& > .thinker
z-index: 0
display: flex
flex-direction: column
justify-content: center
align-items: center
height: inherit
border: 1px outset hues.$bg-helper-highlight-color
background-color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 66%)
color: hues.$bg-helper-highlight-color
cursor: zoom-in
font-family: typo.$alt-journalistic-font
// margin: 10px
filter: url('/images/themes/default/textures/noise.svg#noiseFilter')
transform: rotate(10deg) skew(0deg)
transition: border-radius 2s, box-shadow 2s, border 1s, transform 2s, max-width 2s, background-color 2s, font-size 2s
&::after
position: absolute
display: block
content: ''
opacity: 0.45
background-image: url('/images/themes/default/textures/cream_paper.png')
background-size: 100%
top: 0
left: 0
right: 0
bottom: 0
border-top-left-radius: 40px 20px
border-top-right-radius: 10px 20px
border-bottom-left-radius: 10px 5px
&:nth-child(2n)
transform: rotate(-15deg)
&:hover:nth-child(2n), &:active:nth-child(2n)
transform: rotate(-5deg) skew(-5deg, 3deg)
&:hover
cursor: grab
&:hover, &:active
z-index: 1
background-color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 75%)
box-shadow: 0 5px 10px hues.$bg-helper-highlight-color
border: 0 outset hues.$bg-helper-highlight-color
border-top-left-radius: 40px 20px
border-top-right-radius: 10px 20px
border-bottom-left-radius: 10px 5px
transform: rotate(3deg) skew(5deg, -3deg)
& img
max-width: 88%
border-radius: 3%
filter: grayscale(100%) contrast(1.8) brightness(1)
opacity: 0.9
transition: filter 2s
&:active img
display: none
&:hover img, &:active img
filter: grayscale(100%) contrast(1.6) brightness(1.3)
& figcaption
max-width: 88%
margin: 0 auto
// opacity: 0.0
transition: opacity 2s
& .tname
font-weight: bold
& .ttype
display: none
text-align: center
padding: 0 0 2.5% 0
& .concept_tags
display: none
& > *
background-color: hues.$bg-helper-highlight-color
color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 66%)
padding: 2%
font-style: oblique
& .tdesc
display: none
padding: 2%
&:active
cursor: grabbing
& .concept_tags
display: initial
& .tdesc
display: initial
& .ttype
display: inline-block
& figcaption
max-height: initial
@media (orientation: landscape)
#influences
max-width: 33vw
#thinker_gallery
flex-wrap: wrap
flex-direction: row
justify-content: space-evenly
align-items: baseline
& > .thinker
max-width: 15%
font-size: clamp(9pt, 0.5vw, 14pt)
&:hover, &:active
max-width: 16%
font-size: clamp(10pt, 0.6vw, 15pt)
@media (orientation: portrait)
#influences
max-width: 50vw
#thinker_gallery
flex-direction: column
justify-content: center
align-items: center
& > .thinker
max-width: 50%
font-size: clamp(12pt, 2vw, 24pt)
&:hover, &:active
max-width: 53%
font-size: clamp(16pt, 2.1vw, 24pt)