# -*- 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