diff options
| -rw-r--r-- | resources/css.org | 564 | ||||
| -rw-r--r-- | resources/topnav.html | 24 | ||||
| -rw-r--r-- | resources/topnav.org | 6 |
3 files changed, 488 insertions, 106 deletions
diff --git a/resources/css.org b/resources/css.org index 2067f02..6924cf6 100644 --- a/resources/css.org +++ b/resources/css.org @@ -7,20 +7,50 @@ #+OPTIONS: toc:nil #+PROPERTY: header-args :tangle mlnp.css +#+KEYWORDS: org-mode emacs blendux mlnp literate programming #+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" /> -#+INCLUDE: topnav.org -#+TOC: headlines 3 +#+TOC: headlines 2 -* Global appearance +#+begin_abstract +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 +#+end_abstract -These styles apply across the entire =mlnp.fr= website, to every -element. + +* 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 +<2022-02-11 Fri> + +These styles apply across the entire website, to every element. #+BEGIN_SRC css body { - font-family: "Public Sans", sans-serif; - background: linear-gradient(0deg, white 0%, gray 70%); + background: linear-gradient(0deg, white 20%, gray 70%); background-attachment: fixed; margin: 0; } @@ -29,7 +59,13 @@ element. ** Colors -These colors can be accessed anywhere in the rest of the stylesheet. +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 @@ -40,77 +76,234 @@ These colors can be accessed anywhere in the rest of the stylesheet. #+END_SRC +*** Background + +We assign colors to the page element backgrounds. + +#+BEGIN_SRC css + .todo { background: tomato; } + .done { background: forestgreen; } + .timestamp { background: var(--topnav); } + .title { background: var(--topnav); } + #topnav { background: var(--topnav); } + #home { background: var(--topnav-menu); } + #topnav #hamburger { background: var(--topnav-menu); } + #topnav #hamburger:hover { background: white; } + #topnav #hamburger:hover .line { background: var(--topnav); } + #topnav a:hover { background: white; } + #shadow { background: black; } +#+END_SRC + + +*** Foreground + +#+NAME: foreground +#+BEGIN_SRC css + .todo, .done { color: white; } + .timestamp { color: white; } + .title { color: white; } + .subtitle { color: lightgray; } + #home { color: white; } + #topnav #hamburger { color: white; } + #topnav #hamburger:hover { color: var(--topnav-menu); } + #topnav a:hover { color: var(--topnav-menu); } + #topnav ul a { color: lightgray; } +#+END_SRC + + ** TODO Fonts -Add @ rules and set +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. -#+NAME: fonts +We use the following fonts: + +- 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]]. + +#+NAME: font-faces #+BEGIN_SRC css - code, .src { - font-family: "Hack", sans-serif; + /* Sans serif */ + @font-face { + font-family: "Public Sans"; + src: url("fonts/PublicSans-Regular.otf"); + } + @font-face { + font-family: "Jost"; + src: url("fonts/Jost-Regular.ttf"); + } + /* Serif */ + @font-face { + font-family: "Crimson Pro"; + src: url("fonts/CrimsonPro-Regular.ttf"); + } + @font-face { + font-family: "Linux Libertine"; + src: url("fonts/LinLibertine_R.ttf"); + } + /* Monospace */ + @font-face { + font-family: "Hack"; + src: url("fonts/Hack-Regular.ttf"); + } + @font-face { + 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 +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; } + h1, h2, + h3, h4, + #topnav { font-family: "Jost", sans-serif; } + code, .src, + .timestamp, + #postamble { font-family: "Hack", monospace; } + .src { font-size: 0.8em; line-height: 1.2em; } +#+END_SRC -** Entire content -This rule concerns all content except for the title section and -postamble. +** TODO Tab-select styling + +Tab-selected content must appear with a wide, contrasted border. This +is an accessiblity concern. #+BEGIN_SRC css - .outline-2, .abstract { - width: 70%; - margin-right: auto; - margin-left: auto; + a:focus { + border: 0.2em solid aquamarine; } #+END_SRC -** Title and subtitle +** TODO Durations + + + +* Title and subtitle #+BEGIN_SRC css .title { - background: cornflowerblue; - color: white; margin-top: 0; padding-top: 0.5em; margin-bottom: 0; padding-bottom: 0; + position: relative; + z-index: 200; + } +#+END_SRC + + +* Body text + +The following rules concerns all body text. This means most content on +the page, except for the title section and postamble. + +#+BEGIN_SRC css + .abstract, + .outline-2, + #table-of-contents, + #list-of-tables { + line-height: 1.5em; + width: 60%; + margin: auto; } - .subtitle { - color: lightgray; + p { text-align: justify; } + table { margin: auto; } +#+END_SRC + + +** Workflow states + +Here, we define styling for TODO, DONE and other workflow state +keywords. + +#+BEGIN_SRC css + .todo, .done { + /* line-height: 1em; */ + font-weight: bold; + padding: 0 0.2em; + border-radius: 4px; + display: inline-block; } #+END_SRC -** Table of contents +** Timestamps + +<2022-02-14 Mon>--<2022-02-21 Mon> #+BEGIN_SRC css - #table-of-contents { - width: 20%; - /* position: sticky; */ - top: 5em; + .timestamp { display: inline-block; - vertical-align: top; + /* text-align: start; */ + padding: 0 0.2em; + border-radius: 8px; } - #text-table-of-contents ul { +#+END_SRC + + +** Anchor links + +Because of the sticky header, we require all content that can be +jumped to on the page to appear at an offset below this header. + +#+BEGIN_SRC css + h1, h2, + h3, h4, + h5, h6, + #table-of-contents, + table { scroll-margin-top: 4em; } +#+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. + +#+BEGIN_SRC css + #table-of-contents ul { list-style-type: none; - padding: 0; } #+END_SRC -* Top navigation bar +* Responsive 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. +On wide screens, the top navigation bar contains links to the other +top-level website pages. On narrow screens, it contains buttons that +act as shortcuts to the website's home, the page's table of contents, +and links to the other top-level website pages which are accessible +via a hamburger menu. #+NAME: navbar #+BEGIN_SRC css #topnav { - background: var(--topnav); z-index: 100; position: sticky; top: 0; @@ -118,38 +311,174 @@ website pages. #+END_SRC +** Components + +In this section, we define the appearance of the components contained +inside the top navigation bar. + + +*** Hamburger menu + +As of 2022, hamburger menus are still a contentious topic among UX +designers. It was previously celebrated by mobile designers for its +compact appearance and now universally recognizable function, however, +studies by Google show increased user engagement with interfaces +displaying the possible links or actions as tabs at the bottom of the +interface. I like hamburgers and wanted to challenge my CSS design +skills, so I went with this menu implementation. + +In the website's mobile version, the hamburger menu will capture the +top-level navigation links to declutter the top navigation bar. + + +**** Suppressing the menu checkbox + +The checkbox used to toggle the menu is never displayed. We use the +~#hamburger~ and ~#shadow~ labels to toggle the menu instead. + +#+BEGIN_SRC css + #menu-toggle { display: none; } +#+END_SRC + + +**** Design + +The hamburger menu is comprised of three ~div~ elements with class +~.line~ stacked on top of each other, with IDs ~#one~, ~#two~, and +~#three~ respectively. + +#+BEGIN_SRC css + #hamburger { + position: absolute; + right: 0; + margin: 0.5em; + padding: 0.5em; + height: 1.5em; + width: 1.5em; + border-radius: 8px; + } + #hamburger .line { + position: relative; + height: 0.2em; + width: 100%; + margin: 0.2em auto; + background: white; + border-radius: 2px; + } +#+END_SRC + + +**** Animation + +Our juicy hamburger should transform into a cross when activated, and +regain its meaty appearance when deactivated. Modern CSS engines are +powerful enough to animate individual icon components, enabling richer +visuals effects and enhanced affordance cues. + + +***** Hamburger + +#+BEGIN_SRC css + #menu-toggle:not(:checked) ~ #hamburger #one { + transform: translateY(0) rotate(0); + transition: transform 0.2s; + } + #menu-toggle:not(:checked) ~ #hamburger #two { + transition: opacity 0.2s; + opacity: 1; + } + #menu-toggle:not(:checked) ~ #hamburger #three { + transform: translateY(0) rotate(0); + transition: transform 0.2s; + } + +#+END_SRC + + +***** Cross + +#+BEGIN_SRC css + #menu-toggle:checked ~ #hamburger #one { + transform: translateY(0.4em) rotate(-45deg); + transition: transform 0.2s; + } + #menu-toggle:checked ~ #hamburger #two { + transition: opacity 0.2s; + opacity: 0; + } + #menu-toggle:checked ~ #hamburger #three { + transform: translateY(-0.4em) rotate(45deg); + transition: transform 0.2s; + } +#+END_SRC + + + + +*** Navigation buttons + +These buttons appear in the website's narrow version. They present +useful shorcuts to the user, namely links to the homepage and to the +current page's table of contents. + +#+BEGIN_SRC css + #buttons { + position: absolute; + margin: 0.5em; + padding: 0.5em 0; + } + #buttons a { + text-decoration: none; + border-radius: 0 8px 8px 0; + padding: 0.5em; + } +#+END_SRC + + ** Wide screens + +*** Top navigation links---wide + +On wide screens, top-level links appears as a banner right under the +page title. + #+BEGIN_SRC css #topnav ul { display: flex; - list-style-type: none; + flex-direction: row; justify-content: center; + position: relative; + list-style-type: none; 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); + #topnav ul a { padding: 0.5em; } +#+END_SRC + + +*** Hide navigation buttons + +When the top navigation bar is wide, the navigation buttons are hidden +from the viewport. + +#+NAME: wide-hidden-buttons +#+BEGIN_SRC css + #buttons { + transform: translateX(-200%); } #+END_SRC -*** Hide home and hamburger icons +*** Hide hamburger menu -When the top navigation bar is wide, the hamburger menu is hidden. +The hamburger menu is tucked out of sight, to the right of the +viewport. -#+NAME: topnav-wide-hidden #+BEGIN_SRC css - #home { display: none; } - #topnav label, #hamburger { display: none; } + #hamburger { + transform: translateX(200%); + } #+END_SRC @@ -160,89 +489,123 @@ 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-buttons>> <<narrow-hamburger>> <<narrow-topnav-links>> - <<narrow-table-of-contents>> + <<narrow-topnav-menu-toggle>> + <<narrow-topnav-shadow>> <<narrow-content>> } #+END_SRC -*** Narrow top navigation bar +*** Top navigation bar #+NAME: narrow-topnav #+BEGIN_SRC css :tangle no - #topnav { - padding: 0.5em; - } + #topnav { height: 3.5em; } #+END_SRC +*** Navigation buttons -*** Narrow home link +On narrow screens, the navigation buttons become visible. -#+NAME: narrow-home +#+NAME: narrow-buttons #+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; + #topnav #buttons { + transform: translateX(0); + transition: transform 1s; } #+END_SRC -*** Narrow hamburger +*** Hamburger icon + +On narrow screens, the hamburger menu also becomes visible. #+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 #hamburger { + transform: translateX(0); + transition: transform 1s; } - #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 + + +*** 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 Narrow top navigation links +*** TODO Top navigation links---narrow + +The navigation links contained in the top banner are stacked into a +column, their visibility can be toggled thanks to the ~#hamburger~ +label. #+NAME: narrow-topnav-links #+BEGIN_SRC css :tangle no #topnav ul { - padding: 0; + position: absolute; + flex-direction: column; + background: var(--topnav); + height: calc(100vh - 4em); + top: 3.5em; + padding: 0 0.5em; + justify-content: normal; + overflow-x: scroll; } - #topnav ul a { - box-sizing: border-box; - display: block; + #topnav ul a { display: block; } + +#+END_SRC + +Toggle appearance of the navigation menu. + +#+NAME: narrow-topnav-menu-toggle +#+BEGIN_SRC css :tangle no + #menu-toggle:not(:checked) ~ ul { + transition: transform 0.5s; + transform: translateX(-100%); + } + #menu-toggle:checked ~ ul { + transition: transform 0.5s; + transform: translateX(0); } #+END_SRC -*** Narrow table of contents +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 -#+NAME: narrow-table-of-contents +#+NAME: narrow-topnav-shadow #+BEGIN_SRC css :tangle no - /* #table-of-contents { */ - /* display: none; */ - /* } */ + #shadow { + display: block; + position: absolute; + height: calc(100vh - 3.5em); + top: 3.5em; + right: 0; + width: 100%; + } + #topnav #menu-toggle:not(:checked) ~ #shadow { + transition: opacity 0.5s; + visibility: hidden; + opacity: 0; + } + #topnav #menu-toggle:checked ~ #shadow { + transition: opacity 0.5s; + visibility: visible; + opacity: 0.5; + } #+END_SRC @@ -250,7 +613,8 @@ These styles apply to screens narrower than 500px. #+NAME: narrow-content #+BEGIN_SRC css :tangle no - .outline-2 { - width: 90%; - } + .abstract, + .outline-2, + #table-of-contents, + #list-of-tables { width: 90%; } #+END_SRC diff --git a/resources/topnav.html b/resources/topnav.html new file mode 100644 index 0000000..ec08661 --- /dev/null +++ b/resources/topnav.html @@ -0,0 +1,24 @@ +<nav id="topnav"> + <div id="buttons"> + <a href="index.html" id="home">Home</a> + <a href="#table-of-contents" id="home">Contents</a> + <!-- <a href="#table-of-contents" id="home">ToC</a> --> + <!-- <a href="#table-of-contents" id="home">ToC</a> --> + </div> + <input type="checkbox" id="menu-toggle"/> + <label for="menu-toggle" id="hamburger"> + <div class="line" id="one"></div> + <div class="line" id="two"></div> + <div class="line" id="three"></div> + </label> + <label for="menu-toggle" id="shadow"></label> + <ul class="org-ul"> + <li><a href="index.html">Home</a></li> + <li><a href="about.html">About</a></li> + <li><a href="http://blog.mlnp.fr/index.html">Blog</a></li> + <li><a href="http://wiki.mlnp.fr/index.html">Wiki</a></li> + <li><a href="cv.html">Curriculum Vitae</a></li> + <li><a href="publish-mlnp.html">Publish</a></li> + <li><a href="about.html#contact">Contact</a></li> + </ul> +</nav> diff --git a/resources/topnav.org b/resources/topnav.org deleted file mode 100644 index a2c3f6a..0000000 --- a/resources/topnav.org +++ /dev/null @@ -1,6 +0,0 @@ -#+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> |