Update the internals of the styling a little

Fixes #4
This commit is contained in:
BBaoVanC 2021-09-27 14:16:52 -05:00
parent 718efd865e
commit f0cd329901
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
5 changed files with 31 additions and 15 deletions

View File

@ -6,7 +6,7 @@
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
{{ partial "navbar.html" . }} {{ partial "navbar.html" . }}
<div class="row"> <div class="page">
{{ if and (ne .Params.Toc false) .IsPage }} {{ if and (ne .Params.Toc false) .IsPage }}
<div class="side"> <div class="side">
<h3>Table of Contents</h3> <h3>Table of Contents</h3>

View File

@ -27,11 +27,12 @@
{{ else }} {{ else }}
<small> <small>
Site-wide tags: Site-wide tags:
<div> <span class="tags">
<br />
{{ range .Site.Taxonomies.tags }} {{ range .Site.Taxonomies.tags }}
<a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a>&nbsp; <a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a>&nbsp;
{{ end }} {{ end }}
</div> </span>
</small> </small>
{{ end }} {{ end }}
{{ end }} {{ end }}

View File

@ -1,12 +1,27 @@
{{ define "main" }} {{ define "main" }}
<h1>{{ .Title | markdownify }}</h1> <h1>{{ .Title | markdownify }}</h1>
<!-- I'd like to get rid of the unnaturally large gap between the
header and the metadata (date, tags, etc) -->
{{ if .Date }} {{ if .Date }}
<time datetime="{{ .Date.Format "2006-01-02" }}" pubdate> <time datetime="{{ .Date.Format "January 2, 2006" }}" pubdate>
{{ .Date.Format "2006-01-02" }} {{ .Date.Format "January 2, 2006" }}
</time> </time>
{{ if ne .Lastmod .Date }}
( Modified
<time datetime="{{ .Lastmod.Format "January 2, 2006" }}" pubdate>
{{ .Lastmod.Format "January 2, 2006" }}
</time>
) <!-- I don't know how to get rid of the whitespace in between here,
so I'll just live with it for now. -->
{{ end }} {{ end }}
{{ end }}
<br />
<span class="tags">
{{ range (.GetTerms "tags") }} {{ range (.GetTerms "tags") }}
<a href="{{ .Permalink }}">#{{ .LinkTitle }}</a> <a href="{{ .Permalink }}">#{{ .LinkTitle }}</a>
{{ end }} {{ end }}
</span>
{{ .Content }} {{ .Content }}
{{ end }} {{ end }}

View File

@ -1,6 +1,6 @@
<div class="navbar"> <nav id="main">
<a href="{{ "/" | relURL }}">Home</a> <a href="{{ "/" | relURL }}">Home</a>
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<a href="{{ .URL }}">{{ .Name }}</a> <a href="{{ .URL }}">{{ .Name }}</a>
{{ end }} {{ end }}
</div> </nav>

View File

@ -1,10 +1,10 @@
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.row { .page {
flex-direction: column; flex-direction: column;
} }
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.navbar a { #main a {
float: none; float: none;
width: 100%; width: 100%;
} }
@ -35,11 +35,11 @@ blockquote {
font-size: 40px; font-size: 40px;
} }
.navbar { #main {
overflow: hidden; overflow: hidden;
background-color: #222; background-color: #222;
} }
.navbar a { #main a {
float: left; float: left;
display: block; display: block;
color: lightgray; color: lightgray;
@ -47,7 +47,7 @@ blockquote {
padding: 14px 20px; padding: 14px 20px;
text-decoration: none; text-decoration: none;
} }
.navbar a:hover { #main a:hover {
background-color: #444; background-color: #444;
color: white; color: white;
} }
@ -55,7 +55,7 @@ blockquote {
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
.row { .page {
flex: 1; flex: 1;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;