diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/css.org | 256 | ||||
| -rw-r--r-- | resources/topnav.org | 6 |
2 files changed, 262 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 diff --git a/resources/topnav.org b/resources/topnav.org new file mode 100644 index 0000000..a2c3f6a --- /dev/null +++ b/resources/topnav.org @@ -0,0 +1,6 @@ +#+HTML: <nav id="topnav"> +#+HTML: <a href="index.html" id="home"><code>home</code></a> +#+HTML: <label for="hamburger">☰</label> +#+HTML: <input type="checkbox" id="hamburger"/> +#+INCLUDE: topnav-items.org :lines "3-" +#+HTML: </nav> |