Stanmore base

stamore-base.css

/*! Import Foundry Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap");
/* ===================== */
:root {
  --typescale: 1.11;
  /* The type scaling factor relative to the <p>. ( h4 > h3 > h2 > h1). This DEFAULT scale is set low for phones. Media Queries scale it up for larger screens */
  --typescale-lg: 1.2;
  /* Increase the typescale on larger (non-mobile) screens */
  --baselineratio: calc(
    16 / 10
  );
  /* This is the 'line-height:basefont size' ratio ( i.e 16/9 = 1.777778)*/
  --basegrid: 28px;
  /* e.g. default phone */
  --basegrid-tablet: 24px;
  /* tablet */
  --basegrid-laptop: 28px;
  /* laptop */
  --basegrid-wide: 32px;
  /* wide */
  --baseline: calc(var(--baselineratio) * 1rem);
  /*--baseline: 1.7778 * 1rem;*/
  --basefont: calc(
    var(--basegrid) / var(--baselineratio)
  );
  /* i.e. 32px / 1.7778 = 18px */
  --basefont-tablet: calc(var(--basegrid-tablet) / var(--baselineratio));
  --basefont-laptop: calc(var(--basegrid-laptop) / var(--baselineratio));
  --basefont-wide: calc(var(--basegrid-wide) / var(--baselineratio));
}

/* Medium devices (tablets and up)*/
@media (min-width: 748px) {
  :root {
    font-size: var(--basefont-tablet);
    --typescale: var(
      --typescale-lg
    );
    /* increase the typescale on tablet,laptop,wide screens */
  }
}
/* Large devices (desktops and up) */
@media (min-width: 900px) {
  :root {
    font-size: var(--basefont-laptop);
  }
}
/* Extra large devices (large desktops, 75em and up)*/
@media (min-width: 1200px) {
  :root {
    font-size: var(--basefont-wide);
  }
}
.wrapper {
  /* This is handy for stopping layouts running wide on super wide monitors. It's unneccessary if you have proper layout CSS */
  max-width: 58rem;
  margin: 0 auto;
}

h1,
h2,
h3,
h4 {
  font-family: "Playfair Display", serif;
}

/* The New Typography */
.major {
  /* if you need a super big H1 */
  font-weight: 500;
  font-size: calc( var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * 1rem );
  line-height: calc(var(--baseline) * 1.5);
}

h1,
.is-size1 {
  font-size: calc( var(--typescale) * var(--typescale) * var(--typescale) * var(--typescale) * 1rem );
  line-height: calc(var(--baseline) * 1);
  /* 4 grid lines */
  margin-top: 0;
  margin-bottom: calc(var(--baseline) / 1);
  font-weight: 400;
  color: #000;
  color: #3a3a3a;
}

h2,
.is-size2 {
  font-size: calc( var(--typescale) * var(--typescale) * var(--typescale) * 1rem );
  line-height: calc(var(--baseline) * 1);
  margin-top: 0;
  margin-bottom: calc(var(--baseline) / 2);
  font-weight: 400;
}

h3,
.is-size-3,
.h3 {
  font-size: calc(var(--typescale) * var(--typescale) * 1rem);
  line-height: calc(var(--baseline) * 1);
  margin-top: 0;
  margin-bottom: calc(var(--baseline) / 2);
  font-weight: 400;
}

h4,
.is-size-h4 {
  font-size: calc(var(--typescale) * 1rem);
  line-height: calc(var(--baseline) * 1);
  margin-top: 0;
  margin-bottom: calc(var(--baseline) / 2);
  font-weight: 400;
}

h5,
.is-size-5 {
  font-size: 1rem;
  line-height: calc(var(--baseline));
  margin-top: 0;
  margin-bottom: calc(var(--baseline) / 2);
  font-weight: 400;
  text-transform: capitalize;
}

