commit e7966d43ccd049c05f02b7de50978c8b11aa488f
parent cdbac7ae7f40b18c947a2135f3a1a34fbe48cb3a
Author: Oscar Benedito <oscar@oscarbenedito.com>
Date: Tue, 28 Jul 2020 18:40:24 +0200
Change page header
New header is a lot simpler and smaller.
Diffstat:
9 files changed, 31 insertions(+), 189 deletions(-)
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -1,5 +1,5 @@
/*
-Copyright (C) 2019 Oscar Benedito
+Copyright (C) 2019-2020 Oscar Benedito
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
@@ -205,128 +205,28 @@ svg.basic-svg {
}
/* Header
-------------------------------------------------- */
-nav {
- background: var(--primary-color);
+header#page-header {
+ border-bottom: 2px solid var(--tertiary);
+ padding: calc(1.5 * var(--gap)) var(--gap);
.content {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- max-width: calc(var(--nav-width) + var(--gap) * 2);
- margin-left: auto;
+ max-width: var(--main-width);
margin-right: auto;
- }
- a {
- display: block;
- line-height: var(--navbar-height);
- color: var(--primary-invert-color);
- cursor: pointer;
- }
- a.logo {
- padding: 11px 12px;
- max-height: 50px;
- svg {
- height: 22.5px;
- display: block;
- max-width: 100%;
- fill: var(--primary-invert-color);
+ margin-left: auto;
+ .logo { /* TODO Decide height */
+ height: 25px;
+ fill: var(--primary-color);
}
- }
- a.logo:hover {
- background: var(--primary-color-darken);
- text-decoration: none;
- }
- .icon {
- fill: var(--primary-invert-color);
- width: 20px;
- padding: 15px 0px;
- display: block;
- }
- .bars{
- display: none;
- margin-left: 0px;
- }
- #bars-icon {
- width: 17.5px;
- }
- @media screen and (max-width: 645px) {
- .menu {
- margin-left: 0px;
- margin-right: 0px;
- display: none;
- background: var(--primary-color-darken);
+ .logo:hover {
+ fill: var(--primary-color-darken); /* TODO This color should be darker */
+ }
+ nav {
+ color: #666;
a {
- padding: 0px 36px;
- }
- a:hover {
- background: var(--primary-color);
+ color: #666;
}
}
- .bars {
- display: flex;
- list-style: none;
- word-break: keep-all;
- overflow-x: auto;
- }
- .logo {
- margin-right: 0px;
- }
- }
- @media screen and (max-width: 340px) {
- .bars {
- margin-right: 0px;
- }
- .logo {
- margin-left: 0px;
- }
}
}
-@media screen and (max-width: 600px) {
- nav.show {
- .menu {
- display: block;
- width: 100%;
- }
- a:not(#bars) {
- float: none;
- display: block;
- text-align: left;
- }
- }
-}
-nav.transparent {
- background: var(--background);
-}
-.logo,
-.menu,
-.bars {
- margin-left: var(--gap);
- margin-right: var(--gap);
-}
-.menu {
- display: flex;
- list-style: none;
- word-break: keep-all;
- overflow-x: auto;
-}
-.bars {
- display: none;
-}
-.menu a {
- font-size: 20px;
- padding: 0px calc(var(--gap) / 2);
-}
-.bars a {
- font-size: 20px;
- padding: 0px calc(var(--gap) / 2);
-}
-.menu a:hover {
- background: var(--primary-color-darken);
- text-decoration: none;
-}
-.bars a:hover {
- background: var(--primary-color-darken);
- text-decoration: none;
-}
/* Main
-------------------------------------------------- */
main {
@@ -340,32 +240,6 @@ main {
main.list {
max-width: calc(var(--post-list-width) + var(--gap) * 2);
}
-.page-header {
- background: var(--primary-color);
- text-align: center;
- padding: 96px 48px;
- h1 {
- color: var(--primary-invert-color);
- font-size: 3rem;
- font-weight: 600;
- line-height: 1.125;
- }
- .h1:not(:last-child) {
- margin-bottom: 4px;
- }
- h2 {
- color: var(--primary-invert-color);
- font-size: 24px;
- font-weight: 400;
- line-height: 1.25;
- }
-}
-.page-subheader {
- margin-bottom: 24px;
-}
-.page-subheader h1 {
- font-size: 40px;
-}
.pagination {
display: flex;
margin-top: calc(var(--content-gap) * 2);
@@ -435,7 +309,6 @@ main.list {
-------------------------------------------------- */
article {
header {
- margin-top: 24px;
margin-bottom: var(--content-gap);
}
.post-title {
@@ -590,7 +463,6 @@ article {
margin-right: 4px;
padding: 4px 6px;
font-family: monospace;
- font-size: 0.78em;
line-height: 1.5;
border-radius: 2px;
}
diff --git a/content/blog_archive.md b/content/blog_archive.md
@@ -1,6 +1,5 @@
---
-title: Personal blog
-subtitle: Archive
+title: Blog archive
type: archive
url: /blog/archive/
---
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,7 +7,7 @@
<link id="theme" rel="stylesheet" type="text/css" href="{{ $style.RelPermalink }}">
</head>
<body>
- {{ partial "navbar.html" . }}
+ {{ partial "header.html" . }}
{{- block "main" . }}
<main>
{{ .Content }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,15 +1,4 @@
{{ define "main" }}
-<header class="page-header">
- <h1>{{ .Title }}</h1>
- {{- if eq .Kind "taxonomy" }}
- <h2>{{ .Data.Singular | title }}</h2>
- {{- else }}
- {{- with .Params.subtitle }}
- <h2>{{ . }}</h2>
- {{- end }}
- {{- end }}
-</header>
-
<main class="list">
{{- $paginator := .Paginator }}
{{- range $paginator.Pages }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,8 +1,4 @@
{{ define "main" }}
-<header class="page-header">
- <h1>{{ .Site.Params.blog_title }}</h1>
- <h2>{{ .Params.categories }} entry</h2>
-</header>
<main>
<article class="h-entry">
<header>
diff --git a/layouts/archive/single.html b/layouts/archive/single.html
@@ -1,17 +1,14 @@
{{ define "main" }}
-<header class="page-header">
- <h1>{{ .Title }}</h1>
- {{- with .Params.subtitle }}
- <h2>{{ . }}</h2>
- {{- end }}
-</header>
<main>
<article>
+ <header>
+ <h1 class="post-title">{{ .Title }}</h1>
+ </header>
<div class="post-content">
<h2>Posts ({{ len (where (where .Site.Pages "File.Dir" "==" "blog/") "IsPage" true) }})</h2>
{{- range .Site.Params.active_years }}
{{- $y := . }}
- <h4>{{ . }}</h4>
+ <h3>{{ . }}</h3>
<ul>
{{- range $.Site.Pages }}
{{- if and (eq .File.Dir "blog/") (.IsPage) (eq $y (.Date.Format "2006")) }}
diff --git a/layouts/page/single.html b/layouts/page/single.html
@@ -1,12 +1,9 @@
{{ define "main" }}
-<header class="page-header">
- <h1>{{ .Title }}</h1>
- {{- with .Params.subtitle }}
- <h2>{{ . }}</h2>
- {{- end }}
-</header>
<main>
<article>
+ <header>
+ <h1 class="post-title">{{ .Title }}</h1>
+ </header>
<div class="post-content">{{ .Content }}</div>
</article>
</main>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -0,0 +1,7 @@
+<header id="page-header">
+ <div class="content">
+ {{- $logo := resources.Get "img/logo.svg" | fingerprint }}
+ <a href="/"><svg class="logo" viewBox="0 0 84.665 8.89"><use xlink:href="{{ $logo.RelPermalink }}#l"></use></svg></a>
+ <nav><a href="/blog/">Blog</a> · <a href="/resources/">Resources</a> · <a href="https://git.oscarbenedito.com">Git</a></nav>
+ </div>
+</header>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -1,15 +0,0 @@
-<nav id="navbar">
- <div class="content">
- {{- $logo := resources.Get "img/logo.svg" | fingerprint }}
- <a class="logo" href="/"><svg viewBox="0 0 84.665 8.89"><use xlink:href="{{ $logo.RelPermalink }}#l"></use></svg></a>
- <div class="bars">
- <a onclick="openMenu()"><svg class="icon" id="bars-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg></a>
- </div>
- <div class="menu">
- <a href="/blog/">Blog</a>
- <a href="/resources/">Resources</a>
- <a href="/about/">About</a>
- <a onclick="toggleTheme()"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" ><path d="M 24,48 C 37.254821,48 48,37.254821 48,24 48,10.745179 37.254821,0 24,0 10.745179,0 0,10.745179 0,24 0,37.254821 10.745179,48 24,48 Z M 5.0526316,24 C 5.0526316,13.535621 13.535621,5.0526316 24,5.0526316 V 42.947368 C 13.535621,42.947368 5.0526316,34.464379 5.0526316,24 Z"/></svg></a>
- </div>
- </div>
-</nav>
