refactor header
This commit is contained in:
parent
6b55bdedc6
commit
a3cb5a359b
10 changed files with 79 additions and 47 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 }}
|
{{ end }}
|
||||||
<div>
|
<div class="mt-8">
|
||||||
{{ range .Data.Pages }}
|
{{ range .Data.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 href="{{ .RelPermalink }}">{{ .Title }}</a>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{{ end }}
|
{{ end }}
|
|
@ -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 — {{ dateFormat .Site.Params.timeformat .Date }}
|
Posted at — {{ 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 }}
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<p>{{ .Description | markdownify | safeHTML }}</p>
|
||||||
<article class="md">
|
<article class="md">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</article>
|
</article>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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>
|
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 }}
|
{{ $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 }}
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
Loading…
Reference in a new issue