CSS reorg.

2 files changed, 497 insertions, 51 deletions

diff --git a/resources/css-cv.org b/resources/css-cv.org
new file mode 100644
index 0000000..c6e279b
--- /dev/null
+++ b/resources/css-cv.org
@@ -0,0 +1,422 @@
+# -*- mode: org; -*-
+
+#+TITLE: CV CSS file
+#+SUBTITLE: CV and resumé styling informations.
+#+AUTHOR: Marius Peter
+#+DATE: <2022-09-24 Sat>
+#+OPTIONS: toc:nil
+#+PROPERTY: header-args :tangle cv.css
+
+#+DESCRIPTION: Styling information for my CV and resumé.
+#+KEYWORDS: org-mode emacs blendux mlnp literate programming cv resume
+
+#+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 styling information for my CV and resumé.
+#+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
+
+#+BEGIN_SRC css
+  body {
+      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 {
+      --main: dodgerblue;
+      --accent: royalblue;
+  }
+#+END_SRC
+
+
+*** Background
+
+We assign colors to the page element backgrounds.
+
+#+BEGIN_SRC css
+  body { background: black; }
+  #content { background: white; }
+  .outline-2 { background: linear-gradient(90deg, powderblue, white 350px); }
+  h2 { background: inherit; } 	/* This is the most elegant solution for wide + narrow screens. */
+  h3:hover { background: dodgerblue; }
+  .outline-3 { background: white; }
+  /* .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
+  h3:hover { 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");
+  }
+#+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 { font-family: "Jost", sans-serif; }
+  pre,
+  code, .src,
+  .timestamp, #explainer { font-family: "Hack", monospace; }
+  /* pre { font-size: 0.8em; line-height: 1em; } */
+#+END_SRC
+
+
+*** Font sizes
+
+#+NAME: font-sizes
+#+BEGIN_SRC css
+  body {
+      font-size: 11pt;
+  }
+  .title {
+      font-size: 24pt;
+  }
+  .subtitle {
+      font-size: 16pt;
+  }
+  h2 {
+      font-size: 16pt;
+  }
+  h3 {
+      font-size: 14pt;
+  }
+#+END_SRC
+
+
+* Main content
+
+** All content
+
+The following rules concerns all the content displayed on the page.
+
+#+BEGIN_SRC css
+  #content {
+      max-width: 210mm;
+      min-width: 150mm;
+      /* height: 297mm; */
+      margin: auto;
+      padding: 2cm;
+  }
+#+END_SRC
+
+The following rule concerns all children (not /all/ descendants!) of
+the main ~#content~ section, except for the title and topnav sections.
+
+#+BEGIN_SRC css
+  .abstract, .outline-2 {
+      line-height: 1.2em;
+  }
+#+END_SRC
+
+
+** Title and subtitle
+
+#+BEGIN_SRC css
+  .title {
+      margin-top: 0;
+      margin-bottom: 0;
+      text-align: center;
+  }
+#+END_SRC
+
+
+** Table of Contents
+
+#+begin_src css
+  #table-of-contents {
+      text-align: center;
+  }
+  #table-of-contents h2 {
+  }
+  #table-of-contents ul {
+      list-style-type: none;
+  }
+
+#+end_src
+
+
+** Abstract
+
+#+BEGIN_SRC css
+  .abstract {
+      font-style: italic;
+      text-align: justify;
+      max-width: 26em;
+      margin: auto;
+  }
+#+END_SRC
+
+
+** Image
+
+#+begin_src css
+  .figure {
+      width: 128px;
+      margin: auto;
+  }
+  img {
+      width: 128px;
+      border-radius: 64px;      
+  }
+#+end_src
+
+
+** Actions
+
+Actions are only displayed in the web version (cf. [[Printing]] for
+inhibition).
+
+#+BEGIN_SRC css
+  .actions {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 1em 0;
+      gap: 1em;
+  }
+#+END_SRC
+
+
+** Main sections
+
+#+BEGIN_SRC css
+  .outline-2 {
+      display: grid;
+      grid-template-columns: 10em auto;
+  }
+  h2 {
+      position: sticky;
+      top: 0;
+      max-height: 3em;
+      margin: 0;
+      padding: 1rem;
+  }
+  .outline-text-2 {
+      display: none;
+  }
+#+END_SRC
+
+
+** Subsections
+
+#+BEGIN_SRC css
+  .outline-3 {
+      grid-column: 2;
+      margin: 1rem;
+  }
+  h3 {
+      padding: 1rem;
+      margin: 0;
+  }
+  h3:hover {
+      cursor: pointer;
+  }
+  .outline-text-3 {
+      /* display: none; */
+      padding: 0 1rem;
+  }
+#+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
+
+
+** Preformatted text
+
+#+begin_src css
+  pre {
+      overflow-x: scroll;
+  }
+#+end_src
+
+
+* Narrow screens
+
+#+begin_src css
+  @media only screen and (max-width: 750px) {
+      #content {
+          min-width: unset;
+          padding: 0.5cm;
+      }
+      .outline-2 {
+          display: flex;
+          flex-direction: column;
+      }
+  }
+#+end_src
+
+
+* Printing
+
+The following styling information ensures that the printed version of
+the web page renders as accurately as possible on printed media. I am
+targeting A4 sheet dimensions.
+
+#+BEGIN_SRC css
+  @page {
+      size: A4 portrait;
+      margin: 2cm;
+  }
+  @media print {
+      body {
+          padding: 0;
+          background: none;
+      }
+      #content {
+          padding: 0;		/* When printed, padding is controlled by @page margin */
+          width: 100%;
+      }
+      .actions {
+          display: none;
+      }
+  }
+#+END_SRC
diff --git a/resources/css.org b/resources/css-global.org
index 1441781..62292ba 100644
--- a/resources/css.org
+++ b/resources/css-global.org
@@ -5,12 +5,12 @@
 #+AUTHOR: Marius Peter
 #+DATE: <2022-01-30 Sun>
 #+OPTIONS: toc:nil
