This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
 
 
 
 
bandolier-template/static/blockstart.css

244 lines
4.6 KiB

: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: 100%;
min-height: 100%;
}
blockstart * {
font-size: 1.1em;
}
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);
}