anyone-oslo/pages

/* ---- Mixins ------------------------------------------------------------- */

@define-mixin child-margins {
  &:first-child {
    margin-top: 0px;
  }
  &:last-child {
    margin-bottom: 0px;
  }
}

@define-mixin font-scale-base {
  --font-scale-coeff: calc((var(--font-scale-to) - var(--font-scale-from)) /
                           ((var(--font-scale-end) / 100) -
                            (var(--font-scale-start) / 100)));

  font-size: calc(calc((var(--font-scale-from) -
                        (var(--font-scale-start) / 100) *
                        var(--font-scale-coeff)) /
                       16) * 1rem +
                  var(--font-scale-coeff) * 1vw);
}

@define-mixin font-scale $from, $to, $start, $end {
  --font-scale-from: $from;
  --font-scale-to: $to;
  --font-scale-start: $start;
  --font-scale-end: $end;
}


/* ---- Definitions -------------------------------------------------------- */

:root {
  --font-sans: Helvetica, sans-serif;

  --font-larger:   500     2.0rem/1.1 var(--font-sans);
  --font-large:    500     1.5rem/1.1 var(--font-sans);
  --font-medium:   500     1.5rem/1.1 var(--font-sans);
  --font-normal:   normal 1.25rem/1.1 var(--font-sans);
  --font-small:    normal  1.0rem/1.1 var(--font-sans);

  @media (--tablet) {
    /*
    --font-larger:   500     1.5rem/1.1 var(--font-sans);
    --font-large:    500     1.5rem/1.1 var(--font-sans);
    --font-medium:   500     1.125rem/1.1 var(--font-sans);
    */
  }
}


/* ---- Font scale --------------------------------------------------------- */

html {
  @mixin font-scale-base;
  @mixin font-scale 16, 18, 1440, 1920;
  @media screen and (max-width: 1440px) {
    @mixin font-scale 14, 16, $breakpoint-mobile-small, 1440;
  }
  @media (--mobile-small) {
    @mixin font-scale 12, 16, 1, $breakpoint-mobile-small;
  }
}

body {
  font-family: var(--font-sans);
  font-size: 100%;
}


/* ---- Rules -------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 1rem 0rem;
  @mixin child-margins;
}

h1, h2, h3, h4, h5, h6, p, ul, ol,
figcaption, blockquote {
  max-width: 60ch;
}

ul, ol, blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  @mixin child-margins;
}

main {
  font: var(--font-normal);
}

h1 {
  font: var(--font-larger);
}

h2 {
  font: var(--font-large);
  margin-top: 2rem;
  @mixin child-margins;
}

h3 {
  font: var(--font-medium);
  margin-top: 2rem;
  @mixin child-margins;
}

h4 {
  font: var(--font-normal);
}

h5 {
  font: var(--font-smaller);
}

h6 {
  font: var(--font-smallest);
}

blockquote {
  font: var(--font-medium);
  margin: 2rem 0rem;
  @mixin child-margins;
}

figcaption {
  margin-top: 0.5rem;
  font: var(--font-small);
}