Universal CSS

universal.css

/* -------------------------------------------------------------- 
Universal stylesheet. Based on the work of Andy Clarke et al.

License: Creative Commons CC Zero Declaration. No Rights Reserved.

More info at:
https://stuffandnonsense.co.uk/blog/universal_internet_explorer_6_css_revisited

-------------------------------------------------------------- */

/* Vars ---------------------------------------------------- */

:root {
  --text-color: #2e2718;
  --body-family: -apple-system, system-ui, "Helvetica Neue", Calibri, Arial,
    sans-serif;
  --heading-family: Georgia, Times, "Times New Roman", serif;
  --body-line-height: 1.5;
}

/* Reset --------------------------------------------------- */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* Body ---------------------------------------------------- */

html {}

body {
  max-width: 40rem;
  padding: 4.5em;
  font-family: var(--body-family);
  line-height: var(--body-line-height);
  color: var(--text-color);
  background: #faf7f5;
}

/* Mobile */

@media screen and (max-width: 767.98px) {
  body {
    padding: 1.5em;
  }
}

/* Headings ---------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-family);
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: .75rem;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  font-variant: small-caps;
  letter-spacing: 0.125rem;
}

h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img {
  margin: 0;
}

/* Text elements -------------------------------------------------------------- */

p+p {
  text-indent: 2ch;
}

a {
  color: #105cb6;
  text-decoration: underline;
}

a:visited {
  color: #666055;
}

a:focus,
a:hover {
  color: #a72020;
}

a img {
  border: none;
}

blockquote {
  margin: 1.5rem 1.5rem 1.5rem -1.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid #a69c85;
  font: italic 1.2em "Times New Roman", Times, serif;
}

strong {
  font-weight: bold;
}

em,
dfn {
  font-style: italic;
}

dfn {
  font-weight: bold;
}

sup,
sub {
  line-height: 0;
}

abbr,
acronym {
  border-bottom: 1px dotted #a69c85;
  cursor: help;
}

address {
  margin: 0 0 1.5rem;
  font-style: italic;
}

del {
  color: #666;
}

code,
tt,
pre {
  font: 0.9em Consolas, Menlo, "andale mono", "lucida console", monospace;
  line-height: 1.5;
  background: #fff;
}

code {
  padding: 1px;
}

pre {
  margin: 1.5rem 1.5rem 1.5rem -1.5rem;
  padding-left: 1.5rem;
  white-space: pre;
  border-left: 1px dotted #a69c85;
  overflow-y: scroll;
  background: #fff;
}

/* Mobile */

@media screen and (max-width: 767.98px) {
  pre {
    margin: 1.5rem -1.5rem 1.5rem -1.5rem;
    padding-left: 0;
  }
}

small {
  font-size: 0.875rem;
  color: rgba(var(--text-color), 0.75);
  line-height: 1.2;
}

hr {
  border-top: 2px dotted #a69c85;
  border-bottom: 0;
  margin: 1.5em auto;
}


/* Lists -------------------------------------------------------------- */

li ul,
li ol {
  list-style-type: circle;
  margin: 1.5rem 0.75rem 1.5rem;
}

ul,
ol {
  margin: 1.5rem 0 1.5rem 1.5rem;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  padding-bottom: 0.75rem;
}

dl {
  margin-bottom: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #a69c85;
}

dt {
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  line-height: 1.25;
}

dd {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #a69c85;
}

/* Tables -------------------------------------------------------------- */

table {
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

table,
td,
th {
  vertical-align: top;
}

th,
thead th {
  font-weight: bold;
}

th,
td,
caption {
  padding: 4px 10px 4px 5px;
  text-align: left;
  font-weight: normal;
}

th,
td {
  border-bottom: 1px solid #a69c85;
}

tfoot {
  font-size: 0.9rem;
}

caption {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 1;
}

/* Forms -------------------------------------------------------------- */

label {
  font-weight: bold;
}

fieldset {
  margin: 0 0 1.5rem 0;
  padding: 1.5rem 1.5rem 0 1.5rem;
  border: 1px solid #a69c85;
}

legend {
  font-size: 1.2rem;
  font-weight: bold;
}

/* Page --------------------------------------------------------------- */

footer nav {
  margin: 3rem 0 0 0;
  /* color: #666; */
  /* text-align: center; */
}

/* Misc. -------------------------------------------------------------- */

.cut {
  clear: both;
}

p,
li,
td,
th {
  overflow-wrap: break-word;
}