@ -1,8 +1,28 @@
: root {
: root {
--color-border : hsl ( 0 , 0 % , 5 0% ) ;
--color-border : hsl ( 0 , 0 % , 0 % ) ;
--border-radius : 5px ;
--border-radius : 5px ;
--text : 0 ;
--text : 0 ;
--value : 9 ;
--value-scale : 12 % ;
--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 {
blockstart {
@ -20,9 +40,16 @@ blockstart {
min-height : 100 % ;
min-height : 100 % ;
}
}
blockstart block > content {
blockstart * {
display : flex ;
font-size : 1 . 1em ;
flex-direction : column ;
}
blockstart > * + * {
margin-bottom : var ( --bottom-margin ) ;
}
blockstart > * : last-child {
margin-bottom : 0px ;
}
}
blockstart a {
blockstart a {
@ -31,47 +58,41 @@ blockstart a {
blockstart block {
blockstart block {
--spacing : space-evenly ;
--spacing : space-evenly ;
--value : 9 ;
--w : unset ;
--h : unset ;
--pad : unset ;
display : flex ;
display : flex ;
background-color : hsl ( 0 , 0 % , calc ( var ( --value ) * var ( --value-scale ) ) ) ;
background-color : hsl ( 0 , 0 % , calc ( var ( --value ) * var ( --value-scale ) ) ) ;
color : hsl ( 0 , 0 % , calc ( var ( --text ) * var ( --value-scale ) ) ) ;
color : hsl ( 0 , 0 % , calc ( var ( --text ) * var ( --value-scale ) ) ) ;
justify-content : var ( --spacing ) ;
justify-content : var ( --spacing ) ;
flex-direction : column ;
flex-direction : column ;
padding : var ( --pad ) ;
width : var ( --w ) ;
width : var ( --w ) ;
min-width : var ( --w ) ;
min-width : var ( --w ) ;
max-width : var ( --w ) ;
max-width : var ( --w ) ;
height : var ( --h ) ;
height : var ( --h ) ;
min-height : var ( --h ) ;
min-height : var ( --h ) ;
max-height : var ( --h ) ;
max-height : var ( --h ) ;
padding : var ( --pad ) ;
}
}
blockstart block > * {
blockstart block > * {
--spacing : flex-start ;
--spacing : flex-start ;
--value : 9 ;
--pad : 10px ;
--w : unset ;
--w : initial ;
--h : unset ;
--h : initial ;
--pad : unset ;
background-color : hsl ( 0 , 0 % , calc ( var ( --value ) * var ( --value-scale ) ) ) ;
background-color : hsl ( 0 , 0 % , calc ( var ( --value ) * var ( --value-scale ) ) ) ;
color : hsl ( 0 , 0 % , calc ( var ( --text ) * var ( --value-scale ) ) ) ;
color : hsl ( 0 , 0 % , calc ( var ( --text ) * var ( --value-scale ) ) ) ;
display : flex ;
display : flex ;
flex : 1 1 auto ;
justify-content : var ( --spacing ) ;
justify-content : var ( --spacing ) ;
align-self : stretch ;
align-self : stretch ;
flex-direction : column ;
flex-direction : column ;
margin : 2px ;
padding : var ( --pad ) ;
width : var ( --w ) ;
width : var ( --w ) ;
min-width : var ( --w ) ;
min-width : var ( --w ) ;
max-width : var ( --w ) ;
max-width : var ( --w ) ;
height : var ( --h ) ;
height : var ( --h ) ;
min-height : var ( --h ) ;
min-height : var ( --h ) ;
max-height : var ( --h ) ;
max-height : var ( --h ) ;
padding : var ( --pad ) ;
}
}
blockstart stack {
blockstart stack {
@ -111,8 +132,10 @@ blockstart .center {
align-self : center ;
align-self : center ;
}
}
blockstart . center-text > * {
blockstart . center-text {
text-align : center ;
text-align : center ;
justify-content : center ;
align-items : center ;
}
}
blockstart . center-self {
blockstart . center-self {
@ -128,7 +151,7 @@ blockstart .horizontal {
}
}
blockstart grid {
blockstart grid {
--cols : 1fr 1fr ;
--cols : auto ;
--rows : auto ;
--rows : auto ;
--gap : 0 . 5rem ;
--gap : 0 . 5rem ;
@ -152,8 +175,6 @@ blockstart hr.huge {
}
}
blockstart shape {
blockstart shape {
--w : unset ;
--h : unset ;
--value : 2 ;
--value : 2 ;
--text : 9 ;
--text : 9 ;
--pad : 1rem ;
--pad : 1rem ;
@ -183,7 +204,7 @@ blockstart .debug > * {
}
}
blockstart . border {
blockstart . border {
border : 1 px solid var ( --color-border ) ;
border : 2 px solid var ( --color-border ) ;
border-radius : var ( --border-radius ) ;
border-radius : var ( --border-radius ) ;
}
}
@ -194,3 +215,26 @@ blockstart .compact {
blockstart . compact > * {
blockstart . compact > * {
flex : unset ;
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 % ) ;
}