lazy.css

/* lazy.css - https://github.com/hhakk/lazycss */
:root {
    --color-accent: #55aaee;
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-link: #118bee;
    --color-text: #555;
    --color-text-secondary: #888;
    --color-text-inverse: #fff;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --line-height: 1.5;
    --font-size: 1.2em;
    --card-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
* {
  margin: 0;
}
html, body {
  height: 100%;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-size: var(--font-size);
}
body {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
}
body > * {
  grid-column: 1 / -1;
  z-index: 1;
}
main, aside, footer {
  padding: 1em;
}
/* navbar is on top */
body > nav {
  grid-row: 1;
  background: var(--color-accent);
  box-shadow: var(--card-shadow);
  width: 100%;
  z-index: 2;
}
/* main content comes second */
main {
  grid-row: 2;
}
/* sidebar is third by default */
aside {
  background: var(--color-bg-secondary);
  grid-row: 3;
}
/* footer is last */
body > footer {
  grid-row: 4;
  text-align: center;
  background: var(--color-text);
  color: var(--color-text-inverse);
}
/* navbar styling */
body > nav > ul {
  padding: 0.5em;
  list-style-type: none;
  color: var(--color-text-inverse);
  overflow-x: auto;
}
body > nav > ul > li {
  display: inline;
}
/* first nav element on separate row on mobile */
body > nav > ul > li:first-child {
  font-weight: bold;
  display: block;
}
body > nav > ul > li > a {
  color: inherit;
  text-transform: uppercase;
  text-decoration: none;
}
/* desktop view */
@media (min-width: 800px) {
  /* centered main content */
  main {
    grid-column: col-start 3 / span 6;
    grid-row: 2;
  }
  /* sidebar (right) aside content on same row */
  aside {
    grid-column: col-start 10 / -1;
    grid-row: 2;
  }
  footer {
    grid-row: 3;
  }
  body > nav > ul {
    gap: 2em;
    display: flex;
    justify-content: space-between;
  }
  /* first nav element anchored to right */
  body > nav > ul > li:first-child {
    margin-right: auto;
  }
}
/* sane margins */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  margin: 0.5em 0 0.5em 0;
}
/* miscellanous elements */
a, a:hover, a:visited {
  color: var(--color-link);
}
label, caption, dd {
  color: var(--color-text-secondary);
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 1em;
}
ul, ol {
  margin: 0.5em;
}
li {
  margin-bottom: 0.5em;
}
blockquote {
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-accent);
  padding: 2em;
  margin: 1.5em 0 1.5em 0;
}
summary {
  color: var(--color-accent);
  font-weight: bold;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  width: 100%;
  box-shadow: var(--card-shadow);
}
/* forms */
input, button, textarea, select, fieldset, form {
  box-sizing: border-box;
  font-size: inherit;
  font: inherit;
  color: inherit;
  padding: 0.5em;
}
input:not([type="checkbox"]):not([type="radio"]),
button,
fieldset,
select,
form,
textarea {
  width: 100%;
}
input[type="submit"], button {
  box-shadow: var(--card-shadow);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: none;
  margin-bottom: 0.5em;
}
button[type="reset"] {
  background: var(--color-text);
}
input[readonly],
textarea[readonly],
input:disabled,
button:disabled,
button[disabled] {
  background: var(--color-bg-secondary);
}
input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
}
/* tables and code */
table, pre {
  /* 'inherit' does not affect this for some reason */
  font-size: var(--font-size);
  overflow-x: auto;
  width: 100%;
  padding: 0.5em;
}
pre, code {
  background: var(--color-bg-secondary);
}
table, pre > code {
  margin: 1.5em 0 1.5em 0;
}
th, td {
  padding: 0.5em;
}
th {
  font-weight: bold;
  color: var(--color-text-inverse);
  background: var(--color-accent);
}
tr:nth-of-type(odd) {
  background: var(--color-bg-secondary);
}