Refactor everything that's used all over into a common/ package and sync files from static/ into public/ so that public's not in the git.
This commit is contained in:
Zed A. Shaw
parent
d12817f4cc
commit
ec7298cce0
36 changed files with 112 additions and 902 deletions
241
static/blockstart.css
Normal file
241
static/blockstart.css
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
: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);
|
||||
}
|
||||
143
static/color.css
Normal file
143
static/color.css
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
@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);
|
||||
}
|
||||
BIN
static/favicon.ico
Normal file
BIN
static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
1637
static/global.css
Normal file
1637
static/global.css
Normal file
File diff suppressed because it is too large
Load diff
5
static/js/alpine.js
Normal file
5
static/js/alpine.js
Normal file
File diff suppressed because one or more lines are too long
21
static/js/code.js
Normal file
21
static/js/code.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
class GetJson {
|
||||
constructor(url) {
|
||||
this.url = url;
|
||||
this.items = [];
|
||||
this.item = undefined;
|
||||
}
|
||||
|
||||
async theData() {
|
||||
const resp = await fetch(this.url);
|
||||
console.assert(resp.status == 200, "failed to get it");
|
||||
this.items = await resp.json();
|
||||
return this.items;
|
||||
}
|
||||
|
||||
async oneThing() {
|
||||
this.item = await this.theData();
|
||||
console.log("ITEMS", this.items);
|
||||
return this.item;
|
||||
}
|
||||
}
|
||||
54
static/reset.css
Normal file
54
static/reset.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/* 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…
Add table
Add a link
Reference in a new issue