refactor header

This commit is contained in:
mivinci 2021-09-09 15:56:22 +08:00
parent 6b55bdedc6
commit a3cb5a359b
10 changed files with 79 additions and 47 deletions

View file

@ -1,6 +1,8 @@
* { * {
line-height: 1; line-height: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
outline: none;
} }
$unit: 0.25rem; $unit: 0.25rem;
@ -80,6 +82,18 @@ $screens: (
.#{$prefix}text-sm { .#{$prefix}text-sm {
font-size: .9rem; font-size: .9rem;
} }
.#{$prefix}text-md {
font-size: 1.25rem;
}
.#{$prefix}text-xl {
font-size: 1.5rem;
}
.#{$prefix}text-2xl {
font-size: 1.75rem;
}
.#{$prefix}text-3xl {
font-size: 2rem;
}
.#{$prefix}text-4xl { .#{$prefix}text-4xl {
font-size: 2.25rem; font-size: 2.25rem;
} }
@ -117,3 +131,9 @@ $screens: (
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
.not-first\:ml-3 {
&:not(:first-child) {
margin-left: 0.75rem;
}
}

View file

@ -44,6 +44,7 @@ h4,
h5 { h5 {
font-family: "Noto Serif SC", 'Times New Roman', Times, sans-serif; font-family: "Noto Serif SC", 'Times New Roman', Times, sans-serif;
font-weight: 700; font-weight: 700;
line-height: 1.5;
} }
p { p {
@ -62,6 +63,7 @@ code {
font-size: 13px; font-size: 13px;
} }
.tag,
p code { p code {
background-color: var(--bd); background-color: var(--bd);
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
@ -70,9 +72,14 @@ p code {
a { a {
text-decoration: none; text-decoration: none;
color: inherit;
} }
a:not(.icon) { a:hover {
color: var(--pm);
}
main a:not(.icon) {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
text-decoration-color: var(--pm); text-decoration-color: var(--pm);
@ -81,13 +88,13 @@ a:not(.icon) {
transition: background-position 0.2s ease-in-out; transition: background-position 0.2s ease-in-out;
} }
a:not(.icon):hover, main a:not(.icon):hover,
a:not(.icon):focus { main a:not(.icon):focus {
background-position: 0 100%; background-position: 0 100%;
color: #fff; color: #fff;
} }
a.icon:hover { main a.icon:hover {
transform: translateY(-5px); transform: translateY(-5px);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }

View file

@ -1,17 +1,14 @@
{{ define "main" }} {{ define "main" }}
<main> <main>
{{ if isset .Data "Term" }} {{ if isset .Data "Term" }}
<h2>{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2> <h2 class="my-8">{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
{{ else }} {{ else }}
<h2 class="my-8">{{ .Title }}</h2>
{{ end }}
<div class="mt-8">
{{ range .Data.Pages }}
{{ partial "list.html" . }}
{{ end }} {{ end }}
<div> </div>
{{ range .Data.Pages }} </main>
<div class="flex sm:flex-col my-5 sm:mb-6 sm:mt-3">
<div class="min-w-32 sm:mb-2">{{ dateFormat .Site.Params.timeformat .Date }}</div>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</div>
{{ end }}
</div>
</main>
{{ end }} {{ end }}

View file

@ -1,18 +1,27 @@
{{ define "main" }} {{ define "main" }}
<main> {{ if .Params.toc }}
<h1 class="my-6">{{ .Title }}</h1> {{ partial "toc.html" . }}
<div class="mb-3 text-xs"> {{ end }}
<h1 class="mt-8 mb-6">{{ .Title }}</h1>
<div class="mb-3 text-xs flex justify-between sm:flex-col">
<div>
Posted at &mdash; {{ dateFormat .Site.Params.timeformat .Date }} Posted at &mdash; {{ dateFormat .Site.Params.timeformat .Date }}
{{ if .Draft }} {{ if .Draft }}
<span class="ml-1"> <span class="ml-3 tag">
DRAFT DRAFT
</span> </span>
{{ end }} {{ end }}
</div> </div>
<p>{{ .Description | markdownify | safeHTML }}</p> {{ if .Params.tags }}
{{ if .Params.toc }} <div class="sm:mt-4">
{{ partial "toc.html" . }} {{ range .Params.tags }}
<a class="not-first:ml-3" href="/tags/{{ . }}">#{{ . }}</a>
{{ end }}
</div>
{{ end }} {{ end }}
</div>
<main>
<p>{{ .Description | markdownify | safeHTML }}</p>
<article class="md"> <article class="md">
{{ .Content }} {{ .Content }}
</article> </article>

View file

@ -1,20 +1,17 @@
{{ define "main" }} {{ define "main" }}
<main> <main>
<h2 class="mt-5 mb-1">{{ .Site.Params.iam }} {{ .Site.Author.name }}</h2> <h2 class="mt-8 mb-1">{{ .Site.Params.iam }} {{ .Site.Author.name }}</h2>
<p class="my-0">{{ .Site.Author.slogon }}</p> <p class="my-0">{{ .Site.Author.slogon }}</p>
<p class="my-3">{{ .Site.Author.description | markdownify | safeHTML }}</p> <p class="my-3">{{ .Site.Author.description | markdownify | safeHTML }}</p>
{{ if eq .Paginator.PageNumber 1 }} {{ if eq .Paginator.PageNumber 1 }}
<h3 class="my-5">Recent Posts</h3> <h3 class="my-6">Recent Posts</h3>
{{ else }} {{ else }}
<h3 class="my-5">Older Posts</h3> <h3 class="my-6">Older Posts</h3>
{{ end }} {{ end }}
<div> <div>
{{ $paginator := .Paginate (where .Site.RegularPages "Kind" "page") }} {{ $paginator := .Paginate (where .Site.RegularPages "Kind" "page") }}
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
<div class="flex sm:flex-col my-5 sm:mb-6 sm:mt-3"> {{ partial "list.html" . }}
<div class="min-w-32 sm:mb-2">{{ dateFormat .Site.Params.timeformat .Date }}</div>
<a class="self-start" href="{{ .RelPermalink }}">{{ .Title }}</a>
</div>
{{ end }} {{ end }}
{{ partial "paginator.html" . }} {{ partial "paginator.html" . }}
</div> </div>

View file

@ -1,8 +1,8 @@
<footer class="flex sm:flex-col-reverse justify-between items-center"> <footer class="mt-8 flex sm:flex-col-reverse justify-between items-center">
<p class="mt-0 text-sm"> <p class="mt-0 text-sm">
{{ .Site.Copyright }} | {{ .Site.Copyright }} |
<a href="https://github.com/mivinci/hugo-theme-minima" target="_blank" rel="noopener noreferrer">MINIMA</a> ON <a href="https://github.com/mivinci/hugo-theme-minima" target="_blank" rel="noopener noreferrer">Minima</a> on
<a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">HUGO</a> <a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a>
</p> </p>
<p class="flex items-center mt-0"> <p class="flex items-center mt-0">
{{ range $_, $key := .Site.Params.Social }} {{ range $_, $key := .Site.Params.Social }}

View file

@ -1,16 +1,14 @@
<header> <header class="flex justify-between items-center sm:my-3">
<div class="flex justify-between items-center"> <div class="flex items-center">
<h1 class="mb-5 flex items-center {{ if .Site.Params.brand }}
whitespace-nowrap overflow-x-auto overflow-y-hidden"> <div class="mr-3 text-3xl"><a href="/">{{ .Site.Params.brand }}</a></div>
{{ .Site.Title }} {{ end }}
</h1> <div id="theme-switcher" class="text-4xl cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
<div id="theme-switcher" class="text-4xl ml-4 cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
</div> </div>
<nav class="mb-5 flex items-center <nav class="flex items-center
whitespace-nowrap overflow-x-auto overflow-y-hidden"> whitespace-nowrap overflow-x-auto overflow-y-hidden">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<a class="mr-3" href="{{ .URL }}">{{ .Name }}</a> <a class="ml-3" href="{{ .URL }}">{{ .Name }}</a>
{{ end }} {{ end }}
</nav> </nav>
<hr>
</header> </header>

View file

@ -0,0 +1,4 @@
<div class="flex sm:flex-col my-5 sm:mb-6 sm:mt-3">
<div class="min-w-32 sm:mb-2 sm:text-sm">{{ dateFormat .Site.Params.timeformat .Date }}</div>
<a class="self-start" href="{{ .RelPermalink }}">{{ .Title }}</a>
</div>

View file

@ -1,6 +1,6 @@
{{ $page := $.Paginator }} {{ $page := $.Paginator }}
{{ if gt $page.TotalPages 1 }} {{ if gt $page.TotalPages 1 }}
<div class="my-5 flex justify-between"> <div class="my-6 flex justify-between">
{{ if $page.HasPrev }} {{ if $page.HasPrev }}
<a href="{{ $page.Prev.URL }}">← Newer</a> <a href="{{ $page.Prev.URL }}">← Newer</a>
{{ end }} {{ end }}

View file

@ -1,4 +1,4 @@
<details class="toc mt-5 mb-4"> <details class="toc mt-8">
<summary>Table of Contents</summary> <summary>Table of Contents</summary>
<div> <div>
{{ .TableOfContents }} {{ .TableOfContents }}