// // Default HTML rendering inherits pre-determined style settings, which are // not always consistent across web browsers. The following CSS declarations // let us build up our stylesheet from scratch more predictably. // // In defense of `content-box`: // // Many popular style frameworks insist on `padding-box`, representing a // print-media mindset. In print, the media is a fixed size, the content is // filled from the outside inwards, and the layout editor can make decisions // knowing the result. However, the web browser has a variable media size, the // content is filled from the inside outwards, and the layout editor is better // off making as few assumptions as possible about how a viewer will size the // final product. When we superimpose the `padding-box` mindset from print // media, the resulting documents are less likely to adapt to the viewport // size, and less likely to zoom properly (the padding size would remain // proportional, while the content box could shrink). An HTML document with // adequately-defined heirarchial organization has no need for `padding-box` // sizing, and a layout editor working with a mindset of variable-size media // can successfully rely on `content-box` sizing. //

$muwu-root-font-size: 1rem; $muwu-root-line-height: ($muwu-root-font-size * 1.16667);

}

html {

width: 100%;

}

body {

margin-left: auto;
margin-right: auto;
max-width: 50rem;

}

blockquote {

margin: $muwu-root-line-height 2rem;

}

code {

font-size: $muwu-root-font-size;
padding: 0rem 0.15rem;

}

dl {

margin: $muwu-root-line-height 0;
div {
  dt {
    display: list-item;
    list-style-type: none;
    font-weight: bold;
    p {
      display: inline;
    }
  }
  dd {
    display: list-item;
    list-style-type: none;
    p {
      display: inline;
    }
  }
}

}

img {

display: block;
margin-left: auto;
margin-right: auto;

}

h1, h2, h3, h4, h5, h6 {

font-size: ($muwu-root-font-size * 1.125);
margin: $muwu-root-line-height 0rem;

}

hr {

margin: $muwu-root-line-height 0;
border-width: 0;

}

ol {

margin: $muwu-root-line-height;
ol, ul {
  margin: 0rem 1rem;
}

}

p {

margin: $muwu-root-line-height 0rem;

}

pre {

font-size: ($muwu-root-font-size * 0.9);
margin: $muwu-root-line-height 0;
>code {
  font-size: ($muwu-root-font-size * 0.8);
  padding: 0rem 0rem;
}

}

q {

quotes: '“' '”';

}

ul {

margin: $muwu-root-line-height;
ol, ul {
  margin: 0rem 1rem;
}

}

@media screen {

html {
  body {
    padding: 1.5rem;
  }
}

}

@media print {

html {
  body {
    ol, ul {
      page-break-inside: avoid;
    }
  }
}

}