/*

These styles are a bit hacked together from my previous post (a year ago!)

*/

body {
  font-family: 'EB Garamond', serif;
  font-size: 2.5vmax;
  padding: 5vmin;
}

header {
  font-family: sans-serif;
  font-size: 1.5vmax;
  border-bottom: 1px solid currentcolor;
  display: flex;
}

header h1 {
  font-weight: 800;
  font-size: 2vmax;
}

header nav ul {
  padding-left: 2em;
}

header nav li {
  display: inline;
  margin-right: 1em;
}

header nav li:last-child::after {
  content: '↓';
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: orange;
  text-decoration-style: solid;
  text-decoration-line: underline;
}

article a {
  color: forestgreen;
  text-decoration: underline;
  text-decoration-color: crimson;
  text-decoration-style: solid;
  text-decoration-line: underline;
}


a:hover, a:active {
  background-color: cornsilk;
}

a:focus {
  outline: 3px orange solid;
  outline-offset: 0.25em;
}

article {
  padding-top: 1vw;
  padding-bottom: 1vw;
}


article h1 {
  /* font-size: inherit; */
  font-weight: 800;
  /* font-variant: small-caps; */
}

article h2 {
  /* font-size: inherit; */
  font-weight: 500;
  font-variant: small-caps;
  text-transform: lowercase;
  line-height: 0.8em
}

article ul li::before {
    content: '—';
    padding-right: 20px;
}

article ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

article ul {
  padding-inline-start: none;
}


/*
Adding a decorative symbol before and after
the headings, along with padding.

NOTE: Though decorative (and part of the
presentation code, i.e. CSS) screenreaders may
announce them using their unicode name (in this
case "Dotted Cross") as they typically do read
out content added in the CSS .As these are a
punctuation mark I consider this acceptable,
though not ideal. In testing with VoiceOver they
were not announced, perhaps because they
are punctuation?
*/

article h1::before, article h2::before {
  content: '⁜';
  padding-right: 0.5em;
  color: crimson;
}

article h1::after, article h2::after {
  content: '⁜';
  padding-left: 0.5em;
  padding-right: 0.5em;
  color: crimson;
}

/*
I also wanted to add ornaments between paragraphs,
initially I did this with an "::after" on the <p>
element but that lead to two ornaments appearing in
a row between thhe <p> and <h2> (due the rule above).
The solution was to us the "p + p" formulation to
only add them between paragraphs.

I also chose to make these ornaments more subtle,
with a lighted contrasting colour and some
transparency.
*/

/* article p + p::before {
  content: "⁘";
  padding-left: 0.5em;
  padding-right: 0.5em;
  opacity: 0.8;
  color: orange;
} */

/*
Finally, I wanted an ornament at the end as an
"end mark" (https://www.fonts.com/content/learning/fontology/level-4/fine-typography/end-marks)
I could add this to the last paragraph using the
":last-of-type" or "last-child" selector.
 */

article p:last-of-type::after {
  content: '⁜';
  padding-left: 0.5em;
  font-weight: 800;
  }

/*
The post has a few code references which didn't
look create in their default style (mainly due
to the relative visual size of Courier) so I
adjusted the fontsize slightly and added a
border to get them feeling more like they are part
of the flow of the content.
*/

code {
  font-size: 1.8vmax;
  border: 1px dashed currentcolor;
  border-radius: .2em;
  padding: .1em .1em 0px .1em;
  margin-left: .1em;
  margin-right: .1em;

}

/*
Finally, some styling for the footer largely
matching the styles used in the header.
*/

footer {
  font-family: sans-serif;
  font-size: 1.5vmax;
  line-height: 2vmax;
  border-top: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;

}