From f1506013c98163a545da59690e68a85b2b68fbd3 Mon Sep 17 00:00:00 2001 From: Yarmo Mackenbach Date: Mon, 15 Jun 2020 23:30:03 +0200 Subject: [PATCH] Improved navigation system --- static/style.css | 24 +++++++++++++++--------- views/about.pug | 13 +++++++------ views/aotw.pug | 4 ++-- views/blog_post.pug | 29 ++++++++++++++++------------- views/contact.pug | 4 ++-- views/foss.pug | 4 ++-- views/id.pug | 26 ++++++++++++++++++++++++++ views/index.pug | 37 ++++++++----------------------------- views/music.pug | 4 ++-- views/notes.pug | 4 ++-- views/notes_post.pug | 7 ++++--- views/pgp.pug | 4 ++-- views/projects.pug | 4 ++-- views/projects_details.pug | 21 +++++++++++---------- views/vinyl.pug | 4 ++-- 15 files changed, 103 insertions(+), 86 deletions(-) create mode 100644 views/id.pug diff --git a/static/style.css b/static/style.css index e4afdfd..6578c52 100644 --- 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; diff --git a/views/about.pug b/views/about.pug index 0fb0064..53ff25a 100644 --- 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 >> About me diff --git a/views/aotw.pug b/views/aotw.pug index 5125209..e12d466 100644 --- 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 | > a(href="/music") music + | > album of the week h1 Yarmo's Album Of The Week main diff --git a/views/blog_post.pug b/views/blog_post.pug index a696b00..336a8aa 100644 --- 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 + | > 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']} + | > !{$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']} diff --git a/views/contact.pug b/views/contact.pug index 43364b5..fb1dcc7 100644 --- 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 + | > contact h1 | Contact me diff --git a/views/foss.pug b/views/foss.pug index bfe7884..4dd38ea 100644 --- 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 + | > foss h1 | FOSS diff --git a/views/id.pug b/views/id.pug new file mode 100644 index 0000000..5da61cb --- /dev/null +++ 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 Neurosciences.
+ | Enjoys programming and making music.
+ | Advocates for FOSS and online privacy. + p + a(href="mailto:yarmo@qivro.xyz", rel="me", title="Email").u-email Email + | — + a(href="xmpp:yarmo@qivro.xyz", rel="me", title="XMPP").u-xmpp XMPP + | — + a(href="https://fosstodon.org/@yarmo", rel="me", title="Fediverse").u-url Fediverse + | — + a(href="https://git.yarmo.eu/yarmo", rel="me", title="Gitea").u-url Gitea + | — + a(href="/9F0048AC0B23301E1F77E994909F6BD6F80F485D.asc", download="/9F0048AC0B23301E1F77E994909F6BD6F80F485D.asc", rel="pgpkey publickey authn", type="text/plain", title="PGP public key") PGP diff --git a/views/index.pug b/views/index.pug index ffd2d6d..9a0ac8b 100644 --- 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 Neurosciences.
- | Enjoys programming and making music.
- | Advocates for FOSS and online privacy. - p - a(href="mailto:yarmo@qivro.xyz", rel="me", title="Email").u-email Email - | — - a(href="xmpp:yarmo@qivro.xyz", rel="me", title="XMPP").u-xmpp XMPP - | — - a(href="https://fosstodon.org/@yarmo", rel="me", title="Fediverse").u-url Fediverse - | — - a(href="https://git.yarmo.eu/yarmo", rel="me", title="Gitea").u-url Gitea - | — - 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 + | > blog + h1 + | Yarmo's blog main - p - | Go to: - a(href="/about") about me + + include id .longform_list.h-feed each $item in $posts diff --git a/views/music.pug b/views/music.pug index 9df2c31..a9245a5 100644 --- 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 + | > music h1 Yarmo's music p | Go to: diff --git a/views/notes.pug b/views/notes.pug index f7085ea..6d5f3a9 100644 --- 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 + | > notes h1 Yarmo's notes main diff --git a/views/notes_post.pug b/views/notes_post.pug index da3155d..51dada0 100644 --- 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 | > a(href="/notes") notes - + | > !{$post['slug']} + + main article.longform.h-entry h1.p-name !{$post['title']} p.longform__header diff --git a/views/pgp.pug b/views/pgp.pug index b0a9d1c..3beac63 100644 --- 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 + | > pgp h1 | PGP public key diff --git a/views/projects.pug b/views/projects.pug index 47f9480..a7d200c 100644 --- 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 + | > projects h1 Yarmo's projects main diff --git a/views/projects_details.pug b/views/projects_details.pug index a0d002c..4256176 100644 --- 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 | > a(href="/projects") projects - h1 !{$project['title']} + | > !{$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']} diff --git a/views/vinyl.pug b/views/vinyl.pug index 9f10a95..c5904bb 100644 --- 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 | > a(href="/music") music + | > vinyl h1 Yarmo's vinyl collection main