p,
ul,
ol,
pre,
table,
blockquote,
.is-size-base {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-size: calc(1rem / var(--typescale));
  font-weight: 300;
  margin-top: 0;
  line-height: calc(var(--baseline) / 1);
  margin-bottom: calc(var(--baseline) / 1);
}

.minor {
  /* smaller than 'stock' body text */
  font-size: calc(1rem / var(--typescale) / var(--typescale));
  line-height: calc(var(--baseline) / 1);
  margin-top: 0;
  margin-bottom: calc(var(--baseline) / 2);
}

.small {
  /* small text */
  font-size: calc( 1rem / var(--typescale) / var(--typescale) / var(--typescale) );
  font-weight: 300;
  color: #333;
  line-height: calc(var(--baseline) / 2);
  margin-top: 0;
  margin-bottom: calc(var(--baseline) / 2);
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

/* Let's make sure all's aligned */

a:link {
  text-decoration: none;
  color: #003;
}

/* Tweak the `line-height` and `margins` at increased typescales */


@media (min-width: 748px) {
  h1.major {
    line-height: calc(var(--baseline) * 2);
    /* 4 grid lines */
  }

  h1,
.is-size1 {
    line-height: calc(var(--baseline) * 1.5);
    /* 4 grid lines */
  }

  h1,
.is-size1 {
    line-height: calc(var(--baseline) * 1.5);
    /* 4 grid lines */
  }

  h2,
.is-size2 {
    line-height: calc(var(--baseline) * 1.5);
    /* 4 grid lines */
  }
}

/* CSS RESETS */
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 96%;
  margin-top: calc(var(--baseline) / 1);
}

body {
  color: #373737;
}

