445 lines
7.2 KiB
CSS
445 lines
7.2 KiB
CSS
@media (prefers-color-scheme: light) {
|
|
article {
|
|
border-color: var(--primary-300);
|
|
background-color: var(--primary-200);
|
|
color: var(--primary-dark-300);
|
|
|
|
& aside {
|
|
box-shadow: inset 0 0 0 2px var(--primary-500);
|
|
background-color: var(--primary-300);
|
|
}
|
|
& figure {
|
|
color: var(--primary-dark-400);
|
|
border-color: var(--primary-600);
|
|
background-color: var(--primary-300);
|
|
}
|
|
|
|
& s,
|
|
u {
|
|
text-decoration-color: color-mix(in lch, red, var(--primary-500) 20%);
|
|
}
|
|
|
|
& h3 a {
|
|
color: var(--primary-dark-300);
|
|
|
|
&:hover {
|
|
background-color: var(--primary-dark-300);
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
& code:not(pre *) {
|
|
background-color: var(--primary-400);
|
|
}
|
|
|
|
& pre {
|
|
transition: background-color var(--trans), border-color var(--trans);
|
|
background-color: var(--primary-100);
|
|
|
|
&:hover {
|
|
border-color: var(--primary);
|
|
background-color: var(--primary-400);
|
|
}
|
|
}
|
|
|
|
& pre,
|
|
code {
|
|
border-color: var(--primary-400);
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--primary-100);
|
|
color: var(--primary-dark-300);
|
|
|
|
& > nav {
|
|
border-right: 1px solid var(--primary);
|
|
|
|
&::before {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
&::after {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
& a {
|
|
background-color: var(--primary);
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
& details {
|
|
box-shadow: inset 0 0 0 2px var(--primary);
|
|
background-color: white;
|
|
color: var(--primary);
|
|
}
|
|
|
|
& details[open] {
|
|
box-shadow: inset 0 0 0 2px var(--primary);
|
|
background-color: var(--primary-300);
|
|
color: var(--primary-dark-400);
|
|
|
|
& summary {
|
|
border-color: var(--primary);
|
|
background-color: var(--primary-600);
|
|
}
|
|
|
|
& a {
|
|
color: var(--primary-100);
|
|
|
|
&[aria-current] {
|
|
box-shadow: 0 0 0 2px var(--primary-600);
|
|
background-color: var(--primary-100);
|
|
color: var(--primary-dark-500);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
article {
|
|
border-color: var(--secondary-300);
|
|
background-color: var(--secondary-200);
|
|
color: var(--secondary-light-300);
|
|
|
|
& aside {
|
|
box-shadow: inset 0 0 0 2px var(--secondary-500);
|
|
background-color: var(--secondary-300);
|
|
}
|
|
& figure {
|
|
color: var(--secondary-light-400);
|
|
border-color: var(--secondary-600);
|
|
background-color: var(--secondary-300);
|
|
}
|
|
& s,
|
|
u {
|
|
text-decoration-color: color-mix(in lch, red, var(--secondary-500) 20%);
|
|
}
|
|
|
|
& h3 a {
|
|
color: var(--secondary-light-300);
|
|
|
|
&:hover {
|
|
background-color: var(--secondary-light-300);
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
& code:not(pre *) {
|
|
background-color: var(--secondary-400);
|
|
}
|
|
|
|
& pre {
|
|
transition: background-color var(--trans), border-color var(--trans);
|
|
background-color: var(--secondary-100);
|
|
|
|
&:hover {
|
|
border-color: var(--secondary);
|
|
background-color: var(--secondary-400);
|
|
}
|
|
}
|
|
|
|
& pre,
|
|
code {
|
|
border-color: var(--secondary-400);
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--secondary-100);
|
|
color: var(--secondary-light-200);
|
|
|
|
& > nav {
|
|
border-right: 1px solid var(--secondary);
|
|
|
|
&::before {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
&::after {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
& a {
|
|
background-color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
& details {
|
|
box-shadow: inset 0 0 0 2px var(--secondary);
|
|
background-color: var(--secondary-100);
|
|
color: var(--secondary);
|
|
}
|
|
|
|
& details[open] {
|
|
box-shadow: inset 0 0 0 2px var(--secondary);
|
|
background-color: var(--secondary-300);
|
|
color: var(--secondary-light-200);
|
|
|
|
& summary {
|
|
border-color: var(--secondary);
|
|
background-color: var(--secondary-600);
|
|
}
|
|
|
|
& a {
|
|
color: var(--secondary-200);
|
|
|
|
&[aria-current] {
|
|
box-shadow: 0 0 0 2px var(--secondary);
|
|
background-color: var(--secondary-200);
|
|
color: var(--secondary-light-500);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: "Rubik", sans-serif;
|
|
|
|
& article {
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-radius: var(--round);
|
|
|
|
& hr {
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
& a {
|
|
font-weight: 500;
|
|
}
|
|
|
|
& s {
|
|
text-decoration-style: line-through;
|
|
text-decoration-thickness: 0.1em;
|
|
}
|
|
|
|
& ul {
|
|
|
|
& li {
|
|
margin: 0;
|
|
|
|
& p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& u {
|
|
text-decoration-style: double;
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
& em {
|
|
font-weight: 200;
|
|
}
|
|
|
|
& p {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
& code:not(pre *) {
|
|
padding: 0 0.2rem;
|
|
}
|
|
|
|
& pre {
|
|
display: flex;
|
|
width: auto;
|
|
overflow: scroll;
|
|
padding: 0.5rem;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
& pre,
|
|
code:not(pre *) {
|
|
transition: background-color var(--trans), border-color var(--trans);
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-radius: var(--round);
|
|
font-weight: bold;
|
|
}
|
|
|
|
& h3 {
|
|
font-size: 1.6rem;
|
|
margin: 0;
|
|
|
|
& a {
|
|
display: inline-block;
|
|
transition: color var(--trans), background-color var(--trans);
|
|
border-radius: inherit;
|
|
height: max-content;
|
|
padding: 0 0.4rem;
|
|
}
|
|
}
|
|
|
|
& aside {
|
|
float: right;
|
|
border-radius: var(--round);
|
|
width: 66%;
|
|
}
|
|
& figure {
|
|
transition: var(--trans);
|
|
margin: 0;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
padding: 0.8rem;
|
|
border-radius: var(--round);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
& nav {
|
|
gap: 0.8rem;
|
|
& details {
|
|
gap: 0.8rem;
|
|
border-radius: var(--round);
|
|
font-weight: bold;
|
|
}
|
|
& details > summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 1.4rem 0 0;
|
|
height: 2rem;
|
|
|
|
& > svg {
|
|
transform: rotate(0deg);
|
|
transition: transform var(--trans);
|
|
}
|
|
}
|
|
|
|
& details[open] > summary {
|
|
margin-bottom: 0.4rem;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
border-radius: var(--round);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
|
|
& svg {
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
& a {
|
|
margin: 0 1rem;
|
|
margin-bottom: 0.4rem;
|
|
border-radius: var(--round);
|
|
}
|
|
}
|
|
}
|
|
|
|
body > nav::before,
|
|
body::after {
|
|
z-index: -1;
|
|
content: "";
|
|
position: absolute;
|
|
mask-image: url("/assets/img/theme/sundae_sit-lines.png");
|
|
mask-repeat: no-repeat;
|
|
margin: 0;
|
|
width: inherit;
|
|
height: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body > nav::before {
|
|
bottom: 0;
|
|
left: 0;
|
|
mask-size: 150%;
|
|
mask-position-x: -10px;
|
|
mask-position-y: 90%;
|
|
}
|
|
|
|
body::after {
|
|
content: none;
|
|
mask-size: 100%;
|
|
width: 100%;
|
|
height: 100vw;
|
|
mask-position-x: 0;
|
|
mask-position-y: bottom;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
width: auto;
|
|
}
|
|
|
|
summary::marker {
|
|
content: none;
|
|
}
|
|
|
|
/* Mobile view */
|
|
@media screen and (max-width: 920px) {
|
|
body > nav {
|
|
position: initial;
|
|
width: 100%;
|
|
}
|
|
|
|
main {
|
|
padding: 1rem;
|
|
}
|
|
|
|
main > section {
|
|
flex-direction: column;
|
|
}
|
|
|
|
main > section {
|
|
width: initial;
|
|
}
|
|
|
|
article {
|
|
max-width: initial;
|
|
width: auto;
|
|
}
|
|
|
|
body > nav::before {
|
|
content: none;
|
|
}
|
|
|
|
body > nav {
|
|
flex-direction: row;
|
|
top: 0;
|
|
border-right: 0;
|
|
width: 100%;
|
|
|
|
& details {
|
|
height: fit-content;
|
|
}
|
|
|
|
& details {
|
|
width: 100%;
|
|
}
|
|
}
|
|
body::after {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
article {
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
body > nav {
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
|
|
& details[open] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|