# -*- mode: org; -*-

#+TITLE: Global CSS file
#+SUBTITLE: Site-wide styling informations.
#+AUTHOR: Marius Peter
#+DATE: <2022-01-30 Sun>
#+OPTIONS: toc:nil
#+PROPERTY: header-args :tangle mlnp.css

#+KEYWORDS: org-mode emacs blendux mlnp literate programming
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" />
#+TOC: headlines 2


#+begin_abstract
This page describes the /entire/ website's styling
*information*. After experimenting with =flexbox= and =grid= layouts,
I decided to go with a plain linear document flow. This maximizes
design legibility and the accessibility of affordances. The beginning
of this document contains a placeholder section to test
#+end_abstract


* First level heading
SCHEDULED: <2022-02-18 Fri> DEADLINE: <2022-02-18 Fri>

** Second level heading
<2022-02-18 Fri>

*** Third level heading
<2022-02-18 Fri 12:48>

**** Fourth level heading. This is styled like a list item by default.

- Itemized list.
- This is the second item.
- This third item makes this list respect the [[https://en.wikipedia.org/wiki/Rule_of_three_(writing)][rule of three]].

  | Category | Value           |
  |----------+-----------------|
  |        1 | A first value.  |
  |        2 | A second value. |
  |        3 | A third value!  |


* Global definitions
<2022-02-11 Fri>

These styles apply across the entire website, to every element.

#+BEGIN_SRC css
  body {
      background: linear-gradient(0deg, white 20%, slategray 70%);
      background-attachment: fixed;
      margin: 0;
  }
#+END_SRC


** Colors

Declaring individual one-liner color rules enables efficient searching
for the relevant properties.


*** Variables

These colors variables can be accessed anywhere in the rest of the stylesheet.

#+NAME: colors
#+BEGIN_SRC css
  :root {
      --topnav: cornflowerblue;
      --topnav-menu: royalblue;
  }
#+END_SRC


*** Background

We assign colors to the page element backgrounds.

#+BEGIN_SRC css
  .todo { background: tomato; }
  .done { background: forestgreen; }
  .timestamp { background: var(--topnav); }
  .title { background: var(--topnav); }
  #topnav { background: var(--topnav); }
  .button { background: var(--topnav-menu); }
  #topnav #hamburger { background: var(--topnav-menu); }
  #topnav #hamburger:hover { background: white; }
  #topnav #hamburger:hover .line { background: var(--topnav); }
  #topnav .button:hover { background: white; }
  #shadow { background: black; }
#+END_SRC


*** Foreground

#+NAME: foreground
#+BEGIN_SRC css
  .todo, .done { color: white; }
  .timestamp { color: white; }
  .title { color: white; }
  .subtitle { color: lightgray; }
  .button { color: white; }
  #topnav #hamburger { color: white; }
  #topnav #hamburger:hover { color: var(--topnav-menu); }
  #topnav .button:hover { color: var(--topnav-menu); }
  #topnav ul a { color: lightgray; }
#+END_SRC


** TODO Fonts

In the following section, we define fonts used across the website. All
font files are hosted on the server in the [[file:fonts/][fonts]] directory.

We use the following fonts:

- Public Sans :: A modern, smart sans serif font created by the
  [[https://public-sans.digital.gov/][USWDS]]. I use it for body text.
- Jost :: A modern geometric sans serif font by [[https://indestructibletype.com/Jost.html][indestructible
  type*]]. I use it for page title and subtitle.
- Hack :: A monospace typeface designed for source code. I love its
  legible characters and wide coverage, I use it frequently as a
  terminal font. Available at [[https://sourcefoundry.org/hack/][sourcefoundry]].
- Monoisome :: An alternative monospace typeface with great support
  for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]].

#+NAME: font-faces
#+BEGIN_SRC css
  /* Sans serif */
  @font-face {
      font-family: "Public Sans";
      src: url("fonts/PublicSans-Regular.otf");
  }
  @font-face {
      font-family: "Jost";
      src: url("fonts/Jost-Regular.ttf");
  }
  /* Serif */
  @font-face {
      font-family: "Crimson Pro";
      src: url("fonts/CrimsonPro-Regular.ttf");
  }
  @font-face {
      font-family: "Linux Libertine";
      src: url("fonts/LinLibertine_R.ttf");
  }
  /* Monospace */
  @font-face {
      font-family: "Hack";
      src: url("fonts/Hack-Regular.ttf");
  }
  @font-face {
      font-family: "Monoisome";
      src: url("fonts/Monoisome-Regular.ttf");
  }
  @font-face {
      font-family: "Compagnon Medium";
      src: url("fonts/Compagnon-Medium.otf") ;
  }
  @font-face {
      font-family: "Hermit";
      src: url("fonts/Hermit-Regular.otf");
  }
  @font-face {
      font-family: "Besley";
      src: url("fonts/Besley-Book.ttf");
  }
#+END_SRC

We apply the previously defined font faces to the page elements.

#+NAME: fonts
#+BEGIN_SRC css
  .title { font-family: "Jost", sans-serif; }
  #content { font-family: "Public Sans", sans-serif; }
  h1, h2,
  h3, h4,
  #topnav { font-family: "Jost", sans-serif; }
  code, .src,
  .timestamp,
  #postamble { font-family: "Hack", monospace; }
  .src { font-size: 0.8em; line-height: 1.2em; }
#+END_SRC


** TODO Tab-select styling

Tab-selected content must appear with a wide, contrasted border. This
is an accessiblity concern.

#+BEGIN_SRC css
  a:focus {
      border: 0.2em solid aquamarine;
  }
#+END_SRC


** TODO Durations



* Title and subtitle

#+BEGIN_SRC css
  .title {
      margin-top: 0;
      padding-top: 0.5em;
      margin-bottom: 0;
      padding-bottom: 0;
      position: relative;
      z-index: 200;
  }
#+END_SRC


* Body text

The following rules concerns all body text. This means most content on
the page, except for the title section and postamble.

#+BEGIN_SRC css
  .abstract,
  .outline-2,
  #table-of-contents,
  #list-of-tables {
      line-height: 1.5em;
      width: 60%;
      margin: auto;
  }
  p { text-align: justify; }
  table { margin: auto; }
#+END_SRC


** Workflow states

Here, we define styling for TODO, DONE and other workflow state
keywords.

#+BEGIN_SRC css
  .todo, .done {
      /* line-height: 1em; */
      font-weight: bold;
      padding: 0 0.2em;
      border-radius: 4px;
      display: inline-block;
  }
#+END_SRC


** Timestamps

<2022-02-14 Mon>--<2022-02-21 Mon>

#+BEGIN_SRC css
  .timestamp {
      display: inline-block;
      /* text-align: start; */
      padding: 0 0.2em;
      border-radius: 8px;
  }
#+END_SRC


** Anchor links

Because of the sticky header, we require all content that can be
jumped to on the page to appear at an offset below this header.

#+BEGIN_SRC css
  h1, h2,
  h3, h4,
  h5, h6,
  #table-of-contents,
  table { scroll-margin-top: 4em; }
#+END_SRC


* Table of contents

The table of contents exported to HTML from Org mode takes the form of
an unordered list. We suppress bullet points that would otherwise
appear before each entry.

#+BEGIN_SRC css
  #table-of-contents ul {
      list-style-type: none;
  }
#+END_SRC


* Responsive top navigation bar

On wide screens, the top navigation bar contains links to the other
top-level website pages. On narrow screens, it contains buttons that
act as shortcuts to the website's home, the page's table of contents,
and links to the other top-level website pages which are accessible
via a hamburger menu.

#+NAME: navbar
#+BEGIN_SRC css
  #topnav {
      z-index: 100;
      position: sticky;
      top: 0;
  }
#+END_SRC


** Components

In this section, we define the appearance of the components contained
inside the top navigation bar.


*** Hamburger menu

As of 2022, hamburger menus are still a contentious topic among UX
designers. It was previously celebrated by mobile designers for its
compact appearance and now universally recognizable function, however,
studies by Google show increased user engagement with interfaces
displaying the possible links or actions as tabs at the bottom of the
interface. I like hamburgers and wanted to challenge my CSS design
skills, so I went with this menu implementation.

In the website's mobile version, the hamburger menu will capture the
top-level navigation links to declutter the top navigation bar.


**** Suppressing the menu checkbox

The checkbox used to toggle the menu is never displayed. We use the
~#hamburger~ and ~#shadow~ labels to toggle the menu instead.

#+BEGIN_SRC css
  #menu-toggle { display: none; }
#+END_SRC


**** Design

The hamburger menu is comprised of three ~div~ elements with class
~.line~ stacked on top of each other, with IDs ~#one~, ~#two~, and
~#three~ respectively.

#+BEGIN_SRC css
  #hamburger {
      position: absolute;
      right: 0;
      margin: 0.5em;
      padding: 0.5em;
      height: 1.5em;
      width: 1.5em;
      border-radius: 8px;
  }
  #hamburger .line {
      position: relative;
      height: 0.2em;
      width: 100%;
      margin: 0.2em auto;
      background: white;
      border-radius: 2px;
  }
