Gotta start somewhere!

1 files changed, 256 insertions, 0 deletions

diff --git a/resources/css.org b/resources/css.org
new file mode 100644
index 0000000..2067f02
--- /dev/null
+++ b/resources/css.org
@@ -0,0 +1,256 @@
+# -*- 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
+
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" />
+#+INCLUDE: topnav.org
+#+TOC: headlines 3
+
+
+* Global appearance
+
+These styles apply across the entire =mlnp.fr= website, to every
+element.
+
+#+BEGIN_SRC css
+  body {
+      font-family: "Public Sans", sans-serif;
+      background: linear-gradient(0deg, white 0%, gray 70%);
+      background-attachment: fixed;
+      margin: 0;
+  }
+#+END_SRC
+
+
+** Colors
+
+These colors can be accessed anywhere in the rest of the stylesheet.
+
+#+NAME: colors
+#+BEGIN_SRC css
+  :root {
+      --topnav: cornflowerblue;
+      --topnav-menu: royalblue;
+  }
+#+END_SRC
+
+
+** TODO Fonts
+
+Add @ rules and set
+
+#+NAME: fonts
+#+BEGIN_SRC css
+  code, .src {
+      font-family: "Hack", sans-serif;
+  }
+#+END_SRC
+
+
+
+** Entire content
+
+This rule concerns all content except for the title section and
+postamble.
+
+#+BEGIN_SRC css
+  .outline-2, .abstract {
+      width: 70%;
+      margin-right: auto;
+      margin-left: auto;
+  }
+#+END_SRC
+
+
+** Title and subtitle
+
+#+BEGIN_SRC css
+  .title {
+      background: cornflowerblue;
+      color: white;
+      margin-top: 0;
+      padding-top: 0.5em;
+      margin-bottom: 0;
+      padding-bottom: 0;
+  }
+  .subtitle {
+      color: lightgray;
+  }
+#+END_SRC
+
+
+** Table of contents
+
+#+BEGIN_SRC css
+  #table-of-contents {
+      width: 20%;
+      /* position: sticky; */
+      top: 5em;
+      display: inline-block;
+      vertical-align: top;
+  }
+  #text-table-of-contents ul {
+      list-style-type: none;
+      padding: 0;
+  }
+#+END_SRC
+
+
+* Top navigation bar
+
+The HTML preamble contains a single child: the /navigation bar/. This
+bar contains a link to the homepage, and links to the other top-level
+website pages.
+
+#+NAME: navbar
+#+BEGIN_SRC css
+  #topnav {
+      background: var(--topnav);
+      z-index: 100;
+      position: sticky;
+      top: 0;
+  }
+#+END_SRC
+
+
+** Wide screens
+
+#+BEGIN_SRC css
+  #topnav ul {
+      display: flex;
+      list-style-type: none;
+      justify-content: center;
+      padding: 0.5em;
+      margin: 0;
+  }
+  #topnav ul a {
+      /* flex-grow: 1; */
+      /* flex-basis: 0; */
+      padding: 0.5em;
+      color: lightgray;
+      text-align: center;
+  }
+  #topnav a:hover {
+      background: white;
+      color: var(--topnav-menu);
+  }
+#+END_SRC
+
+
+*** Hide home and hamburger icons
+
+When the top navigation bar is wide, the hamburger menu is hidden.
+
+#+NAME: topnav-wide-hidden
+#+BEGIN_SRC css
+  #home { display: none; }
+  #topnav label, #hamburger { display: none; }
+#+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-home>>
+      <<narrow-hamburger>>
+      <<narrow-topnav-links>>
+      <<narrow-table-of-contents>>
+      <<narrow-content>>
+  }
+#+END_SRC
+
+
+*** Narrow top navigation bar
+
+#+NAME: narrow-topnav
+#+BEGIN_SRC css :tangle no
+    #topnav {
+        padding: 0.5em;
+    }
+#+END_SRC
+
+
+
+*** Narrow home link
+
+#+NAME: narrow-home
+#+BEGIN_SRC css :tangle no
+  #home {
+      display: inline-block;
+      background: var(--topnav-menu);
+      color: white;
+      text-decoration: none;
+      border-radius: 0 8px 8px 0;
+      padding: 0.5em;
+  }
+#+END_SRC
+
+
+*** Narrow hamburger
+
+#+NAME: narrow-hamburger
+#+BEGIN_SRC css :tangle no
+  #topnav label {
+      display: inline-block;
+      float: right;
+      color: white;
+      padding: 0.5em;
+      margin: 0;
+      background: var(--topnav-menu);
+      border-radius: 8px;
+      cursor: pointer;
+  }
+  #topnav label:hover {
+      color: var(--topnav-menu);
+      background: white;
+  }
+  #topnav ul { display: none; }
+  #topnav input:checked ~ ul {
+      display: block;
+      width: 100%;
+      margin: 0;
+  }
+#+END_SRC
+
+
+*** TODO Narrow top navigation links
+
+#+NAME: narrow-topnav-links
+#+BEGIN_SRC css :tangle no
+  #topnav ul {
+      padding: 0;
+  }
+  #topnav ul a {
+      box-sizing: border-box;
+      display: block;
+  }
+#+END_SRC
+
+
+*** Narrow table of contents
+
+#+NAME: narrow-table-of-contents
+#+BEGIN_SRC css :tangle no
+  /* #table-of-contents { */
+  /*       display: none; */
+  /*   } */
+#+END_SRC
+
+
+*** Narrow content
+
+#+NAME: narrow-content
+#+BEGIN_SRC css :tangle no
+  .outline-2 {
+      width: 90%;
+  }
+#+END_SRC