192 lines
4.2 KiB
CSS
192 lines
4.2 KiB
CSS
@import url("./variables.css");
|
|
@import url("../default/variables.css");
|
|
@import url("./nav.css");
|
|
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;
|
|
}
|
|
body > nav {
|
|
background-attachment: fixed;
|
|
background-blend-mode: screen;
|
|
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(
|
|
var(--citrus-light),
|
|
var(--citrus-primary) 20%,
|
|
var(--citrus-primary) 80%,
|
|
var(--citrus-light) 100%
|
|
);
|
|
box-shadow: 0 0 0 2px var(--citrus-dark),
|
|
inset 0 0 8px 2px var(--citrus-primary);
|
|
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(
|
|
var(--citrus-mix),
|
|
var(--citrus-dark) 10%,
|
|
chocolate
|
|
);
|
|
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;
|
|
& code:not(pre *) {
|
|
border-radius: 0;
|
|
color: var(--citrus-primary);
|
|
background-color: #000;
|
|
}
|
|
}
|
|
/* 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;
|
|
}
|
|
& 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;
|
|
}
|
|
& article[id] {
|
|
background-image: var(--noise), var(--paper);
|
|
background-size: auto, 4px;
|
|
}
|
|
& 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;
|
|
}
|
|
}
|