◊(Local Yarn Code "Diff")

@import url('font.css');
@import url('normalize.css');

/* Let us first address the matter of font size in different screen sizes. */

/* Mobile portrait screens will see a minimum 18px font. */
html { 
    font-size: 22px;
    height: 100%;
    } 

/* Start increasing type size dynamically at screen widths of 768px */
@media (min-width: 768px) { 
    html { font-size: 2.8vw; } 
}

/* Top out at 23px for screens up to 800px TALL */

      1.1 All Pages
      1.2 Front page
      1.3 Individual post body markup
      1.4 Journal views (article listings)  
 */

body {
    height: 100%;           /* height and flex are to keep footer stuck to bottom of page */
    display: flex;
    flex-direction: column;
    margin: 0;
    background: ◊color-background;

    /* Typography: `line-height` is important!
       All verticle rhythm based on this value. */
    line-height: ◊lineheight;
    font-family: ◊body-font;

    font-variant-alternates: normal;
}

main {
    background: white;
    margin: 0;
    padding: ◊x-lineheight[0.5] ◊x-lineheight[1];
    flex: 1 0 auto;
}

main > a > header {
    text-align: center;
}

main > a > header h1 {

    font-weight: bold;
    margin-left: 3px;
}

p.time {
    margin: 0 0 ◊x-lineheight[1] 0;
}

footer.article-info {
    margin: ◊x-lineheight[1] 0;
    text-align: center;
    font-feature-settings: "smcp" on, "liga" on, "clig" on, "dlig" on, "kern" on, "onum" on, "pnum" on;
    color: #555555; /* Accessibility (contrast) */
}

footer#main {
  text-align: left;
  font-size: 0.8rem;
  line-height: 1rem;
  width: 90%;
  margin: 0 auto;
  flex-shrink: 0;
}

@media (min-width: 667px) {
  footer#main {
    text-align: center;
    width: 100%;
    background: linear-gradient(◊color-background 5%, #dedede 100%);