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