hr {
  width: 100%;
  height: calc(var(--baseline) / 1);
  margin: calc(var(--baseline) / 2) 0 calc(var(--baseline) * 2);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 98%;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 600 15'%3E%3Cdefs%3E%3Cstyle%3E .fillcolor%7B fill: rgb(222, 222, 222);%7D %3C/style%3E%3Cmarker id='d' class='fillcolor' markerHeight='10' markerWidth='10' refX='5' refY='5' style='fill: rgb(170, 170, 170);' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3C/marker%3E%3Cmarker id='e' class='fillcolor' markerHeight='10' markerWidth='40' orient='auto' refX='35' refY='5.2'  viewBox='0 0 40 11'%3E%3Cuse xlink:href='%23a'/%3E%3C/marker%3E%3Cmarker id='c' class='fillcolor' markerHeight='10' markerWidth='40' orient='auto' refX='5' refY='4.9' viewBox='0 0 40 11'%3E%3Cuse xlink:href='%23a' transform='rotate(180 20 5)'/%3E%3C/marker%3E%3CradialGradient id='b' cx='0' cy='0' r='1' gradientTransform='matrix(0 1 -1.3 0 301 7.4)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FEB914'/%3E%3Cstop offset='1' stop-color='%23FEB914' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='f'%3E%3Cpath d='M0 0h260v15H0zm340 0h260v15H340z'/%3E%3C/clipPath%3E%3Csymbol id='a'%3E%3Cpath fill-rule='evenodd' d='M40 4.6h-5.7a5 5 0 0 1-1.7-.7 5.3 5.3 0 0 1-1.5-1.5c-.3-.4-.6-1.1.1-1.5.9-.4 1.6 0 1.8.8.3 1.1 2 .5 1.4-.5-1.1-2.2-5.3-1.1-4 1.4a4.8 4.8 0 0 0 1.9 2h-4l-.2-.1a6.5 6.5 0 0 1-1.8-1.6l-.1-.1A5.5 5.5 0 0 0 25 1.6a6 6 0 0 0-4.4-1c-.2 0-.3.3-.1.5a16 16 0 0 0 4.6 3.5h-3.5a.2.2 0 0 0 0-.2 17.6 17.6 0 0 0-4-3.2C16 .4 14 .4 12.4.5c-.2 0-.4.2-.2.4A21 21 0 0 0 18 4.6h-4c-2.5-1.8-5.3-3-8.4-2.7A7.1 7.1 0 0 0 1.7 4 17.2 17.2 0 0 1 0 5.2a17.2 17.2 0 0 1 1.7 1.3c1.2 1 2.3 1.9 3.9 2 3.1.3 6-.8 8.4-2.7h4a21 21 0 0 0-5.8 3.7c-.2.2 0 .5.2.5 1.7 0 3.7 0 5.3-.8 1.4-.7 3-2 4-3.1a.2.2 0 0 0 0-.3h3.5a16 16 0 0 0-4.6 3.6c-.2.1-.1.4 0 .4a6 6 0 0 0 4.5-1c.4-.2.7-.7 1-1.1l.2-.2c.5-.7 1.1-1 1.8-1.5l.2-.2h4a4.7 4.7 0 0 0-2 2c-1.2 2.6 3 3.6 4.1 1.5.5-1-1-1.7-1.4-.6-.2.9-1 1.3-1.8.8-.7-.3-.4-1-.1-1.5a5.3 5.3 0 0 1 1.5-1.5 5.1 5.1 0 0 1 1.7-.7H40V4.6Zm-27.1 0a50 50 0 0 0-3.5.3.3.3 0 0 0-.2.3c0 .2 0 .3.2.4l3.5.2c-3 1.8-6.5 2.7-9.7.7a22.2 22.2 0 0 1-1.7-1.3l.5-.4L3.2 4c3.1-2 6.7-1.2 9.7.7ZM13 1c2.1.1 4.1.5 5.8 2l.4.4c.5.5 1.1 1 1.9 1.3H20c-2.7-.5-4.8-2-7-3.7Zm0 8.4c2.2-1.7 4.3-3.1 7-3.6h1c-.7.2-1.3.7-1.8 1.3l-.4.3a8.6 8.6 0 0 1-5.8 2Zm12.5-6 .2.4 1 .9h-.2c-1.9-.6-3.6-2-5.1-3.4h.1c1 .2 2.2.3 3 1l1 1.1Zm-4.1 5.8a12.8 12.8 0 0 1 5.2-3.4l-.9.9-.3.4-1 1c-.7.8-1.8 1-2.9 1Z' clip-rule='evenodd'/%3E%3C/symbol%3E%3C/defs%3E%3Ccircle cx='300' cy='7.5' r='7.5' class='fillcolor'/%3E%3Cpath fill='%23fff' stroke='%23999' d='M300.5.9s1.8.7 2.2 1.8c.3 1-.7 2.8-.7 2.8s1.4-1.5 2.5-1.5c1 0 2.3 1.5 2.3 1.5s-.2 2-1.1 2.6c-1 .6-2.8.2-2.8.2s1.8.7 2.2 1.7c.4 1-.7 2.9-.7 2.9s-2 .3-2.9-.4c-.8-.7-1-2.5-1-2.5s-.2 1.8-1 2.5c-1 .7-2.9.4-2.9.4s-1-1.8-.7-2.9c.4-1 2.2-1.7 2.2-1.7s-1.9.4-2.8-.2c-.9-.6-1.1-2.6-1.1-2.6s1.3-1.8 2.5-1.7c1.1 0 2.3 1.7 2.3 1.7s-1-1.8-.7-2.8c.3-1.1 2.2-1.8 2.2-1.8Z' style='stroke-width: 0.5px;'/%3E%3Ccircle cx='300.5' cy='7.5' r='2.2' fill='%23FEB914'/%3E%3Ccircle cx='300.5' cy='7.5' r='1.2' fill='%23100'/%3E%3Ccircle cx='300.5' cy='7.5' r='.7' fill='url(%23b)'/%3E%3Ccircle cx='300.5' cy='7.5' r='.3' fill='%23100'/%3E%3Cpath d='M301 5.8h-.1l.6-2.6-.5 2.6Zm-.7 0h-.1V3.2l.1 2.6Zm2 1.2v-.2l2-.6-2 .8Zm0 .5v-.3l2.8.1-2.8.2Zm-.9 1.4.2-.2.4.9.6 1.2-.6-1-.6-1Zm-.4.2.1-.1.4.7c.2.3.5 1.6.5 1.6l-.6-1.4-.5-.8Zm-1.4-.4-.1-.2-1.8 1.5 2-1.3Zm.4.4-.2-.1-.6.7-.8 1L300 9Zm-1.1-1.8.1-.1-1-.4-1.6-.3 1.4.4 1 .4Zm.2-.4.1-.2-1.6-.8 1.5 1Z'/%3E%3Cpath fill='none' stroke='%23ddd' marker-end='url(%23c)' marker-mid='url(%23d)' marker-start='url(%23e)' d='M35.1 7.4h265 265' style='clip-path: url(%23f);'/%3E%3Ccircle cx='285.1' cy='7.5' r='2' class='fillcolor'/%3E%3Ccircle cx='315.1' cy='7.5' r='2' class='fillcolor'/%3E%3Ccircle cx='275.1' cy='7.5' r='1' class='fillcolor'/%3E%3Ccircle cx='325.1' cy='7.5' r='1' class='fillcolor'/%3E%3Ccircle cx='260.1' cy='7.5' r='1' class='fillcolor'/%3E%3Ccircle cx='340.1' cy='7.5' r='1' class='fillcolor'/%3E%3C/svg%3E");
}

