style.css

@font-face {
  font-family: atkinson;
  src: url("media/Atkinson-Hyperlegible-Regular-102a.woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: atkinson;
  src: url("media/Atkinson-Hyperlegible-Italic-102a.woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: atkinson;
  src: url("media/Atkinson-Hyperlegible-Bold-102a.woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: atkinson;
  src: url("media/Atkinson-Hyperlegible-BoldItalic-102a.woff2");
  font-weight: 700;
  font-style: italic;
}

:root {
  --c-background: hsl(240, 6%, 12%);
  --c-background-transp: hsla(240, 6%, 0%, 0.333);
  --c-background-header: hsl(240, 6%, 15%);

  --c-header-link: hsl(192, 32%, 73%);

  --c-h1: hsl(235, 62%, 85%);
  --c-h2: hsl(63, 45%, 75%);
  --c-h3: hsl(35, 50%, 64%);
  --c-h4: hsl(0, 50%, 58%);

  --hsl-text-main: 0 0% 85%;
  --c-text-main: hsl(var(--hsl-text-main));
  --c-text-muted: hsla(var(--hsl-text-main) / 60%);
  --c-link: hsl(240, 100%, 94%);
  --c-link-underline: hsla(240, 100%, 94%, 0.666);
  --c-link-hover: hsl(0, 100%, 100%);
  --c-card-text: hsla(0 0% 100% / 75%);
  --c-card-text-hover: hsl(0 0% 100%);
  --filter-card-hover: grayscale(33%) contrast(75%) brightness(50%);
  --c-bordernote: hsl(0, 0%, 35%);
}

@media (prefers-color-scheme: light) {
  :root {
    --c-background: hsl(240, 20%, 90%);
    --c-background-transp: hsla(240, 20%, 90%, 0.8);
    --c-background-header: hsl(240, 30%, 80%);

    --c-header-link: hsl(240, 40%, 40%);

    --c-h1: hsl(240, 70%, 60%);
    --c-h2: hsl(55, 96%, 27%);
    --c-h3: hsl(35, 70%, 50%);
    --c-h4: hsl(0, 70%, 50%);

    --hsl-text-main: 0 0% 15%;
    --c-text-main: hsl(var(--hsl-text-main));
    --c-text-muted: hsla(var(--hsl-text-main) / 70%);
    --c-link: hsl(240, 100%, 35%);
    --c-link-underline: hsla(240, 100%, 25%, 0.666);
    --c-link-hover: hsl(0, 0%, 0%);
    --c-card-text: hsla(0 0% 100% / 75%);
    --c-card-text-hover: hsl(0 0% 100%);
    --filter-card-hover: grayscale(33%) contrast(75%) brightness(200%);
    --c-bordernote: hsl(0, 0%, 75%);
  }
}

:root {
  --main-width: 62rem;
  --main-width-150: calc(var(--main-width) * 3 / 2);
  --main-width-75: calc(var(--main-width) * 2 / 3);
  --main-width-50: calc(var(--main-width) / 2);
  --main-width-25: calc(var(--main-width) / 4);

  --fontsize-p: clamp(1rem, 2vi, 1.5rem);
  --fontsize-h4: calc(var(--fontsize-p) * 1.25);
  --fontsize-h3: calc(var(--fontsize-h4) * 1.5);
  --fontsize-h2: calc(var(--fontsize-h3) * 1.25);
  --fontsize-h1: calc(var(--fontsize-h2) * 1.25);
  --fontsize-small: calc(var(--fontsize-p) * 0.75);

  --border-note: 2px dashed var(--c-bordernote);

  /* post card */
  --pc-togglesize: 2rem;
  --pc-togglemargin: 0.25rem;
  --pc-togglegap: 0rem;
  --pc-textwidth: calc(100% - var(--pc-togglesize) - 2 * var(--pc-togglemargin) - var(--pc-togglegap));
  --pc-toggleoffset: calc(50% - var(--pc-togglesize) / 2 - var(--pc-togglemargin));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: atkinson;
  transition: all 0.1s ease-in-out;
  /* outline: 0.5px solid #faa3; */
}

body {
  background: var(--c-background);
  color: var(--c-text-main);
}

main {
  margin-block-end: 10vb;
  margin-inline: auto;
}

p,
li:not(.post-card) {
  padding-inline: 0.75rem;
}

/* align @media with var(--main-width) */
@media (62rem <=width) {
  main {
    max-width: var(--main-width);
  }
}

@media (41rem <=width < 62rem) {
  main {
    max-width: var(--main-width-75);
    padding-inline: 0.5rem;
  }
}

@media (width < 41rem) {
  main {
    max-width: 90vb;
    padding-inline: 0.5rem;
  }
}


/* Typography */


h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-weight: 400;
}

:is(h1, .h1)+ :is(h2, .h2),
:is(h2, .h2)+ :is(h3, .h3) {
  margin-top: 0;
}

:is(h3, .h3)+ :is(h4, .h4) {
  margin-top: 0.25rem;
}

.post-list--h1 {
  color: var(--c-text-main);
  font-size: var(--fontsize-h3);
  margin-block-start: var(--fontsize-h3);
}

.post-list--a {
  color: var(--c-h1);
  font-size: var(--fontsize-h3);
  margin-block-start: var(--fontsize-h3);
  text-decoration: none;
}

.post-list--a:hover {
  text-decoration: underline;
}

.h1-supheading,
.h1-subheading {
  font-size: var(--fontsize-small);
  font-style: italic;
  padding-inline-start: 0.25rem;
}

.h1-supheading {
  margin-block-start: calc(var(--fontsize-h1) * 1.5);
  text-align: end;
}

.h1-subheading {
  margin-block-start: 0;
}

h1,
.h1 {
  color: var(--c-h1);
  font-size: var(--fontsize-h1);
  line-height: var(--fontsize-h1);
  margin-block-start: -0.333rem;
}

h2,
.h2 {
  color: var(--c-h2);
  font-size: var(--fontsize-h2);
  line-height: var(--fontsize-h2);
  margin-block-start: calc(var(--fontsize-h2) * 1.25);
}

h3,
.h3 {
  color: var(--c-h3);
  font-size: var(--fontsize-h3);
  line-height: var(--fontsize-h3);
  margin-block-start: var(--fontsize-h3);
}

h4,
.h4 {
  color: var(--c-h4);
  font-size: var(--fontsize-h4);
  line-height: var(--fontsize-h4);
  margin-block-start: var(--fontsize-h4);
}

p,
.p,
ul:not(.post-list__ul) {
  font-size: var(--fontsize-p);
  margin-block-start: var(--fontsize-p);
}

li:not(.post-card) {
  font-size: var(--fontsize-p);
  list-style-type: disc;
  margin-inline-start: 2rem;
}

code {
  background-color: var(--c-background-transp);
  border-radius: 0.25rem;
  border: 0.0625rem dashed var(--c-bordernote);
  color: var(--c-text-muted);
  font-family: monospace;
  font-size: 0.8em;
  margin-inline: 0.125rem;
  padding-block-end: 0.0625rem;
  padding-inline: 0.125rem;
}

p>a {
  color: var(--c-link);
  text-decoration-color: var(--c-link-underline);
  text-decoration-style: dotted;
  text-decoration-thickness: 0.0625rem;
}

p>a:hover {
  color: var(--c-link-hover);
  text-decoration-color: var(--c-link);
  text-decoration-thickness: 0.125rem;
}

p>a:focus-visible {
  text-decoration-style: solid;
}

.p-small,
figcaption {
  font-size: var(--fontsize-small);
}


/* Header */


header {
  background: var(--c-background-header);
  display: flex;
  justify-content: center;
  padding-block: 0.5rem 1rem;
}

@media (29rem <=width) {
  header {
    height: 8.6rem;
  }
}

@media (24rem <=width < 29rem) {
  header {
    height: 8rem;
  }
}

.header__link {
  color: var(--c-header-link);
  text-decoration: none;
  text-align: center;
  max-width: 30rem;
  width: 100%;
  display: block;
}

body.is_main .header__link {
  cursor: initial;
}

.header__logo {
  max-width: 30rem;
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  margin-block-start: 1rem;
  color: var(--c-header-link);
}

.header__back {
  font-size: 1rem;
}

body.is_main .header__back {
  visibility: hidden;
}

@media (pointer: fine) {
  .header__back {
    opacity: 0;
  }

  body:not(.is_main) .header__link:hover .header__back {
    opacity: 100%;
  }

  body:not(.is_main) .header__link:hover .header__logo {
    color: var(--c-text-muted);
  }
}


/* Post-list */


.post-list--heading {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.post-list__ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  list-style-type: none;
  padding-block: 2rem;
}

.post-card {
  max-width: 100%;
  width: 19rem;
}

.post-card__link {
  display: grid;
  grid-template-areas: "top";
  width: fit-content;
  align-items: center;
  justify-items: center;
  text-decoration: none;
}

.post-card__image {
  grid-area: top;
  border-radius: 0.25rem;
}

.post-card__title {
  backdrop-filter: blur(1rem);
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--c-card-text);
  color: var(--c-card-text);
  grid-area: top;
  padding-inline: 0.5rem;
  padding-block-start: 0.5rem;
  padding-block-end: 0.25rem;
  margin: unset;
  text-align: center;
}

.post-card__teaser {
  margin: unset;
  padding-block-end: unset;
  padding-block-start: 0.5rem;
  padding-inline: unset;
}

.post-card__date {
  color: var(--c-text-muted);
}

.post-card__link:hover .post-card__image {
  filter: var(--filter-card-hover);
}

.post-card__link:hover .post-card__title {
  color: var(--c-card-text-hover);
}


/* Image, Video */


img:not(.post-card__image) {
  cursor: zoom-in;
  display: block;
  height: auto;
  margin-block-start: var(--fontsize-small);
  max-inline-size: 100%;
}

figcaption {
  margin-block-start: var(--fontsize-small);
  margin-inline: 2rem;
}

video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 1rem;
}


