/*
The styles for this post are inspired by
"The Elements of Typographic Style
(http://webtypography.net/).

In particular, using ornaments to separate
paragraphs, rather than vertical spacing,
and/or indents, which is more usual
(see http://webtypography.net/2.3.2).
*/

/*

SET BASE TYPOGRAPHIC RULES

First I added a nice Google font version of
Garamond as this typeface seemed to fit my
proposed overall design treatment. I set the
system serif face as the fallback.

I was keen to ensure that the copy had nice
readable line length for all screens whilst
avoiding having to write any media queries
and it turns out using the "vmax" unit
worked well for this as it'll scale all the
type proportionate to the longer viewport
dimension, meaning on smaller protrait displays
text is a bit smaller (suiting mobile) and on
wide landscape displays the text grows out to
predictable line-length then just enlarges
to take up the space.

*/

body {
  font-family: 'EB Garamond', serif;
  font-size: 2.5vmax;

/*
I also added some padding to the body container
to move everything away from the browser frame.

I used "vmin" as I wanted this to be
proportionate to the shorter dimension of the
screen.

*/

  padding: 5vmin;
}


/*
THE HEADER

I wanted the (very basic) header to stand
apart from the content so I switched the font
to the system san-serif and adjusted the size
down a bit. I added a bottom border for a bit
of more explicit visual separation (using
"currentcolor" so it should switch out with the
text colour if the user has tweaked the colours
for accessibility reasons, i.e. high contrast
mode). Finally I set the header to display as
flex so the "logo" and navigation list would sit
alongside eachother without needing to float
things.

*/

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

/*
H1s are bolded by default browser styles but
for certainty I set the font weight and set the
size so it felt right alongside the nav.
*/

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

/*
Add a bit of space between the logo and
navigation (maybe I should use a margin but it
used one less declaration to override broswer
default padding).
*/

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

/*
Make the items display alongside each other
with a bit of space in-between.
*/

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

/*
Add an arrow to the jumplink in the nav.
*/

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

/*
For colours, I've decided to use the default
named CSS colours, various shades of orange
as an accent colour, including for link
underlines.
*/

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

/*
Make sure links are extra obvious on hover.
*/

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

/*
Add a highly visible focus state for keyboard
navigation (I don't have any interactive elements
apart from links, but if I did I'd add this to
those too).
*/

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

/*
A bit of padding to separate the content from the
header and footer.
*/

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

/*
As mentioned, the concept for the visual treatment
of this post was to run the content on and use
symbols as paragraph breaks, rather than
spacing/indents. This rule sets all the content in
the article to flow on.

NOTE: Doing so did have one unintended consequence,
when some browsers render the linebreaks in the HTML
as inline, they collapse them to a single character,
leaving a 4px wide extra node in the DOM. After some
investigation the best solution was to remove the
linebreaks between the <h1>, <h2>, and <p> elements
in the html (I would have preferred to solve this with
styling but there was not a prefect option there).
*/

article h1, article h2, article p {
  display: inline;
}

/*
Because I'm inlining the headings, I didn't want to
differentiate them with size, so I set them to use
the body size and instead used weight and smallcaps
to make them stand out (along with the ornaments
below). I decided that the relative position of the
<h1> and <h2> within the content was sufficent to
differentiate the two different heading levels.
*/

article h1, article h2 {
  font-size: inherit;
  font-weight: 800;
  font-variant: small-caps;
  text-transform: lowercase;
}

/*
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;
}

article h2::before {
  padding-left: 0.5em;
}

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

/*
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;

}