website/_src/assets/css/citrus/default.css

79 lines
1.6 KiB
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,
#posts a {
color: var(--citrus-dark);
transition: background-color var(--trans);
background-color: var(--citrus-primary);
&:is(:hover, :focus) {
color: var(--citrus-dark-extra);
background-color: var(--citrus-secondary);
}
& a {
color: inherit;
}
}
body {
color: var(--citrus-dark-extra);
background-color: var(--citrus-primary);
background-image: var(--paw-tiled);
background-size: 128px;
background-attachment: local;
background-repeat: repeat;
background-blend-mode: soft-light;
animation: mainbg 10s linear infinite;
}
header {
color: var(--citrus-dark);
}
ul:not([role]) li::before {
background-color: var(--citrus-dark-extra);
}
article {
background: var(--noise),
linear-gradient(
var(--citrus-light) 70%,
color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
);
border-radius: 0;
box-shadow: var(--shadow-heavy);
border: 0;
& .header-anchor {
border-radius: 0;
}
& code:not(pre *) {
border-radius: 0;
background-color: var(--citrus-dark);
color: var(--citrus-primary);
}
&: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;
}
}
}