Improved navigation system

2020-06-15 23:30:03 +02:00 · 2020-06-15 23:30:03 +02:00 · f1506013c9
commit f1506013c9
parent 5368d2fff3
15 changed files with 103 additions and 86 deletions
--- a/static/style.css
+++ b/static/style.css
@ -63,6 +63,11 @@ body {
    background-color: var(--clr-bg);
    margin: 24px;
 }
+header {
+	margin: 0 0 48px;
+	padding: 0 0 24px;
+	border-bottom: 3px dashed rgba(0,0,0,0.5);
+}
 .container {
    width: 100%;
    max-width: 800px;
@ -89,6 +94,7 @@ a:hover {
 }
 h1 {
    line-height: 1.2em;
+	margin: 8px 0 12px 0;
 }
 h2 {
    color: var(--clr-header);
@ -137,40 +143,40 @@ blockquote strong em {
    color: var(--clr-text-highlight);
 }

-header.card {
-    margin-bottom: 64px;
+.id-card {
+    margin: 0 0 64px 0;
 }
-header.card {
+.id-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
 }
-header.card .header-image {
+.id-card .header-image {
    flex: 1;
    flex-basis: auto;
    margin: 8px 32px 8px 0;
    text-align: center;
 }
-header.card .header-description {
+.id-card .header-description {
    flex: 100;
    flex-basis: auto;
    /* min-width: 360px; */
    margin: 8px 0;
    /* text-align: center; */
 }
-header.card .profile-picture {
+.id-card .profile-picture {
    max-width: 160px;
    border-radius: 100%;
 }
-header.card h1 {
+.id-card h1 {
    font-size: 1.4em;
    margin: 0 0 16px;
 }
-header.card p {
+.id-card p {
    font-size: 1.1em;
    margin: 0 0 8px;
 }
-header.card .social a {
+.id-card .social a {
    display: inline-block;
    width: 20px;
    height: 20px;
--- a/views/about.pug
+++ b/views/about.pug
@ -2,14 +2,11 @@ extends layout

 block content
    header
-        p
-            | Back to: 
-            a(href="/") blog
+        nav
+            | about me
        h1
            | About Me
-            
-    main
-        p
+        nav
            | Go to: 
            a(href="/") blog
            |  | 
@ -24,6 +21,10 @@ block content
            a(href="/pgp") PGP
            |  | 
            a(href="/contact") contact
+            
+    main
+            
+        include id
        
        h2 &gt;&gt; About me
        
--- a/views/aotw.pug
+++ b/views/aotw.pug
@ -6,11 +6,11 @@ mixin entry($item)

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
            |  &gt; 
            a(href="/music") music
+            |  &gt; album of the week
        h1 Yarmo's Album Of The Week
    
    main
--- a/views/blog_post.pug
+++ b/views/blog_post.pug
@ -2,17 +2,20 @@ extends layout

 block content
    header
-        p
-            | Back to: 
+        nav
+            a(href="/about") about me
+            |  &gt; 
            a(href="/") blog
-    
-    article.longform.h-entry
-        h1.p-name !{$post['title']}
-        p.longform__header
-            | Posted on 
-            a(href="{$post['url']}" datetime="{$post['date']}").u-url.dt-published !{$post['date_formatted']}
-            |  by 
-            a(href="/" rel="author").p-author.h-card !{$post['author']}
-        
-        .longform__content.e-content
-            | !{$post['content']}
+            |  &gt; !{$post['slug']}
+            
+    main
+        article.longform.h-entry
+            h1.p-name !{$post['title']}
+            p.longform__header
+                | Posted on 
+                a(href="{$post['url']}" datetime="{$post['date']}").u-url.dt-published !{$post['date_formatted']}
+                |  by 
+                a(href="/" rel="author").p-author.h-card !{$post['author']}
+            
+            .longform__content.e-content
+                | !{$post['content']}
--- a/views/contact.pug
+++ b/views/contact.pug
@ -2,9 +2,9 @@ extends layout

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
+            |  &gt; contact
        h1
            | Contact me
        
--- a/views/foss.pug
+++ b/views/foss.pug
@ -10,9 +10,9 @@ mixin foss_contribution($item)
        
 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
+            |  &gt; foss
        h1
            | FOSS
        
--- a/views/id.pug
+++ b/views/id.pug
@ -0,0 +1,26 @@
+.id-card
+    .header-image
+        img(src="/static/img/profile.png", alt="Yarmo's profile picture").profile-picture.u-photo
+    
+    .header-description
+        h1
+            | I'm 
+            a(href="https://yarmo.eu", rel="me", title="yarmo.eu").u-url.u-uid
+                span.p-name Yarmo Mackenbach
+            |  (
+            a(href="https://pronoun.is/he").u-pronoun he/him/his
+            | )
+        p.p-note
+            | Finished a PhD in <span class="p-category">Neurosciences</span>.<br>
+            | Enjoys <span class="p-category">programming</span> and <span class="p-category">making music</span>.<br>
+            | Advocates for <span class="p-category">FOSS</span> and <span class="p-category">online privacy</span>.
+        p
+                a(href="mailto:yarmo@qivro.xyz", rel="me", title="Email").u-email Email
+                |  &mdash; 
+                a(href="xmpp:yarmo@qivro.xyz", rel="me", title="XMPP").u-xmpp XMPP
+                |  &mdash; 
+                a(href="https://fosstodon.org/@yarmo", rel="me", title="Fediverse").u-url Fediverse
+                |  &mdash; 
+                a(href="https://git.yarmo.eu/yarmo", rel="me", title="Gitea").u-url Gitea
+                |  &mdash; 
+                a(href="/9F0048AC0B23301E1F77E994909F6BD6F80F485D.asc", download="/9F0048AC0B23301E1F77E994909F6BD6F80F485D.asc", rel="pgpkey publickey authn", type="text/plain", title="PGP public key") PGP
--- a/views/index.pug
+++ b/views/index.pug
@ -10,37 +10,16 @@ mixin entry($item)

 block content
    .h-card
-        header.card
-            .header-image
-                img(src="/static/img/profile.png", alt="Yarmo's profile picture").profile-picture.u-photo
-            
-            .header-description
-                h1
-                    | I'm 
-                    a(href="https://yarmo.eu", rel="me", title="yarmo.eu").u-url.u-uid
-                        span.p-name Yarmo Mackenbach
-                    |  (
-                    a(href="https://pronoun.is/he").u-pronoun he/him/his
-                    | )
-                p.p-note
-                    | Finished a PhD in <span class="p-category">Neurosciences</span>.<br>
-                    | Enjoys <span class="p-category">programming</span> and <span class="p-category">making music</span>.<br>
-                    | Advocates for <span class="p-category">FOSS</span> and <span class="p-category">online privacy</span>.
-                p
-                    a(href="mailto:yarmo@qivro.xyz", rel="me", title="Email").u-email Email
-                    |  &mdash; 
-                    a(href="xmpp:yarmo@qivro.xyz", rel="me", title="XMPP").u-xmpp XMPP
-                    |  &mdash; 
-                    a(href="https://fosstodon.org/@yarmo", rel="me", title="Fediverse").u-url Fediverse
-                    |  &mdash; 
-                    a(href="https://git.yarmo.eu/yarmo", rel="me", title="Gitea").u-url Gitea
-                    |  &mdash; 
-                    a(href="/9F0048AC0B23301E1F77E994909F6BD6F80F485D.asc", download="/9F0048AC0B23301E1F77E994909F6BD6F80F485D.asc", rel="pgpkey publickey authn", type="text/plain", title="PGP public key") PGP
+        header
+            nav
+                a(href="/about") about me
+                |  &gt; blog
+            h1
+                | Yarmo's blog
        
        main
-            p
-                | Go to: 
-                a(href="/about") about me
+            
+            include id
            
            .longform_list.h-feed
                each $item in $posts
--- a/views/music.pug
+++ b/views/music.pug
@ -2,9 +2,9 @@ extends layout

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
+            |  &gt; music
        h1 Yarmo's music
        p
            | Go to: 
--- a/views/notes.pug
+++ b/views/notes.pug
@ -10,9 +10,9 @@ mixin entry($item)

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
+            |  &gt; notes
        h1 Yarmo's notes
        
    main
--- a/views/notes_post.pug
+++ b/views/notes_post.pug
@ -2,12 +2,13 @@ extends layout

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
            |  &gt; 
            a(href="/notes") notes
-            
+            |  &gt; !{$post['slug']}
+    
+    main
        article.longform.h-entry
            h1.p-name !{$post['title']}
            p.longform__header
--- a/views/pgp.pug
+++ b/views/pgp.pug
@ -2,9 +2,9 @@ extends layout

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
+            |  &gt; pgp
        h1
            | PGP public key
    
--- a/views/projects.pug
+++ b/views/projects.pug
@ -9,9 +9,9 @@ mixin entry($item)

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
+            |  &gt; projects
        h1 Yarmo's projects
    
    main
--- a/views/projects_details.pug
+++ b/views/projects_details.pug
@ -2,17 +2,18 @@ extends layout

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
            |  &gt; 
            a(href="/projects") projects
-        h1 !{$project['title']}
+            |  &gt; !{$project['slug']}
    
-    article.longform
-        p
-            | Got an idea or a comment? 
-            a(href="/contact") Feel free to contact me!
-        p.longform__header
-        .longform__content
-            | !{$project['content']}
+    main
+        article.longform
+            h1 !{$project['title']}
+            p
+                | Got an idea or a comment? 
+                a(href="/contact") Feel free to contact me!
+            p.longform__header
+            .longform__content
+                | !{$project['content']}
--- a/views/vinyl.pug
+++ b/views/vinyl.pug
@ -6,11 +6,11 @@ mixin entry($item)

 block content
    header
-        p
-            | Back to: 
+        nav
            a(href="/about") about me
            |  &gt; 
            a(href="/music") music
+            |  &gt; vinyl
            h1 Yarmo's vinyl collection
    
    main