CSS reorg.

1 files changed, 794 insertions, 0 deletions

diff --git a/resources/css-global.org b/resources/css-global.org
new file mode 100644
index 0000000..62292ba
--- /dev/null
+++ b/resources/css-global.org
@@ -0,0 +1,794 @@
+# -*- 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 global.css
+
+#+DESCRIPTION: Styling information for the entire following websites: mlnp.fr, wiki.mlnp.fr, blog.mlnp.fr, and apps.mlnp.fr.
+#+KEYWORDS: org-mode emacs blendux mlnp wiki blog apps literate programming css
+
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="global.css" />
+#+HTML_HEAD: <link rel="icon" type="image/png" href="resources/favicon.png"/>
+#+INCLUDE: topnav.html export html
+
+#+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 for test purposes.
+#+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, skyblue 10%, aliceblue 30%);
+      background-attachment: fixed;
+      margin: 0;
+      overflow-x: hidden;
+  }
+#+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 {
+      --main: dodgerblue;
+      --accent: royalblue;
+  }
+#+END_SRC
+
+
+*** Background
+
+We assign colors to the page element backgrounds.
+
+#+BEGIN_SRC css
+  .todo { background: tomato; }
+  .done { background: forestgreen; }
+  .timestamp { background: var(--main); }
+  .title { background: var(--main); }
+  #topnav { background: var(--main); }
+  .button { background: var(--accent); }
+  #topnav #hamburger { background: var(--accent); }
+  #topnav #hamburger:hover { background: white; }
+  #topnav #hamburger:hover .line { background: var(--main); }
+  #topnav .button:hover { background: white; }
+  #shadow { background: black; }
+  thead { background: var(--main); }
+  #topnav ul a:hover { background: white; }
+  #org-div-home-and-up { background: var(--main); }
+  #org-div-home-and-up a:hover { background: white; }
+  #postamble { background: var(--main); }
+  #outline-container-main-content .outline-3 { background: white; }
+#+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(--accent); }
+  #topnav .button:hover { color: var(--accent); }
+  #topnav ul a { color: white; }
+  #topnav ul a:hover { color: var(--accent); }
+  #org-div-home-and-up,
+  #org-div-home-and-up a { color: white; }
+  #org-div-home-and-up a:hover { color: var(--accent); }
+  #postamble { color: white; }
+  thead { color: white; }
+#+END_SRC
+
+
+** Typefaces
+
+In the following section, we specify the fonts used across the
+website. We use the following fonts for the [[https://en.wikipedia.org/wiki/Latin_script][Latin script]]:
+
+- 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]].
+
+
+We use the following fonts for other scripts:
+
+- Cairo :: A simple, sans-serif typeface for Arabic script.
+- Jost :: This font has good support for Cyrillic script.
+
+
+*** Sans
+
+#+NAME: faces-sans
+#+BEGIN_SRC css
+  @font-face {
+      font-family: "Public Sans";
+      src: url("fonts/PublicSans-Regular.otf");
+  }
+  @font-face {
+      font-family: "Jost";
+      src: url("fonts/Jost-Regular.ttf");
+  }
+  @font-face {
+      font-family: "Cairo";
+      src: url("fonts/Cairo-Regular.ttf");
+  }
+  @font-face {
+      font-family: "Amiri";
+      src: url("fonts/Amiri-Regular.ttf");
+  }
+#+END_SRC
+
+
+*** Serif
+
+#+NAME: faces-serif
+#+BEGIN_SRC css
+  /* None for now! */
+#+END_SRC
+
+
+*** Monospace
+
+#+NAME: faces-monospace
+#+BEGIN_SRC css
+  @font-face {
+      font-family: "Hack";
+      src: url("fonts/Hack-Regular.ttf");
+  }
+  @font-face {
+      font-family: "Monoisome";
+      src: url("fonts/Monoisome-Regular.ttf");
+  }
+#+END_SRC
+
+
+*** Assigning fonts to elements
+
+We apply the previously defined font faces to the page elements.
+
+#+NAME: fonts
+#+BEGIN_SRC css
+  #content { font-family: "Public Sans", sans-serif; }
+  .title,
+  h1, h2,
+  h3, h4,
+  #org-div-home-and-up,
+  #topnav { font-family: "Jost", sans-serif; }
+  pre,
+  code, .src,
+  .timestamp,
+  #postamble { font-family: "Hack", monospace; }
+  pre { font-size: 0.8em; line-height: 1em; }
+#+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
+
+
+* Homepage
+
+Certains homepage sections are styled uniquely, for visual impact.
+
+#+begin_src css
+  #main-content, #text-main-content {
+      display: none;
+  }
+  #outline-container-main-content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin-top: 1em;
+      gap: 1em;
+  }
+  #outline-container-main-content .outline-3 {
+      max-width: 12em;
+      padding: 0 1em;
+      border-radius: 8px;
+      border: 3px solid var(--main);
+  }
+#+end_src
+
+
+* TODO Main content
+
+The following rules concerns all the content displayed on the
+page. Most notably, we hide the mobile navigation buttons, which are
+hidden to the left and right of the top navigation bar on the desktop
+version.
+
+#+BEGIN_SRC css
+  #content {
+      max-width: 100%;		/* This was set to 60em in Emacs 28.1 */
+  }
+  p { text-align: justify; }
+#+END_SRC
+
+
+** Sections
+
+The following rule concerns all children (not /all/ descendants!) of
+the main ~#content~ section, except for the title and topnav sections.
+
+#+BEGIN_SRC css
+  #content > :not(.title, #topnav) {
+      line-height: 1.5em;
+      width: 80%;
+      margin: auto;
+  }
+#+END_SRC
+
+
+** `Home' and `Up' links
+
+#+BEGIN_SRC css
+  #org-div-home-and-up {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      padding: 0.5em;
+      font-size: large;
+  }
+  #org-div-home-and-up a {
+      text-decoration: none;
+      padding: 0.5em;
+      font-family: "Jost", sans-serif;
+  }
+#+END_SRC
+
+
+** Title and subtitle
+
+#+BEGIN_SRC css
+  .title {
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+  }
+#+END_SRC
+
+
+** Abstract
+
+#+begin_src css
+  .abstract {
+      font-style: italic;
+  }
+#+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 h2 {
+      position: revert;
+  }
+  #table-of-contents ul {
+      list-style-type: none;
+  }
+#+END_SRC
+
+
+** Subsections
+
+#+begin_src css
+  .outline-2 {
+      display: grid;
+      grid-template-columns: 10em auto;
+      grid-gap: 1em;
+  }
+  h2 {
+      grid-column: 1;
+      position: sticky;
+      top: 4rem;
+  }
+#+end_src
+
+
+** Subsubsections
+
+#+begin_src css
+  .outline-3 {
+      grid-column: 2;
+  }
+#+end_src
+
+
+** Tables
+
+Tables are susceptible to becoming very wide and tall. I choose to
+make big tables fit in a predetermined footprint so as not to disrupt
+document flow. This ensures we can scroll to the following section
+without having to scroll the entire table.
+
+Using the ~block~ display property has the additional benefit of
+displaying a black border around the table; this provides an
+additional visual cue that we have reached the table's horizontal or
+vertical extremity.
+
+#+BEGIN_SRC css
+  .big-table {
+      display: block;
+      max-height: 20em;
+      max-width: 100%;
+      overflow: auto;
+      scrollbar-width: thin;
+  }
+  table caption {
+      margin: 0.5em;
+      /* background: steelblue; */
+  }
+#+END_SRC
+
+
+** Images
+
+#+BEGIN_SRC css
+  .figure img { max-width: 100%; min-width: 30%; }
+#+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;
+      padding: 0 0.2em;
+      border-radius: 8px;
+      white-space: nowrap;
+  }
+#+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: 4rem; }
+#+END_SRC
+
+
+** Postamble
+
+#+BEGIN_SRC css
+  #postamble {
+      width: 18em;
+      margin: 1em auto;
+      padding: 1em;
+      border-radius: 8px;
+  }
+#+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
+  #topnav #hamburger {
+      position: absolute;
+      right: 0;
+      margin: 0.5em;
+      padding: 0.5em;
+      height: 1.5em;
+      width: 1.5em;
+      border-radius: 8px;
+  }
+  #topnav #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;
+      text-decoration: none;
+  }
+#+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>>
+  }
+#+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
+
+
+*** 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(--main);
+      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
+
+
+*** Narrow shadow
+
+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 menu'' clickable area, this is more ergonomic for mobile
+users.
+
+#+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
+
+
+*** Clickable hamburger and shadow
+
+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
+
+
+* Narrow content
+
+This section specifies how the entire content appears, as a function
+of screen width.
+
+#+BEGIN_SRC css
+  @media all and (max-width: 500px) {
+      #outline-container-main-content { flex-direction: column; }
+  }
+  @media all and (max-width: 1000px) {
+      #content > :not(.title, #topnav) { width: 90%; }
+      .outline-2 {
+          display: revert;
+      }
+      h2 {
+          position: revert;
+      }
+  }
+#+END_SRC