timharek.no/sass/main.scss

$font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, avenir next,
  avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
$font-family-mono: FMono-Regular, Consolas, DejaVu Sans Mono, Liberation Mono,
  Menlo, monospace;
$font-family-serif: Iowan Old Style, Apple Garamond, Baskerville, Georgia,
  Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
  Apple Color Emoji;

$spacingSmall: 0.5rem;
$spacing: 1rem;
$spacingLarge: 1.5rem;
$b-sm: 640px;
$b-md: 768px;

:root {
  --wrapper: 760px;
  --color-primary: #0096f5;
  --color-background: #212121;
  --color-background-secondary: #262626;
  --color-background-aside: #151515;
  --color-border-aside: #abb2bf;
  --color-default-text: #fefefe;
  font-family: $font-family-sans;
  font-size: clamp($spacing, 2vw, 18px);
  background-color: var(--color-background);
  color: var(--color-default-text);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-primary: #0d47a1;
    --color-background: #eeeeee;
    --color-background-secondary: #eaeaea;
    --color-background-aside: #ececec;
    --color-border-aside: #e1e1e1;
    --color-default-text: #212121;
  }
}

@mixin wrapper() {
  max-width: var(--wrapper);
  margin-inline: auto;
  padding-inline: $spacingSmall;
}

@mixin flex($justify: flex-start, $align: center) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}

@mixin list($style: none, $display: flex, $gap: $spacing) {
  list-style: $style;
  display: $display;
  gap: $gap;
  padding: 0 !important;
  margin: 0;
}

@mixin stickyHeading() {
  width: 100%;
  top: 0;
  position: sticky;
  padding-block: $spacingSmall;
  background-color: var(--color-background);
}

a {
  --color-text: var(--color-primary);
  color: var(--color-text);
  text-decoration-color: var(--color-primary);
  font-weight: 600;
  transition: all ease 150ms;

  &:hover {
    background: var(--color-text);
    color: var(--color-background);
  }
}

.btn {
  --color-text: var(--color-primary);
  color: var(--color-text);
  border: 1px solid var(--color-primary);
  border-radius: $spacingSmall;
  text-decoration: none;
  padding: $spacingSmall;
  @include flex(flex-start, center);
  gap: $spacingSmall;
  width: max-content;
  height: max-content;

  &:hover {
    background: var(--color-text);
    color: var(--color-background);
  }

  svg {
    width: 1.25rem;
  }
}

h1 {
  font-size: 1.75rem;
}

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

h2,
h3 {
  margin: 0.5rem 0;
}

p {
  hyphens: auto;
  max-width: 65ch;
  line-height: 1.5;
}

li {
  line-height: 1.5;
}

blockquote {
  margin: 0;
  padding: $spacingSmall 0 $spacingSmall $spacing;
  border-left: $spacingSmall solid var(--color-default-text);

  p {
    margin: 0;
  }
}

strong {
  font-weight: 600;
}

/*
    Syntax highlighting
*/
$code-bg-dark: #151515;

code {
  color: #abb2bf;
}
pre,
code {
  background: $code-bg-dark !important;
  padding: $spacingSmall $spacing;
  border-radius: $spacingSmall;
  line-height: 1.5;

  * {
    font-family: $font-family-mono;
  }
}

pre {
  overflow-x: auto;
}

code {
  padding: 0.25rem $spacingSmall;
  word-wrap: break-word;
}

pre code {
  padding: 0;
}

picture {
  img {
    max-width: 100%;

    &.small {
      @media (min-width: $b-sm) {
        display: block;
        max-width: 50%;
        max-height: 80rem;
        margin-inline: auto;
      }
    }
  }
  figcaption {
    color: var(--color-default-text);
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.5;
    padding-block: $spacingSmall;
    border-bottom: 1px solid var(--color-default-text);
  }
}

.anchor {
  margin-left: $spacingSmall;
  text-decoration: none;
}

.hidden {
  display: none;
}

header.header {
  @include wrapper();
  @include flex(space-between);
  margin-block-end: $spacing;

  .header__logo {
    border-radius: 999px;
    max-width: 4rem;
    max-height: 4rem;
    svg {
      width: 100%;
      height: 100%;
    }
  }

  .nav__list {
    @include list();
    font-weight: 600;
  }

  a {
    text-decoration: none;
  }
}

