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

unfinished bullCRAP

Browse source
This commit is contained in:
sundae 2026-04-02 19:45:57 +03:00
commit cb5ba4fb82
Signed by: sundae
SSH key fingerprint: SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
23 changed files with 351 additions and 347 deletions
Download patch file Download diff file Expand all files Collapse all files

32
_src/assets/css/citrus/default.css
View file

@ -1,10 +1,12 @@
@import url("./media.css");
@import url("./blog.css");
@import url("./gallery.css");
@import url("./home.css");
@import url("./nav.css");
@import url("./variables.css");
:is(a, button):not(span *, .postscript *, body nav *),.link,
:is(a, button):not(span *, .postscript *, body nav *),
.link,
#posts a {
color: var(--citrus-dark);
transition: background-color var(--trans);
@ -34,7 +36,8 @@ ul:not([role]) li::before {
background-color: var(--citrus-dark-extra);
}
article {
background: var(--noise),
background:
var(--noise),
linear-gradient(
var(--citrus-light) 70%,
color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
@ -50,30 +53,7 @@ article {
background-color: var(--citrus-dark);
color: var(--citrus-primary);
}
&:not(pre,code,a) {
&:not(pre, code, a) {
font-family: "Nosey Rodent", sans-serif;
}
}
@media screen and (max-width: 920px) {
body > nav {
border: 0;
}
header {
margin: 0;
padding: 0;
border-right: 0;
border-radius: 0;
width: 100%;
}
body::after {
content: none;
}
}
@media screen and (max-width: 450px) {
#artworks & article {
&::before {
width: calc(100% + var(--pad-l) * 2) !important;
margin: -3rem 0 0 -16px;
}
}
}

42
_src/assets/css/citrus/media.css Normal file
View file

@ -0,0 +1,42 @@
/* default.css */
@media screen and (min-width: 920px) {
header {
width: var(--view);
border-right-width: 4px;
border-right-style: solid;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-right-radius: 100px;
margin-left: calc(var(--view) - 4px);
position: relative;
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
z-index: 2;
}
}
/* nav.css */
@media screen and (max-width: 920px) {
header {
margin: 0 !important;
padding: 0 !important;
border-right: 0 !important;
border-radius: 0 !important;
width: 100% !important;
background-attachment: none !important;
background-image: none !important;
background-size: none !important;
}
body::after {
content: none !important;
}
}
/* gallery.css */
@media screen and (max-width: 450px) {
#artworks & article {
&::before {
width: calc(100% + var(--pad-l) * 2) !important;
margin: -3rem 0 0 -16px !important;
}
}
}

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

@ -1,14 +1,18 @@
body > nav {
border-right: 4px solid;
.navbar {
color: var(--citrus-dark);
& summary {
filter: drop-shadow(2px 0 var(--citrus-dark))
drop-shadow(-2px 0 var(--citrus-dark))
drop-shadow(0 2px var(--citrus-dark))
drop-shadow(0px -2px var(--citrus-dark));
color: var(--citrus-light);
& section {
background: var(--details-bg);
box-shadow: var(--details-shine);
border: var(--details-border);
& h3 {
filter: drop-shadow(2px 0 var(--citrus-dark))
drop-shadow(-2px 0 var(--citrus-dark))
drop-shadow(0 2px var(--citrus-dark))
drop-shadow(0px -2px var(--citrus-dark));
color: var(--citrus-light);
}
}
& li *:is(a ,button) {
& li *:is(a, button) {
background: var(--button-bg);
box-shadow: var(--button-shine);
border: var(--button-border);
@ -24,34 +28,28 @@ body > nav {
background: var(--button-hover-bg);
box-shadow: var(--button-hover-shine);
border: var(--button-hover-border);
transition: background-image var(--trans), border-color var(--trans),
transition:
background-image var(--trans),
border-color var(--trans),
box-shadow var(--trans);
color: var(--citrus-mix-dark);
}
}
& details,
details[open] {
background: var(--details-bg);
box-shadow: var(--details-shine);
border: var(--details-border);
}
}
body > nav,
header {
#mobile > nav,
header,
#floating {
background-attachment: fixed;
background-blend-mode: screen;
background-image: var(--nav-bg);
background-size: 6px;
border-color: var(--citrus-dark);
}
header {
width: var(--view);
border-right-width: 4px;
#floating, #mobile > nav {
border-bottom-style: solid;
border-right-style: solid;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-right-radius: 100px;
margin-left: calc(var(--view) - 4px);
position: relative;
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
border-right-width: 4px;
}
#mobile > nav {
height: max-content;
border-bottom-right-radius: var(--pad-l);
}