vr.css

/* labelling

 Add 'labelling' to your BODY or other major wrapping component to color/reveal the line-height space being reserved by each HTML component.
This is useful when working with Vertical Rhythm. Add and remove this class as you need it.

*/

.labelling h1,
.labelling h2,
.labelling h3,
.labelling h4,
.labelling h5,
.labelling h6,
.labelling p,
.labelling li,
.labelling ul,
.labelling ol {
 position: relative;
}
.labelling p:after,
.labelling h1:after,
.labelling h2:after,
.labelling h3:after,
.labelling h4:after,
.labelling h5:after,
.labelling li:after {
 display: block;
 position: absolute;
 font-family: Roboto, sans-serif;
 left: 0%;
 top: 0;
 width: 1rem;
 text-align: center;
 font-size: 0.8rem;
 background: #aac;
 color: #fff;
}
.labelling p {
 background: rgba(255, 200, 0, 0.1);
}
.labelling p:hover:after {
 content: "p";
}
.labelling h1 {
 background: rgba(0, 200, 0, 0.1);
}
.labelling h1:hover:after {
 content: "h1";
}
.labelling h2 {
 background: rgba(0, 200, 200, 0.1);
}
.labelling h2:hover:after {
 content: "h2";
}
.labelling h3 {
 background: rgba(0, 0, 200, 0.1);
}
.labelling h3:hover:after {
 content: "h3";
}
.labelling h4 {
 background: rgba(200, 0, 200, 0.1);
}
.labelling h4:hover:after {
 content: "h4";
}
.labelling h5 {
 background: rgba(90, 250, 180, 0.1);
}
.labelling h5:hover:after {
 content: "h5";
}
.labelling li {
 background: rgba(200, 50, 0, 0.1);
}
.labelling li:hover:after {
 content: "li";
}

/*  vertical grid lines */

.vr {
 position: relative;
}

.vr:after {
 position: absolute;
 width: auto;
 height: 600vh;
 z-index: 9999;
 content: "";
 display: block;
 pointer-events: none;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-size: var(--baseline) var(--baseline);
 background-image: repeating-linear-gradient(
  to bottom,
  rgba(173, 0, 0, 0.04) 0%,
  rgba(173, 0, 0, 0.04) 50%,
  rgba(0, 0, 0, 0) 50.01%,
  rgba(0, 0, 0, 0) 100%
 );
}