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;
-webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
outline: none;
}
$unit: 0.25rem;
@ -80,6 +82,18 @@ $screens: (
.#{$prefix}text-sm {
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 {
font-size: 2.25rem;
}
@ -117,3 +131,9 @@ $screens: (
.cursor-pointer {
cursor: pointer;
}
.not-first\:ml-3 {
&:not(:first-child) {
margin-left: 0.75rem;
}
}

View file

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

View file

@ -1,16 +1,13 @@
{{ define "main" }}
<main>
{{ if isset .Data "Term" }}
<h2>{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
<h2 class="my-8">{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
{{ else }}
<h2 class="my-8">{{ .Title }}</h2>
{{ end }}
<div>
<div class="mt-8">
{{ range .Data.Pages }}
<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>
{{ partial "list.html" . }}
{{ end }}
</div>
</main>

View file

@ -1,18 +1,27 @@
{{ define "main" }}
<main>
<h1 class="my-6">{{ .Title }}</h1>
<div class="mb-3 text-xs">
{{ if .Params.toc }}
{{ partial "toc.html" . }}
{{ 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 }}
{{ if .Draft }}
<span class="ml-1">
<span class="ml-3 tag">
DRAFT
</span>
{{ end }}
</div>
<p>{{ .Description | markdownify | safeHTML }}</p>
{{ if .Params.toc }}
{{ partial "toc.html" . }}
{{ if .Params.tags }}
<div class="sm:mt-4">
{{ range .Params.tags }}
<a class="not-first:ml-3" href="/tags/{{ . }}">#{{ . }}</a>
{{ end }}
</div>
{{ end }}
</div>
<main>
<p>{{ .Description | markdownify | safeHTML }}</p>
<article class="md">
{{ .Content }}
</article>

View file

@ -1,20 +1,17 @@
{{ define "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-3">{{ .Site.Author.description | markdownify | safeHTML }}</p>
{{ if eq .Paginator.PageNumber 1 }}
<h3 class="my-5">Recent Posts</h3>
<h3 class="my-6">Recent Posts</h3>
{{ else }}
<h3 class="my-5">Older Posts</h3>
<h3 class="my-6">Older Posts</h3>
{{ end }}
<div>
{{ $paginator := .Paginate (where .Site.RegularPages "Kind" "page") }}
{{ range $paginator.Pages }}
<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 class="self-start" href="{{ .RelPermalink }}">{{ .Title }}</a>
</div>
{{ partial "list.html" . }}
{{ end }}
{{ partial "paginator.html" . }}
</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">
{{ .Site.Copyright }} |
<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://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>
</p>
<p class="flex items-center mt-0">
{{ range $_, $key := .Site.Params.Social }}

View file

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

View file

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