diff options
| -rw-r--r-- | backend/templates/base.html | 13 | ||||
| -rw-r--r-- | frontend/scss/special.scss | 37 |
2 files changed, 28 insertions, 22 deletions
diff --git a/backend/templates/base.html b/backend/templates/base.html index 548304e..8ed6802 100644 --- a/backend/templates/base.html +++ b/backend/templates/base.html @@ -20,19 +20,16 @@ {{ if ne .PubDate "" }} <meta name="article:published_time" content="{{ .PubDate }}" /> {{ end }} - <!-- Twitter --> - <meta name="twitter:card" content="summary_large_image" /> - <meta name="twitter:domain" content="{{ .Domain }}" /> - <meta name="twitter:url" content="https://{{ .Domain }}{{ .URL }}" /> - <meta name="twitter:title" content="{{ .Title }}" /> - <meta name="twitter:description" content="{{ .PageDescription }}" /> - <meta name="twitter:image" content="{{ fullStatic .Image }}" /> </head> <body> <header> <img src="{{ static .Logo.Header }}" alt="Logo" /> {{ $url := .URL }} - <nav>{{ range .Links }}{{ .Render $url }}{{ end }}</nav> + <nav> + <ul> + {{ range .Links }}<li>{{ .Render $url }}</li>{{ end }} + </ul> + </nav> </header> {{ template "body" . }} <footer> diff --git a/frontend/scss/special.scss b/frontend/scss/special.scss index d0e9ee9..050d854 100644 --- a/frontend/scss/special.scss +++ b/frontend/scss/special.scss @@ -3,7 +3,7 @@ header { height: var(--height-header); margin: 0 auto var(--margin-header) auto; - padding-bottom: 2rem; + padding-bottom: calc(var(--height-header) / 4); display: flex; flex-direction: row; @@ -17,27 +17,30 @@ header { } & nav { - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 0.5rem; + & > ul { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 0.25rem 1rem; + + max-height: var(--height-header); - max-height: 100%; + list-style-type: none; + margin: 0; + + & > li { + margin-bottom: 0; + } + } & a { display: block; - min-width: 7rem; + padding: 0 1rem 0 0; font-family: monospace; } } - @media only screen and (max-width: 800px) { - height: 12rem; - padding-bottom: 0; - align-items: start; - } - @media only screen and (max-width: 600px) { flex-direction: column; align-items: normal; @@ -45,7 +48,13 @@ header { height: auto; min-height: var(--height-header); - padding-bottom: 2rem; + padding-bottom: 1rem; + + & nav > ul { + flex-direction: column; + max-height: unset; + gap: 0.5rem; + } & img { height: 100%; |