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 ) ;
}
. 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 )
}
h1 , h2 , h3 , h4 , h5 {
font-family : "Fira Mono" ;
padding-top : 1em ;
padding-bottom : 0 . 618em ;
text-transform : uppercase ;
}
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 ;
}
/ *
* NAV
* /
nav h1 {
font-size : var ( --u0 ) ;
margin : 0rem ;
}
/ *
* 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); */
}
input [ type = "text" ] :: placeholder ,
input [ type = "password" ] :: placeholder {
color : var ( --c-primary-highlight ) ;
opacity : 50 % ;
}
button , . botton {
font-family : "Fira Mono" ;
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); */
}
button : active , . botton : active {
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 ;
}
/ *
* 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 ) ;
}
. flex {
display : flex ;
align-items : center ;
justify-content : space-between ;
flex-wrap : wrap ;
}
. flex > * {
margin : var ( --u0 ) ;
}
. flex > . spacer {
flex : 1 ;
}
. grid {
display : flex ;
justify-content : flex-start ;
flex-wrap : wrap ;
}
. 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 > * {
width : 10rem ;
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-11 16:39:34 +01:00
. input-icon > form > button {
2019-11-26 16:21:29 +01:00
margin : 0px ;
border-top-left-radius : 0px ;
border-bottom-left-radius : 0px ;
box-shadow : none ;
}
2020-01-11 16:39:34 +01:00
2019-11-26 16:21:29 +01:00
/ *
* CONTENT
* /
. price {
opacity : 75 % ;
font-size : var ( --u1 ) ;
text-align : right ;
}
2019-12-08 12:24:28 +01:00
/ *
* Prototype stuff
* /
. dialog {
display : none ; /* Hidden by default */
position : fixed ; /* Stay in place */
z-index : 1 ;
left : 0 ;
top : 0 ;
width : 100 % ; /* Full width */
height : 100 % ; /* Full height */
overflow : auto ; /* Enable scroll if needed */
padding-top : 60px ;
}
. dialog-content {
background-color : var ( --c-black ) ;
margin : 5 % auto 15 % auto ; /* 5% from the top, 15% from the bottom and centered */
border : 1px solid # 888 ;
width : 50 % ; /* Could be more or less, depending on screen size */
}