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

mostly good for release

Browse source
This commit is contained in:
sundae 2025-06-25 13:08:50 +03:00
parent 8fc7eff67b
commit b626e6265e
No known key found for this signature in database
32 changed files with 425 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,6 @@
@import url("./variables.css");
@import url("../default/variables.css");
@import url("./nav.css");
body {
background-attachment: local, fixed;
background-color: var(--citrus-primary);
@ -15,6 +14,8 @@ body > nav {
background-image: var(--dot),
linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
background-size: 6px;
border-color: var(--citrus-dark);
color: var(--citrus-dark);
& a,
button {
background-image: linear-gradient(
@ -23,23 +24,165 @@ body > nav {
var(--citrus-primary) 80%,
var(--citrus-light) 100%
);
border-radius: 0 1rem 1rem 0;
box-shadow: 0 0 0 2px var(--citrus-dark),
inset 0 0 8px 2px var(--citrus-primary);
color: var(--citrus-dark) !important;
margin: 0 0 var(--pad-sm) 0 !important;
border-radius: var(--pad-l);
color: inherit;
&[aria-current] {
box-shadow: 0 0 0 2px var(--citrus-dark),
inset 0 0 4px 2px var(--citrus-dark);
background-image: linear-gradient(
darkorange,
var(--citrus-mix),
var(--citrus-dark) 10%,
chocolate
);
box-shadow: 0 0 0 2px var(--citrus-dark),
inset 0 0 4px 2px var(--citrus-dark);
color: var(--citrus-light) !important;
color: var(--citrus-light);
}
&:is(:hover, :focus):not([aria-current="page"]) {
box-shadow: 0 0 0 2px var(--citrus-dark);
transition: background-image var(--trans), border-color var(--trans),
box-shadow var(--trans);
}
}
}
article {
background-color: var(--citrus-light);
border-radius: 0;
background-image: var(--noise);
box-shadow: var(--shadow);
border: 0;
}
/* 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;
}
ul:not([role]) li::before {
background-color: #000;
}
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
filter: drop-shadow(4px 6px 0 var(--citrus-dark));
}
/* blog.css */
#blog {
background-color: #fff;
background-image: var(--dot-dark);
background-size: 6px;
background-attachment: fixed;
background-repeat: repeat;
& main {
&::before {
background-image: var(--bg-sky);
background-size: cover;
background-repeat: no-repeat;
}
}
& article {
border-radius: 0;
background-color: #fff;
background-image: var(--noise);
background-size: auto;
background-repeat: repeat;
box-shadow: inset 0 0 2rem -0.5rem #ccc;
& > [aria-label="Postscript"]::after {
background-color: var(--citrus-primary);
}
& aside {
border-width: 2px;
border-style: solid;
background-color: var(--citrus-light);
border-color: var(--citrus-primary);
border-radius: 0;
}
& code:not(pre *) {
border-radius: 0;
color: var(--citrus-primary);
background-color: #000;
}
& pre {
border-radius: 0;
color: var(--citrus-primary);
background-color: #000;
}
& [aria-label="Post warning"] {
background-color: var(--citrus-primary);
}
& [aria-label="Addendum"] {
border-image-source: linear-gradient(
45deg,
var(--citrus-primary),
var(--citrus-secondary)
);
background-color: var(--citrus-primary);
}
}
& #posts {
& a {
background-color: #fff;
border-color: #fff;
border-width: 4px;
transition: border-color var(--trans), color var(--trans);
& p {
color: initial;
}
&:is(:hover, :focus) {
border-color: currentColor;
}
}
}
}
/* 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;
}
& a:has(figure) {
transition: border-color var(--trans), background-color var(--trans);
box-shadow: var(--shadow);
&:is(:hover, :focus) {
& figure {
transition: inherit;
background-color: currentColor;
border-color: currentColor;
}
& figcaption {
color: #fff;
}
& time {
color: #fffa;
}
}
}
& figure {
border-color: #fff;
background-color: #fff;
}
& time {
color: #666;
}
}
@media screen and (max-width: 920px) {
body > nav {
border-right: 0;
border-bottom-right-radius: 0;
}
body::after {
content: none;
}
}