Improved navigation system
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Yarmo Mackenbach 2020-06-15 23:30:03 +02:00
parent 5368d2fff3
commit f1506013c9
15 changed files with 103 additions and 86 deletions

View File

@ -63,6 +63,11 @@ body {
background-color: var(--clr-bg); background-color: var(--clr-bg);
margin: 24px; margin: 24px;
} }
header {
margin: 0 0 48px;
padding: 0 0 24px;
border-bottom: 3px dashed rgba(0,0,0,0.5);
}
.container { .container {
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
@ -89,6 +94,7 @@ a:hover {
} }
h1 { h1 {
line-height: 1.2em; line-height: 1.2em;
margin: 8px 0 12px 0;
} }
h2 { h2 {
color: var(--clr-header); color: var(--clr-header);
@ -137,40 +143,40 @@ blockquote strong em {
color: var(--clr-text-highlight); color: var(--clr-text-highlight);
} }
header.card { .id-card {
margin-bottom: 64px; margin: 0 0 64px 0;
} }
header.card { .id-card {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
header.card .header-image { .id-card .header-image {
flex: 1; flex: 1;
flex-basis: auto; flex-basis: auto;
margin: 8px 32px 8px 0; margin: 8px 32px 8px 0;
text-align: center; text-align: center;
} }
header.card .header-description { .id-card .header-description {
flex: 100; flex: 100;
flex-basis: auto; flex-basis: auto;
/* min-width: 360px; */ /* min-width: 360px; */
margin: 8px 0; margin: 8px 0;
/* text-align: center; */ /* text-align: center; */
} }
header.card .profile-picture { .id-card .profile-picture {
max-width: 160px; max-width: 160px;
border-radius: 100%; border-radius: 100%;
} }
header.card h1 { .id-card h1 {
font-size: 1.4em; font-size: 1.4em;
margin: 0 0 16px; margin: 0 0 16px;
} }
header.card p { .id-card p {
font-size: 1.1em; font-size: 1.1em;
margin: 0 0 8px; margin: 0 0 8px;
} }
header.card .social a { .id-card .social a {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;

View File

@ -2,14 +2,11 @@ extends layout
block content block content
header header
p nav
| Back to: | about me
a(href="/") blog
h1 h1
| About Me | About Me
nav
main
p
| Go to: | Go to:
a(href="/") blog a(href="/") blog
| | | |
@ -24,6 +21,10 @@ block content
a(href="/pgp") PGP a(href="/pgp") PGP
| | | |
a(href="/contact") contact a(href="/contact") contact
main
include id
h2 >> About me h2 >> About me

View File

@ -6,11 +6,11 @@ mixin entry($item)
block content block content
header header
p nav
| Back to:
a(href="/about") about me a(href="/about") about me
| > | >
a(href="/music") music a(href="/music") music
| > album of the week
h1 Yarmo's Album Of The Week h1 Yarmo's Album Of The Week
main main

View File

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

View File

@ -2,9 +2,9 @@ extends layout
block content block content
header header
p nav
| Back to:
a(href="/about") about me a(href="/about") about me
| > contact
h1 h1
| Contact me | Contact me

View File

@ -10,9 +10,9 @@ mixin foss_contribution($item)
block content block content
header header
p nav
| Back to:
a(href="/about") about me a(href="/about") about me
| > foss
h1 h1
| FOSS | FOSS

26
views/id.pug Normal file
View File

@ -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

View File

@ -10,37 +10,16 @@ mixin entry($item)
block content block content
.h-card .h-card
header.card header
.header-image nav
img(src="/static/img/profile.png", alt="Yarmo's profile picture").profile-picture.u-photo a(href="/about") about me
| &gt; blog
.header-description h1
h1 | Yarmo's blog
| 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
main main
p
| Go to: include id
a(href="/about") about me
.longform_list.h-feed .longform_list.h-feed
each $item in $posts each $item in $posts

View File

@ -2,9 +2,9 @@ extends layout
block content block content
header header
p nav
| Back to:
a(href="/about") about me a(href="/about") about me
| &gt; music
h1 Yarmo's music h1 Yarmo's music
p p
| Go to: | Go to:

View File

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

View File

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

View File

@ -2,9 +2,9 @@ extends layout
block content block content
header header
p nav
| Back to:
a(href="/about") about me a(href="/about") about me
| &gt; pgp
h1 h1
| PGP public key | PGP public key

View File

@ -9,9 +9,9 @@ mixin entry($item)
block content block content
header header
p nav
| Back to:
a(href="/about") about me a(href="/about") about me
| &gt; projects
h1 Yarmo's projects h1 Yarmo's projects
main main

View File

@ -2,17 +2,18 @@ extends layout
block content block content
header header
p nav
| Back to:
a(href="/about") about me a(href="/about") about me
| &gt; | &gt;
a(href="/projects") projects a(href="/projects") projects
h1 !{$project['title']} | &gt; !{$project['slug']}
article.longform main
p article.longform
| Got an idea or a comment? h1 !{$project['title']}
a(href="/contact") Feel free to contact me! p
p.longform__header | Got an idea or a comment?
.longform__content a(href="/contact") Feel free to contact me!
| !{$project['content']} p.longform__header
.longform__content
| !{$project['content']}

View File

@ -6,11 +6,11 @@ mixin entry($item)
block content block content
header header
p nav
| Back to:
a(href="/about") about me a(href="/about") about me
| &gt; | &gt;
a(href="/music") music a(href="/music") music
| &gt; vinyl
h1 Yarmo's vinyl collection h1 Yarmo's vinyl collection
main main