Lilac/Grasswren
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Lilac
2026-07-11 14:54:56 -04:00
commit 23f714f570
15 changed files with 633 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+348
View File
@@ -0,0 +1,348 @@
: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;
}
}
}