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

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)