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

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;
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;
}