-#+PROPERTY: header-args :tangle mlnp.css
+#+PROPERTY: header-args :tangle global.css
 
-#+DESCRIPTION: Styling information for the entire following websites: mlnp.fr, wiki.mlnp.fr, and blog.mlnp.fr.
-#+KEYWORDS: org-mode emacs blendux mlnp literate programming
+#+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="mlnp.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
 
@@ -22,7 +22,7 @@ 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
+of this document contains a placeholder section for test purposes.
 #+end_abstract
 
 
@@ -58,6 +58,7 @@ These styles apply across the entire website, to every element.
       background: linear-gradient(0deg, skyblue 10%, aliceblue 30%);
       background-attachment: fixed;
       margin: 0;
+      overflow-x: hidden;
   }
 #+END_SRC
 
@@ -266,17 +267,18 @@ version.
   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: 60%;
+      width: 80%;
       margin: auto;
   }
-
 #+END_SRC
 
 
@@ -310,6 +312,15 @@ the main ~#content~ section, except for the title and topnav sections.
 #+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
@@ -317,12 +328,40 @@ 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
@@ -357,26 +396,6 @@ vertical extremity.
 #+END_SRC
 
 
-*** TODO Homepage images
-
-This whole section not necessarily needed.
-
-**** Hero images
-
-#+BEGIN_SRC css
-  /* .figure { style max-width: 100%; min-width: 30%; } */
-#+END_SRC
-
-
-**** Main card images
-
-#+BEGIN_SRC css
-  /* #outline-container-main-content .outline-3 img { */
-  /*     max-height: 10em; */
-  /* } */
-#+END_SRC
-
-
 ** Workflow states
 
 Here, we define styling for TODO, DONE and other workflow state
@@ -637,7 +656,6 @@ These styles apply to screens narrower than 500px.
       <<narrow-topnav-links>>
       <<narrow-topnav-menu-toggle>>
       <<narrow-topnav-shadow>>
-      <<narrow-content>>
   }
 #+END_SRC
 
@@ -676,18 +694,6 @@ On narrow screens, the hamburger menu also becomes visible.
 #+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
@@ -725,9 +731,12 @@ Toggle appearance of the navigation menu.
 #+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'' area, this is more ergonomic for mobile users. This
+larger ``quit menu'' clickable area, this is more ergonomic for mobile
+users.
 
 #+NAME: narrow-topnav-shadow
 #+BEGIN_SRC css :tangle no
@@ -752,19 +761,34 @@ larger ``quit'' area, this is more ergonomic for mobile users. This
 #+END_SRC
 
 
-*** Narrow content
+*** Clickable hamburger and shadow
 
-I'm gonna test the footnotes.[fn:1]
+Both the hamburger menu and the shadow cast when the menu is unfolded
+should appear clickable to the user.
 
-#+NAME: narrow-content
-#+BEGIN_SRC css :tangle no
-  #content > :not(.title, #topnav) { width: 90%; }
-  #outline-container-main-content {
-      flex-direction: column;
+#+BEGIN_SRC css
+  #hamburger, #shadow {
+      cursor: pointer;
   }
 #+END_SRC
 
 
-* Footnotes
+* Narrow content
+
+This section specifies how the entire content appears, as a function
+of screen width.
 
-[fn:1] This footnote is just to test footnote appearance.
+#+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