refactor header
This commit is contained in:
mivinci
parent
6b55bdedc6
commit
a3cb5a359b
10 changed files with 79 additions and 47 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
{{ define "main" }}
|
||||
<main>
|
||||
{{ if isset .Data "Term" }}
|
||||
<h2>{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
|
||||
{{ else }}
|
||||
|
||||
<main>
|
||||
{{ if isset .Data "Term" }}
|
||||
<h2 class="my-8">{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
|
||||
{{ else }}
|
||||
<h2 class="my-8">{{ .Title }}</h2>
|
||||
{{ end }}
|
||||
<div class="mt-8">
|
||||
{{ range .Data.Pages }}
|
||||
{{ partial "list.html" . }}
|
||||
{{ end }}
|
||||
<div>
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -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 — {{ 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
4
layouts/partials/list.html
Normal file
4
layouts/partials/list.html
Normal 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>
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<details class="toc mt-5 mb-4">
|
||||
<details class="toc mt-8">
|
||||
<summary>Table of Contents</summary>
|
||||
<div>
|
||||
{{ .TableOfContents }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue