:root,
html {
color: #222;
font-size: 16px;
line-height: 1.778;
font-family: "Helvetica", "Arial", sans-serif;
}
:root,
html {
color: #383838;
background-color: #ccc;
cursor: default;
height: 100%;
-webkit-text-rendering: optimizeSpeed;
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; /* IE11-, Edge */
}
/* --------------------
* inheritance of doom
**
* finally! an inheritance for me!
* we have to make this selection for box-sizing,
* might as well get our money's worth.
*/
*
::before,
::after {
box-sizing: inherit;
font-size: inherit;
line-height: inherit;
text-decoration: inherit;
vertical-align: inherit;
border-style: solid;
border-color: rgba(0, 0, 0, 0.25);
border-width: 0;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
/* --------------------
* body
**
* 1: body is the "wrapper"
* 2: ensure children with 'position:absolute' don't break out and body position can be manipulated
* 3: force body to fill view
* 3.1: 101% min-height on body
* a.) forces scrollbars to appear on <html>
* b.) works to this effect no matter if body top/bottom margin is 0
* ...
* screw this, I don't have time to explain things I already know to myself.
* if you're not me and somehow are stumbling across this, if you don't know
* what's going on here by reading the code - maybe it's time to learn.
* so basic
*/
body {
display: block;
position: relative;
min-height: 101%;
background: #dbdbdb;
color: inherit;
width: 100%;
min-width: 320px;
max-width: 100%;
margin: 0 auto;
padding: 1.778rem;
}
@media (max-width: 320px) {
/* put scrollbars back for super teensy screens */
:root, html {
overflow-x: auto;
}
}
/*
if you set $body_width--max to a unit other than % -
@media (min-width: $body_width--max) {
nothing needs done here unless 'auto' is removed from body margin,
this lets you use percentages in the body-max-width variable.
useful to always have space between body and the screen and/or setting the max to 100%
in case you are cool and make for high-res
}
*/