sundae/website
sundae/website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tidying up stuff i forgot to change

Browse source
This commit is contained in:
sundae 2025-08-10 17:05:40 +03:00
parent c091831537
commit f20b697aed
No known key found for this signature in database
77 changed files with 1014 additions and 660 deletions
Download patch file Download diff file Expand all files Collapse all files

114
_src/assets/css/citrus/citrus.css
View file

@ -1,12 +1,16 @@
@import url("./variables.css");
@import url("../default/variables.css");
@import url("./nav.css");
#bio, #interests, #badges, #artworks, #art {
font-family: "Pangolin", sans-serif;
}
body {
background-attachment: local, fixed;
background-color: var(--citrus-primary);
background-image: var(--checker),
linear-gradient(var(--citrus-primary), var(--citrus-secondary));
background-size: 32px, contain;
background-blend-mode: overlay, normal;
}
body > nav {
background-attachment: fixed;
@ -14,6 +18,7 @@ body > nav {
background-image: var(--dot),
linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
background-size: 6px;
background-blend-mode: screen;
border-color: var(--citrus-dark);
color: var(--citrus-dark);
& a,
@ -44,6 +49,9 @@ body > nav {
box-shadow var(--trans);
}
}
& details {
background-image: linear-gradient(-45deg, var(--citrus-primary), var(--citrus-secondary), var(--citrus-primary));
}
}
article {
background-color: var(--citrus-light);
@ -51,24 +59,30 @@ article {
background-image: var(--noise);
box-shadow: var(--shadow);
border: 0;
& .header-anchor {
border-radius: inherit;
background-color: color-mix(in lch, magenta, white);
&:is(:hover,:focus) {
background-color: magenta;
}
}
& code:not(pre *) {
border-radius: 0;
color: var(--citrus-primary);
background-color: #000;
border-radius: inherit;
background-color: yellow;
box-shadow: 2px 2px 8px 0 color-mix(in lch, yellow, black 10%);
}
}
/* home.css */
body[id] > main::before {
content: "";
height: 100%;
width: 100%;
display: flex;
position: fixed;
top: 0;
left: 0;
image-rendering: pixelated;
opacity: 0.1;
z-index: -10;
#interests div:has(img)::after {
display: none !important;
}
#interests li:has(div img) {
margin: var(--pad-sm);
box-shadow: var(--shadow);
background: color-mix(in lch, yellow, white);
&:nth-child(odd) {
transform: rotate(1deg)
}
}
ul:not([role]) li::before {
background-color: #000;
@ -79,10 +93,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
/* blog.css */
#blog {
background-color: #fff;
background-image: var(--dot-dark);
background-image: var(--dot);
background-size: 6px;
background-attachment: fixed;
background-attachment: local;
background-repeat: repeat;
background-blend-mode: difference;
& main {
&::before {
background-image: var(--bg-sky);
@ -108,9 +123,12 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
border-radius: 0;
}
& pre {
border-radius: 0;
color: var(--citrus-primary);
background-color: #000;
border-radius: 4px;
color: var(--citrus-secondary);
background-color: color-mix(in lch, var(--citrus-secondary), black 90%);
background-size: 4px;
text-shadow: 2px 2px 0
color-mix(in lch, var(--citrus-secondary), black 60%);
}
& [aria-label="Post warning"] {
background-color: var(--citrus-primary);
@ -123,12 +141,16 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
);
background-color: var(--citrus-primary);
}
& s {
text-decoration-color: #d00;
}
}
& #posts {
& a {
background-color: #fff;
border-color: #fff;
border-width: 4px;
box-shadow: var(--shadow);
transition: border-color var(--trans), color var(--trans);
& p {
color: initial;
@ -141,20 +163,9 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
}
/* gallery.css */
#gallery {
& h2 {
font-family: "Pangolin", sans-serif;
}
& article {
border-radius: 0;
border: 0;
background-image: var(--noise), var(--line);
background-color: #fff;
padding: 1rem;
background-size: auto, 32px;
}
& article[id] {
background-image: var(--noise), var(--paper);
background-size: auto, 4px;
}
& a:has(figure) {
transition: border-color var(--trans), background-color var(--trans);
@ -165,20 +176,51 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
background-color: currentColor;
border-color: currentColor;
}
& figcaption {
& figcaption,
time {
color: #fff;
}
& time {
color: #fffa;
}
}
}
& figure {
border-color: #fff;
background-color: #fff;
}
& time {
color: #666;
}
#artworks {
article {
margin: var(--pad-xl) 0 0 0;
background-color: #fff;
background-image: var(--noise), var(--lined);
background-size: auto, 32px;
&:last-child:not(:first-of-type) {
margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
}
&::before {
content: "";
display: flex;
height: 100%;
width: calc(100% + var(--pad-xl) * 2);
margin: -4rem 0 0 calc(var(--pad-xl) * -1);
background-image: var(--border), var(--lined);
background-size: 32px, 32px;
background-blend-mode: darken;
padding: var(--pad-xl);
}
}
}
#art {
background-image: var(--noise);
& p,
time {
padding: 0;
line-height: 32px;
}
& img {
border-radius: 0;
}
& figcaption {
font-family: "Urbanist", sans-serif;
}
}
@media screen and (max-width: 920px) {

3
_src/assets/css/citrus/nav.css
View file

@ -7,7 +7,4 @@ body > nav {
border: 0;
margin: 0 0 var(--pad-sm) 0 ;
}
& details:not([open]) > summary, details[open] {
border: 0;
}
}

13
_src/assets/css/citrus/variables.css
View file

@ -1,17 +1,16 @@
:root {
--citrus-primary: rgb(255, 190, 0);
--citrus-secondary: rgb(255, 110, 0);
--citrus-light: rgb(255, 236, 180);
--citrus-dark: rgb(105, 50, 0);
--citrus-primary: var(--primary);
--citrus-secondary: var(--secondary);
--citrus-light: color-mix(in lch, var(--citrus-primary), var(--light) 70%);
--citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%);
--citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary));
--shadow: 0.2rem 0.2rem 0.4rem 0.2rem #0003;
--checker: url("/assets/img/theme/citrus/checker.png");
--checker-dark: url("/assets/img/theme/citrus/checker-dark.png");
--dot: url("/assets/img/theme/citrus/dot.png");
--dot-dark: url("/assets/img/theme/citrus/dot-dark.png");
--line: url("/assets/img/theme/citrus/line.png");
--lined: url("/assets/img/theme/citrus/line.png");
--paper: url("/assets/img/theme/citrus/paper.png");
--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
--border: url("/assets/img/theme/citrus/border.png");
--bg-sky: url("/assets/img/pkmn/bg/plat_trade1.png");
--bg-ilex: url("/assets/img/pkmn/bg/ilex_day.png");
--bg-ilex-noon: url("/assets/img/pkmn/bg/ilex_noon.png");