footer.footer {
  @include wrapper();
  @include flex(space-between);
  gap: $spacingSmall;
  margin-block: $spacingLarge;

  @media (max-width: $b-sm) {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .nav__list {
    @include list();
  }
}

.wrapper {
  @include wrapper();
}

.blog {
  @include list(none, block);
  margin-block-end: $spacing;

  & > *:not(:last-of-type) {
    margin-block: $spacing;
  }

  h2 {
    @include stickyHeading();
  }

  .blog__post {
    @include flex(space-between, flex-start);
    gap: $spacingSmall;

    @media (max-width: $b-sm) {
      flex-wrap: wrap-reverse;
    }

    p {
      margin-block-start: $spacingSmall;
      margin-block-end: 0;
    }
  }
}

.footnote-definition {
  @include flex();
  gap: $spacing;

  &:first-of-type {
    padding-block-start: $spacingSmall;
    border-top: 1px solid gray;
  }

  &:last-of-type {
    margin-block-end: $spacing;
  }

  p {
    margin-block: $spacingSmall;
  }
}

article.post {
  .post-header {
    margin-block-end: $spacing;
  }

  h1 {
    margin-block: 0 $spacingSmall;
  }

  .post__tags {
    @include list($gap: $spacingSmall);
    * {
      text-decoration: none;
    }
  }

  ul,
  ol {
    padding-left: $spacingLarge;
    line-height: 1.5;
  }

  aside {
    --border-color: var(--color-border-aside);
    --bg: var(--color-background-aside);
    background-color: var(--bg);
    border: 3px solid var(--border-color);
    border-radius: $spacingSmall;
    padding: $spacingSmall $spacing;
  }

  .post__footer {
    @include flex(space-between, center);
    flex-wrap: wrap;
    gap: $spacing;
    border-top: 1px solid var(--color-border-aside);
    border-bottom: 1px solid var(--color-border-aside);
    padding-block: $spacingLarge;
    margin-block: $spacing;

    .footer__metadata > div {
      @include flex(flex-start, center);
      gap: $spacingSmall;

      svg {
        width: 1.25rem;
      }

      &:last-of-type {
        margin-block-start: $spacingSmall;
      }
    }
  }
}

.backlinks {
  --bg: var(--color-background-secondary);
  margin-block-start: 1rem;
  background-color: var(--bg);
  border-radius: $spacingSmall;
  padding: $spacing;

  h2 {
    margin-block-start: 0;
  }

  &__list {
    @include list($style: disc, $display: block);
    margin-inline-start: $spacing;
  }
}

.page-content {
  .page__subnav ul {
    @include list();
    flex-wrap: wrap;
  }
}

// section.resume h2 {
//   margin-block-end: $spacing;
// }

.experience {
  padding-block: $spacing;

  &:not(:first-of-type) {
    border-top: 2px solid gray;
  }
  &:not(:last-of-type) {
    border-bottom: 2px solid gray;
  }

  &__header {
    @include flex();
    gap: $spacing;
  }

  &__logo {
    max-width: 3.5rem;
  }

  &__role {
    margin-block-start: $spacingSmall;
  }

  .role__name {
    margin: 0;
    margin-block-end: $spacing;
  }

  .role__description {
    margin: 0;
    margin-block-start: $spacingSmall;
  }

  .role__list {
    margin: 0;
    padding-left: $spacing;
    max-width: 65ch;

    & > *:not(:last-of-type) {
      margin-block-end: $spacingSmall;
    }
  }
}

.skill__category {
  margin-block-end: $spacing;
  @media (min-width: $b-sm) {
    @include flex($justify: space-between);
    flex-wrap: nowrap;
    & > * {
      width: 50%;
    }
  }
}

@media print {
  header.header,
  footer.footer,
  .full-cv,
  .print-hidden {
    display: none;
  }

  .experience {
    border: none !important;
  }
}

.page-review {
  h2 {
    @include stickyHeading();
  }
  .review__rating {
    dt {
      float: left;
      margin-inline-end: $spacingSmall;
    }
  }
  .entries {
    & > * {
      padding-block: $spacing;

      &:not(:last-of-type) {
        border-bottom: 1px solid gray;
      }
    }
  }
  .entry {
    display: grid;
    gap: $spacingLarge $spacing;
    align-items: center;
    padding-inline: $spacingSmall;

    &:hover {
      background-color: var(--color-background-aside);
    }

    @media (min-width: $b-md) {
      grid-template-columns: 1.5fr 1fr 1fr 0.5fr;
    }
  }
  .count {
    text-align: right;
    margin-top: $spacing;
    margin-bottom: $spacing;
  }
}

.tags-list {
  @media (min-width: $b-md) {
    column-count: 2;
  }
}

.blogroll {
  @media (min-width: $b-md) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacingLarge;
  }

  .blog {
    ul.blog__tags {
      @include list();
      font-style: italic;
    }
    ul.blog__urls {
      @include list();
    }
  }
}

.page-content.page-stats {
  max-width: $b-sm;
  width: 100%;
  margin-inline: auto;
}
table.stats {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: $spacingLarge;

  th {
    text-align: left;
    width: 35%;
  }
  th,
  td {
    padding: $spacingSmall;
  }
  tr {
    border-bottom: 1px solid gray;
  }
}

.tags-cloud {
  @include flex();
  flex-wrap: wrap;
  gap: $spacingSmall $spacing;

  .tag__name {
    text-decoration: none;
  }
}

.work-filter {
  margin-block-end: $spacing;
}

.work-grid {
  @media (min-width: $b-md) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacingLarge;
  }

  & > &__item:not(:last-of-type) {
    margin-block-end: $spacingLarge;
  }

  .item__header {
    h3 {
      margin-block-start: 0;
    }

    &__wrapper {
      display: flex;
      align-items: center;
      gap: $spacingSmall;

      svg {
        max-width: 2rem;
      }
    }
  }

  .item__tags {
    @include list();
    column-gap: $spacingSmall;
    row-gap: calc(#{$spacing} / 2);
    flex-wrap: wrap;
    font-style: italic;
  }
  .item__links {
    @include list();
  }
}