Browse Source

Bring over the new blockstart just for completeness.

master
Zed A. Shaw 2 months ago
parent
commit
9a13aced4f
  1. 167
      static/blockstart.css

167
static/blockstart.css

@ -1,18 +1,65 @@
:root {
--color-border: hsl(0, 0%, 50%);
--border-radius: 5px;
--value0: hsl(0, 0%, 0%);
--value1: hsl(0, 0%, 11%);
--value2: hsl(0, 0%, 22%);
--value3: hsl(0, 0%, 33%);
--value4: hsl(0, 0%, 44%);
--value5: hsl(0, 0%, 55%);
--value6: hsl(0, 0%, 66%);
--value7: hsl(0, 0%, 77%);
--value8: hsl(0, 0%, 88%);
--value9: hsl(0, 0%, 100%);
--text: 0;
}
body {
color: hsl(0, 0%, calc(var(--text) * 11%));
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0px;
margin: 0px;
}
content {
display: flex;
flex-direction: column;
}
a {
color: hsl(0, 0%, calc(var(--text) * 11%));
}
block {
color: hsl(0, 0%, calc(var(--text) * 11%));
display: flex;
width: 100%;
--spacing: space-evenly;
justify-content: var(--spacing);
flex-direction: column;
}
block > * {
color: hsl(0, 0%, calc(var(--text) * 11%));
display: flex;
flex: 1 1 auto;
--spacing: flex-start;
justify-content: var(--spacing);
align-self: stretch;
flex-direction: column;
margin: 2px;
}
.wide {
width: 100%;
}
.no-flex {
display: block;
flex: unset;
flex-direction: unset;
align-self: unset;
}
.center {
@ -21,6 +68,10 @@ block > * {
align-self: center;
}
.center-text > * {
text-align: center;
}
.center-self {
align-self: center;
}
@ -34,17 +85,66 @@ block > * {
}
grid {
--cols: 1fr 1fr;
--rows: auto;
--gap: 0.5rem;
color: hsl(0, 0%, calc(var(--text) * 11%));
display: grid;
grid-gap: var(--gap);
grid-template-columns: var(--cols);
grid-template-rows: var(--rows);
}
spacer {
--height: 3rem;
display: flex;
stack {
color: hsl(0, 0%, calc(var(--text) * 11%));
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: "cover";
}
stack > * {
color: hsl(0, 0%, calc(var(--text) * 11%));
width: 100%;
height: 100%;
position: relative;
grid-area: cover;
}
stack > .top {
z-index: 10;
}
hr {
--height: 1rem;
min-height: var(--height);
visibility: hidden;
}
hr.huge {
--height: 3rem;
}
shape {
--w: 100%;
--h: 100%;
--value: 4;
color: hsl(0, 0%, calc(var(--text) * 11%));
background-color: hsl(0, 0%, calc(var(--value) * 11%));
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;
}
.debug {
border: 1px solid red;
@ -55,7 +155,19 @@ spacer {
}
.pad {
padding: 1rem;
--pad: 1rem;
padding: var(--pad);
}
.sized {
--w: 100%;
--h: 100%;
width: var(--w);
min-width: var(--w);
max-width: var(--w);
height: var(--h);
min-height: var(--h);
max-height: var(--h);
}
.border {
@ -64,36 +176,25 @@ spacer {
}
.solid {
background-color: var(--value7);
--value: 8;
background-color: hsl(0, 0%, calc(var(--value) * 11%));
}
.solid-0 {
background-color: var(--value0);
}
.solid-1 {
background-color: var(--value1);
}
.solid-2 {
background-color: var(--value2);
}
.solid-3 {
background-color: var(--value3);
}
.solid-4 {
background-color: var(--value4);
}
.solid-5 {
background-color: var(--value5);
}
.solid-6 {
background-color: var(--value6);
}
.solid-7 {
background-color: var(--value7);
.dots {
--pat-val: 7;
background-image: radial-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px);
background-size: calc(10 * 1px) calc(10 * 1px);
}
.solid-8 {
background-color: var(--value8);
.lines {
--pat-val: 7;
background-image: linear-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px), linear-gradient(to right, hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px);
background-size: 10px 10px;
}
.solid-9 {
background-color: var(--value9);
.stripes {
--pat-val: 7;
background-image: linear-gradient(90deg, transparent 50%, hsl(0, 0%, calc(var(--pat-val) * 11%)) 50%);
background-size: 10px 10px;
}

Loading…
Cancel
Save