713 lines
14 KiB
CSS
713 lines
14 KiB
CSS
|
:root {
|
||
|
/* UI Fonts */
|
||
|
--ui-font-family: Inter, sans-serif;
|
||
|
--code-font-family: Hack, monospace;
|
||
|
font-family: var(--ui-font-family);
|
||
|
font-feature-settings: 'liga' 1, 'calt' 1;
|
||
|
|
||
|
/* UI Colors */
|
||
|
--accent-1: rgba(255, 255, 255, 0.05);
|
||
|
--accent-2: rgba(255, 255, 255, 0.1);
|
||
|
--accent-3: rgba(255, 255, 255, 0.15);
|
||
|
--widget-shadow:
|
||
|
inset 0 0 0 1px var(--accent-3),
|
||
|
0 0.2rem 2rem rgba(255, 255, 255, 0.1);
|
||
|
--inner-border: inset 0 0 0 1px var(--accent-2);
|
||
|
--accent-bg: linear-gradient(95deg, var(--accent-3), var(--accent-1));
|
||
|
--august-pink: oklch(80.67% 0.1 0);
|
||
|
--august-orange: oklch(80.67% 0.1 43);
|
||
|
--accent-grad: linear-gradient(120deg in oklab, var(--august-pink) 10%, var(--august-orange) 80%);
|
||
|
--font-color: white;
|
||
|
color-scheme: dark;
|
||
|
|
||
|
/* Text Size Calculation */
|
||
|
--min-fs: 1;
|
||
|
--max-fs: 1.5;
|
||
|
--min-vw: 20;
|
||
|
--max-vw: 45;
|
||
|
--min-fs-rem: var(--min-fs) * 1rem;
|
||
|
--max-fs-rem: var(--max-fs) * 1rem;
|
||
|
--min-vw-rem: var(--min-vw) * 1rem;
|
||
|
--slope: (var(--max-fs) - var(--min-fs)) * (100svi - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw));
|
||
|
--font-size: clamp(var(--min-fs-rem), var(--min-fs-rem) + var(--slope), var(--max-fs-rem));
|
||
|
}
|
||
|
|
||
|
* {
|
||
|
color: var(--font-color);
|
||
|
}
|
||
|
|
||
|
@supports (font-variation-settings: normal) {
|
||
|
:root {
|
||
|
font-family: InterVariable, sans-serif;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
::selection {
|
||
|
background-color: color-mix(in srgb, white, transparent 70%);
|
||
|
}
|
||
|
|
||
|
a[href^='http'] {
|
||
|
text-decoration: none;
|
||
|
font-weight: 700;
|
||
|
|
||
|
transition: color 0.3s ease;
|
||
|
|
||
|
&:hover {
|
||
|
color: var(--august-pink)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.chevron {
|
||
|
position: absolute;
|
||
|
inline-size: 3rem;
|
||
|
bottom: 5%;
|
||
|
left: 50%;
|
||
|
color: rgba(255, 255, 255, 0.8);
|
||
|
transform: translate(-50%, -50%);
|
||
|
animation: pullDown 5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
|
||
|
animation-delay: 4s;
|
||
|
}
|
||
|
|
||
|
@keyframes pullDown {
|
||
|
|
||
|
from,
|
||
|
to {
|
||
|
bottom: 5%;
|
||
|
}
|
||
|
|
||
|
50% {
|
||
|
bottom: 2%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
body,
|
||
|
html {
|
||
|
font-size: calc(var(--font-size) * 0.8);
|
||
|
inline-size: 100%;
|
||
|
block-size: 100%;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
overflow: auto;
|
||
|
}
|
||
|
|
||
|
.august-accent {
|
||
|
background: var(--accent-grad);
|
||
|
color: transparent;
|
||
|
background-clip: text;
|
||
|
-webkit-background-clip: text;
|
||
|
}
|
||
|
|
||
|
.august-accent-underline {
|
||
|
background-image: var(--accent-grad);
|
||
|
color: black;
|
||
|
background-size: 100% 100% !important;
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: left bottom;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
|
||
|
code {
|
||
|
font-family: var(--code-font-family);
|
||
|
}
|
||
|
|
||
|
.background {
|
||
|
background: linear-gradient(160deg, #101010, #010101);
|
||
|
}
|
||
|
|
||
|
.dots {
|
||
|
inline-size: 100%;
|
||
|
background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0);
|
||
|
background-size: 4rem 4rem;
|
||
|
background-position: 0.1rem 0;
|
||
|
}
|
||
|
|
||
|
#typed {
|
||
|
animation: blink-cursor 1s step-end infinite;
|
||
|
padding-inline-end: 0.5ch;
|
||
|
}
|
||
|
|
||
|
.echo {
|
||
|
color: var(--august-pink)
|
||
|
}
|
||
|
|
||
|
.page {
|
||
|
--inner-padding: calc(var(--font-size) * 2);
|
||
|
|
||
|
flex-direction: column;
|
||
|
display: flex;
|
||
|
position: relative;
|
||
|
padding: var(--inner-padding);
|
||
|
gap: var(--font-size);
|
||
|
|
||
|
&:first-child,
|
||
|
&:last-child {
|
||
|
div {
|
||
|
margin: auto;
|
||
|
}
|
||
|
|
||
|
block-size: calc(100svb - calc(2 * var(--inner-padding)));
|
||
|
|
||
|
p {
|
||
|
font-size: calc(var(--font-size));
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
margin-block: 0.5rem;
|
||
|
font-size: calc(4 * var(--font-size));
|
||
|
|
||
|
&.accent {
|
||
|
font-size: calc(1.5 * var(--font-size));
|
||
|
align-self: start;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:nth-child(2) {
|
||
|
align-items: center;
|
||
|
|
||
|
.about-menu {
|
||
|
flex: 0 1 50%;
|
||
|
|
||
|
h1 {
|
||
|
font-size: calc(3 * var(--font-size));
|
||
|
max-block-size: 2ch;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
font-size: calc(var(--font-size) * 1.8);
|
||
|
font-weight: 300;
|
||
|
text-wrap: pretty;
|
||
|
padding: 1rem;
|
||
|
|
||
|
a {
|
||
|
text-decoration: none;
|
||
|
padding-inline: 0.25rem;
|
||
|
font-weight: 500 !important;
|
||
|
background-size: 100% 2px;
|
||
|
background-image: var(--accent-grad);
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: left bottom;
|
||
|
transition: background-size 0.3s ease, color 0.3s ease;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
#about-display {
|
||
|
position: relative;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
flex: 0 1 50%;
|
||
|
block-size: 90%;
|
||
|
|
||
|
&>:first-child {
|
||
|
pointer-events: all;
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
&>:not(:first-child) {
|
||
|
pointer-events: none;
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
.about {
|
||
|
display: flex;
|
||
|
position: absolute;
|
||
|
flex-direction: column;
|
||
|
justify-content: space-between;
|
||
|
inline-size: 80%;
|
||
|
block-size: 100%;
|
||
|
|
||
|
&>* {
|
||
|
border-radius: 1rem;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
max-inline-size: 100%;
|
||
|
}
|
||
|
|
||
|
&>:first-child {
|
||
|
max-block-size: 100%;
|
||
|
block-size: 100%;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
font-size: var(--font-size);
|
||
|
padding: 1rem;
|
||
|
}
|
||
|
|
||
|
.train {
|
||
|
background: white;
|
||
|
padding: 1rem;
|
||
|
}
|
||
|
|
||
|
.george {
|
||
|
background-color: #110500;
|
||
|
padding: 2.5rem 1rem;
|
||
|
|
||
|
& canvas {
|
||
|
inline-size: 100%;
|
||
|
object-fit: contain;
|
||
|
image-rendering: pixelated;
|
||
|
z-index: -10;
|
||
|
|
||
|
/* this is a bug with rust_minifb,
|
||
|
it makes 2 canvases for some reason... */
|
||
|
&:nth-child(2) {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#manpage-container {
|
||
|
display: flex;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
#man-demo {
|
||
|
display: flex;
|
||
|
gap: var(--font-size);
|
||
|
|
||
|
|
||
|
a {
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
|
||
|
.terminal {
|
||
|
background: black;
|
||
|
position: relative;
|
||
|
display: flex;
|
||
|
justify-content: end;
|
||
|
flex-direction: column;
|
||
|
padding: var(--font-size);
|
||
|
min-block-size: calc(var(--font-size) * 6);
|
||
|
|
||
|
&:not(:only-child) {
|
||
|
transition: flex 0.8s;
|
||
|
flex: 0 0 50%;
|
||
|
}
|
||
|
|
||
|
&:only-child {
|
||
|
flex: 1;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
margin: 0;
|
||
|
|
||
|
&:nth-child(1) {
|
||
|
color: lightblue;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
input,
|
||
|
p {
|
||
|
font-size: inherit;
|
||
|
font-family: var(--code-font-family);
|
||
|
}
|
||
|
|
||
|
|
||
|
#results {
|
||
|
div {
|
||
|
margin-block: 1rem;
|
||
|
padding: 0.25rem 0.5rem;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
margin-block: 0.5rem;
|
||
|
|
||
|
code {
|
||
|
color: var(--august-orange)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.error {
|
||
|
background: #ff615920;
|
||
|
border-inline-start: solid 2px #ff6159;
|
||
|
}
|
||
|
|
||
|
code {
|
||
|
color: lightblue;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
form {
|
||
|
&>input {
|
||
|
inline-size: 100%;
|
||
|
background: transparent;
|
||
|
outline: none;
|
||
|
border: none;
|
||
|
}
|
||
|
|
||
|
code {
|
||
|
color: pink;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#manpage-widget {
|
||
|
--inner-padding: calc(var(--font-size)) calc(var(--font-size));
|
||
|
overflow-y: auto;
|
||
|
overflow-x: hidden;
|
||
|
padding: 1rem;
|
||
|
|
||
|
&>* {
|
||
|
margin-block-start: 0;
|
||
|
padding: var(--inner-padding);
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
pointer-events: none;
|
||
|
|
||
|
::after {
|
||
|
content: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
#SYNOPSIS {
|
||
|
margin-block-start: 0
|
||
|
}
|
||
|
|
||
|
|
||
|
h1 {
|
||
|
font-family: InterVariable, sans-serif;
|
||
|
font-size: var(--font-size);
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
|
||
|
&>h1 {
|
||
|
position: sticky;
|
||
|
top: 0;
|
||
|
background: #000a;
|
||
|
border-radius: 1rem;
|
||
|
box-shadow: var(--inner-border);
|
||
|
backdrop-filter: blur(10px);
|
||
|
-webkit-backdrop-filter: blur(0.5rem);
|
||
|
|
||
|
&::before {
|
||
|
content: 'man';
|
||
|
display: block;
|
||
|
align-self: start;
|
||
|
margin-block: 0 1rem;
|
||
|
font-size: calc(var(--font-size) * 0.8);
|
||
|
font-weight: 300;
|
||
|
text-align: center;
|
||
|
max-inline-size: 4ch;
|
||
|
border-radius: 0.3rem;
|
||
|
box-shadow: var(--inner-border);
|
||
|
background: var(--accent-bg);
|
||
|
padding: 0.2rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
& .manual-text>section:first-child {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
section>h1,
|
||
|
section>h2 {
|
||
|
text-transform: lowercase;
|
||
|
font-weight: 300;
|
||
|
font-style: italic;
|
||
|
}
|
||
|
|
||
|
& * {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
p:not(:has(*)) {
|
||
|
background: none;
|
||
|
border: none;
|
||
|
}
|
||
|
|
||
|
.Bl-tag dd {
|
||
|
margin-block-end: 1rem;
|
||
|
}
|
||
|
|
||
|
b,
|
||
|
i,
|
||
|
code,
|
||
|
pre {
|
||
|
font-family: var(--code-font-family);
|
||
|
|
||
|
}
|
||
|
|
||
|
table {
|
||
|
display: block;
|
||
|
overflow: auto;
|
||
|
|
||
|
tbody {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
&:is(.head, .foot) {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
&.Nm tr {
|
||
|
display: block;
|
||
|
gap: 1rem;
|
||
|
|
||
|
}
|
||
|
|
||
|
td:nth-child(1) {
|
||
|
padding-inline-end: 0.5rem;
|
||
|
}
|
||
|
|
||
|
td:not(:has(*)) {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
section.Sh:nth-child(2) .Pp,
|
||
|
b:not(section.Sh:nth-child(2) .Pp b, dt b, pre b),
|
||
|
pre,
|
||
|
dt {
|
||
|
background: #fff3;
|
||
|
padding: 0.1rem 0.4rem;
|
||
|
border-radius: 0.3rem;
|
||
|
}
|
||
|
|
||
|
.Pp {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
overflow: auto;
|
||
|
}
|
||
|
|
||
|
dt {
|
||
|
display: inline-block;
|
||
|
margin-block: 0.4rem;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
.accent {
|
||
|
--spacing: calc(0.25 * var(--font-size));
|
||
|
display: inline-block;
|
||
|
font-weight: 300;
|
||
|
border-radius: 0.3rem;
|
||
|
padding: var(--spacing) calc(var(--spacing) * 2);
|
||
|
box-shadow: var(--inner-border);
|
||
|
background: var(--accent-bg);
|
||
|
backdrop-filter: blur(0.5rem);
|
||
|
-webkit-backdrop-filter: blur(0.5rem);
|
||
|
}
|
||
|
|
||
|
.widget {
|
||
|
position: relative;
|
||
|
background: black;
|
||
|
border-radius: 1rem;
|
||
|
box-shadow: inset 0 0 0 1px var(--accent-3),
|
||
|
0 0.2rem 2rem rgba(255, 255, 255, 0.1);
|
||
|
|
||
|
.traffic-lights {
|
||
|
--spacing: calc(0.5 * var(--font-size));
|
||
|
position: absolute;
|
||
|
top: var(--spacing);
|
||
|
left: calc(var(--spacing) * 1.25);
|
||
|
user-select: none;
|
||
|
|
||
|
.dot {
|
||
|
display: inline-block;
|
||
|
inline-size: var(--spacing);
|
||
|
block-size: var(--spacing);
|
||
|
margin-inline-end: 0.3rem;
|
||
|
background: red;
|
||
|
border-radius: 100%;
|
||
|
}
|
||
|
|
||
|
.red {
|
||
|
background: #ff6159;
|
||
|
}
|
||
|
|
||
|
.yellow {
|
||
|
background: #ffbd2e;
|
||
|
}
|
||
|
|
||
|
.green {
|
||
|
background: #28c941;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes blink-cursor {
|
||
|
|
||
|
from,
|
||
|
to {
|
||
|
border-inline-end: 0.15rem solid transparent;
|
||
|
}
|
||
|
|
||
|
50% {
|
||
|
border-inline-end: 0.15rem solid white;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
@media all and (max-width: 60rem) {
|
||
|
.page {
|
||
|
&:nth-child(2) {
|
||
|
flex-direction: column;
|
||
|
|
||
|
.about {
|
||
|
margin: 5svb auto;
|
||
|
inline-size: 90%;
|
||
|
position: relative;
|
||
|
opacity: 1 !important;
|
||
|
}
|
||
|
|
||
|
#about-display {
|
||
|
display: contents;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
#man-demo {
|
||
|
max-block-size: 80svb;
|
||
|
flex-direction: column;
|
||
|
|
||
|
#manpage-widget>h1 {
|
||
|
position: relative;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media all and (min-width: 60rem) {
|
||
|
|
||
|
body {
|
||
|
scroll-snap-type: block mandatory;
|
||
|
}
|
||
|
|
||
|
.page {
|
||
|
flex-direction: row;
|
||
|
block-size: calc(100svb - calc(2 * var(--inner-padding)));
|
||
|
scroll-snap-align: center;
|
||
|
scroll-snap-stop: always;
|
||
|
|
||
|
.page-desc {
|
||
|
h1 {
|
||
|
font-size: calc(var(--font-size)* 1.7);
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
font-size: calc(var(--font-size)* 1.1);
|
||
|
max-inline-size: 24ch;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media all and (min-width: 60rem) and (max-width: 80rem) {
|
||
|
.page {
|
||
|
&:nth-child(3) {
|
||
|
flex-direction: row;
|
||
|
grid-template-columns: 4;
|
||
|
}
|
||
|
|
||
|
&:nth-child(2) {
|
||
|
#about {
|
||
|
font-size: calc(var(--font-size) * 1.2);
|
||
|
}
|
||
|
|
||
|
flex-direction: row;
|
||
|
grid-template-columns: 4;
|
||
|
}
|
||
|
|
||
|
.page-desc {
|
||
|
|
||
|
h1 {
|
||
|
font-size: calc(var(--font-size)* 1.3);
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
font-size: calc(var(--font-size));
|
||
|
max-inline-size: 24ch;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#man-demo {
|
||
|
min-inline-size: 50vi;
|
||
|
inline-size: 50vi;
|
||
|
flex-direction: column-reverse;
|
||
|
|
||
|
.terminal:not(:only-child) {
|
||
|
transition: flex 0.8s;
|
||
|
flex: 0;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
@media all and (min-width: 80rem) {
|
||
|
|
||
|
.page:nth-child(3) {
|
||
|
justify-content: space-between;
|
||
|
}
|
||
|
|
||
|
#man-demo {
|
||
|
flex-direction: row;
|
||
|
flex: 1;
|
||
|
max-inline-size: 60%;
|
||
|
justify-self: flex-end;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
@keyframes fade-in {
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
|
||
|
to {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fade-out {
|
||
|
from {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
to {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes flex-in {
|
||
|
from {
|
||
|
flex: 0;
|
||
|
}
|
||
|
|
||
|
to {
|
||
|
flex: 1;
|
||
|
}
|
||
|
}
|