@ -1,62 +1,22 @@
/ *
IDEA :
* the black of the screen is litteraly the absence of light ,
then the serif in white become an exact representation of the changing pattern
of moonlight through the tree
* /
: root {
/* --- COLORS --- */
/ * --c-dark : hsl ( 60 , 2 % , 18 % ) ;
--c-soft : hsl ( 60 , 6 % , 68 % ) ;
--c-light : hsl ( 96 , 18 % , 92 % ) ; * /
/* from image sampling */
/* char: low contrast, background on which we can put white */
/* still we could switch the hue to either a blue or a redish */
--c-dark : hsl ( 62 , 8 % , 16 % ) ; /* darker than sampling feel */
--c-soft : hsl ( 62 , 30 % , 88 % ) ; /* back lit turn off on dark feel */
--c-soft-text : hsl ( 62 , 4 % , 68 % ) ; /* back lit turn off on dark feel */
--c-light : hsl ( 92 , 36 % , 90 % ) ;
/* old color theme */
/ * --c-light : hsl ( 34 , 44 % , 82 % ) ;
/* --c-light: hsl(48, 36%, 86%); */
/* inverted */
/ * --c-dark : hsl ( 96 , 20 % , 94 % ) ;
--c-soft : hsl ( 60 , 6 % , 40 % ) ;
--c-light : hsl ( 60 , 2 % , 25 % ) ; * /
/* --- FONT-SIZES --- */
--fs-display : clamp ( 3rem , 8 vw, 7rem ) ;
--fs-display : clamp ( 3rem , 6vw , 7rem ) ;
/* --fs-big: 2.35rem; */
--fs-big : 2 . 4rem ;
--fs-up : 1 . 35rem ;
--fs-mono-big : calc ( var ( --fs-big ) * 1 ) ; /* match title size */
--fvs-mono-big : 'wght' 22 0, 'wdth' 100 ;
--fvs-mono-big : 'wght' 180 , 'wdth' 100 ;
--fs-mono : 0 . 725rem ;
/* --fs-mono: 0.75rem; */
--fvs-mono : 'wght' 42 0, 'wdth' 140 ;
--fvs-mono : 'wght' 360 , 'wdth' 140 ;
--lh : 1 . 35rem ;
/* --- SPACES --- */
/* --border-width: 0.08rem; */
--border-width : 1 . 5px ;
--border : var ( --border-width ) solid var ( --c-dark ) ;
}
html {
background : var ( --c-light ) ;
/* background: linear-gradient(to bottom, var(--c-light), hsl(34, 44%, 82%)); */
color : var ( --c-dark ) ;
font-family : "unoversoneueGX" ;
/* bigger than default (16px --> 20px) */
font-size : 1 . 25em ;
@ -65,12 +25,54 @@ html{
body {
font-size : inherit ;
line-height : var ( --lh ) ;
/* slitghly brown forest light, low contrast */
--clr-text : hsl ( 62 , 6 % , 24 % ) ;
--clr-soft-text : rgba ( 0 , 0 , 0 , 0 . 25 ) ;
--clr-header : var ( --clr-text ) ;
/* day -- colored */
/ * --clr-soft : hsl ( 60 , 32 % , 84 % ) ;
--clr-back : hsl ( 90 , 32 % , 86 % ) ; * /
/* day -- grey green */
/ * --clr-soft : hsl ( 54 , 32 % , 78 % ) ;
--clr-back : hsl ( 66 , 18 % , 82 % ) ; * /
--clr-soft : hsl ( 54 , 32 % , 82 % ) ;
--clr-back : hsl ( 82 , 16 % , 84 % ) ;
/ * --clr-soft : hsl ( 60 , 32 % , 78 % ) ;
--clr-back : hsl ( 48 , 24 % , 82 % ) ; * /
background : var ( --clr-back ) ;
color : var ( --clr-text ) ;
--border-width : 1px ;
--border : var ( --border-width ) solid var ( --clr-text ) ;
}
body . night {
/* slitghly cyan moon reflection, low contrast */
--clr-text : hsl ( 160 , 6 % , 82 % ) ;
--clr-soft-text : rgba ( 255 , 255 , 255 , 0 . 35 ) ;
--clr-header : hsl ( 320 , 4 % , 12 % ) ;
/* night -- colored */
/ * --clr-soft : hsl ( 340 , 4 % , 30 % ) ;
--clr-back : hsl ( 240 , 30 % , 18 % ) ; * /
/* night -- grey purple */
--clr-soft : hsl ( 350 , 3 % , 42 % ) ;
--clr-back : hsl ( 252 , 15 % , 22 % ) ;
}
/* link */
a ,
a : visited {
color : currentColor ;
/* color: yellowgreen; */
/* text-decoration-thickness: var(--border-width); */
text-decoration-thickness : 1px ;
}
@ -81,7 +83,19 @@ a:visited{
/* selection */
* :: selection {
background : white ;
color : var ( --c-dark ) ;
color : var ( --clr-text ) ;
}
. night * :: selection {
background : white ;
color : var ( --clr-back ) ;
}
. moon-phased-typo > * {
opacity : 0 ;
transition : opacity 0 . 25s ;
}
. moon-phased-typo > * . computed {
opacity : 1 ;
}
/ * CONSTANT VERTICAL RYTHM
@ -152,28 +166,33 @@ section.data-section{
border-top : var ( --border ) ;
padding : calc ( var ( --lh ) * 2 ) 0 calc ( var ( --lh ) * 3 ) ;
}
section . data-section :: before {
section . data-section :: after {
font-family : 'Inconsolata' , monospace ;
/* font-variation-settings: 'wght' 460, 'wdth' 150; */
font-variation-settings : var ( --fvs-mono ) ;
font-size : var ( --fs-mono ) ;
letter-spacing : 0 . 04em ;
text-transform : uppercase ;
}
section . data-section :: before {
content : attr ( data-box-title ) ;
background : var ( --c -dark ) ;
color : var ( --c -light ) ;
background : var ( --c lr-text ) ;
color : var ( --c lr-back ) ;
position : absolute ;
top : calc ( -1 * var ( --border-width ) ) ;
left : 0 ;
padding : 0 . 2em calc ( var ( --lh ) / 2 ) ;
display : flex ;
align-items : center ;
outline : calc ( var ( --lh ) / 2 ) solid var ( --c -light ) ;
outline : calc ( var ( --lh ) / 2 ) solid var ( --c lr-back ) ;
line-height : 1 . 25 ;
}
section > a : first-of-type {
display : block ;
margin-top : -200px ;
height : 200px ;
}
/ * INTRO TEXT
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
@ -192,36 +211,35 @@ section.data-section::before {
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
body > footer {
background : var ( --c -soft) ;
background : var ( --c lr -soft) ;
font-size : 0 . 625rem ! important ;
border-top : var ( --border ) ;
/* text-align: right; */
border-color : var ( --clr-header ) ;
display : grid ;
grid-template-columns : 1fr 1fr ;
}
body > footer > . additionnal-info {
border-right : var ( --border ) ;
color : var ( --c-soft-text ) ;
}
body > footer > * {
padding : var ( --lh ) ;
}
@ media only screen and ( max-width : 60 0px) {
@ media only screen and ( max-width : 92 0px) {
body > footer {
grid-template-columns : 1fr ;
}
body > footer > . additionnal-info {
border-right : none ;
border-bottom : var ( --border ) ;
body > footer > p : not ( : last-of-type ) {
padding-bottom : 0 ;
}
}
/ * RESPONSIVE NESS
/ * RESPONSIVE
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
@ media only screen and ( max-width : 600px ) {
/* mobile */
@ media only screen and ( max-width : 680px ) {
: root {
--fs-big : 2rem ;
}
html {
font-size : 1 . 125em ;
}
Dorian
3 years ago