You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

322 lines
6.5 KiB
CSS

:root{
/* --- FONT-SIZES --- */
3 years ago
--fs-display: clamp(3rem, 6vw, 7rem);
--fs-big: 2.4rem;
--fs-up: 1.35rem;
--fs-mono-big: calc(var(--fs-big) * 1); /* match title size */
3 years ago
--fvs-mono-big: 'wght' 180, 'wdth' 100;
--fs-mono: 0.725rem;
/* --fs-mono: 0.75rem; */
3 years ago
--fvs-mono: 'wght' 360, 'wdth' 140;
--lh: 1.35rem;
}
html{
font-family: "unoversoneueGX";
/* bigger than default (16px --> 20px) */
font-size: 1.25em;
}
body{
font-size: inherit;
line-height: var(--lh);
3 years ago
/* slitghly brown forest light, low contrast */
--clr-text: hsl(62, 6%, 18%);
3 years ago
--clr-soft-text: rgba(0,0,0,0.25);
--clr-header: black;
3 years ago
--clr-soft: hsl(54, 40%, 82%);
/* --clr-back: hsl(82, 24%, 84%); */
--clr-back: hsl(92, 24%, 84%);
3 years ago
/* a bit more solarized */
/* --clr-soft: hsl(48, 46%, 82%); */
/* --clr-back: hsl(72, 32%, 84%); */
--clr-soft: hsl(48, 46%, 84%);
3 years ago
background: var(--clr-back);
color: var(--clr-text);
3 years ago
--border-width: 1px;
--border: var(--border-width) solid var(--clr-text);
}
body.night{
/* slitghly cyan moon reflection, low contrast */
--clr-text: hsl(160, 6%, 86%);
3 years ago
--clr-soft-text: rgba(255,255,255,0.35);
--clr-header: hsl(320, 4%, 12%);
--clr-header: black;
3 years ago
/* night -- grey purple */
/* --clr-soft: hsl(290, 10%, 38%); */
--clr-back: hsl(252, 30%, 18%);
3 years ago
}
/* link */
a,
a:visited{
color: currentColor;
text-decoration-thickness: var(--border-width);
}
:is(a, a:visited):hover{
text-decoration: none;
}
hr{
border: none;
border: var(--border);
margin: var(--lh) 0;
}
/* selection */
*::selection{
background: white;
3 years ago
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;
}
h2.phase-name {
text-transform: capitalize;
}
.full-moon-fvs{
font-variation-settings: "SERI"100, "slnt"0;
}
.full-moon-slanted-fvs{
font-variation-settings: "SERI"100, "slnt"-100;
}
.new-moon-fvs{
font-variation-settings: "SERI"0, "slnt"0;
}
.new-moon-slanted-fvs{
font-variation-settings: "SERI"0, "slnt"100;
}
/* CONSTANT VERTICAL RYTHM
=========================================================================== */
.text-content :is(h1,h2,h3,h4,h5,h6){
margin: calc(var(--lh) * 2) 0 calc(var(--lh) * 0.5);
font-size: var(--fs-big);
line-height: calc(var(--lh) * 2);
}
.text-content p{
margin: calc(var(--lh) * 1) 0;
}
.text-content :is(h1,h2,h3,h4,h5,h6) + p{
margin: calc(var(--lh) * 0.5) 0;
}
.text-content ul{
margin: calc(var(--lh) * 1) 0;
padding-left: calc(var(--lh) * 1);
}
.text-content :is(p,blockquote):first-child{
margin-top: 0;
}
.text-content :is(h1,h2,h3,h4,h5,h6):first-child{
margin-top: calc(var(--lh) * 0.5);
}
.text-content :is(h1,h2,h3,h4,h5,h6,p,blockquote):last-child{
margin-bottom: 0;
}
.text-content{
max-width: 36em;
}
/* FONTS UTILITIES
=========================================================================== */
/* mono */
.mono{
font-family: 'Inconsolata', monospace;
font-variation-settings: var(--fvs-mono);
font-size: var(--fs-mono);
line-height: 1.25;
}
.mono-big{
font-family: 'Inconsolata', monospace;
font-size: var(--fs-mono-big);
font-variation-settings: var(--fvs-mono-big);
line-height: calc(var(--lh) * 1.5);
}
/* bigger text */
.font-up{
font-size: var(--fs-up);
}
.font-big{
font-size: var(--fs-big);
line-height: calc(var(--lh) * 1.5);
}
/* SECTIONS TITLES
=========================================================================== */
/* section title */
section.data-section{
position: relative;
box-sizing: border-box;
border-top: var(--border);
padding: calc(var(--lh) * 2) 0 calc(var(--lh) * 2);
}
3 years ago
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;
3 years ago
content: attr(data-box-title);
3 years ago
background: var(--clr-text);
color: var(--clr-back);
position: absolute;
top: calc(-1 * var(--border-width));
left: 0;
padding: 0.2em calc(var(--lh) / 2);
display: flex;
align-items: center;
3 years ago
outline: calc(var(--lh) / 2) solid var(--clr-back);
line-height: 1.25;
}
section.data-section::after{
color: white;
}
.night section.data-section::after{
color: var(--clr-header);
3 years ago
}
/* INTRO TEXT
=========================================================================== */
/* first sentence */
.about-box > p:first-child{
font-size: var(--fs-up);
margin-bottom: 0;
line-height: 1.1;
}
.bio-box{
margin-top: calc(var(--lh) * 1);
/* display: grid;
grid-template-columns: calc(var(--lh) * 4) 1fr;
gap: calc(var(--lh) * 0.5); */
}
/* svg */
.bio-box__leaves > svg{
fill: var(--clr-text);
stroke:none;
stroke-width:0;
fill-opacity:1;
stroke-miterlimit:4;
stroke-dasharray:none;
}
.bio-box__text{
border-left: var(--border);
padding-left: calc(var(--lh) * 0.5);
}
/* FOOTER
=========================================================================== */
button{
/* reset buton style */
border: none;
background-color: transparent;
font-family: 'Inconsolata', monospace;
font-size: var(--fs-mono-big);
font-variation-settings: var(--fvs-mono-big);
color: currentColor;
cursor: pointer;
box-sizing: border-box;
/* flex centering */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
dialog.footer{
3 years ago
background: var(--clr-soft);
border: var(--border);
3 years ago
border-color: var(--clr-header);
padding: var(--lh);
color: var(--clr-header);
}
dialog.footer .close-footer{
position: absolute;
top: 0;
right: 0;
height: calc(var(--lh) * 2);
width: calc(var(--lh) * 2);
border-left: var(--border);
border-bottom: var(--border);
border-color: var(--clr-header);
}
dialog.footer p:first-of-type{
margin-top: 0;
margin-right: calc(var(--lh) * 2);
}
dialog.footer p:last-of-type{
font-family: 'Inconsolata', monospace;
font-variation-settings: var(--fvs-mono);
font-size: var(--fs-mono);
line-height: 1.25;
}
dialog.footer::backdrop{
background: black;
opacity: 0.25;
}
3 years ago
@media only screen and (max-width: 920px) {
dialog.footer{
padding: var(--lh) calc(var(--lh) / 2);
margin: auto calc(var(--lh) / 2);
max-width: none;
}
}
3 years ago
/* RESPONSIVE
=========================================================================== */
3 years ago
/* mobile */
@media only screen and (max-width: 680px) {
:root{
--fs-big: 2rem;
}
html{
font-size: 1.125em;
}
}