You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
3.5 KiB
197 lines
3.5 KiB
:root {
|
|
--color-border: hsl(0, 0%, 50%);
|
|
--border-radius: 5px;
|
|
--text: 0;
|
|
--value-scale: 12%;
|
|
}
|
|
|
|
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: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
blockstart block > content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
blockstart a {
|
|
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
|
}
|
|
|
|
blockstart block {
|
|
--spacing: space-evenly;
|
|
--value: 9;
|
|
--w: unset;
|
|
--h: unset;
|
|
--pad: unset;
|
|
|
|
|
|
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;
|
|
width: var(--w);
|
|
min-width: var(--w);
|
|
max-width: var(--w);
|
|
height: var(--h);
|
|
min-height: var(--h);
|
|
max-height: var(--h);
|
|
padding: var(--pad);
|
|
}
|
|
|
|
blockstart block > * {
|
|
--spacing: flex-start;
|
|
--value: 9;
|
|
--w: unset;
|
|
--h: unset;
|
|
--pad: unset;
|
|
|
|
background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale)));
|
|
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
justify-content: var(--spacing);
|
|
align-self: stretch;
|
|
flex-direction: column;
|
|
margin: 2px;
|
|
width: var(--w);
|
|
min-width: var(--w);
|
|
max-width: var(--w);
|
|
height: var(--h);
|
|
min-height: var(--h);
|
|
max-height: var(--h);
|
|
padding: var(--pad);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
blockstart .center-self {
|
|
align-self: center;
|
|
}
|
|
|
|
blockstart .vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
blockstart .horizontal {
|
|
flex-direction: row;
|
|
}
|
|
|
|
blockstart grid {
|
|
--cols: 1fr 1fr;
|
|
--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 {
|
|
--w: unset;
|
|
--h: unset;
|
|
--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: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
blockstart .compact {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
blockstart .compact > * {
|
|
flex: unset;
|
|
}
|
|
|