sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

experimental styling
All checks were successful
/ build (push) Successful in 24s
Details

Browse source
This commit is contained in:
Ruben 2025-09-30 22:22:06 -05:00
commit 73745d03df
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
9 changed files with 163 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

13
_includes/styles/animations.css
View file

@ -29,17 +29,12 @@
}
}
@keyframes bg-gradient {
@keyframes bg-move {
0% {
background-position: 0% 27%
background-position:0 0
}
50% {
background-position: 100% 74%
}
100% {
background-position: 0% 27%
to {
background-position:-960px -960px
}
}

38
_includes/styles/base.css
View file

@ -211,18 +211,40 @@ html[data-theme="dark"] {
---------------------------------- */
html {
background: var(--background) linear-gradient(var(--background) 50%, color-mix(in srgb, var(--accent) 25%, var(--background)) 50%);
background-attachment: fixed;
background: var(--background);
background-repeat: repeat;
background-size: auto;
}
body {
background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
min-height: calc(100vh - 4rem);
body {
font-family: var(--font-family);
font-size: 1.125rem;
font-size: 1.05rem;
text-transform: lowercase;
margin: unset !important;
/* idk why it does that */
}
bg-gradient {
background: linear-gradient(color-mix(in srgb, var(--accent) 10%, var(--background)), color-mix(in srgb, var(--accent) 50%, var(--background)));
background-repeat: repeat;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
position: fixed;
z-index: -10001;
}
bg-image {
display: block;
position: fixed;
animation: 80s linear infinite bg-move;
opacity: .6;
background-repeat: repeat;
background-size: auto;
background-image: url(/assets/bg.png);
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: -10000;
}
/* text formatting and config stuff */
@ -565,7 +587,7 @@ summary {
}
/* focus styling */
:focus-visible {
*:focus-visible {
outline: .4rem solid var(--ui-purple) !important;
border-radius: .2rem;
z-index: 999999 !important;

85
_includes/styles/colors.css Normal file
View file

@ -0,0 +1,85 @@
/*
/ colors
/ ======
/ default colors and extra colors specified here
/ colors yoinked as is from https://gogh-co.github.io/Gogh/
/ maybe some modifications here and there, but otherwise what is named is what is used
*/
:root {
--pagefind-ui-font: var(--font-family);
--pagefind-ui-primary: var(--foreground);
--pagefind-ui-text: var(--foreground);
--pagefind-ui-background: var(--background);
--pagefind-ui-border: var(--accent);
--pagefind-ui-tag: var(--background);
--site-border: .1rem solid var(--border);
color-scheme: light dark; /* by default, automatically use light mode */
}
/* Ayu Light */
@media (prefers-color-scheme: light) {
:root {
--background: #fafafa;
--foreground: #575f66;
--accent: #f2ae49;
--link: hsl(from var(--accent) h s calc(l - 30)); /* darken for light */
--black: #8A9199;
--red: #F51818;
--green: #86B300;
--yellow: #F2AE49;
--blue: #399EE6;
--purple: #A37ACC;
--cyan: #4CBF99;
--white: #FAFAFA;
--dark-black: #575F66;
--dark-red: #F51818;
--dark-green: #86B300;
--dark-yellow: #F2AE49;
--dark-blue: #399EE6;
--dark-purple: #A37ACC;
--dark-cyan: #4CBF99;
--dark-white: #FAFAFA;
--border: hsl(from var(--foreground) h s calc(l + 10));
--hover: hsl(from var(--background) h s calc(l - 20));;
--shadow: rgba(from var(--foreground) r g b / .8);
--focused: var(--dark-purple)
}
}
/* Astrodark */
@media (prefers-color-scheme: dark) {
:root {
--background: #1a1d23;
--foreground: #caccd3;
--accent: #efbd58;
--link: var(--accent);
--black: #576176;
--red: #FAA5AB;
--green: #A5CD84;
--yellow: #EFBD58;
--blue: #8DC3F1;
--purple: #DEAEED;
--cyan: #27FFDF;
--white: #CACCD3;
--dark-black: #111317;
--dark-red: #F8747E;
--dark-green: #75AD47;
--dark-yellow: #D09214;
--dark-blue: #50A4E9;
--dark-purple: #CC83E3;
--dark-cyan: #00B298;
--dark-white: #ADB0BB;
--border: hsl(from var(--background) h s calc(l + 40));
--hover: hsl(from var(--background) h s calc(l + 20));;
--shadow: rgba(from var(--background) r g b / .8);
--focused: var(--dark-purple)
}
}

24
_includes/styles/navbar.css
View file

@ -174,6 +174,30 @@
position: absolute;
}
settings-group {
display: flex;
label {
&:has(input:checked) {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 20%, var(--background));
}
border: .1rem solid var(--comment);
border-radius: .4rem;
padding: .2rem;
margin-right: .3rem;
cursor: pointer;
}
input {
/* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
opacity: 0;
position: absolute;
pointer-events: none;
}
}
input[type="checkbox"]#nav-settings-menu:focus-visible {
left: unset !important;
}

25
_includes/styles/windows.css
View file

@ -8,6 +8,18 @@
/ windows - related styling for the windows on pages */
.window {
animation-fill-mode: backwards;
background-color: var(--background);
border-radius: 2rem .6rem 2rem .6rem;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: var(--foreground);
margin-bottom: 2em;
margin-left: 3rem;
max-width: 60em;
outline: var(--accent) solid .15rem;
overflow: clip;
transition: .2s outline;
.header {
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
border-bottom: .1rem solid var(--accent);
@ -87,19 +99,6 @@
section, article {
padding: .8rem;
}
animation-fill-mode: backwards;
background-color: var(--background);
border-radius: 2rem .6rem 2rem .6rem;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: var(--foreground);
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
max-width: 60em;
outline: var(--accent) solid .15rem;
overflow: clip;
transition: .2s outline;
}
/* window styling when hovered */