Website styles.

1 files changed, 187 insertions, 69 deletions

diff --git a/resources/css.org b/resources/css.org
index 7a60745..4ca2638 100644
--- a/resources/css.org
+++ b/resources/css.org
@@ -7,6 +7,7 @@
 #+OPTIONS: toc:nil
 #+PROPERTY: header-args :tangle mlnp.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
 #+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" />
 #+TOC: headlines 2
@@ -36,11 +37,11 @@ SCHEDULED: <2022-02-18 Fri> DEADLINE: <2022-02-18 Fri>
 - 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!  |
+| Category | Value           |
+|----------+-----------------|
+|        1 | A first value.  |
+|        2 | A second value. |
+|        3 | A third value!  |
 
 
 * Global definitions
@@ -50,7 +51,7 @@ These styles apply across the entire website, to every element.
 
 #+BEGIN_SRC css
   body {
-      background: linear-gradient(0deg, white 20%, slategray 70%);
+      background: linear-gradient(0deg, skyblue 10%, aliceblue 30%);
       background-attachment: fixed;
       margin: 0;
   }
@@ -70,7 +71,7 @@ These colors variables can be accessed anywhere in the rest of the stylesheet.
 #+NAME: colors
 #+BEGIN_SRC css
   :root {
-      --topnav: cornflowerblue;
+      --topnav: dodgerblue;
       --topnav-menu: royalblue;
   }
 #+END_SRC
@@ -92,6 +93,12 @@ We assign colors to the page element backgrounds.
   #topnav #hamburger:hover .line { background: var(--topnav); }
   #topnav .button:hover { background: white; }
   #shadow { background: black; }
+  thead { background: var(--topnav); }
+  #topnav ul a:hover { background: white; }
+  #org-div-home-and-up { background: var(--topnav); }
+  #postamble { background: var(--topnav); }
+  #outline-container-main-content
+  .outline-3 { background: var(--topnav); }
 #+END_SRC
 
 
@@ -107,16 +114,18 @@ We assign colors to the page element backgrounds.
   #topnav #hamburger { color: white; }
   #topnav #hamburger:hover { color: var(--topnav-menu); }
   #topnav .button:hover { color: var(--topnav-menu); }
-  #topnav ul a { color: lightgray; }
+  #topnav ul a { color: white; }
+  #topnav ul a:hover { color: var(--topnav-menu); }
+  #org-div-home-and-up { color: white; }
+  #postamble { color: white; }
+  thead { color: white; }
 #+END_SRC
 
 
-** TODO Fonts
+** Typefaces
 
-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:
+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.
@@ -128,9 +137,17 @@ We use the following fonts:
 - Monoisome :: An alternative monospace typeface with great support
   for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]].
 
-#+NAME: font-faces
+
+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
-  /* Sans serif */
   @font-face {
       font-family: "Public Sans";
       src: url("fonts/PublicSans-Regular.otf");
@@ -139,16 +156,29 @@ We use the following fonts:
       font-family: "Jost";
       src: url("fonts/Jost-Regular.ttf");
   }
-  /* Serif */
   @font-face {
-      font-family: "Crimson Pro";
-      src: url("fonts/CrimsonPro-Regular.ttf");
+      font-family: "Cairo";
+      src: url("fonts/Cairo-Regular.ttf");
   }
   @font-face {
-      font-family: "Linux Libertine";
-      src: url("fonts/LinLibertine_R.ttf");
+      font-family: "Amiri";
+      src: url("fonts/Amiri-Regular.ttf");
   }
-  /* Monospace */
+#+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");
@@ -157,33 +187,26 @@ We use the following fonts:
       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
 
+
+*** Assigning fonts to elements
+
 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; }
+  .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; }
-  .src { font-size: 0.8em; line-height: 1.2em; }
+  pre { font-size: 0.8em; line-height: 1em; }
 #+END_SRC
 
 
