parent
98b8ee8d49
commit
79f38995d3
@ -1,241 +0,0 @@ |
|||||||
:root { |
|
||||||
--color-border: hsl(0, 0%, 0%); |
|
||||||
--border-radius: 5px; |
|
||||||
--text: 0; |
|
||||||
--value: 9; |
|
||||||
--value-scale: 12%; |
|
||||||
--pad: 10px; |
|
||||||
--bottom-margin: 2rem; |
|
||||||
--w: initial; |
|
||||||
--h: initial; |
|
||||||
--value0: hsl(0, 0%, calc(0 * var(--value-scale))); |
|
||||||
--value1: hsl(0, 0%, calc(1 * var(--value-scale))); |
|
||||||
--value2: hsl(0, 0%, calc(2 * var(--value-scale))); |
|
||||||
--value3: hsl(0, 0%, calc(3 * var(--value-scale))); |
|
||||||
--value4: hsl(0, 0%, calc(4 * var(--value-scale))); |
|
||||||
--value5: hsl(0, 0%, calc(5 * var(--value-scale))); |
|
||||||
--value6: hsl(0, 0%, calc(6 * var(--value-scale))); |
|
||||||
--value7: hsl(0, 0%, calc(7 * var(--value-scale))); |
|
||||||
--value8: hsl(0, 0%, calc(8 * var(--value-scale))); |
|
||||||
--value9: hsl(0, 0%, calc(9 * var(--value-scale))); |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
padding: 0px; |
|
||||||
margin: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart { |
|
||||||
background-color: #fff; |
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: flex-start; |
|
||||||
padding: 0px; |
|
||||||
margin: 0px; |
|
||||||
width: 100%; |
|
||||||
min-width: 100%; |
|
||||||
max-width: 100%; |
|
||||||
height: fit-content; |
|
||||||
min-height: fit-content; |
|
||||||
padding: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart > * + * { |
|
||||||
margin-bottom: var(--bottom-margin); |
|
||||||
} |
|
||||||
|
|
||||||
blockstart > *:last-child { |
|
||||||
margin-bottom: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart a { |
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
} |
|
||||||
|
|
||||||
blockstart block { |
|
||||||
--spacing: space-evenly; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale))); |
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
justify-content: var(--spacing); |
|
||||||
flex-direction: column; |
|
||||||
padding: var(--pad); |
|
||||||
width: var(--w); |
|
||||||
min-width: var(--w); |
|
||||||
max-width: var(--w); |
|
||||||
height: var(--h); |
|
||||||
min-height: var(--h); |
|
||||||
max-height: var(--h); |
|
||||||
} |
|
||||||
|
|
||||||
blockstart block > * { |
|
||||||
--spacing: flex-start; |
|
||||||
--pad: 10px; |
|
||||||
--w: initial; |
|
||||||
--h: initial; |
|
||||||
|
|
||||||
background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale))); |
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
display: flex; |
|
||||||
justify-content: var(--spacing); |
|
||||||
align-self: stretch; |
|
||||||
flex-direction: column; |
|
||||||
margin: 2px; |
|
||||||
padding: var(--pad); |
|
||||||
width: var(--w); |
|
||||||
min-width: var(--w); |
|
||||||
max-width: var(--w); |
|
||||||
height: var(--h); |
|
||||||
min-height: var(--h); |
|
||||||
max-height: var(--h); |
|
||||||
} |
|
||||||
|
|
||||||
blockstart stack { |
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
display: grid; |
|
||||||
grid-template-rows: 1fr; |
|
||||||
grid-template-columns: 1fr; |
|
||||||
grid-template-areas: "cover"; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart stack > * { |
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
position: relative; |
|
||||||
grid-area: cover; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart stack > .top { |
|
||||||
z-index: 10; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .wide { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .no-flex { |
|
||||||
display: block; |
|
||||||
flex: unset; |
|
||||||
flex-direction: unset; |
|
||||||
align-self: unset; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .center { |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
align-self: center; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .center-text { |
|
||||||
text-align: center; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .center-self { |
|
||||||
align-self: center; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .vertical { |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .horizontal { |
|
||||||
flex-direction: row; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart grid { |
|
||||||
--cols: auto; |
|
||||||
--rows: auto; |
|
||||||
--gap: 0.5rem; |
|
||||||
|
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
display: grid; |
|
||||||
grid-gap: var(--gap); |
|
||||||
grid-template-columns: repeat(var(--cols), 1fr); |
|
||||||
grid-template-rows: repeat(var(--rows), 1fr); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
blockstart hr { |
|
||||||
--height: 1rem; |
|
||||||
|
|
||||||
min-height: var(--height); |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart hr.huge { |
|
||||||
--height: 3rem; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart shape { |
|
||||||
--value: 2; |
|
||||||
--text: 9; |
|
||||||
--pad: 1rem; |
|
||||||
|
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale))); |
|
||||||
display: flex; |
|
||||||
width: var(--w); |
|
||||||
min-width: var(--w); |
|
||||||
max-width: var(--w); |
|
||||||
height: var(--h); |
|
||||||
min-height: var(--h); |
|
||||||
max-height: var(--h); |
|
||||||
text-align: center; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
align-self: center; |
|
||||||
padding: pad; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .debug { |
|
||||||
border: 1px solid red; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .debug > * { |
|
||||||
border: 1px solid blue; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .border { |
|
||||||
border: 2px solid var(--color-border); |
|
||||||
border-radius: var(--border-radius); |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .compact { |
|
||||||
justify-content: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
blockstart .compact > * { |
|
||||||
flex: unset; |
|
||||||
} |
|
||||||
|
|
||||||
.solid { |
|
||||||
--value: 4; |
|
||||||
--text: 9; |
|
||||||
} |
|
||||||
|
|
||||||
.fill { |
|
||||||
flex: 1 1 auto; |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
--value: 7; |
|
||||||
--text: 0; |
|
||||||
|
|
||||||
background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale))); |
|
||||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); |
|
||||||
border: 2px solid var(--color-border); |
|
||||||
border-radius: var(--border-radius); |
|
||||||
} |
|
||||||
|
|
||||||
button:hover { |
|
||||||
filter: brightness(90%); |
|
||||||
} |
|
||||||
|
|
||||||
[style*="--aspect-ratio"] { |
|
||||||
aspect-ratio: var(--aspect-ratio); |
|
||||||
} |
|
||||||
@ -1,143 +0,0 @@ |
|||||||
@font-face { |
|
||||||
font-family: computer; |
|
||||||
src: url(/fonts/computer.woff); |
|
||||||
} |
|
||||||
|
|
||||||
/* Grays |
|
||||||
--value9: hsl(0, 0%, 100%); |
|
||||||
--value8: hsl(210, 17%, 98%); |
|
||||||
--value8a: hsl(210, 17%, 98%, 0); |
|
||||||
--value7: hsl(210, 16%, 93%); |
|
||||||
--value6: hsl(210, 14%, 89%); |
|
||||||
--value5: hsl(210, 14%, 83%); |
|
||||||
--value4: hsl(210, 11%, 71%); |
|
||||||
--value3: hsl(208, 7%, 46%); |
|
||||||
--value2: hsl(210, 9%, 31%); |
|
||||||
--value1: hsl(210, 10%, 23%); |
|
||||||
--value0: hsl(210, 11%, 15%); |
|
||||||
|
|
||||||
Greens |
|
||||||
--value9: #f7fcf5; |
|
||||||
--value8: #e5f5e0; |
|
||||||
--value8a: hsl(210, 17%, 98%, 0); |
|
||||||
--value7: #83cad4; |
|
||||||
--value6: #73c17a; |
|
||||||
--value5: #006d2c; |
|
||||||
--value4: hsl(210, 11%, 71%); |
|
||||||
--value3: hsl(208, 7%, 46%); |
|
||||||
--value2: hsl(210, 9%, 31%); |
|
||||||
--value1: #06160c; |
|
||||||
--value0: #010402; |
|
||||||
*/ |
|
||||||
|
|
||||||
:root { |
|
||||||
--value9: #f7fcf5; |
|
||||||
--value8: #e5f5e0; |
|
||||||
--value8a: hsl(210, 17%, 98%, 0); |
|
||||||
--value7: #daf0d5; |
|
||||||
--value6: #73c17a; |
|
||||||
--value5: #238b45; |
|
||||||
--value4: #006d2c; |
|
||||||
--value3: #105329; |
|
||||||
--value2: #0e321b; |
|
||||||
--value1: #06160c; |
|
||||||
--value0: #010402; |
|
||||||
|
|
||||||
--gray9: hsl(0, 0%, 100%); |
|
||||||
--gray8: hsl(210, 17%, 98%); |
|
||||||
--gray8a: hsl(210, 17%, 98%, 0); |
|
||||||
--gray7: hsl(210, 16%, 93%); |
|
||||||
--gray6: hsl(210, 14%, 89%); |
|
||||||
--gray5: hsl(210, 14%, 83%); |
|
||||||
--gray4: hsl(210, 11%, 71%); |
|
||||||
--gray3: hsl(208, 7%, 46%); |
|
||||||
--gray2: hsl(210, 9%, 31%); |
|
||||||
--gray1: hsl(210, 10%, 23%); |
|
||||||
--gray0: hsl(210, 11%, 15%); |
|
||||||
|
|
||||||
--orange: hsl(19, 97%, 41%); |
|
||||||
--yellow: hsl(44, 100%, 52%); |
|
||||||
--red: hsl(334, 100%, 50%); |
|
||||||
--purple: hsl(265, 83%, 57%); |
|
||||||
--blue: hsl(217, 100%, 61%); |
|
||||||
--green: hsl(98, 32%, 45%); |
|
||||||
--black: hsl(240, 100%, 0%); |
|
||||||
|
|
||||||
--invert-orange: var(--value9); |
|
||||||
--invert-yellow: var(--value0); |
|
||||||
--invert-red: var(--value9); |
|
||||||
--invert-purple: var(--value9); |
|
||||||
--invert-blue: var(--value9); |
|
||||||
--invert-green: var(--value9); |
|
||||||
|
|
||||||
--color-accent: var(--value7); |
|
||||||
--color-bg-inverted: var(--gray6); |
|
||||||
--color-bg-secondary: var(--gray2); |
|
||||||
--color-bg-code-text: var(--value2); |
|
||||||
--color-bg-tertiary: var(--value3); |
|
||||||
--color-bg: var(--value0); |
|
||||||
--color-border: var(--gray3); |
|
||||||
--color-error: var(--red); |
|
||||||
--color-good: var(--green); |
|
||||||
--color-icon-image: var(--value8); |
|
||||||
--color-inactive: var(--value4); |
|
||||||
--color-info: var(--yellow); |
|
||||||
--color-input-bg: var(--value7); |
|
||||||
--color-input-border: var(--value7); |
|
||||||
--color-input-button: var(--value6); |
|
||||||
--color-overlay-background: var(--value2); |
|
||||||
--color-overlay-shadow: var(--value6); |
|
||||||
--color-overlay-text: var(--value7); |
|
||||||
--color-play-icon: var(--value4); |
|
||||||
--color-pulse-1: hsla(0, 0%, 80%, 1); |
|
||||||
--color-pulse-2: hsla(0, 0%, 80%, 0.7); |
|
||||||
--color-pulse-3: hsla(0, 0%, 80%, 0.1); |
|
||||||
--color-pulse-4: hsla(0, 0%, 80%, 0); |
|
||||||
--color-secondary-accent: var(--value7); |
|
||||||
--color-secondary: var(--value7); |
|
||||||
--color-shadow-secondary: var(--value6); |
|
||||||
--color-shadow: var(--value2); |
|
||||||
--color-text-inverted: var(--value0); |
|
||||||
--color-text-secondary: var(--value8); |
|
||||||
--color-text: var(--value9); |
|
||||||
--color-warning: var(--orange); |
|
||||||
--color: var(--value9); |
|
||||||
--gray-bg: var(--gray1); |
|
||||||
--color-scrollbar-thumb: hsla(0, 0%, 40%, 0.8); |
|
||||||
--color-scrollbar-track-piece: hsla(0, 0%, 20%, 0.8); |
|
||||||
--color-bg-transparent: var(--value8a); |
|
||||||
--color-bg-code: var(--gray1); |
|
||||||
--color-border-tabs: var(--value6); |
|
||||||
--color-shadow-dark: var(--value2); |
|
||||||
|
|
||||||
|
|
||||||
--font-family: "Andale Mono", "Monaco", monospace, monospace; |
|
||||||
--font-title: "Palatino", serif; |
|
||||||
--font-computer: "computer", monospace; |
|
||||||
--font-size: 1.05em; |
|
||||||
--font-text-size: 1.4em; /* for paragraphs mostly */ |
|
||||||
--font-label-size: 1rem; |
|
||||||
--font-heading-size: 1.2em; |
|
||||||
--font-heading-weight: 300; |
|
||||||
--font-header-nav: 1.3em; |
|
||||||
--font-button-size: 1.4em; |
|
||||||
--hover-brightness: 0.9; |
|
||||||
--justify-important: center; |
|
||||||
--justify-blockquote: left; |
|
||||||
--justify-normal: left; |
|
||||||
--line-height: 1.5; |
|
||||||
--width-sidebar: 320px; |
|
||||||
--width-card: 385px; |
|
||||||
--width-card-medium: 460px; |
|
||||||
--width-card-wide: 800px; |
|
||||||
--width-content: 1080px; |
|
||||||
--width-badge: 20px; |
|
||||||
--font-size-badge: 13px; |
|
||||||
--fixed-header-height: 73px; |
|
||||||
--fixed-footer-height: 400px; |
|
||||||
--color-scrollbar-thumb: hsla(0, 0%, 60%, 0.8); |
|
||||||
--color-scrollbar-track-piece: hsla(0, 0%, 100%, 0.9); |
|
||||||
|
|
||||||
--color-bg-header: var(--value0); |
|
||||||
--color-text-header: var(--value9); |
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,54 +0,0 @@ |
|||||||
/* 1. Use a more-intuitive box-sizing model */ |
|
||||||
*, *::before, *::after { |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
/* 2. Remove default margin */ |
|
||||||
* { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
/* 3. Enable keyword animations */ |
|
||||||
@media (prefers-reduced-motion: no-preference) { |
|
||||||
html { |
|
||||||
interpolate-size: allow-keywords; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
/* 4. Add accessible line-height */ |
|
||||||
line-height: 1.5; |
|
||||||
/* 5. Improve text rendering */ |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
} |
|
||||||
|
|
||||||
/* 6. Improve media defaults */ |
|
||||||
img, picture, video, canvas, svg { |
|
||||||
display: block; |
|
||||||
max-width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
/* 7. Inherit fonts for form controls */ |
|
||||||
input, button, textarea, select { |
|
||||||
font: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
/* 8. Avoid text overflows */ |
|
||||||
p, h1, h2, h3, h4, h5, h6 { |
|
||||||
overflow-wrap: break-word; |
|
||||||
} |
|
||||||
|
|
||||||
/* 9. Improve line wrapping */ |
|
||||||
p { |
|
||||||
text-wrap: pretty; |
|
||||||
} |
|
||||||
h1, h2, h3, h4, h5, h6 { |
|
||||||
text-wrap: balance; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
10. Create a root stacking context |
|
||||||
*/ |
|
||||||
#root, #__next { |
|
||||||
isolation: isolate; |
|
||||||
} |
|
||||||
Loading…
Reference in new issue