#+END_SRC


**** Animation

Our juicy hamburger should transform into a cross when activated, and
regain its meaty appearance when deactivated. Modern CSS engines are
powerful enough to animate individual icon components, enabling richer
visuals effects and enhanced affordance cues.


***** Hamburger

#+BEGIN_SRC css
  #menu-toggle:not(:checked) ~ #hamburger #one {
      transform: translateY(0) rotate(0);
      transition: transform 0.2s;
  }
  #menu-toggle:not(:checked) ~ #hamburger #two {
      transition: opacity 0.2s;
      opacity: 1;
  }
  #menu-toggle:not(:checked) ~ #hamburger #three {
      transform: translateY(0) rotate(0);
      transition: transform 0.2s;
  }

#+END_SRC


***** Cross

#+BEGIN_SRC css
  #menu-toggle:checked ~ #hamburger #one {
      transform: translateY(0.4em) rotate(-45deg);
      transition: transform 0.2s;
  }
  #menu-toggle:checked ~ #hamburger #two {
      transition: opacity 0.2s;
      opacity: 0;
  }
  #menu-toggle:checked ~ #hamburger #three {
      transform: translateY(-0.4em) rotate(45deg);
      transition: transform 0.2s;
  }
#+END_SRC




*** Navigation buttons

These buttons appear in the website's narrow version. They present
useful shorcuts to the user, namely links to the homepage and to the
current page's table of contents.

