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) {