blog/src/styles/global.scss

@import 'variables';
@import 'mixins';

* {
  &,
  &::before,
  &::after {
    box-sizing: border-box;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: $font-size-root;
  scroll-behavior: smooth;
}

body {
  font-family: $font-family-base;
  font-weight: $font-weight-base;
  font-size: $font-size-base;
  line-height: $line-height;
  color: $text-color;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga', 'kern';
  min-height: 100vh;
  transition: background 0.4s $easing;
  background: $body-background-color;
  position: relative;

  // handling long text, like URLs
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;

  &.dark {
    background-color: $body-background-color--dark;
    color: $text-color--dark;
  }
}

p,
ul,
ol {
  margin: 0 0 $spacer;
}

// Reset fonts for relevant elements
/////////////////////////////////////

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset default button element
button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  outline: 0;

  &:active {
    transition: none;
    text-shadow: none;
  }
}

// Links
/////////////////////////////////////

a {
  color: $link-color;
  text-decoration: none;
  transition: 0.2s ease-out;

  &:hover,
  &:focus {
    outline: 0;
    color: $link-color-hover;
  }

  &:active {
    transition: none;
    color: $link-color-active;
  }
}

// Headings
/////////////////////////////////////

h1 {
  font-size: $font-size-h2;

  @media (min-width: $screen-xs) {
    font-size: $font-size-h1;
  }
}

h2 {
  font-size: $font-size-h3;

  @media (min-width: $screen-xs) {
    font-size: $font-size-h2;
  }
}

h3 {
  font-size: $font-size-h4;

  @media (min-width: $screen-xs) {
    font-size: $font-size-h3;
  }
}

h4 {
  font-size: $font-size-h5;

  @media (min-width: $screen-xs) {
    font-size: $font-size-h4;
  }
}

h5 {
  font-size: $font-size-h6;

  @media (min-width: $screen-xs) {
    font-size: $font-size-h5;
  }
}

h6 {
  font-size: $font-size-h6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-family-headings;
  line-height: $line-height-headings;
  font-weight: $font-weight-headings;
  letter-spacing: -0.01em;
  margin-top: $spacer * $line-height;
  margin-bottom: $spacer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.2s $easing;

  .wf-loading & {
    font-weight: 600;
  }

  // stylelint-disable no-descending-specificity
  &,
  a {
    color: $color-headings;
  }
  // stylelint-enable no-descending-specificity

  .dark &,
  .dark & a {
    color: $color-headings--dark;
  }

  a:hover &,
  a:focus &,
  .dark a:hover &,
  .dark a:focus & {
    color: $link-color;
  }
}

// Responsive Media
/////////////////////////////////////

figure,
img,
svg,
video,
audio,
embed,
canvas,
picture {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

img {
  vertical-align: middle;
}

figcaption {
  font-size: $font-size-small;
  color: $text-color-light;
  font-style: italic;
  text-align: center;
  margin-top: ($spacer / 4);

  .dark & {
    color: $text-color-light--dark;
  }
}

// Lists
/////////////////////////////////////

ul {
  li {
    &::before {
      content: ' \2015'; // horizontal bar: ― ―
    }
  }
}

ol {
  counter-reset: ol-counter;

  li {
    &::before {
      content: counter(ol-counter) '.';
      counter-increment: ol-counter;
    }
  }

  ul li::before {
    display: none;
  }
}

ul,
ol {
  margin-top: 0;
  margin-bottom: $spacer;
  padding-left: $spacer;
  list-style: none;

  li {
    position: relative;
    margin-bottom: $spacer / 2;

    // stylelint-disable no-descending-specificity
    &::before {
      position: absolute;
      left: -($spacer);
      top: -1px;
      color: $text-color-light;
      user-select: none;
    }
    // stylelint-enable no-descending-specificity

    p {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    margin-top: $spacer / 4;
    margin-bottom: 0;

    li {
      margin: 0;
    }
  }
}

// Inline typography
/////////////////////////////////////

b,
strong,
.bold {
  font-weight: 700;
  font-style: normal;
}

em,
.italic {
  font-style: italic;
}

abbr[title],
dfn {
  text-transform: none;
  font-style: normal;
  font-size: inherit;
  border-bottom: 1px dashed $brand-grey-dimmed;
  cursor: help;
  font-feature-settings: inherit;
}

mark {
  background: #fffaab;
  color: $text-color;
}

hr {
  margin: 0;
  border: 0;

  @include divider();
}

// Quotes
/////////////////////////////////////

q {
  font-style: italic;
}

cite {
  font-style: normal;
  text-transform: uppercase;
}

// stylelint-disable no-descending-specificity
blockquote,
blockquote > p {
  font-style: italic;
  color: $brand-grey-light;
}
// stylelint-enable no-descending-specificity

blockquote {
  margin: 0 0 $spacer;
  position: relative;
  padding-left: $spacer * 1.25;

  // quotation marks
  &::before {
    content: '“';
    font-size: 300%;
    color: lighten($brand-grey-light, 20%);
    position: absolute;
    left: -10px;
    top: -20px;

    @media (min-width: $screen-xs) {
      left: 0;
    }

    @media (min-width: $screen-lg) {
      top: -30px;
    }
  }
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: 100%;
  overflow: auto;
  margin-bottom: $spacer;

  th {
    text-align: left;
    border-top: 1px solid $brand-grey-dimmed;
  }

  th,
  td {
    padding: $spacer / 2;
    word-wrap: normal;
    word-break: normal;
    overflow-wrap: normal;
    border-bottom: 1px solid $brand-grey-dimmed;
  }

  :global(.dark) & {
    th,
    td {
      border-color: $brand-grey;
    }
  }
}

// Selection
/////////////////////////////////////

::-moz-selection {
  background: #2e4f5c;
  color: #fff;
}

::selection {
  background: #2e4f5c;
  color: #fff;
}

// More basic elements
/////////////////////////////////////

@import 'code';
@import 'buttons';
@import 'alerts';
@import 'toast';

.dark .medium-zoom-overlay {
  background-color: $body-background-color--dark !important;
}