#+BEGIN_SRC css
  #buttons {
      position: absolute;
      margin: 0.5em;
      padding: 0.5em 0;
  }
  .button {
      text-decoration: none;
      border-radius: 0 8px 8px 0;
      padding: 0.5em;
  }
#+END_SRC


** Wide screens


*** Top navigation links---wide

On wide screens, top-level links appears as a banner right under the
page title.

#+BEGIN_SRC css
  #topnav ul {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      list-style-type: none;
      padding: 0.5em;
      margin: 0;
  }
  #topnav ul a { padding: 0.5em; }
#+END_SRC


*** Hide navigation buttons

When the top navigation bar is wide, the navigation buttons are hidden
from the viewport.

#+NAME: wide-hidden-buttons
#+BEGIN_SRC css
  #buttons {
      transform: translateX(-200%);
  }
#+END_SRC


*** Hide hamburger menu

The hamburger menu is tucked out of sight, to the right of the
viewport.

#+BEGIN_SRC css
  #hamburger {
      transform: translateX(200%);
  }
#+END_SRC


** Narrow screens

These styles apply to screens narrower than 500px.

#+BEGIN_SRC css :noweb no-export
  @media all and (max-width: 500px) {
      <<narrow-topnav>>
      <<narrow-buttons>>
      <<narrow-hamburger>>
      <<narrow-topnav-links>>
      <<narrow-topnav-menu-toggle>>
      <<narrow-topnav-shadow>>
      <<narrow-content>>
  }
#+END_SRC


*** Top navigation bar

#+NAME: narrow-topnav
#+BEGIN_SRC css :tangle no
  #topnav { height: 3.5em; }
#+END_SRC


*** Navigation buttons

On narrow screens, the navigation buttons become visible.

#+NAME: narrow-buttons
#+BEGIN_SRC css :tangle no
  #topnav #buttons {
      transform: translateX(0);
      transition: transform 1s;
  }
#+END_SRC


*** Hamburger icon

On narrow screens, the hamburger menu also becomes visible.

#+NAME: narrow-hamburger
#+BEGIN_SRC css :tangle no
  #topnav #hamburger {
      transform: translateX(0);
      transition: transform 1s;
  }
#+END_SRC


*** Clickable menu labels

Both the hamburger menu and the shadow cast when the menu is unfolded
should appear clickable to the user.

#+BEGIN_SRC css
  #hamburger, #shadow {
      cursor: pointer;
  }
#+END_SRC


*** TODO Top navigation links---narrow

The navigation links contained in the top banner are stacked into a
column, their visibility can be toggled thanks to the ~#hamburger~
label.

#+NAME: narrow-topnav-links
#+BEGIN_SRC css :tangle no
  #topnav ul {
      position: absolute;
      flex-direction: column;
      background: var(--topnav);
      height: calc(100vh - 3.5em);
      top: 3.5em;
      padding: 0 0.5em;
      justify-content: normal;
      overflow: auto;
  }
  #topnav ul a { display: block; }

#+END_SRC

Toggle appearance of the navigation menu.

#+NAME: narrow-topnav-menu-toggle
#+BEGIN_SRC css :tangle no
  #menu-toggle:not(:checked) ~ ul {
      transition: transform 0.5s;
      transform: translateX(-100%);
  }
  #menu-toggle:checked ~ ul {
      transition: transform 0.5s;
      transform: translateX(0);
  }
#+END_SRC


When the navigation menu is open, the area of the interface not
covered by the navigation links should be obscured. This affords a
larger ``quit'' area, this is more ergonomic for mobile users. This

#+NAME: narrow-topnav-shadow
#+BEGIN_SRC css :tangle no
  #shadow {
      display: block;
      position: absolute;
      height: calc(100vh - 3.5em);
      top: 3.5em;
      right: 0;
      width: 100%;
  }
  #topnav #menu-toggle:not(:checked) ~ #shadow {
      transition: opacity 0.5s;
      visibility: hidden;
      opacity: 0;
  }
  #topnav #menu-toggle:checked ~ #shadow {
      transition: opacity 0.5s;
      visibility: visible;
      opacity: 0.5;
  }
#+END_SRC


*** Narrow content

#+NAME: narrow-content
#+BEGIN_SRC css :tangle no
  .abstract,
  .outline-2,
  #table-of-contents,
  #list-of-tables { width: 90%; }
#+END_SRC