www.moonwalks.be/theme/static/css/main.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%, 18%);
  --clr-soft-text: rgba(0,0,0,0.25);
  --clr-header: black;

  --clr-soft: hsl(54, 40%, 82%);
  /* --clr-back: hsl(82, 24%, 84%); */
  --clr-back: hsl(92, 24%, 84%);

  /* a bit more solarized */
  /* --clr-soft: hsl(48, 46%, 82%); */
  /* --clr-back: hsl(72, 32%, 84%); */

  --clr-soft: hsl(48, 46%, 84%);
  
  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%, 86%);
  --clr-soft-text: rgba(255,255,255,0.35);
  --clr-header: hsl(320, 4%, 12%);
  --clr-header: black;

  /* night -- grey purple */
  /* --clr-soft: hsl(290, 10%, 38%); */
  --clr-back: hsl(252, 30%, 18%);

}

/* 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;
  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);
}
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.data-section::after{
  color: white;
}
.night section.data-section::after{
  color: var(--clr-header);
}

/* 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{
  background: var(--clr-soft);
  border: var(--border);
  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;
}

@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;
  }
}

/* RESPONSIVE
 =========================================================================== */

/* mobile */
@media only screen and (max-width: 680px) {
  :root{
    --fs-big: 2rem;
  }
  html{
    font-size: 1.125em;
  }
}