/* Paragraph with note */


@media (93rem <=width) {

  /* align @media with var(--main-width-150) */
  .p-note-narrow {
    display: none;
  }

  .p-note-wide {
    position: relative;
  }

  .p-note-wide.start {
    border-inline-start: var(--border-note);
  }

  .p-note-wide.end {
    border-inline-end: var(--border-note);
  }

  .p-note-wide .note {
    border-block-start: var(--border-note);
    font-size: var(--fontsize-small);
    inline-size: calc(50vi - var(--main-width-50));
    inset-block-start: 0;
    margin-block-start: 0;
    max-inline-size: var(--main-width-25);
    padding-block-start: 0.75rem;
    padding-inline: 1rem;
    position: absolute;
  }

  .p-note-wide.start .note {
    inset-inline-start: calc(var(--main-width-25) * -1);
  }

  .p-note-wide.end .note {
    inset-inline-start: 100%;
  }
}

@media (width < 93rem) {

  /* align @media with var(--main-width-150) */
  .p-note-wide {
    display: none;
  }

  .p-note-narrow summary {
    cursor: pointer;
    font-size: var(--fontsize-small);
  }

  .p-note-narrow details {
    margin-inline: 0.55rem;
  }

  .p-note-narrow details p {
    font-size: var(--fontsize-small);
    margin-block-start: 0.5lh;
    margin-inline: 0.55rem;
  }
}


/* About page */


.about__link-list li {
  list-style-type: none;
}

.about__imprint {
  margin-block-start: 4rem;
}