diff options
| author | Wang Chucheng <ccwangchn@gmail.com> | 2020-05-13 17:56:33 +0300 |
|---|---|---|
| committer | Wang Chucheng <ccwangchn@gmail.com> | 2020-05-13 17:56:33 +0300 |
| commit | bcacd76dca02303192263c700dd2497cc219620d (patch) | |
| tree | 8301abdacf562b8c64b7fe14e1cebaa5cfbd35a1 /layouts | |
refactor: migrate to tailwindcss
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/404.html | 3 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 13 | ||||
| -rw-r--r-- | layouts/_default/list.html | 8 | ||||
| -rw-r--r-- | layouts/_default/single.html | 6 | ||||
| -rw-r--r-- | layouts/index.html | 6 | ||||
| -rw-r--r-- | layouts/partials/dev-parameters.html | 94 | ||||
| -rw-r--r-- | layouts/partials/dev-size-indicator.html | 9 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 3 | ||||
| -rw-r--r-- | layouts/partials/head.html | 24 | ||||
| -rw-r--r-- | layouts/partials/header.html | 51 |
10 files changed, 217 insertions, 0 deletions
diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..f2548ab --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,3 @@ +{{ define "main" }} + <p>404 - page not found</p> +{{ end }}
\ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..5bc8277 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang='{{ .Site.LanguageCode }}'> + {{- partial "head.html" . -}} + <body class="flex flex-col min-h-screen"> + {{- partial "dev-size-indicator.html" . -}} + {{- partial "header.html" . -}} + <main class="flex-1 mx-4 md:mx-12 lg:mx-24 mt-4 sm:mt-16"> + {{- block "main" . }}{{- end }} + </main> + {{- partial "dev-parameters.html" . -}} + {{- partial "footer.html" . -}} + </body> +</html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..43df083 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,8 @@ +{{ define "main" }} +{{ range .Pages }} + <article class="text-gray-700 sm:mx-12 mb-4"> + <h1 class="font-bold font-thin text-3xl text-gray-700"><a href="{{ .Permalink }}">{{ .Title }}</a></h1> + {{ .Content }} + </article> +{{ end }} +{{ end }}
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..6644923 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,6 @@ +{{ define "main" }} +<article class="text-gray-700 sm:mx-12"> + <h1 class="font-bold text-3xl text-gray-700">{{ .Title }}</h1> + {{ .Content }} +</article> +{{ end }}
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..2581e5c --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,6 @@ +{{ define "main" }} +<article class="text-center text-gray-700"> + <h1 class="font-serif font-thin text-5xl text-gray-500">{{ .Title }}</h1> + {{ .Content }} +</article> +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/dev-parameters.html b/layouts/partials/dev-parameters.html new file mode 100644 index 0000000..9b1e7e7 --- /dev/null +++ b/layouts/partials/dev-parameters.html @@ -0,0 +1,94 @@ +{{ if .Site.IsServer }} +<div class="h-40 mb-4 py-4 px-4 overflow-y-auto scrolling-touch border-t border-gray-200"> + <table class="w-full text-left table-auto table-collapse border-gray-200"> + <caption class="text-left pb-2">Hugo Variables for the current page.</caption> + <thead> + <tr class="p-2 font-semibold bg-gray-100 border-t "> + <th>Variable</th> + <th>Value</th> + </tr> + </thead> + <tbody> + <tr class="p-2 border-t"> + <td>.Name</td> + <td>{{ printf "%#v" .Name }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.Title</td> + <td>{{ printf "%#v" .Title }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.Kind</td> + <td>{{ printf "%#v" .Kind }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.Type</td> + <td>{{ printf "%#v" .Type }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.IsPage</td> + <td>{{ printf "%#v" .IsPage }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.IsHome</td> + <td>{{ printf "%#v" .IsHome }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.Next</td> + <td>{{ printf "%v" .Next }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.Prev</td> + <td>{{ printf "%v" .Prev }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.Params</td> + <td> + <table> + {{ range $k,$v := .Params }} + <tr> + <td class="text-right italic pr-2">{{ printf "%#v:" $k }}</td> + <td>{{ printf "%#v" $v }}</td> + </tr> + {{ end }} + </table> + </td> + </tr> + <tr class="p-2 border-t"> + <td>.Section</td> + <td>{{ printf "%#v" .Section }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.CurrentSection</td> + <td>{{ printf "%v" .CurrentSection }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.Pages</td> + <td> + {{ printf "%v" .Pages }} + <table> + {{- range $k,$v := .Pages }} + <tr> + <td class="text-right italic pr-2">{{ printf "%#v:" $k }}</td> + <td>{{ printf "%v" $v }}</td> + </tr> + {{ end -}} + </table> + </td> + </tr> + <tr class="p-2 border-t"> + <td>.Resources</td> + <td>{{ printf "%v" .Resources }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.File</td> + <td>{{ if .File }}{{ printf "%v" .File }}{{ else}}""{{ end }}</td> + </tr> + <tr class="p-2 border-t"> + <td>.File.Dir</td> + <td>{{ if .File }}{{ printf "%#v" .File.Dir }}{{ else}}""{{ end }}</td> + </tr> + </tbody> + </table> +</div> +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/dev-size-indicator.html b/layouts/partials/dev-size-indicator.html new file mode 100644 index 0000000..bf03dc2 --- /dev/null +++ b/layouts/partials/dev-size-indicator.html @@ -0,0 +1,9 @@ +{{ if .Site.IsServer }} +<div class="flex items-center justify-center fixed top-0 right-0 mt-12 mr-8 z-50 w-8 h-8 rounded-full text-gray-700 text-sm uppercase bg-gray-200 sm:bg-orange-200 md:bg-green-200 lg:bg-purple-200 xl:bg-red-200"> + <span class="block sm:hidden">all</span> + <span class="hidden sm:block md:hidden">sm</span> + <span class="hidden md:block lg:hidden">md</span> + <span class="hidden lg:block xl:hidden">lg</span> + <span class="hidden xl:block">xl</span> +</div> +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..018a795 --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,3 @@ +<footer class="w-full text-center border-t border-gray-200 p-4 pin-b text-xs text-gray-400"> + <p>made with <a href="https://gohugo.io" class="underline hover:text-blue-400">Hugo</a> and <a href="https://tailwindcss.com" class="underline hover:text-blue-400">TailwindCSS</a></p> +</footer>
\ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..4f678dc --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,24 @@ +<meta charset="utf-8" /> +<meta name="viewport" content="width=device-width, initial-scale=1" /> +<title>{{ block "title" . }} +{{- .Title }} - {{ .Site.Title -}} +{{ end }}</title> +{{ if .Description }} +<meta name="description" content="{{ .Description }}" /> +{{ end }} +{{ if .Keywords }} +<meta name="keywords" content="{{ delimit .Keywords "," }}" /> +{{ end }} +{{ if .Params.Author }} +<meta name="author" content="{{ .Params.Author}}" /> +{{ end }} +{{ hugo.Generator }} + + +{{ $styles := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js") }} +{{ if .Site.IsServer }} + <link rel="stylesheet" href="{{ $styles.RelPermalink }}"> +{{ else }} + {{ $styles := $styles| minify | fingerprint | resources.PostProcess }} + <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}"> +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..82027a0 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,51 @@ +<header class="w-full px-4 pt-4"> + {{/* CSS functionality for menu toggle */}} + <style type="text/css"> + input#nav-toggle:checked~label#show-button { + display: none; + } + + input#nav-toggle:checked~label#hide-button { + display: flex; + } + + input#nav-toggle:checked~#nav-menu { + display: block; + } + </style> + + <nav class="flex items-center justify-between flex-wrap"> + <a href="{{ .Site.Home.Permalink }}" class="flex items-center text-gray-700 font-bold"> + {{ .Site.Title }} + </a> + + <input id="nav-toggle" type=checkbox class="hidden"> + <label id="show-button" for="nav-toggle" + class="flex items-center block sm:hidden text-gray-500 hover:text-blue-500"> + <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <title>Menu Open</title> + <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z" /> + </svg> + </label> + <label id="hide-button" for="nav-toggle" class="flex items-center hidden text-gray-700 hover:text-blue-500"> + <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <title>Menu Close</title> + <polygon points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2" + transform="rotate(45 10 10)" /> + </svg> + </label> + + <ul id="nav-menu" class="sm:flex w-full sm:w-auto hidden sm:block mt-2 sm:mt-0 sm:space-x-2"> + {{ with .Site.GetPage "/about" }} + <li> + <a href="{{ .Permalink }}" class="text-gray-500 hover:text-blue-400">{{ .Title }}</a> + </li> + {{ end }} + {{ range .Site.Sections }} + <li> + <a href="{{ .Permalink }}" class="text-gray-500 hover:text-blue-400">{{ .Title }}</a> + </li> + {{ end }} + </ul> + </nav> +</header>
\ No newline at end of file |