docs refactor
All checks were successful
All checks were successful
This commit is contained in:
266
docs/styles/__file.document.css
Normal file
266
docs/styles/__file.document.css
Normal file
@ -0,0 +1,266 @@
|
||||
/* Document Layout - For documentation/blog post pages */
|
||||
/* Based on reference_post.html design */
|
||||
|
||||
:root {
|
||||
/* Document-specific spacing */
|
||||
--document-margin-x: 120px;
|
||||
--document-max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Main content wrapper for document pages */
|
||||
.document-layout {
|
||||
/* max-width: var(--document-max-width); */
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-exp-7) var(--document-margin-x);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.document {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.document-header-holder {
|
||||
display: flex;
|
||||
height: 70vh;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
/* text-align: end; */
|
||||
}
|
||||
|
||||
/* Document header with metadata */
|
||||
.document-header {
|
||||
margin-bottom: var(--spacing-exp-6);
|
||||
max-width: 15%;
|
||||
}
|
||||
|
||||
.document-metadata {
|
||||
font-family: var(--fontFamily-mono);
|
||||
font-size: var(--fontSize-small);
|
||||
color: var(--swatch-4);
|
||||
margin-bottom: var(--spacing-2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 3.8rem;
|
||||
font-weight: 420;
|
||||
line-height: 1;
|
||||
margin: var(--spacing-2) 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.document-subtitle {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: var(--swatch-2);
|
||||
line-height: var(--lineHeight-default);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
|
||||
/* Document content area */
|
||||
|
||||
.document-quick-tips {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--swatch-2);
|
||||
line-height: var(--lineHeight-default);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
|
||||
.document-content-wrapper {
|
||||
flex-grow: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: auto;
|
||||
margin-left: 1vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.document-content {
|
||||
font-size: var(--fontSize-default);
|
||||
line-height: var(--lineHeight-default);
|
||||
width: fit-content;
|
||||
padding-bottom: var(--spacing-exp-7);
|
||||
}
|
||||
|
||||
.document-content > * + * {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.document-content h1 {
|
||||
font-size: 3.8rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* Section headers within document */
|
||||
.document-content h2 {
|
||||
margin-top: var(--spacing-exp-6);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.document-content h3 {
|
||||
margin-top: var(--spacing-exp-5);
|
||||
margin-bottom: var(--spacing-1);
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.document-content h4 {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-bottom: var(--spacing-1);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
/* Enhanced code blocks for documentation */
|
||||
.document-content pre {
|
||||
margin: var(--spacing-2) 0;
|
||||
background: var(--background-3);
|
||||
border-radius: var(--border-radius-small);
|
||||
overflow-x: auto;
|
||||
max-width: 120ch;
|
||||
}
|
||||
|
||||
.document-content pre code {
|
||||
font-family: var(--fontFamily-mono);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Document-specific column layouts */
|
||||
.document-content .column-set {
|
||||
margin: var(--spacing-exp-5) 0;
|
||||
}
|
||||
|
||||
/* Two-column code examples */
|
||||
.code-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2);
|
||||
margin: var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
/* Callout boxes for notes/warnings */
|
||||
.callout {
|
||||
padding: var(--spacing-2);
|
||||
margin: var(--spacing-2) 0;
|
||||
border-left: 3px solid var(--swatch-5);
|
||||
background: var(--background-3);
|
||||
}
|
||||
|
||||
.callout.note {
|
||||
border-left-color: var(--swatch-3);
|
||||
}
|
||||
|
||||
.callout.warning {
|
||||
border-left-color: var(--swatch-1);
|
||||
background: rgba(255, 200, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Table of contents navigation */
|
||||
.document-toc {
|
||||
position: sticky;
|
||||
top: var(--spacing-2);
|
||||
font-size: var(--fontSize-secondary);
|
||||
padding: var(--spacing-2);
|
||||
background: var(--background-3);
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.document-toc ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.document-toc li {
|
||||
margin: var(--spacing-half) 0;
|
||||
}
|
||||
|
||||
.document-toc a {
|
||||
color: var(--swatch-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.document-toc a:hover {
|
||||
color: var(--swatch-1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Footer navigation (prev/next) */
|
||||
.document-footer {
|
||||
max-width: 15%;
|
||||
}
|
||||
|
||||
.document-footer-holder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.document-nav-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: var(--swatch-2);
|
||||
}
|
||||
|
||||
.document-nav-link:hover {
|
||||
color: var(--swatch-1);
|
||||
}
|
||||
|
||||
.document-nav-label {
|
||||
font-size: var(--fontSize-small);
|
||||
font-family: var(--fontFamily-mono);
|
||||
color: var(--swatch-4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--spacing-half);
|
||||
}
|
||||
|
||||
.document-nav-label-selected {
|
||||
font-size: var(--fontSize-small);
|
||||
font-family: var(--fontFamily-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--spacing-half);
|
||||
color:rgb(236, 113, 42);
|
||||
}
|
||||
|
||||
.document-nav-title {
|
||||
font-size: var(--fontSize-header);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
:root {
|
||||
--document-margin-x: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--document-margin-x: var(--spacing-2);
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.code-comparison {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.document-footer {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
article {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
article h1,
|
||||
article h2,
|
||||
article h3,
|
||||
article h4,
|
||||
article h5,
|
||||
article h6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
article p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
article code {
|
||||
background: var(--code-background-color);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
266
docs/styles/__folder.document.css
Normal file
266
docs/styles/__folder.document.css
Normal file
@ -0,0 +1,266 @@
|
||||
/* Document Layout - For documentation/blog post pages */
|
||||
/* Based on reference_post.html design */
|
||||
|
||||
:root {
|
||||
/* Document-specific spacing */
|
||||
--document-margin-x: 120px;
|
||||
--document-max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Main content wrapper for document pages */
|
||||
.document-layout {
|
||||
/* max-width: var(--document-max-width); */
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-exp-7) var(--document-margin-x);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.document {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.document-header-holder {
|
||||
display: flex;
|
||||
height: 70vh;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
/* text-align: end; */
|
||||
}
|
||||
|
||||
/* Document header with metadata */
|
||||
.document-header {
|
||||
margin-bottom: var(--spacing-exp-6);
|
||||
max-width: 15%;
|
||||
}
|
||||
|
||||
.document-metadata {
|
||||
font-family: var(--fontFamily-mono);
|
||||
font-size: var(--fontSize-small);
|
||||
color: var(--swatch-4);
|
||||
margin-bottom: var(--spacing-2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 3.8rem;
|
||||
font-weight: 420;
|
||||
line-height: 1;
|
||||
margin: var(--spacing-2) 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.document-subtitle {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: var(--swatch-2);
|
||||
line-height: var(--lineHeight-default);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
|
||||
/* Document content area */
|
||||
|
||||
.document-quick-tips {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--swatch-2);
|
||||
line-height: var(--lineHeight-default);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
|
||||
.document-content-wrapper {
|
||||
flex-grow: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: auto;
|
||||
margin-left: 1vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.document-content {
|
||||
font-size: var(--fontSize-default);
|
||||
line-height: var(--lineHeight-default);
|
||||
width: fit-content;
|
||||
padding-bottom: var(--spacing-exp-7);
|
||||
}
|
||||
|
||||
.document-content > * + * {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.document-content h1 {
|
||||
font-size: 3.8rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* Section headers within document */
|
||||
.document-content h2 {
|
||||
margin-top: var(--spacing-exp-6);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.document-content h3 {
|
||||
margin-top: var(--spacing-exp-5);
|
||||
margin-bottom: var(--spacing-1);
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.document-content h4 {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-bottom: var(--spacing-1);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
/* Enhanced code blocks for documentation */
|
||||
.document-content pre {
|
||||
margin: var(--spacing-2) 0;
|
||||
background: var(--background-3);
|
||||
border-radius: var(--border-radius-small);
|
||||
overflow-x: auto;
|
||||
max-width: 120ch;
|
||||
}
|
||||
|
||||
.document-content pre code {
|
||||
font-family: var(--fontFamily-mono);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Document-specific column layouts */
|
||||
.document-content .column-set {
|
||||
margin: var(--spacing-exp-5) 0;
|
||||
}
|
||||
|
||||
/* Two-column code examples */
|
||||
.code-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2);
|
||||
margin: var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
/* Callout boxes for notes/warnings */
|
||||
.callout {
|
||||
padding: var(--spacing-2);
|
||||
margin: var(--spacing-2) 0;
|
||||
border-left: 3px solid var(--swatch-5);
|
||||
background: var(--background-3);
|
||||
}
|
||||
|
||||
.callout.note {
|
||||
border-left-color: var(--swatch-3);
|
||||
}
|
||||
|
||||
.callout.warning {
|
||||
border-left-color: var(--swatch-1);
|
||||
background: rgba(255, 200, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Table of contents navigation */
|
||||
.document-toc {
|
||||
position: sticky;
|
||||
top: var(--spacing-2);
|
||||
font-size: var(--fontSize-secondary);
|
||||
padding: var(--spacing-2);
|
||||
background: var(--background-3);
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.document-toc ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.document-toc li {
|
||||
margin: var(--spacing-half) 0;
|
||||
}
|
||||
|
||||
.document-toc a {
|
||||
color: var(--swatch-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.document-toc a:hover {
|
||||
color: var(--swatch-1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Footer navigation (prev/next) */
|
||||
.document-footer {
|
||||
max-width: 15%;
|
||||
}
|
||||
|
||||
.document-footer-holder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.document-nav-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: var(--swatch-2);
|
||||
}
|
||||
|
||||
.document-nav-link:hover {
|
||||
color: var(--swatch-1);
|
||||
}
|
||||
|
||||
.document-nav-label {
|
||||
font-size: var(--fontSize-small);
|
||||
font-family: var(--fontFamily-mono);
|
||||
color: var(--swatch-4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--spacing-half);
|
||||
}
|
||||
|
||||
.document-nav-label-selected {
|
||||
font-size: var(--fontSize-small);
|
||||
font-family: var(--fontFamily-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--spacing-half);
|
||||
color:rgb(236, 113, 42);
|
||||
}
|
||||
|
||||
.document-nav-title {
|
||||
font-size: var(--fontSize-header);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
:root {
|
||||
--document-margin-x: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--document-margin-x: var(--spacing-2);
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.code-comparison {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.document-footer {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
@ -1,280 +1,263 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
/* Foldsite Documentation Base Styles */
|
||||
/* Design system extracted from reference designs */
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
:root {
|
||||
/* Typography Scale */
|
||||
--fontSize-default: 14.5px;
|
||||
--fontSize-small: 12px;
|
||||
--fontSize-secondary: 13.5px;
|
||||
--fontSize-header: 17px;
|
||||
--fontSize-large: 22px;
|
||||
--lineHeight-default: 1.65;
|
||||
|
||||
/* Color Swatches - Primary opacity-based system */
|
||||
--swatch-1: rgba(0, 0, 0, 0.85);
|
||||
--swatch-2: rgba(0, 0, 0, 0.75);
|
||||
--swatch-3: rgba(0, 0, 0, 0.6);
|
||||
--swatch-4: rgba(0, 0, 0, 0.4);
|
||||
--swatch-5: rgba(0, 0, 0, 0.25);
|
||||
--swatch-6: rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Base Colors */
|
||||
--color-default: rgba(0, 0, 0, 0.75);
|
||||
--color-default-secondary: rgba(0, 0, 0, 0.4);
|
||||
--background-1: #FAF9F6;
|
||||
--background-2: #ffffff;
|
||||
--background-3: #fcfcfc;
|
||||
--background-force-dark: #111111;
|
||||
|
||||
/* Spacing System - Consistent scale */
|
||||
--spacing-1: 15px;
|
||||
--spacing-half: calc(15px * 0.5);
|
||||
--spacing-2: calc(15px * 2);
|
||||
--spacing-3: calc(15px * 3);
|
||||
--spacing-4: calc(15px * 4);
|
||||
|
||||
/* Exponential spacing for larger gaps */
|
||||
--spacing-exp-1: 5px;
|
||||
--spacing-exp-half: calc(5px * 0.5);
|
||||
--spacing-exp-2: calc(5px * 2);
|
||||
--spacing-exp-3: calc(5px * 3);
|
||||
--spacing-exp-4: calc(5px * 5);
|
||||
--spacing-exp-5: calc(5px * 8);
|
||||
--spacing-exp-6: calc(5px * 13);
|
||||
--spacing-exp-7: calc(5px * 21);
|
||||
--spacing-exp-8: calc(5px * 34);
|
||||
|
||||
/* Typography */
|
||||
--fontFamily-default: 'Lekton', monospace;
|
||||
--fontFamily-mono: "Lekton", monospace;
|
||||
--fontFamily-display: 'Lekton', monospace;
|
||||
--fontFamily-serif: 'Lekton', monospace;
|
||||
|
||||
/* UI Elements */
|
||||
--border-radius-small: 5px;
|
||||
--opacity-downstate-default: 0.7;
|
||||
--ui-border: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
/* Reset */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.doto-500 {
|
||||
font-family: "Doto", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
"ROND" 0;
|
||||
}
|
||||
|
||||
.lekton-regular {
|
||||
font-family: "Lekton", monospace;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.lekton-bold {
|
||||
font-family: "Lekton", monospace;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.lekton-regular-italic {
|
||||
font-family: "Lekton", monospace;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-anchor: none;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--fontFamily-default);
|
||||
font-size: var(--fontSize-default);
|
||||
line-height: var(--lineHeight-default);
|
||||
color: var(--color-default);
|
||||
background-color: var(--background-1);
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--swatch-1);
|
||||
font-family: var(--fontFamily-display);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.8rem;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 420;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
h2 {
|
||||
font-size: 2.4rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
h3 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@property --font-color {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: oklch(25.11% 0.006 258.36);
|
||||
}
|
||||
|
||||
@property --background-color {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: #F6F0F0;
|
||||
}
|
||||
|
||||
@property --code-background-color {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: #c7c1c1;
|
||||
}
|
||||
|
||||
@property --hover-color {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: #A4B465;
|
||||
}
|
||||
|
||||
@property --url-color {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: #626F47;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--font-color: oklch(91.87% 0.003 264.54);
|
||||
--background-color: #29261f;
|
||||
--hover-color: #626F47;
|
||||
--url-color: #A4B465;
|
||||
--code-background-color: #3d392e;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
"wdth" 100;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--background-color);
|
||||
color: var(--font-color);
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--url-color);
|
||||
text-decoration: none;
|
||||
transition: all 0.25s ease-in-out;
|
||||
color: var(--swatch-1);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--swatch-5);
|
||||
transition: text-decoration-color 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--hover-color);
|
||||
transition: all 0.25s ease-in-out;
|
||||
text-decoration-color: var(--swatch-1);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #C14600;
|
||||
transition: all 0.25s ease-in-out;
|
||||
/* Code */
|
||||
code {
|
||||
font-family: 'Menlo', 'Monaco', var(--fontFamily-mono);
|
||||
font-size: 0.9em;
|
||||
background: var(--background-3);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
a:visited:hover {
|
||||
color: var(--hover-color);
|
||||
transition: all 0.25s ease-in-out;
|
||||
pre {
|
||||
background: var(--background-3);
|
||||
border-radius: var(--border-radius-small);
|
||||
overflow-x: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@supports (font-size-adjust: 1) {
|
||||
.content {
|
||||
font-size-adjust: 0.5;
|
||||
}
|
||||
pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: square;
|
||||
/* Horizontal Rules */
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: var(--ui-border);
|
||||
margin: var(--spacing-exp-4) 0;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul, ol {
|
||||
margin: 0 0 1em 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 160%;
|
||||
margin-bottom: 0.5rem;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
line-height: calc(1ex / 0.32);
|
||||
text-rendering: optimizeLegibility;
|
||||
max-width: 80ch;
|
||||
padding-left: 1rem;
|
||||
/* Images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-size: 2.5em;
|
||||
line-height: calc(1ex / 0.42);
|
||||
margin: calc(1ex / 0.42) 0;
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
margin: var(--spacing-2) 0;
|
||||
padding-left: var(--spacing-2);
|
||||
border-left: 3px solid var(--swatch-5);
|
||||
color: var(--swatch-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 2em;
|
||||
line-height: calc(1ex / 0.42);
|
||||
margin: calc(1ex / 0.42) 0;
|
||||
/* Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
font-size: 1.75em;
|
||||
line-height: calc(1ex / 0.38);
|
||||
margin: calc(1ex / 0.38) 0;
|
||||
th, td {
|
||||
padding: var(--spacing-half) var(--spacing-1);
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--ui-border);
|
||||
}
|
||||
|
||||
.content h4 {
|
||||
font-size: 1.5em;
|
||||
line-height: calc(1ex / 0.37);
|
||||
margin: calc(1ex / 0.37) 0;
|
||||
th {
|
||||
font-weight: 600;
|
||||
color: var(--swatch-1);
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 1em;
|
||||
line-height: calc(1ex / 0.32);
|
||||
margin: calc(1ex / 0.32) 0;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
/* Utilities */
|
||||
.mono {
|
||||
font-family: var(--fontFamily-mono);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
|
||||
.sidebar {
|
||||
padding-top: 4rem;
|
||||
line-height: calc(1ex / 0.32);
|
||||
text-rendering: optimizeLegibility;
|
||||
.secondary {
|
||||
color: var(--color-default-secondary);
|
||||
}
|
||||
|
||||
.holder {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: auto;
|
||||
}
|
||||
.small {
|
||||
font-size: var(--fontSize-small);
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Column System - Mimics reference design */
|
||||
.column-set {
|
||||
display: grid;
|
||||
gap: var(--spacing-2);
|
||||
margin: var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.column-set[data-columns="2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.column-set[data-columns="3"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.column-set {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user