@@ -199,40 +222,126 @@ is an accessiblity concern.
 #+END_SRC
 
 
-** TODO Durations
+* 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;
+  }
+#+end_src
+
+
+* Main content
 
-* Title and subtitle
+The following rule concerns all the content displayed on the page.
+
+It 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%;
+      margin: auto;
+  }
+  p { text-align: justify; }
+#+END_SRC
+
+
+** TODO `Home' and `Up' links
+
+#+BEGIN_SRC css
+  #org-div-home-and-up {}
+#+END_SRC
+
+
+** 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;
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
   }
 #+END_SRC
 
 
-* Body text
+** Table of contents
 
-The following rules concerns all body text. This means most content on
-the page, except for the title section and postamble.
+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
-  .abstract,
-  .outline-2,
-  #table-of-contents,
-  #list-of-tables {
-      line-height: 1.5em;
-      width: 60%;
-      margin: auto;
+  #table-of-contents ul {
+      list-style-type: none;
   }
-  p { text-align: justify; }
-  table { margin: auto; }
+#+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
+
+I also want table headers to stick to the top of the table. This
+serves as a useful reminder of the
+
+#+BEGIN_SRC css
+  thead {
+      position: sticky;
+      top: 0;
+  }
+#+END_SRC
+
+
+** Images
+
+#+BEGIN_SRC css
+.figure img { max-width: 100%; min-width: 30%; }
+#+END_SRC
+
+
+*** TODO Hero images
+
+#+BEGIN_SRC css
+  /* .figure { style max-width: 100%; min-width: 30%; } */
 #+END_SRC
 
 
@@ -259,9 +368,9 @@ keywords.
 #+BEGIN_SRC css
   .timestamp {
       display: inline-block;
-      /* text-align: start; */
       padding: 0 0.2em;
       border-radius: 8px;
+      white-space: nowrap;
   }
 #+END_SRC
 
@@ -276,19 +385,18 @@ jumped to on the page to appear at an offset below this header.
   h3, h4,
   h5, h6,
   #table-of-contents,
-  table { scroll-margin-top: 4em; }
+  table { scroll-margin-top: 4rem; }
 #+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.
+** Postamble
 
 #+BEGIN_SRC css
-  #table-of-contents ul {
-      list-style-type: none;
+  #postamble {
+      width: 18em;
+      margin: 1em auto;
+      padding: 1em;
+      border-radius: 8px;
   }
 #+END_SRC
 
@@ -348,7 +456,7 @@ The hamburger menu is comprised of three ~div~ elements with class
 ~#three~ respectively.
 
 #+BEGIN_SRC css
-  #hamburger {
+  #topnav #hamburger {
       position: absolute;
       right: 0;
       margin: 0.5em;
@@ -357,7 +465,7 @@ The hamburger menu is comprised of three ~div~ elements with class
       width: 1.5em;
       border-radius: 8px;
   }
-  #hamburger .line {
+  #topnav #hamburger .line {
       position: relative;
       height: 0.2em;
       width: 100%;
@@ -453,7 +561,10 @@ page title.
       padding: 0.5em;
       margin: 0;
   }
-  #topnav ul a { padding: 0.5em; }
+  #topnav ul a {
+      padding: 0.5em;
+      text-decoration: none;
+  }
 #+END_SRC
 
 
@@ -611,10 +722,17 @@ larger ``quit'' area, this is more ergonomic for mobile users. This
 
 *** Narrow content
 
+I'm gonna test the footnotes.[fn:1]
+
 #+NAME: narrow-content
 #+BEGIN_SRC css :tangle no
-  .abstract,
-  .outline-2,
-  #table-of-contents,
-  #list-of-tables { width: 90%; }
+  #content > :not(.title, #topnav) { width: 90%; }
+  #outline-container-main-content {
+      flex-direction: column;
+  }
 #+END_SRC
+
+
+* Footnotes
+
+[fn:1] This footnote is just to test footnote appearance.