simpler theme

4 years ago · 7b9785a52e
19 changed files with 1033 additions and 17 deletions
--- a/config.toml
+++ b/config.toml
@ -1,7 +1,7 @@
 baseURL = "https://jk.nipponalba.scot"
 languageCode = "en-gb"
 title = "JK's homepage"
-theme=["hugo-atom-feed","anatole"]
+theme=["hugo-atom-feed","nipponalba"]
 summarylength=30
 enableEmoji=true
 defaultContentLanguage="en"
@ -59,27 +59,27 @@ description = "日本語の紹介を書くーQuintessentially Celtic, vehemently

 ## Social Links
 [[params.socialIcons]]
-icon = "fa fa-pleroma fa-fw"
+icon = "fa fa-pleroma fa-2x fa-fw"
 title = "Pleroma"
 url = "https://social.nipponalba.scot/jk"

 [[params.socialIcons]]
-icon = "fa fa-pixelfed fa-fw"
+icon = "fa fa-pixelfed fa-2x fa-fw"
 title = "Pixelfed"
 url = "https://px.nipponalba.scot/jk"

 [[params.socialIcons]]
-icon = "fa fa-xmpp fa-fw"
+icon = "fa fa-xmpp fa-2x fa-fw"
 title = "XMPP"
 url = "xmpp:jk@nipponalba.scot"

 [[params.socialIcons]]
-icon = "fa fa-matrix-org  fa-fw"
+icon = "fa fa-matrix-org fa-2x fa-fw"
 title = "Matrix"
 url = "https://matrix.to/#/@jk:nipponalba.scot"

 [[params.socialIcons]]
-icon = "fa fa-envelope-o  fa-fw"
+icon = "fa fa-envelope-o fa-2x fa-fw"
 title = "e-mail"
 url = "mailto:jk@nipponalba.scot"

--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@ -1,10 +1,8 @@
 {{ define "main" }}
-
-  <main>
-<div class="contents h-feed">
+<div class="stream h-feed">
 <span id="pagination-top">{{ partial "pagination.html" . }}</span>
            {{ range .Paginator.Pages}}
-              {{ if not (eq .Type "response")}}<section data-post-type="{{ .Type }}" class="h-entry {{.Type }}">
+              {{ if not (eq .Type "response")}}<section data-post-type="{{ .Type }}" class="feed h-entry {{.Type }}">
                <div class="p-author author" style="display:none;">
                  <a rel="author" class="p-name u-url u-uid" rel="me" href="https://jk.nipponalba.scot">{{ .Site.Params.Title }}</a>
                  <img class="u-photo" src="/images/profile.jpg"/>
@ -16,7 +14,13 @@
                    {{ if eq .Type "photo"}}
                    <div class="photos">
                      {{ range .Page.Params.Photo }}
-                        <a class="u-url" href="{{ . }}"><img class="u-photo thumb" src="{{ replace . "800." "300."}}"/></a>
+                        <a class="u-url" href="{{ . }}">
+                          <picture>
+                            <source media="max-width:960px" srcset="{{ . }}">
+                            <source media="max-width:480px" srcset="{{ replace . "800." "300."}}">
+                            <img class="u-photo thumb" src="{{ replace . "800." "300."}}" srcset="{{ . }} 960w, {{ replace . "800." "300."}} 480w"/>
+                            </picture>
+                          </a>
                      {{end}}
                    </div>
                      {{end}}
@ -32,9 +36,9 @@
                </aside>
                </section><hr/>
                {{ else }}
-                  <section data-post-type="{{ .Params.posttype }}" data-post-id="{{ .Params.slug }}" class="h-entry">
-                      <div class="author" style="display:none;">
-                        <a rel="author" class="u-author  h-card" rel="me" href="https://jk.nipponalba.scot">{{ .Site.Params.Title }}<img src="/images/profile.jpg"/></a>
+                  <section data-post-type="{{ .Params.posttype }}" data-post-id="{{ .Params.slug }}" class="response h-entry">
+                      <div class="author">
+                        <a rel="author" class="u-author  h-card" rel="me" href="https://jk.nipponalba.scot"><img src="/images/profile.jpg"/><div class="title">{{ .Site.Params.Title }}</div></a>
                      </div>
                      <aside>
                        <article class="u-{{ .Params.posttype }} h-cite">
@ -54,5 +58,6 @@
            {{ end }}
      <span id="pagination-bottom">{{ partial "pagination.html" . }}</span>
          </div>
-  </main>
+
+
 {{ end }}
