569 lines
11 KiB
CSS
569 lines
11 KiB
CSS
@import url(fonts/inter/inter.css);
|
|
@import url(fonts/ftaurebesh/ftaurebesh.css);
|
|
|
|
:root {
|
|
font-size: 16px;
|
|
font-size: clamp(16px, 8px + 1.5vw, 24px);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
flex-grow: 1;
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
body {
|
|
--c-highlight: hsl(0 0% 100% / 87.5%);
|
|
--c-dark: hsl(217 17% 21%);
|
|
--c-accent: hsl(14 62% 53%);
|
|
--c-light: #859cc4;
|
|
--c-text-background-light: hsl(0 0% 95% / 60%);
|
|
|
|
--c-text-light: var(--c-highlight);
|
|
--c-text-dark: var(--c-dark);
|
|
|
|
--ratio: 1.333;
|
|
--s-5: calc(var(--s-4) / var(--ratio));
|
|
--s-4: calc(var(--s-3) / var(--ratio));
|
|
--s-3: calc(var(--s-2) / var(--ratio));
|
|
--s-2: calc(var(--s-1) / var(--ratio));
|
|
--s-1: calc(var(--s0) / var(--ratio));
|
|
--s0: 1rem;
|
|
--s1: calc(var(--s0) * var(--ratio));
|
|
--s2: calc(var(--s1) * var(--ratio));
|
|
--s3: calc(var(--s2) * var(--ratio));
|
|
--s4: calc(var(--s3) * var(--ratio));
|
|
--s5: calc(var(--s4) * var(--ratio));
|
|
--content-width: clamp(75vw, 40rem, 100vw - 3rem);
|
|
--inset: calc(50vw - var(--content-width) / 2);
|
|
--cloudyHeaderBottom: max(35vh, 10rem);
|
|
background-size: 100% 80vh;
|
|
background-position: top;
|
|
background-repeat: no-repeat;
|
|
background-color: var(--c-light);
|
|
background-image: linear-gradient(to bottom, #4379ef, #859cc4);
|
|
}
|
|
body[data-theme="dark"] {
|
|
background: var(--c-light);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--c-highlight: hsl(60 20% 60% / 50%);
|
|
--c-dark: hsl(217 9% 8%);
|
|
--c-accent: hsl(220 20% 35%);
|
|
--c-light: hsl(220 50% 10%);
|
|
|
|
--c-text-background-light: hsl(220 40% 10% / 40%);
|
|
--c-text-light: hsl(60 50% 86.67%);
|
|
--c-text-dark: hsl(60 50% 86.67%);
|
|
}
|
|
|
|
@media screen {
|
|
.scene {
|
|
--durationSeconds: 120;
|
|
--duration: calc(var(--durationSeconds) * 1s);
|
|
--viewPointDelta: min(
|
|
1px * var(--scrollLengthPx, 0),
|
|
var(--cloudyHeaderBottom)
|
|
);
|
|
--travelDistance: 90vh;
|
|
z-index: -2;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100lvh;
|
|
overflow: hidden;
|
|
perspective: calc(0.25 * var(--cloudyHeaderBottom) + 0.75 * 35vmax);
|
|
perspective-origin: 50vw calc(15vh + 1.2 * var(--viewPointDelta));
|
|
}
|
|
|
|
.sky {
|
|
transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.cloud {
|
|
--height: 90vh;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: -205vw;
|
|
right: -205vw;
|
|
top: calc(8vh - var(--viewPointDelta));
|
|
height: var(--height);
|
|
background-image: url("./cloud.png");
|
|
background-size: auto 100%;
|
|
background-repeat: repeat-x;
|
|
background-position: calc(50% + cos(230 * var(--n)) * var(--height)) 50%;
|
|
animation-name: zoom;
|
|
animation-duration: var(--duration);
|
|
animation-timing-function: steps(calc(var(--durationSeconds) * 30));
|
|
animation-delay: calc(-0.1 * var(--duration) * var(--n));
|
|
animation-iteration-count: infinite;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
@media (prefers-reduced-motion: reduce) {
|
|
& {
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
[data-theme="dark"] & {
|
|
background-image: url("./cloud-night.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen {
|
|
#brand {
|
|
position: absolute;
|
|
left: var(--inset);
|
|
right: var(--inset);
|
|
padding: 0.5rem;
|
|
bottom: calc(-1 * var(--cloudyHeaderBottom));
|
|
transform: translateY(calc(-1 * var(--viewPointDelta)));
|
|
will-change: translateY;
|
|
}
|
|
[data-theme="dark"] #brand > * {
|
|
text-shadow: 0 0 0.5em currentColor;
|
|
}
|
|
}
|
|
|
|
@keyframes zoom {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(
|
|
0,
|
|
calc(4 * var(--viewPointDelta)),
|
|
calc(-0.66667 * var(--travelDistance))
|
|
);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
|
|
56.6% {
|
|
opacity: 1;
|
|
}
|
|
|
|
66.66667% {
|
|
opacity: 0;
|
|
}
|
|
|
|
76.6% {
|
|
opacity: 1;
|
|
}
|
|
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(
|
|
0,
|
|
calc(-1 * var(--viewPointDelta) + calc(var(--cloudyHeaderBottom) - 35vh)),
|
|
calc(0.33333 * var(--travelDistance))
|
|
);
|
|
}
|
|
}
|
|
|
|
::selection {
|
|
background: var(--c-accent);
|
|
color: var(--c-text-light);
|
|
}
|
|
|
|
*,
|
|
:after,
|
|
:before {
|
|
box-sizing: inherit;
|
|
font-family: inherit;
|
|
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
|
|
text-decoration-thickness: 0.1rem;
|
|
transition: color ease 0.1s;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1;
|
|
flex-grow: 1;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: Inter, sans-serif;
|
|
background-color: var(--c-light);
|
|
color: var(--c-text-dark);
|
|
}
|
|
|
|
@media screen {
|
|
body {
|
|
border: 0.5rem solid var(--c-accent);
|
|
&::before {
|
|
content: "";
|
|
z-index: -1;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
inset: -0.5rem;
|
|
bottom: calc(1px - 0.5rem);
|
|
border-radius: 1.3rem 1.3rem 1rem 1rem;
|
|
border: 0.5rem solid var(--c-accent);
|
|
outline: 0.5rem solid var(--c-accent);
|
|
}
|
|
}
|
|
body > footer {
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: var(--c-accent);
|
|
color: var(--c-text-light);
|
|
padding: 0 1ch 0;
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
}
|
|
body > footer::before {
|
|
content: "";
|
|
z-index: -1;
|
|
position: absolute;
|
|
height: calc(1rem - 1px);
|
|
width: 1rem;
|
|
margin: 0 0 -0.5rem -0.5rem;
|
|
border-bottom-left-radius: 1rem;
|
|
bottom: 1px;
|
|
border: 0.5rem solid var(--c-accent);
|
|
left: 100%;
|
|
border-width: 0 0 0.5rem 0.5rem;
|
|
}
|
|
body > footer::after {
|
|
content: "";
|
|
z-index: -1;
|
|
position: absolute;
|
|
height: calc(1rem - 1px);
|
|
width: 1rem;
|
|
margin: 0 -0.5rem -0.5rem 0;
|
|
border-bottom-right-radius: 1rem;
|
|
bottom: 1px;
|
|
border: 0.5rem solid var(--c-accent);
|
|
right: 100%;
|
|
border-width: 0 0.5rem 0.5rem 0;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
a[href] {
|
|
text-decoration-line: underline;
|
|
}
|
|
a[href]:hover,
|
|
a[href]:focus-visible,
|
|
label:hover,
|
|
label:focus-visible,
|
|
label:has(input:focus-visible) {
|
|
text-decoration-color: var(--c-accent);
|
|
}
|
|
|
|
main {
|
|
position: relative;
|
|
@media screen {
|
|
margin-top: var(--cloudyHeaderBottom);
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -2;
|
|
top: -1rem;
|
|
bottom: -1rem;
|
|
left: calc(var(--inset) - 1rem);
|
|
right: calc(var(--inset) - 1rem);
|
|
border-radius: 1rem;
|
|
background-color: var(--c-text-background-light);
|
|
}
|
|
margin-bottom: 4rem;
|
|
}
|
|
}
|
|
|
|
main p img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
section {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.footnote-item:target,
|
|
.footnote-ref :target {
|
|
animation: ping 1s ease-out;
|
|
&,
|
|
a {
|
|
text-decoration-color: var(--c-accent);
|
|
}
|
|
}
|
|
|
|
.footnotes-sep {
|
|
margin-top: 4rem;
|
|
border: none;
|
|
height: 0.1rem;
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
var(--c-accent),
|
|
var(--c-accent) 0.5em,
|
|
transparent 0.5em,
|
|
transparent 1em
|
|
);
|
|
}
|
|
|
|
@keyframes ping {
|
|
0% {
|
|
border-radius: 50%;
|
|
background-color: var(--c-accent);
|
|
box-shadow: var(--c-accent) 0 0 1rem 4rem;
|
|
}
|
|
100% {
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
box-shadow: transparent 0 0 0rem 0rem;
|
|
}
|
|
100% {
|
|
border-radius: initial;
|
|
}
|
|
}
|
|
|
|
li::marker {
|
|
color: color-mix(in srgb, currentcolor 50%, transparent);
|
|
}
|
|
aside {
|
|
display: inline-block;
|
|
margin-left: 1ch;
|
|
font-size: var(--s-1);
|
|
}
|
|
ul.collection {
|
|
padding-left: 0;
|
|
> li {
|
|
list-style-type: none;
|
|
+ li {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
}
|
|
p {
|
|
margin: 0;
|
|
+ p {
|
|
margin-top: 1lh;
|
|
}
|
|
}
|
|
blockquote {
|
|
margin: 1lh 0;
|
|
padding: 0 1em;
|
|
border-left: 0.2rem solid var(--c-accent);
|
|
}
|
|
|
|
sup {
|
|
font-size: var(--s-1);
|
|
margin-top: -0.2em;
|
|
}
|
|
|
|
body > header {
|
|
color: var(--c-text-dark);
|
|
padding: 0 var(--inset) 0.5rem;
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
body > header > nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: 1ch;
|
|
}
|
|
.nav-toggles {
|
|
margin-left: auto;
|
|
font-size: var(--s-1);
|
|
}
|
|
@media print {
|
|
:root {
|
|
font-size: 10pt;
|
|
}
|
|
body {
|
|
--c-highlight: white --c-dark: white;
|
|
--c-accent: black;
|
|
--c-light: white;
|
|
|
|
--c-text-light: black;
|
|
--c-text-dark: black;
|
|
|
|
--content-width: 100vw;
|
|
}
|
|
body {
|
|
background: none;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
opacity: 0.75;
|
|
}
|
|
body > header > nav {
|
|
display: none;
|
|
}
|
|
a[href^="http"]::after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
}
|
|
|
|
body > footer {
|
|
text-align: center;
|
|
font-size: var(--s-1);
|
|
margin: auto var(--inset) 0 auto;
|
|
}
|
|
|
|
.header-meta {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
font-size: var(--s-1);
|
|
> * + *::before {
|
|
content: "-";
|
|
padding: 0 0.5ch;
|
|
}
|
|
}
|
|
|
|
.nav-categories {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 1ch;
|
|
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: var(--c-accent);
|
|
color: var(--c-text-light);
|
|
padding: 0 1ch 0.25rem;
|
|
border-radius: 0 0 0.5rem 0.5rem;
|
|
&::before {
|
|
content: "";
|
|
z-index: -1;
|
|
position: absolute;
|
|
height: calc(1rem - 1px);
|
|
width: 1rem;
|
|
margin: -0.5rem 0 0 -0.5rem;
|
|
border-top-left-radius: 1rem;
|
|
top: 0;
|
|
border: 0.5rem solid var(--c-accent);
|
|
left: 100%;
|
|
border-width: 0.5rem 0 0 0.5rem;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
z-index: -1;
|
|
position: absolute;
|
|
height: calc(1rem - 1px);
|
|
width: 1rem;
|
|
margin: -0.5rem -0.5rem 0 0;
|
|
border-top-right-radius: 1rem;
|
|
top: 0;
|
|
border: 0.5rem solid var(--c-accent);
|
|
right: 100%;
|
|
border-width: 0.5rem 0.5rem 0 0;
|
|
}
|
|
}
|
|
|
|
label {
|
|
cursor: pointer;
|
|
text-decoration-line: underline;
|
|
> input[type="radio"] {
|
|
visibility: hidden;
|
|
position: fixed;
|
|
bottom: 110%;
|
|
}
|
|
}
|
|
.nav-toggle-button {
|
|
margin-left: 0.5ch;
|
|
position: relative;
|
|
z-index: 0;
|
|
&:has(input[type="radio"]:checked) {
|
|
padding-inline: 0.25rem;
|
|
color: var(--c-text-dark);
|
|
&::before {
|
|
content: "";
|
|
z-index: -1;
|
|
position: absolute;
|
|
top: -0.25rem;
|
|
right: 0;
|
|
bottom: -0.25rem;
|
|
left: 0;
|
|
border-radius: 0.25rem;
|
|
background-color: var(--c-highlight);
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-language="aurebesh"] {
|
|
font-family: FTAurebesh;
|
|
line-height: 1.25;
|
|
ul:not(.collection) > li {
|
|
list-style-type: square;
|
|
}
|
|
}
|
|
[data-language="english"] {
|
|
font-family: Inter;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-weight: 700;
|
|
margin: 1rem calc(-0.5rem - var(--inset)) 0;
|
|
padding: 0 calc(0.5rem + var(--inset));
|
|
&:hover .header-anchor {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
main {
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
clear: both;
|
|
background-image: linear-gradient(
|
|
50deg,
|
|
var(--c-highlight) 0%,
|
|
var(--c-highlight) calc(var(--inset) * 0.25),
|
|
transparent calc(var(--inset) + 12rem)
|
|
);
|
|
margin-bottom: 0.25lh;
|
|
}
|
|
padding: 0 var(--inset);
|
|
}
|
|
h1 {
|
|
font-size: var(--s3);
|
|
}
|
|
h2 {
|
|
font-size: var(--s2);
|
|
}
|
|
h3 {
|
|
font-size: var(--s1);
|
|
}
|
|
.header-anchor {
|
|
position: absolute;
|
|
transform: translateX(-100%);
|
|
margin-left: -0.2ch;
|
|
opacity: 0;
|
|
transition: opacity ease-in 0.1s;
|
|
&::before {
|
|
content: "#";
|
|
}
|
|
}
|
|
|
|
.item-summary {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
p > code {
|
|
display: inline-block;
|
|
font-family: "Commit Mono", monospace;
|
|
background-color: var(--c-text-background-light);
|
|
padding: 0.1em;
|
|
margin: -0.1em;
|
|
border-radius: 0.5em;
|
|
}
|