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.
247 lines
5.2 KiB
CSS
247 lines
5.2 KiB
CSS
|
|
:root{
|
|
/* --- FONT-SIZES --- */
|
|
--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 */
|
|
--fvs-mono-big: 'wght' 180, 'wdth' 100;
|
|
|
|
--fs-mono: 0.725rem;
|
|
/* --fs-mono: 0.75rem; */
|
|
--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);
|
|
|
|
/* 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, 40%, 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;
|
|
}
|
|
:is(a, a:visited):hover{
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* selection */
|
|
*::selection{
|
|
background: white;
|
|
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
|
|
=========================================================================== */
|
|
|
|
.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);
|
|
}
|
|
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;
|
|
|
|
content: attr(data-box-title);
|
|
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;
|
|
outline: calc(var(--lh) / 2) solid var(--clr-back);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
section > a:first-of-type{
|
|
display: block;
|
|
margin-top: -200px;
|
|
height: 200px;
|
|
}
|
|
|
|
/* INTRO TEXT
|
|
=========================================================================== */
|
|
|
|
/* first sentence */
|
|
#about-section .about-box > p:first-child{
|
|
font-size: var(--fs-up);
|
|
margin-bottom: 0;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
#about-section .bio-box > p:first-child{
|
|
margin-top: calc(var(--lh) * 1);
|
|
}
|
|
|
|
/* FOOTER
|
|
=========================================================================== */
|
|
|
|
body > footer{
|
|
background: var(--clr-soft);
|
|
font-size: 0.625rem !important;
|
|
border-top: var(--border);
|
|
border-color: var(--clr-header);
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
body > footer > *{
|
|
padding: var(--lh);
|
|
}
|
|
|
|
@media only screen and (max-width: 920px) {
|
|
body > footer{
|
|
grid-template-columns: 1fr;
|
|
}
|
|
body > footer > p:not(:last-of-type){
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/* RESPONSIVE
|
|
=========================================================================== */
|
|
|
|
/* mobile */
|
|
@media only screen and (max-width: 680px) {
|
|
:root{
|
|
--fs-big: 2rem;
|
|
}
|
|
html{
|
|
font-size: 1.125em;
|
|
}
|
|
}
|