349 lines
6.1 KiB
CSS
349 lines
6.1 KiB
CSS
:root {
|
||
--color-background: rgba( 18, 15, 18, 1);
|
||
--color-dark: rgba( 9, 7, 9, 1);
|
||
--color-text: rgba(255, 255, 255, 1);
|
||
--color-purple: rgba(171, 90, 237, 1);
|
||
--color-purple-translucent: rgba(171, 90, 237, 0.8);
|
||
--color-purple-transparent: rgba(171, 90, 237, 0.3);
|
||
--color-purple-hover: rgba(194, 135, 242, 1);
|
||
|
||
--content-width: 800px;
|
||
--extra-width: 4em;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "linja-pona-4";
|
||
src: url('https://ajlee2006.github.io/linjaponasandbox/linja-pona-4.2.otf') format('opentype');
|
||
}
|
||
|
||
html {
|
||
font-family: 'Inter', sans-serif;
|
||
text-rendering: optimizeLegibility;
|
||
font-size: 1.125rem;
|
||
line-height: 1.25;
|
||
|
||
color: var(--color-text);
|
||
background: var(--color-background) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 3 1.7320508076"><path d="M0 0.8660254038h1L1.5 0h1L3 0.8660254038L2.5 1.7320508076h-1L1 0.8660254038" stroke="%232D3931" stroke-width="0.05" fill="none"/></svg>');
|
||
background-position: 1.25em 0.5em;
|
||
margin: 0;
|
||
padding: 0;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
|
||
& *::selection {
|
||
background-color: var(--color-purple-transparent);
|
||
}
|
||
}
|
||
|
||
body {
|
||
background-color: var(--color-background);
|
||
border: 1px solid var(--color-purple-translucent);
|
||
border-radius: 8px;
|
||
margin: 1em auto;
|
||
padding: 0;
|
||
max-width: var(--content-width);
|
||
|
||
& > * {
|
||
padding: 2em;
|
||
|
||
& > :first-child {
|
||
margin-top: 0;
|
||
}
|
||
& > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
& > * + * {
|
||
border-top: 1px solid var(--color-purple-translucent);
|
||
}
|
||
}
|
||
|
||
/* Typography */
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
margin: 0 0 0.5em 0;
|
||
padding: 0;
|
||
}
|
||
h2 { font-size: 1.25rem; }
|
||
h3 { font-size: 1rem; }
|
||
|
||
sup {
|
||
vertical-align: baseline;
|
||
position: relative;
|
||
top: -0.4em;
|
||
font-size: 0.75em;
|
||
}
|
||
|
||
a {
|
||
color: var(--color-purple);
|
||
transition-property: color;
|
||
transition-duration: 0.5s;
|
||
text-underline-offset: 2.5px;
|
||
text-underline-thickness: 1px;
|
||
|
||
&:hover, &:focus, &:active {
|
||
color: var(--color-purple-hover);
|
||
}
|
||
}
|
||
|
||
span.t {
|
||
font-family: linja-pona-4;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
code {
|
||
font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
|
||
font-size: 0.9em;
|
||
font-size-adjust: from-font;
|
||
font-weight: 400;
|
||
line-height: 1;
|
||
|
||
display: inline-block;
|
||
color: var(--color-text);
|
||
background: var(--color-dark);
|
||
border-radius: 4px;
|
||
padding: 0.05em 0.35em;
|
||
}
|
||
|
||
pre {
|
||
background-color: transparent !important;
|
||
|
||
& > code {
|
||
display: block;
|
||
overflow-x: scroll;
|
||
|
||
background-color: transparent !important;
|
||
border: 1px solid;
|
||
border-color: var(--color-purple-translucent);
|
||
border-radius: 0;
|
||
padding: 1em 0.5em;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
ul {
|
||
position: relative;
|
||
list-style: none;
|
||
margin-left: 0;
|
||
padding-left: 1em;
|
||
|
||
& li:before {
|
||
content: "–";
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
dl {
|
||
display: grid;
|
||
grid-template-columns: 6em 1fr;
|
||
gap: 0.25em 2em;
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
& > dd {
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
img, video {
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
display: block;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
padding-top: 0.5em;
|
||
padding-bottom: 0.5em;
|
||
|
||
& > div {
|
||
flex: 1;
|
||
|
||
& > h1 {
|
||
font-size: 1.5rem;
|
||
margin-top: 1rem;
|
||
line-height: 1.5rem;
|
||
}
|
||
& > p:last-child {
|
||
margin-bottom: 1em;
|
||
}
|
||
}
|
||
|
||
& > img {
|
||
border-radius: 8px;
|
||
aspect-ratio: 1/1;
|
||
height: 5em;
|
||
}
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
gap: 0.7ch;
|
||
padding-top: 1rem;
|
||
padding-bottom: 1rem;
|
||
|
||
& a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
& > ul {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
|
||
font-size: smaller;
|
||
gap: 0.25em;
|
||
margin: 0;
|
||
padding: 0.25em;
|
||
|
||
list-style: none;
|
||
|
||
background-color: var(--color-dark);
|
||
border-radius: 2em;
|
||
|
||
& > li {
|
||
margin: 0;
|
||
|
||
&::before {
|
||
content: none;
|
||
}
|
||
|
||
& > a {
|
||
display: inline-block;
|
||
padding: 0.5em 1em;
|
||
|
||
border-radius: 1.25em;
|
||
text-decoration: none;
|
||
|
||
color: var(--color-text);
|
||
|
||
&.active {
|
||
background-color: var(--color-purple);
|
||
color: var(--color-dark);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
footer {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
padding-top: 1.5em;
|
||
padding-bottom: 1.5em;
|
||
|
||
& * {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 881px) {
|
||
section {
|
||
& > div {
|
||
margin-left: calc(var(--extra-width) * -1);
|
||
width: calc(var(--content-width) + var(--extra-width));
|
||
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
border-radius: 6px;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
background-color: var(--color-background);
|
||
border: 1px solid var(--color-purple-translucent);
|
||
z-index: -1;
|
||
|
||
clip-path: polygon(
|
||
-1px -1px,
|
||
calc(var(--extra-width) / 2) -1px,
|
||
calc(var(--extra-width) / 2) 3px,
|
||
calc(100% - 2px - var(--extra-width) / 2) 3px,
|
||
calc(100% - 2px - var(--extra-width) / 2) -1px,
|
||
calc(100% + 1px) -1px,
|
||
calc(100% + 1px) calc(100% + 1px),
|
||
calc(100% - 2px - var(--extra-width) / 2) calc(100% + 1px),
|
||
calc(100% - 2px - var(--extra-width) / 2) calc(100% - 3px),
|
||
calc(var(--extra-width) / 2) calc(100% - 3px),
|
||
calc(var(--extra-width) / 2) calc(100% + 1px),
|
||
-1px calc(100% + 1px)
|
||
);
|
||
}
|
||
|
||
& > pre > code, & > img, & > video {
|
||
padding: 1em 1.5em;
|
||
padding-bottom: calc(0.85em);
|
||
border: none;
|
||
}
|
||
|
||
& > img, & > video {
|
||
width: calc(100% - 2.85em);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 880px) {
|
||
pre > code, div > img, div > video {
|
||
margin: 0 -2em;
|
||
padding: 1.5em 2em;
|
||
border-left: none;
|
||
border-right: none;
|
||
}
|
||
}
|
||
@media (max-width: 800px) {
|
||
body {
|
||
margin: 0;
|
||
border: none;
|
||
overflow-x: hidden;
|
||
|
||
& > * {
|
||
padding: 1em;
|
||
}
|
||
}
|
||
|
||
pre > code, div > img, div > video {
|
||
margin: 0 -1em;
|
||
padding: 1.5em 1em;
|
||
}
|
||
}
|
||
|
||
hr { display: none; }
|
||
|
||
ol {
|
||
list-style: none;
|
||
counter-reset: counter;
|
||
padding-left: 2em;
|
||
|
||
& > li {
|
||
counter-increment: counter;
|
||
position: relative;
|
||
margin-top: 0.25em;
|
||
|
||
&::before {
|
||
content: "[" counter(counter) "]";
|
||
position: absolute;
|
||
left: -2em;
|
||
}
|
||
|
||
& > p {
|
||
display: inline;
|
||
}
|
||
}
|
||
}
|