--- a/themes/nipponalba/archetypes/post.md
+++ b/themes/nipponalba/archetypes/post.md
@ -0,0 +1,15 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+Description: ""
+Blog: 
+    -
+category:
+    -
+tag:
+    -
+Image:
+    -
+posttype:
+draft:
+---
--- a/themes/nipponalba/layouts/404.html
+++ b/themes/nipponalba/layouts/404.html
@ -0,0 +1,6 @@
+
+{{- define "main" -}}
+<div class="page_404">
+    <p>The page you are looking for is missing</p>
+</div>
+{{- end -}}
--- a/themes/nipponalba/layouts/_default/baseof.html
+++ b/themes/nipponalba/layouts/_default/baseof.html
@ -3,9 +3,7 @@
    {{- partial "head.html" . -}}
    <body>
      <input type="checkbox" id="theme-switch" class="theme-switch" autocomplete="on">
-
      <div id="page">
-          {{- partial "sidebar.html" . -}}
            {{ partial "navbar.html" . }}
        <div class="main">
          <div class="content">
--- a/themes/nipponalba/layouts/_default/list.html
+++ b/themes/nipponalba/layouts/_default/list.html
@ -0,0 +1,19 @@
+{{ define "main" }}
+<div class="archive">
+   <div class="list-title">{{if not (eq .Name "Blog")}}{{ .Name }}{{ end }}{{if eq .Name "Blog"}}All Blogs{{ end }} <a href="{{ .Permalink }}/index.xml"><i class="fa fa-rss fa-2x fa-fw" aria-hidden="true" title="{{ .Name }} RSS feed"></i></a></div>
+    <ul class="list-with-title">
+      {{ range .Data.Pages.GroupByDate "2006" }}
+      <div class="listing-title">{{ .Key }}</div>
+      {{ range .Pages }}
+      <ul class="listing">
+        <div class="listing-item">
+          {{ if eq .Type "article" "blog"}}
+            <div class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
+              <div class="post-time"><span class="date">{{.Date.Format "Jan 2" }}</span></div>
+            </div>
+            {{end}}
+          </div>
+    </ul>{{ end }}
+    {{ end }}</ul>
+  </div>
+{{ end }}
--- a/themes/nipponalba/layouts/_default/list.jp.html
+++ b/themes/nipponalba/layouts/_default/list.jp.html
@ -0,0 +1,19 @@
+{{ define "main" }}
+<div class="archive">
+   <div class="list-title">{{if not (eq .Name "Blog" "Categories" "Tags") }}{{ .Name }}{{ end }}{{if eq .Name "Blog"}}全部のブログ{{ end }}{{if eq .Name "Categories"}}カテゴリー{{ end }}{{if eq .Name "Tags"}}タグ{{ end }}
+      <a href="{{ .Permalink }}/index.xml"><i class="fa fa-rss fa-2x fa-fw" aria-hidden="true" title="{{ .Name }} RSSフィード"></i></a></div>
+    <ul class="list-with-title">
+      {{ range .Data.Pages.GroupByDate "2006" }}
+      <div class="listing-title">{{ .Key }}</div>
+      {{ range .Pages }}
+      <ul class="listing">
+        <div class="listing-item">
+            <div class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
+              <div class="post-time"><span class="date">{{.Date.Format "Jan 2" }}</span></div>
+            </div>
+          </div>
+    </ul>
+    {{ end }}
+    {{ end }}</ul>
+  </div>
+{{ end }}
--- a/themes/nipponalba/layouts/_default/single.html
+++ b/themes/nipponalba/layouts/_default/single.html
@ -0,0 +1,63 @@
+  {{ define "main" }}
+{{ if not (eq .Type "response")}}
+<article class="post h-entry entry contents">
+  <div class="author" style="display:none;">
+    <a rel="author" class="u-author h-card" rel="me" href="https://jk.nipponalba.scot">{{ .Site.Params.Title }}<img src="/images/profile.jpg"/></a>
+  </div>
+    <div class="post-content">{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<h3 class="post-title p-name entry-title">{{ .Title }}</h3>
+      <aside>
+        {{ if eq .Type "article" }}<div class="info">
+        <i class="fa fa-sun"></i><a class="u-url" href="{{ .RelPermalink }}"><span class="date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time></span></a>
+          <i class="fa fa-clock"></i><span class="reading-time">{{ .ReadingTime }}-minute read</span>
+        </div>{{end}}
+
+<div class="e-content">{{ .Content }}
+  {{ if eq .Type "photo"}}
+    <div class="photos">
+    {{ range .Page.Params.Photo }}
+      <a class="u-url" href="{{ . }}"><img class="u-photo thumb" src="{{ replace . "800." "300."}}"/></a>
+    {{end}}
+    </div>
+    {{end}}
+</div>
+
+    <div class="post-footer">
+{{ if not (eq .Type "article")}}<span class="date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time></span>{{end}}
+      <div class="info">
+        {{ with .Page.Params.Blog }}{{ partial "taxonomy/blog.html" . }}{{ end }}
+        {{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
+        {{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
+      </div>
+    </div>
+<a href="https://brid.gy/publish/mastodon"></a>
+    {{ if eq .Type "article"}}
+    {{ if .Site.DisqusShortname -}}
+    <div id="fb_comments_container">
+      <h2>Comments</h2>
+      {{ template "_internal/disqus.html" . }}
+    </div>
+    {{- end }}
+    {{ end }}
+    </aside></div>
+</article>                {{ else }}
+                  <section data-post-type="{{ .Params.posttype }}" data-post-id="{{ .Params.slug }}" class="h-entry">
+                      <div class="author" style="display:none;">
+                        <a rel="author" class="u-author  h-card" rel="me" href="https://jk.nipponalba.scot">{{ .Site.Params.Title }}<img src="/images/profile.jpg"/></a>
+                      </div>
+                      <aside>
+                        <article class="u-{{ .Params.posttype }} h-cite">
+                          {{ if .Params.inreplyto }}<p> Replied to {{ end }}
+                            {{ if .Params.likeof }}<p> Liked {{ end }}
+                          {{ if .Params.repostof }}<p>Shared {{ end }}
+                          someone's
+                          {{ if .Params.likeof }}<a href="{{ .Params.likeof }}" class="link u-url"> post</a>{{ end }}
+                          {{ if .Params.inreplyto }}<a href="{{ .Params.inreplyto }}" class="link u-url"> post</a>{{ end }}
+                          {{ if .Params.repostof }}<a href="{{ .Params.repostof }}" class="link u-url"> post</a>{{ end }}</p>
+                          {{ if .Content }}<div class="e-content">{{ .Content }}</div><br/> {{end}}
+                              <div class="post-footer"><span class="date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span></div>
+                        </article>
+                      </aside>
+                      </section>
+                      {{end}}
+
+{{end}}
--- a/themes/nipponalba/layouts/index.html
+++ b/themes/nipponalba/layouts/index.html
@ -0,0 +1,59 @@
+{{ define "main" }}
+<div class="about h-feed">
+  <div class="profile title h-card p-author">
+      <div class="profile-left"><img class="u-photo" src="/images/profile.jpg" alt="profile picture">
+
+      </div>
+      <div class="profile-right">
+      <a rel="author" class="title p-name u-url u-uid" rel="me" href="https://jk.nipponalba.scot">{{ .Site.Params.Title }}</a><br/>
+        <ul class="social-links">
+          {{ range $item := .Site.Params.socialIcons }}
+          <a href="{{ $item.url | safeURL }}" rel="me" >
+            <i class="fa {{ $item.icon }}" aria-hidden="true" title="{{ $item.title }}"></i>
+          </a>
+          {{ end }}
+      </ul>
+      <div class="description">
+        <p class="p-note">{{ .Site.Params.description }}</p>
+      </div>
+      </div>
+</div>
+
+    <h1>Latest post</h1>
+    {{ range (first 1 (where .Site.RegularPages "Type" "!=" "response")) }}
+    <article class="post h-entry entry">
+    <div class="{{.Type}}" data-post-type="{{.Type }}">
+      <div class="author" style="display:none;">
+        <a rel="author" class="u-author h-card" rel="me" href="https://jk.nipponalba.scot">{{ .Site.Params.Title }}<img src="/images/profile.jpg"/></a>
+      </div>
+        <div class="post-content">{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<h3 class="post-title p-name entry-title">{{ .Title }}</h3>
+          <aside>
+            <div class="index_info">
+            <i class="fa fa-sun"></i><a class="u-url" href="{{ .RelPermalink }}"><span class="date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time></span></a>
+              <i class="fa fa-clock"></i><span class="reading-time">{{ .ReadingTime }}-minute read</span>
+            </div>
+
+    <div class="e-content">{{ .Content }}
+      {{ if eq .Type "photo"}}
+        <div class="photos">
+        {{ range .Page.Params.Photo }}
+          <a class="u-url" href="{{ . }}"><img class="u-photo thumb" src="{{ replace . "800." "300."}}"/></a>
+        {{end}}
+        </div>
+        {{end}}
+    </div>
+
+        <div class="index-post-footer">
+          <div class="info">
+            {{ with .Page.Params.Blog }}{{ partial "taxonomy/blog.html" . }}{{ end }}
+            {{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
+            {{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
+          </div>
+        </div>
+        </aside></div>
+    </div>
+<a href="https://brid.gy/publish/mastodon"></a>
+</article>
+    {{ end }}
+</div>
+{{ end }}
--- a/themes/nipponalba/layouts/partials/footer.html
+++ b/themes/nipponalba/layouts/partials/footer.html
@ -0,0 +1,24 @@
+</div>
+<div class="footer">
+    <div class="by_farbox">&copy; {{ now.Format "2006"}} | <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC-BY 4.0</a> | <a href="/post/index.xml"><i class="fa fa-rss fa-fw" aria-hidden="true" title="Blog RSS feed"></i></a><br/>
+    <img src="{{ .Site.Params.siteLogo | absURL }}" alt="nipponalba logo" id="logo"><br/>
+    Made with ❤ and <a href="https://gohugo.io/">Hugo</a> by {{ .Site.Params.author }} </div>
+  </div>
+
+    <script>
+      // This code is only used to remember theme selection between page loads
+      const themeSwitch = document.querySelector('.theme-switch');
+      themeSwitch.checked = localStorage.getItem('switchedTheme') === 'true';
+
+      themeSwitch.addEventListener('change', function(e) {
+        if (e.currentTarget.checked === true) {
+          // Add item to localstorage
+          localStorage.setItem('switchedTheme', 'true');
+        } else {
+          // Remove item if theme is switched back to normal
+          localStorage.removeItem('switchedTheme');
+        }
+      });
+    </script>
+</body>
+</html>
--- a/themes/nipponalba/layouts/partials/head.html
+++ b/themes/nipponalba/layouts/partials/head.html
@ -0,0 +1,34 @@
+<head>
+    <title> {{.Title}} </title>
+    <meta charset="utf-8">
+    {{- hugo.Generator -}}
+    <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+    <meta name="description" content="{{ .Site.Params.description }}">
+    <link rel="stylesheet" href="{{ `css/style.css` | absURL }}" type="text/css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
+    <base href="{{ .Site.BaseURL }}">
+    <!-- indieweb stuff -->
+    <link rel="me" href="https://social.nipponalba.scot/users/jk" />
+    <link rel="me" href="http://px.nipponalba.scot/jk" />
+    <link rel="me" href="mailto:jk@nipponalba.scot" />
+    <link rel="me" href="https://git.nipponalba.scot/jk" />
+    <link rel="authorization_endpoint" href="https://indieauth.com/auth">
+    <link rel="token_endpoint" href="https://tokens.indieauth.com/token">
+    <link rel="webmention" href="https://webmention.io/jk.nipponalba.scot/webmention" />
+    <link rel="pingback" href="https://webmention.io/jk.nipponalba.scot/xmlrpc" />
+    <link rel="microsub" href="https://aperture.p3k.io/microsub/506">
+    <link rel="micropub" href="https://jk.nipponalba.scot/api/index.php">
+    <link href="https://jk.nipponalba.scot/api/media-endpoint.php" rel="media_endpoint"/>
+    <!-- Favicons -->
+    <link rel="shortcut icon" href="{{ .Site.Params.favicon | absURL }}favicon.ico" type="image/x-icon">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | absURL }}apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon | absURL }}favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon | absURL }}favicon-16x16.png">
+    <link rel="manifest" href="{{ .Site.Params.favicon | absURL }}site.webmanifest">
+    <link rel="mask-icon" href="{{ .Site.Params.favicon | absURL }}safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="alternate" type="application/atom+xml" href="http://jk.nipponalba.scot/atom.xml" rel="self" />
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+
+    <link rel="canonical" href="{{ .Permalink }}">
+</head>
--- a/themes/nipponalba/layouts/partials/math.html
+++ b/themes/nipponalba/layouts/partials/math.html
@ -0,0 +1,30 @@
+{{- if or (eq site.Params.math true) (eq .Params.math true) -}}
+    {{- $use := "katex" -}}
+
+    {{- with site.Params.math -}}
+        {{- if and (isset . "use") (eq (.use | lower) "mathjax") -}}
+            {{- $use = "mathjax" -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- if eq $use "mathjax" -}}
+        {{- $url := "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML" -}}
+        {{- $hash := "sha384-e/4/LvThKH1gwzXhdbY2AsjR3rm7LHWyhIG5C0jiRfn8AN2eTN5ILeztWw0H9jmN" -}}
+        <script defer type="text/javascript" src="{{- $url -}}" integrity="{{- $hash -}}" crossorigin="anonymous"></script>
+        <script
+            type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });</script>
+    {{- else -}}
+        {{- $url := "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" -}}
+        {{- $hash := "sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" -}}
+        <link rel="stylesheet" href="{{- $url -}}" integrity="{{- $hash -}}" crossorigin="anonymous">
+
+        {{- $url := "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" -}}
+        {{- $hash := "sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" -}}
+        <script defer src="{{- $url -}}" integrity="{{- $hash -}}" crossorigin="anonymous"></script>
+
+        {{- $url := "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" -}}
+        {{- $hash := "sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" -}}
+        <script defer src="{{- $url -}}" integrity="{{- $hash -}}" crossorigin="anonymous"
+            onload="renderMathInElement(document.body);"></script>
+    {{- end -}}
+{{- end -}}
--- a/themes/nipponalba/layouts/partials/navbar.html
+++ b/themes/nipponalba/layouts/partials/navbar.html
@ -0,0 +1,27 @@
+<div class="page-top">
+    <div class="nav">
+        {{ $currentPage := . }}
+        {{ range .Site.Menus.main }}
+        <li id="{{ .Name }}"><a {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}class="current"{{end}} href="{{ .URL }}" title="{{ .Name }}">{{ .Name }}</a></li>
+        {{ end }}
+        </div>
+  <div class="selectors">
+  <div class="theme-selector float-right"><label for="theme-switch"><i class="fa fa-adjust fa-2x light" aria-hidden="true" title="light/dark mode switch"></i></label></div>
+  <div class="language-selector layout__language-selector float-right">
+  <ul>
+
+  {{ if .IsTranslated }}
+  {{ range .Translations }}
+  <li><a rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}<i class="fa fa-language fa-2x language" aria-hidden="true" title="Language"></i></a></li>
+  {{ end }}
+  {{ else }}
+  {{ range .Site.Languages }}
+  {{ if ne $.Site.Language.Lang .Lang }}
+  <li><a rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }} <i class="fa fa-language fa-2x language" aria-hidden="true" title="言語"></i></a></li>
+  {{ end }}
+  {{ end }}
+  {{ end }}
+  </ul>
+  </div>
+  </div>
+</div>
--- a/themes/nipponalba/layouts/partials/taxonomy/blog.html
+++ b/themes/nipponalba/layouts/partials/taxonomy/blog.html
@ -0,0 +1,6 @@
+
+<span class="separator">
+  {{- range $index, $el := . -}}
+    <a class="blog" href="{{ ( printf "blog/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
+{{- end -}}
+</span>
--- a/themes/nipponalba/layouts/partials/taxonomy/categories.html
+++ b/themes/nipponalba/layouts/partials/taxonomy/categories.html
@ -0,0 +1,6 @@
+
+<span class="separator">
+{{- range $index, $el := . -}}
+    <a class="category p-category" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
+{{- end -}}
+</span>
--- a/themes/nipponalba/layouts/partials/taxonomy/image.html
+++ b/themes/nipponalba/layouts/partials/taxonomy/image.html
@ -0,0 +1,3 @@
+        {{- range $index, $el := . -}}
+        <img class="banner" src="{{ ( printf "%s" ( . | urlize ) ) | relLangURL }}"/>
+        {{ end }}
--- a/themes/nipponalba/layouts/partials/taxonomy/photo.html
+++ b/themes/nipponalba/layouts/partials/taxonomy/photo.html
@ -0,0 +1,7 @@
+
+<span class="separator">
+{{- range $index, $el := . -}}
+<a href="{{printf "$s" ( . | urlize) | relLangURL }}"><img class="p-photo"  src="{{ printf "$s" ( . | urlize ) | relLangURL }}" /></a>
+
+{{- end -}}
+</span>
--- a/themes/nipponalba/layouts/partials/taxonomy/tags.html
+++ b/themes/nipponalba/layouts/partials/taxonomy/tags.html
@ -0,0 +1,6 @@
+
+    <span class="separator">
+        {{- range $index, $el := . -}}
+      <a class="tag" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
+      {{- end -}}
+    </span>
--- a/themes/nipponalba/static/css/style.css
+++ b/themes/nipponalba/static/css/style.css
@ -0,0 +1,689 @@
+@charset "UTF-8";
+@import url('https://rsms.me/inter/inter.css');
+html { font-family: 'Inter', sans-serif;}
+@supports (font-variation-settings: normal) {
+  html { font-family: 'Inter var', sans-serif; }
+}
+:root {
+  --dark-link:#59ABE3;
+  --dark-text:#e8e8e8;
+  --dark-bg:#2b2b2b;
+  --dark-opacity: 0.75;
+  --light-text:#2b2b2b;
+  --light-bg:#e8e8e8;
+  --light-link:#0065BF;
+  --light-opacity:1;
+
+  --text-colour: var(--dark-text);
+  --bg-colour: var(--dark-bg);
+  --link-colour: var(--dark-link);
+  --opacity-img: var(--dark-opacity);
+}
+
+@media (prefers-color-scheme: light) {
+    --text-colour: var(--light-text);
+    --bg-colour: var(--light-bg);
+    --link-colour: var(--light-link);
+    --opacity-img: var(--light-opacity);
+
+}
+[data-theme="light"]{
+  --text-colour: var(--light-text);
+  --bg-colour: var(--light-bg);
+  --link-colour: var(--light-link);
+  --opacity-img: var(--light-opacity);
+}
+
+/* Switched mode */
+.theme-switch:checked ~ *,
+.theme-switch:checked + *,
+.theme-switch:checked + * + *
+.theme-switch:checked + * + *{
+  --text-colour:var(--light-text);
+  --bg-colour:var(--light-bg);
+  --link-colour:var(--light-link);
+  --opacity-img: var(--light-opacity);
+}
+
+.theme-switch{
+  display:none;
+}
+
+.light{
+  display:inline;
+  float:right;
+  color:var(--text-colour);
+}
+
+html {
+  -webkit-animation-fill-mode: forwards;
+  height:100%;display:block;
+}
+
+body {
+  color: var(--text-colour);
+  font-size: 15px;
+  width: 100%;
+  margin: 0 auto 30px auto;
+  background: var(--bg-colour);
+  min-height: 100%;
+  height:100%;
+  overflow:hidden;
+}
+p {
+  line-height: 1.9em;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+a {
+  text-decoration: none;
+}
+a:link, a:visited {
+  opacity: 1;
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  -o-transition: all .15s linear;
+  -ms-transition: all .15s linear;
+  transition: all .15s linear;
+  color: var(--text-colour);
+}
+a:hover, a:active {
+  color: var(--link-colour);
+}
+img {
+  opacity: var(--opacity-img);
+  transition: opacity .5s ease-in-out;
+}
+img:hover {
+  opacity: 1
+}
+
+#page{
+  color: var(--text-colour);
+  background: var(--bg-colour);
+  width: 100%;
+  height:100%;
+  display:block;
+}
+
+.main {
+  margin:0;
+  padding:0;
+  width:80%;
+  max-width: 1000px;
+  margin: 0 auto;
+  background: var(--bg-colour);
+  height:100%;
+  min-height:100%;
+  display:block;
+}
+
+.page-top {
+  width: 80%;
+  max-width: 1000px;
+  display:block;
+  z-index: 3;
+  height: 60px;
+  border-bottom: 1px solid var(--text-colour);
+  background: var(--bg-colour);
+  margin: 0 auto;
+}
+.page-top .nav {
+width:50%;
+  list-style: none;
+  padding: 18px 0px;
+  float: left;
+  font-size: 14px;
+  display:inline-block;
+}
+.page-top .nav li{
+  position: relative;
+  display: initial;
+  padding-right: 20px;
+}
+.page-top .nav a {
+  color: var(--text-colour);
+}
+.page-top .nav a:hover {
+  color: var(--link-colour);
+}
+.page-top .selectors{
+  width:150px;
+  float:right;
+  display:inline-block;
+  vertical-align:middle;
+  padding: 10px 0px;
+}
+.page-top .language-selector {
+  position:relative;
+  display:inline-block;
+  float:right;
+  padding:0px 10px;padding:0;
+  margin:0;
+}
+.page-top .language-selector ul{
+  list-style:none;
+  padding:0;
+  margin:0;
+}
+.page-top .selectors .theme-selector{
+  margin:0;
+  padding:0;
+}
+.page-top .selectors i{
+  margin:0;
+  padding-left:10px;;
+}
+
+.content {
+  background: var(--bg-colour);
+  color: var(--text-colour);
+  display:block;
+  width: 100% !important;
+  margin-top: 0 auto;
+  padding:0;
+  height: 95%;
+  overflow:auto;
+  -ms-overflow-style: none;
+  scrollbar-width:none;
+}
+.content::-webkit-scrollbar{
+  display:none;
+}
+
+.content .profile{
+  width:85% !important;
+  display:block;
+  margin: 0 auto;
+  padding-top:30px;
+}
+.content .profile .profile-left{
+  width:20% !important;
+  padding:0;
+  margin:0;
+  display:inline-block;
+  vertical-align:middle;
+}
+.content .profile .profile-right{
+  vertical-align:top;
+  width:75%;
+  display:inline-block;
+  padding:0;
+  margin:0;
+  text-align:justify;
+}
+.content .profile img{
+  width:165px;
+  border-radius: 5%;
+  margin-right: 40px;
+}
+
+.content .profile .description {
+ font-size: 14px;
+ color: var(--text-colour);
+ margin-left: 10px;
+}
+.content .profile .logo {
+ margin: 0 auto;
+}
+.content .profile .title{
+ text-transform: uppercase;
+ font-size: 1.5rem;
+ font-weight: bold;
+ letter-spacing: 2px;
+ line-height: 1;
+ display:inline-block;
+ padding-left:10px;
+ margin-bottom:5px;
+}
+.content .profile .title a {
+ text-decoration: none;
+ color: var(--text-colour);
+ font-size: 2rem;
+ font-weight: bold;
+}
+.content .profile .social-links {
+ list-style: none;
+ padding: 0;
+ }
+.content .profile .social-links i {
+ margin-right: 3px;
+}
+.content .profile .social-links li {
+ display: inline;
+}
+.content .profile .social-links a {
+ color: var(--text-colour);
+}
+.content .profile .social-links a:hover {
+ color: var(--link-colour);
+}
+
+.category {
+  padding: 4px 6px;
+  border-radius: 3px;
+  border: 1px solid var(--text-colour);
+}
+.blog {
+  padding: 4px 6px;
+  border-radius: 3px;
+  background: var(--link-colour);
+  border: 1px solid var(--text-colour);
+}
+.tag::before {
+  content: "#";
+  opacity: .75;
+}
+.tag, .category {
+  display: inline-block;
+  font-size: 15px;
+  line-height: 1;
+  margin: 5px 8px 5px 0;
+}
+pre {
+  background: var(--bg-colour);
+  padding: 5px;
+}
+.info i{
+  opacity: 0.5;
+  margin-right: 5px;
+}
+.info{
+  padding: 30px 0;
+}
+.index_info i{
+  opacity: 0.5;
+}
+.stream{
+  padding-bottom:150px;
+}
+.post{
+  background: var(--bg-colour);
+  margin: 30px 0;
+}
+.post .banner{
+  width:100%;
+  max-height: 300px;
+  object-fit:scale-down;
+  object-position:top;
+}
+.post .post-title h1 {
+  text-transform: uppercase;
+  font-size: 30px;
+  letter-spacing: 5px;
+  line-height: 1;
+}
+.post .post-title h2 {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 28px;
+  line-height: 1;
+  font-weight: 600;
+  color: var(--text-colour);
+}
+.post .post-title h3 {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  line-height: 1;
+  font-weight: 600;
+  color: var(--text-colour);
+  font-size: 22px;
+  margin: 0;
+}
+.post .post-title a, .h-entry .post-title a {
+  text-decoration: none;
+  letter-spacing: 1px;
+  color: var(--text-colour);
+}
+.post .post-title a:hover, .h-entry .post-title a:hover {
+  text-decoration: underline;
+}
+.post .post-content a, .h-entry p a {
+  text-decoration: none;
+  color: var(--link-colour);
+}
+.post .post-content table, .h-entry table {
+    border-collapse:collapse;
+}
+.post .post-content table,.post .post-content table td, .post .post-content table th,
+.h-entry table,.h-entry table td, .h-entry table th{
+  border: 1px dashed var(--text-colour);
+}
+.post .post-content table td, .post .post-content table th,.h-entry table td, .h-entry table th{
+  padding: 15px
+}
+.post .post-content a:hover, .h-entry a:hover {
+  color: var(--link-colour);
+}
+.post .post-content h3,section aside h3 {
+  color: var(--text-colour);
+  font-size: 22px;
+  font-weight: 600;
+}
+.post .post-content h4 {
+  color: var(--text-colour);
+  font-size: 16px;
+}
+.post .post-content img, .h-entry img {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+  display:block;
+  padding:10px;
+}
+.post .post-footer {
+  padding: 0 0 100px 0;
+  border-bottom: 1px solid var(--text-colour);
+}
+
+.post .post-footer .meta {
+  max-width: 100%;
+  height: 25px;
+  color: var(--text-colour);
+}
+.post .post-footer .meta .info {
+  float: left;
+  font-size: 12px;
+  margin-bottom: 1em;
+}
+.post .post-footer .info .separator a {
+  margin-right: 0.2em;
+}
+.post .post-footer .meta .info .date{
+  margin-right: 10px;
+}
+.index_info .date {
+  margin: 0 10px;
+}
+.post .post-footer .meta a {
+  text-decoration: none;
+  color: var(--text-colour);
+  padding-right: 10px;
+}
+.post .post-footer .meta a:hover {
+  color: var(--link-colour);
+}
+.post .post-footer .blog{
+  color: var(--text-colour);
+}
+.post .post-footer .blog:hover{
+  color: var(--text-colour);
+}
+.post .post-footer .meta i {
+  margin-right: 6px;
+}
+.post .post-footer .tags {
+  padding-bottom: 15px;
+  font-size: 13px;
+}
+.post .post-footer .tags ul {
+  list-style-type: none;
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+.post .post-footer .tags ul li {
+  list-style-type: none;
+  margin: 0;
+  padding-right: 5px;
+  display: inline;
+}
+.post .post-footer .tags a {
+  text-decoration: none;
+  color: var(--text-colour);
+  font-weight: 400;
+}
+.post .post-footer .tags a:hover {
+  text-decoration: none;
+}
+
+.footer {
+  clear: both;
+  text-align: center;
+  font-size: 14px;
+  position:fixed;
+  bottom:0;
+  margin: 0 auto;
+  width: 100%;
+  padding:20px 0;
+  background: var(--bg-colour);
+}
+.footer a {
+  color: var(--text-colour);
+}
+.footer a:hover {
+  color: var(--link-colour);
+}
+.footer img{
+  max-height:40px;
+  margin-top:10px;
+}
+
+/*for archive*/
+.description {
+  color: var(--text-colour);
+}
+.list-title{
+  margin:30px 0;
+  font-size:30px;
+  font-weight:bold;
+  color: var(--text-colour);
+}
+
+.list-title i{
+  font-size:22px;
+  vertical-align:middle;
+  color: var(--text-colour);
+}
+
+.list-with-title {
+  font-size: 14px;
+  margin: 30px 0;
+  padding: 0;
+}
+.list-with-title li {
+  list-style-type: none;
+  padding: 0;
+}
+.list-with-title .listing-title {
+  font-size: 24px;
+  color: var(--text-colour);
+  font-weight: 600;
+  line-height: 2.2em;
+}
+.list-with-title .listing {
+  padding: 0;
+}
+.list-with-title .listing .listing-post {
+  padding-bottom: 5px;
+}
+.list-with-title .listing .listing-post .post-time {
+  float: right;
+  color: var(--text-colour);
+}
+.list-with-title .listing .listing-post a {
+  color: var(--text-colour);
+}
+.list-with-title .listing .listing-post a:hover {
+  color: var(--link-colour);
+}
+
+.readmore {
+  font-size: 14px;
+  text-align:left;
+  padding:0;
+  text-decoration:underline;
+}
+
+.page_404 {
+  text-align: center;
+  padding-top: 50px;
+}
+
+.pixelfed_embed {
+  margin:0 auto;
+  display:block;
+}
+.content hr {
+  color: var(--text-colour);
+}
+.content .author{
+  width: 75px;
+  display:inline-block;
+  margin:0;
+  padding:0;
+}
+.content .author img{
+  width:50px;
+  margin: auto 0;
+}
+.content .author .title{
+  display:none;
+}
+.content aside{
+  width:90%;
+  display:inline-block;
+  vertical-align: top;
+}
+.content aside time, .h-cite time{
+  font-size:13px;
+  width:100%;
+}
+.content aside a.time{
+  text-decoration:underline dashed;
+}
+.content aside .info time{
+  font-size:15px;
+}
+.photos{
+  display:inline-block;
+  width:100%;
+  float:left;
+  min-width:100%;
+  margin-bottom:10px;
+}
+.content img.thumb{
+  width:300px;
+  float:left;
+  display:inline;
+  padding: 0px;
+  margin:10px;
+  border: 1px solid var(--text-colour);
+}
+
+.pagination {
+   list-style:none;
+   margin: 0 auto;
+   border:0px;
+   padding-top:20px;
+   display:block;
+   max-width: 600px;
+   width:100%;
+}
+.pagination li{
+  display:inline-block;
+  padding:10px 50px;
+  font-weight:bold;
+}
+.pagination-bottom{
+  padding-bottom:100px;
+}
+
+.anchor {
+  display:none;
+}
+
+.anchor:target {
+  display:block;
+}
+
+@media screen and (max-width: 960px) {
+  .content {
+    width: 100%;
+    position: absolute;
+    border-right: none;
+    z-index: 1;
+  }
+  .about .profile{
+    width:100%;
+    margin:0;
+    padding:0;
+    text-align:center;
+    display:block;
+  }
+  .about .profile .profile-left{
+    display:inline;
+    margin:0 auto;
+    padding: 0;
+  }
+  .about .profile .profile-left img{
+    padding: 0px;
+    margin-right:0px;
+    margin: 10px;
+  }
+  .about .profile .profile-right{
+    display:block;
+    width:100%;
+    text-align:center;
+    float:none;
+  }
+
+  .page-top {
+    width: 100%;
+  }
+  .page-top .nav{
+    width: 70%;
+
+  }
+  .page-top .nav #Responses{
+   display:none;
+   }
+   .page-top .nav li{
+     padding-right: 10px;
+   }
+   .page-top .selectors{
+     width:130px;
+   }
+  .page-top .language-selector i{
+   padding:0 5px;
+  }
+  .post-title h3, section aside h3 {
+    line-height: 1.6;
+  }
+
+  .content {
+    width: 100%;
+    z-index: 2;
+    position: absolute;
+    left:0;
+    border-top: 1px solid var(--text-colour);
+  }
+
+  .about, .post, .archive, .content{
+    width:95%;
+    margin:0 auto;
+  }
+
+  .content img, .post img{
+    width: 90%;
+    margin: 10px;
+    text-align:center;
+    float:none;
+  }
+  .content img.thumb{
+    width:100%;
+  }
+
+  .pagination li{
+    display:inline-block;
+    padding:0px 20px;
+    height: 30px;
+  }
+  .pagination-bottom{
+    margin-bottom:0px;
+  }
+  .footer{
+    display:none;
+  }
+}