2019-11-26 16:21:29 +01:00
: root {
font-family : "Fira Sans" ;
line-height : 1 . 15 ;
--u5 : calc ( 1em * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u4 : calc ( 1em * 1 . 5 * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u3 : calc ( 1em * 1 . 5 * 1 . 5 * 1 . 5 ) ;
--u2 : calc ( 1em * 1 . 5 * 1 . 5 ) ;
--u1 : calc ( 1em * 1 . 5 ) ;
--u0 : calc ( 1em ) ;
--u-1 : calc ( 1em * 0 . 666 ) ;
--u-2 : calc ( 1em * 0 . 666 * 0 . 666 ) ;
--u-3 : calc ( 1em * 0 . 666 * 0 . 666 * 0 . 666 ) ;
--u-4 : calc ( 1em * 0 . 666 * 0 . 666 * 0 . 666 * 0 . 666 ) ;
--root-c-base : # ecf0f1 ;
--root-c-base-highlight : # bdc3c7 ;
--root-c-primary : # 1abc9c ;
--root-c-primary-highlight : # 16a085 ;
--root-c-secondary : # 9b59b6 ;
--root-c-secondary-highlight : # 8e44ad ;
--root-c-black : # 2c3e50 ;
--root-c-black-highlight : # 34495e ;
--c-base : var ( --root-c-base ) ;
--c-base-highlight : var ( --root-c-base-highlight ) ;
--c-primary : var ( --root-c-primary ) ;
--c-primary-highlight : var ( --root-c-primary-highlight ) ;
--c-secondary : var ( --c-secondary ) ;
--c-secondary-highlight : var ( --root-c-secondary-highlight ) ;
--c-black : var ( --root-c-black ) ;
--c-black-highlight : var ( --root-c-black-highlight ) ;
2020-01-12 17:59:56 +01:00
--c-error : # c0392b ;
2019-11-26 16:21:29 +01:00
}
. primary {
--c-base : var ( --root-c-base ) ;
--c-base-highlight : var ( --root-c-base-highlight ) ;
--c-primary : var ( --root-c-primary ) ;
--c-primary-highlight : var ( --root-c-primary-highlight ) ;
--c-secondary : var ( --c-secondary ) ;
--c-secondary-highlight : var ( --root-c-secondary-highlight ) ;
--c-black : var ( --root-c-black ) ;
--c-black : var ( --root-c-black-highlight ) ;
}
. secondary {
--c-base : var ( --root-c-base ) ;
--c-base-highlight : var ( --root-c-base-highlight ) ;
--c-primary : var ( --root-c-secondary ) ;
--c-primary-highlight : var ( --root-c-secondary-highlight ) ;
--c-secondary : var ( --root-c-primary ) ;
--c-secondary-highlight : var ( --root-c-primary-highlight ) ;
--c-black : var ( --root-c-black ) ;
--c-black-highlight : var ( --root-c-black-highlight ) ;
}
. inverted {
--c-base : var ( --root-c-black ) ;
--c-base-highlight : var ( --root-c-black-highlight ) ;
--c-primary : var ( --root-c-primary ) ;
--c-primary-highlight : var ( --root-c-primary-highlight ) ;
--c-secondary : var ( --c-secondary ) ;
--c-secondary-highlight : var ( --root-c-secondary-highlight ) ;
--c-black : var ( --root-c-base ) ;
--c-black-highlight : var ( --root-c-base-highlight ) ;
}
* {
margin : 0em ;
padding : 0em ;
box-sizing : border-box ;
}
html , body {
font-size : var ( --u0 ) ;
height : 100 % ;
background-color : var ( --c-base ) ;
color : var ( --c-black )
}
2020-01-12 15:52:45 +01:00
main {
min-height : 100 % ;
}
2019-11-26 16:21:29 +01:00
h1 , h2 , h3 , h4 , h5 {
font-family : "Fira Mono" ;
2020-01-12 15:56:26 +01:00
padding-top : var ( --u0 ) ;
padding-bottom : var ( --u-1 ) ;
2019-11-26 16:21:29 +01:00
text-transform : uppercase ;
}
2020-01-12 15:52:45 +01:00
p {
2020-01-12 15:56:26 +01:00
padding-top : var ( --u0 ) ;
padding-bottom : var ( --u0 ) ;
2020-01-12 15:52:45 +01:00
}
2019-11-26 16:21:29 +01:00
h1 {
font-size : var ( --u2 ) ;
}
h2 {
font-size : var ( --u1 ) ;
}
h3 , h4 , h5 {
font-size : var ( --u0 ) ;
}
img {
width : 100 % ;
object-fit : cover ;
}
li {
list-style-type : none ;
}
2020-01-12 15:52:45 +01:00
table {
width : 100 % ;
border-collapse : collapse ;
}
table td ,
table th {
padding : var ( --u0 ) ;
text-align : center ;
}
table th {
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
table tr : nth-child ( 2n + 1 ) {
background-color : var ( --c-base-highlight ) ;
}
2019-11-26 16:21:29 +01:00
/ *
* NAV
* /
2020-01-12 15:52:45 +01:00
nav {
}
2019-11-26 16:21:29 +01:00
nav h1 {
font-size : var ( --u0 ) ;
margin : 0rem ;
}
2020-01-12 15:52:45 +01:00
nav li {
display : flex ;
flex-direction : column ;
}
nav li li {
margin-left : var ( --u0 ) ;
}
nav li a {
padding : var ( --u0 ) ;
transition : all 0 . 1s ease-out ;
}
2019-11-26 16:21:29 +01:00
2020-01-12 15:52:45 +01:00
nav li a : hover ,
nav li a . selected {
padding : var ( --u0 ) ;
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
2019-11-26 16:21:29 +01:00
/ *
* FOOTER
* /
footer {
padding-top : var ( --u3 ) ;
padding-bottom : var ( --u1 ) ;
}
/ *
* INPUTS
* /
input [ type = "text" ] ,
input [ type = "password" ] {
background-color : var ( --c-base ) ;
border : none ;
border-radius : var ( --u-2 ) ;
margin-top : var ( --u0 ) ;
margin-bottom : var ( --u0 ) ;
padding : var ( --u0 ) ;
font-size : var ( --u0 ) ;
color : var ( --c-black ) ;
/* box-shadow: var(--s-0-secondary); */
}
2020-01-12 17:59:56 +01:00
input [ type = "text" ] : invalid ,
input [ type = "password" ] : invalid {
background-color : var ( --c-error ) ;
color : var ( --c-base ) ;
}
2019-11-26 16:21:29 +01:00
input [ type = "text" ] :: placeholder ,
input [ type = "password" ] :: placeholder {
color : var ( --c-primary-highlight ) ;
opacity : 50 % ;
}
2020-01-12 15:52:45 +01:00
button , . button {
2019-11-26 16:21:29 +01:00
font-family : "Fira Mono" ;
2020-01-12 15:52:45 +01:00
font-weight : bold ;
2019-11-26 16:21:29 +01:00
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
border : none ;
border-radius : var ( --u-2 ) ;
margin-bottom : var ( --u0 ) ;
margin-top : var ( --u0 ) ;
padding : var ( --u0 ) ;
min-width : 10em ;
font-family : "Fira Mono" ;
text-transform : uppercase ;
font-size : var ( --u0 ) ;
/* box-shadow: var(--s-0-secondary); */
}
2020-01-12 15:52:45 +01:00
button : active , . button : active {
2019-11-26 16:21:29 +01:00
background-color : var ( --c-primary-highlight ) ;
}
input [ type = "text" ] ,
input [ type = "password" ] ,
button ,
. button {
transition : all 0 . 1s ease-out ;
}
label {
display : block ;
min-width : 10em ;
2020-01-12 15:52:45 +01:00
font-weight : bold ;
2019-11-26 16:21:29 +01:00
}
/ *
* HERO
* /
. hero {
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
. hero-black {
background-color : var ( --c-black ) ;
color : var ( --c-base ) ;
}
/ *
* LAYOUT
* /
. content-width {
max-width : 80rem ;
margin-left : auto ;
margin-right : auto ;
padding-left : var ( --u0 ) ;
padding-right : var ( --u0 ) ;
}
2020-01-12 15:52:45 +01:00
. bar-flex {
2019-11-26 16:21:29 +01:00
display : flex ;
align-items : center ;
justify-content : space-between ;
flex-wrap : wrap ;
}
2020-01-12 15:52:45 +01:00
. bar-flex > * {
2019-11-26 16:21:29 +01:00
margin : var ( --u0 ) ;
}
2020-01-12 15:52:45 +01:00
. bar-flex > . spacer {
flex : 1 ;
}
. sidebar-layout {
display : flex ;
align-items : stretch ;
justify-content : center ;
flex-wrap : wrap ;
}
. sidebar-layout > * : nth-child ( 2 ) {
2019-11-26 16:21:29 +01:00
flex : 1 ;
}
. grid {
display : flex ;
justify-content : flex-start ;
flex-wrap : wrap ;
}
2020-01-12 15:52:45 +01:00
. grid . vertical-center {
align-items : center ;
height : 100 % ;
}
. grid . center {
justify-content : space-around ;
}
2019-11-26 16:21:29 +01:00
. grid > * {
flex : 1 ;
margin : var ( --u0 ) ;
padding : var ( --u0 ) ;
border-radius : var ( --u0 ) ;
}
. grid . base > * {
background-color : var ( --c-base ) ;
color : var ( --c-black ) ;
}
. grid . black > * {
background-color : var ( --c-black ) ;
color : var ( --c-base ) ;
}
. grid . primary > * {
background-color : var ( --c-primary ) ;
color : var ( --c-base ) ;
}
. grid . secondary > * {
background-color : var ( --c-primary-highlight ) ;
color : var ( --c-base ) ;
}
. hero-primary . grid . shadow > * {
/* box-shadow: var(--s-0-secondary); */
}
. hero-black . grid . shadow > * {
/* box-shadow: var(--s-0-secondary); */
}
. grid . s > . spacer {
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 10rem ;
max-width : 10rem ;
min-width : 7 . 5rem ;
height : 0px ;
}
. grid . s > * {
max-width : 10rem ;
min-width : 7 . 5rem ;
}
. grid . m > . spacer {
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 20rem ;
max-width : 20rem ;
min-width : 15rem ;
height : 0px ;
padding : 0px ;
}
. grid . m > * {
width : 20rem ;
max-width : 20rem ;
min-width : 15rem ;
}
. grid . l > . spacer {
box-shadow : none ;
margin : calc ( var ( --u0 ) * 2 ) ;
padding : 0px ;
width : 40rem ;
max-width : 40rem ;
min-width : 15rem ;
height : 0px ;
padding : 0px ;
}
. grid . l > * {
width : 40rem ;
max-width : 40rem ;
min-width : 15rem ;
}
. vertical-spacer . s {
min-height : 10rem ;
}
. vertical-spacer . m {
min-height : 20rem ;
}
. vertical-spacer . l {
min-height : 40rem ;
}
/ *
* Impov
* /
. input-icon {
/* box-shadow: var(--s-0-secondary); */
display : flex ;
padding : 0px ;
border-radius : var ( --u0 ) ;
}
. input-icon > input {
flex : 1 ;
margin : 0px ;
border-top-right-radius : 0px ;
border-bottom-right-radius : 0px ;
box-shadow : none ;
}
2020-01-12 15:52:45 +01:00
. input-icon > button {
2019-11-26 16:21:29 +01:00
margin : 0px ;
border-top-left-radius : 0px ;
border-bottom-left-radius : 0px ;
box-shadow : none ;
}
/ *
* CONTENT
* /
. price {
opacity : 75 % ;
font-size : var ( --u1 ) ;
text-align : right ;
}