Browse Source

overhaul

master
jk 4 years ago
parent
commit
fd94c3f4dd
  1. 8
      config.toml
  2. 4
      data/bookmarks/brewers-friend-home-brewed-beer-calculators.yml
  3. 4
      data/bookmarks/how-scotland-lost-her-parliament.yaml
  4. 4
      data/bookmarks/vegan-richa.yaml
  5. 55
      layouts/_default/section.html
  6. 10
      themes/nipponalba/layouts/_default/baseof.html
  7. 29
      themes/nipponalba/layouts/_default/list.html
  8. 44
      themes/nipponalba/layouts/_default/list.jp.html
  9. 101
      themes/nipponalba/layouts/_default/single.html
  10. 46
      themes/nipponalba/layouts/index.html
  11. 10
      themes/nipponalba/layouts/partials/footer.html
  12. 39
      themes/nipponalba/layouts/partials/navbar.html
  13. 10
      themes/nipponalba/layouts/partials/webmention.html
  14. 686
      themes/nipponalba/static/css/backup_style.css
  15. 361
      themes/nipponalba/static/css/style.css

8
config.toml

@ -37,10 +37,10 @@ image = "image"
tag = "tag"
category = "category"
type = "type"
likeof = "likeof"
inreplyto = "inreplyto"
repostof = "repostof"
bookmark = "bookmarkof"
like-of = "like-of"
in-reply-to = "in-reply-to"
repost-of = "repost-of"
bookmark-of = "bookmark-of"
posttype = "posttype"
slug = "slug"

4
data/bookmarks/brewers-friend-home-brewed-beer-calculators.yml

@ -1,9 +1,9 @@
---
bookmarkof: 'https://www.brewersfriend.com/stats'
bookmark-of: 'https://www.brewersfriend.com/stats'
date: '2020-06-16 22:10:25'
draft: false
name: 'Brewer''s Friend Home Brewed Beer Calculators'
posttype: bookmarkof
posttype: bookmark-of
slug: brewers-friend-home-brewed-beer-calculators
title: 'Brewer''s Friend Home Brewed Beer Calculators'
content: 'An extensive list of calculators to aid home-brewers in making sense of some of the numbers.'

4
data/bookmarks/how-scotland-lost-her-parliament.yaml

@ -1,10 +1,10 @@
---
bookmarkof: 'https://randomscottishhistory.com/how-scotland-lost-her-parliament-and-what-came-of-it-1891'
bookmark-of: 'https://randomscottishhistory.com/how-scotland-lost-her-parliament-and-what-came-of-it-1891'
category: 'Scottish Politics'
date: '2020-06-16 10:57:50'
draft: false
name: 'How Scotland Lost Her Parliament'
posttype: bookmarkof
posttype: bookmark-of
slug: how-scotland-lost-her-parliament
title: 'How Scotland Lost Her Parliament'
visibility: public

4
data/bookmarks/vegan-richa.yaml

@ -1,10 +1,10 @@
---
bookmarkof: 'https://www.veganricha.com'
bookmark-of: 'https://www.veganricha.com'
category: 'Vegan Recipes'
date: '2020-06-16 14:14:37'
draft: false
name: 'Vegan Richa'
posttype: bookmarkof
posttype: bookmark-of
slug: vegan-richa
title: 'Vegan Richa'
visibility: public

55
layouts/_default/section.html

@ -1,25 +1,25 @@
{{ define "main" }}
<div class="stream h-feed">
<div class="author" style="display:none;">
<section class="stream h-feed">
<section class="author" style="display:none;">
<a rel="author" class="p-author h-card" rel="me" href="https://jk.nipponalba.scot">{{ .Site.Params.Title }}<img src="/images/profile.jpg"/></a>
</div>
</section>
<span id="pagination-top">{{ partial "pagination.html" . }}</span>
{{ range .Paginator.Pages}}
{{ if not (eq .Type "response")}}<section data-post-type="{{ .Type }}" class="feed h-entry {{.Type }}">
<div class="author" style="display:none;">
<section 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 class="index_content">
</section>
<article class="index_content">
{{if eq .Type "article" }}<br/>{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<a href="{{ .Permalink }}" class="u-url"><h3 class="p-name entry-title">{{ .Title }}</h3></a><b>{{ .Description }}</b>{{ end }}
{{ if eq .Type "article" }}<div class="info">
{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}<span id="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}<span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}
</div>{{ end }}
<div class="e-content">
{{ if eq .Type "article" }}<section class="info">
<span class="blogs_span">{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}</span><span class="info-date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span><br/>
<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
<span class="tags_span">{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
</section>{{ end }}
<section class="e-content">
{{ .Content }}
{{ if eq .Type "photo"}}
<div class="photogrid">
<section class="photogrid">
{{ range .Page.Params.Photo }}
<a class="u-url" href="{{ . }}">
<picture>
@ -29,39 +29,38 @@
</picture>
</a>
{{end}}
</div>
</section>
{{end}}
</div>
{{ if not (eq .Type "article") }}<div class="info">
{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}<div id="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></div><br/>
</div>{{ end }}
</aside>
</section><br/>
{{ if not (eq .Type "article") }}<section class="info">
<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
</section>{{ end }}
</article>
</section><hr/>
{{ else }}
{{ if .Params.inreplyto }}<section data-post-type="in-reply-to" data-post-id="{{ .Params.slug }}" class="h-entry" id="response">{{ end }}
{{ if .Params.likeof }}<section data-post-type="like-of" data-post-id="{{ .Params.slug }}" class="h-entry" id="response">{{ end }}
{{ if .Params.repostof }}<section data-post-type="repost-of" data-post-id="{{ .Params.slug }}" class="h-entry" id="response">{{ end }}
<div class="author" style="display:none;">
<section class="author" style="display:none;">
<a rel="author" class="p-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="h-cite"><p>{{ .Site.Params.Title }}
</section>
<article class="h-cite"><p>{{ .Site.Params.Title }}
{{ if .Params.inreplyto }} replied to a{{ end }}
{{ if .Params.likeof }} liked a{{ end }}
{{ if .Params.repostof }} shared a{{ end }}
{{ if .Params.likeof }}<a href="{{ .Params.likeof }}" class="u-like-of"> post</a>{{ end }}
{{ if .Params.inreplyto }}<a href="{{ .Params.inreplyto }}" class="u-in-reply-to"> post</a>{{ end }}
{{ if .Params.repostof }}<a href="{{ .Params.repostof }}" class="u-repost-of"> post</a>{{ end }}</p>
{{ if .Content }}<div class="p-name p-content">{{ .Content }}</div>{{end}}
{{ if not (eq .Type "article") }}<div class="info">
{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}<span id="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
</div>{{ end }}
{{ if .Content }}<section class="p-name p-content">{{ .Content }}</section>{{end}}
{{ if not (eq .Type "article") }}<section class="info">
<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
</section>{{ end }}
</article>
</aside>
</section><hr/>
{{end}}
{{ end }}
<span id="pagination-bottom">{{ partial "pagination.html" . }}</span>
</div>
</section>
{{ end }}

10
themes/nipponalba/layouts/_default/baseof.html

@ -3,11 +3,11 @@
{{- partial "head.html" . -}}
<body>
<input type="checkbox" id="theme-switch" class="theme-switch" autocomplete="on">
<div id="page">
<section id="page">
{{ partial "navbar.html" . }}
<div class="main">
<div class="content">
<main>
<section class="content">
{{- block "main" . }}{{- end }}
</div>
</div>
</section>
</main>
{{- partial "footer.html" . -}}

29
themes/nipponalba/layouts/_default/list.html

@ -1,26 +1,27 @@
{{ 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>
<section class="archive">
<span 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></span>
<ul class="list-with-title">
{{ if eq .Type "article" "blog"}}{{ range .Data.Pages.GroupByDate "2006" }}
<div class="listing-title">{{ .Key }}</div>
<span class="listing-title">{{ .Key }}</span>
{{ range .Pages }}
<ul class="listing">
<div class="listing-item">
<li 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>
<span class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
<time class="post-time"><span class="date">{{.Date.Format "Jan 2" }}</span></time>
</span>
{{end}}
</div>
</li>
</ul>{{ end }}{{end}}{{else}}
{{ range .Pages }}
<ul class="listing">
<div class="listing-item">
{{ if not (eq .Type "note" "photo") }}<div class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</div>{{else}}
<div class="listing-post"><a href="{{ .Permalink }}" title="{{ .Summary }}"><b>{{ humanize .Type }}:</b> {{ .Summary }}</div>{{end}}
</div>
<li class="listing-item">
{{ if not (eq .Type "note" "photo") }}<span class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</span>{{else}}
<span class="listing-post"><a href="{{ .Permalink }}" title="{{ .Summary }}"><b>{{ humanize .Type }}:</b> {{ .Summary }}</span>{{end}}
</li>
</ul>{{ end }}
{{ end }}</ul>
</div>
{{ end }}
</ul>
</section>
{{ end }}

44
themes/nipponalba/layouts/_default/list.jp.html

@ -1,19 +1,27 @@
{{ 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 }}
<section class="archive">
<span 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 feed"></i></a></span>
<ul class="list-with-title">
{{ if eq .Type "article" "blog"}}{{ range .Data.Pages.GroupByDate "2006" }}
<span class="listing-title">{{ .Key }}</span>
{{ range .Pages }}
<ul class="listing">
<li class="listing-item">
{{ if eq .Type "article" "blog"}}
<span class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
<time class="post-time"><span class="date">{{.Date.Format "Jan 2" }}</span></time>
</span>
{{end}}
</li>
</ul>{{ end }}{{end}}{{else}}
{{ range .Pages }}
<ul class="listing">
<li class="listing-item">
{{ if not (eq .Type "note" "photo") }}<span class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</span>{{else}}
<span class="listing-post"><a href="{{ .Permalink }}" title="{{ .Summary }}"><b>{{ humanize .Type }}:</b> {{ .Summary }}</span>{{end}}
</li>
</ul>{{ end }}
{{ end }}
</ul>
</section>
{{ end }}

101
themes/nipponalba/layouts/_default/single.html

@ -1,106 +1,99 @@
{{ define "main" }}
{{ if not (eq .Type "response" "bookmarkof")}}
<article class="post h-entry entry contents">
<div class="author" style="display:none;">
<section 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>
</section>
{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<h3 class="p-name entry-title">{{ .Title }}</h3><b>{{ .Description }}</b>
<aside>
{{ if eq .Type "article" }}<div class="info">
{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}<span id="info-date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span><br/>
{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}<span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}
</div>{{ end }}
<div class="e-content">
{{ if eq .Type "article" }}<section class="info">
<span class="blogs_span">{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}</span><span class="info-date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span><br/>
<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
<span class="tags_span">{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
</section>{{ end }}
<section class="e-content">
{{ .Content }}
{{ if eq .Type "photo"}}
<div class="photogrid">
<section class="photogrid">
{{ range .Page.Params.Photo }}
<a href="{{ . }}"><img class="u-photo thumb" src="{{ replace . "800." "300."}}"/></a>
{{end}}
</div>
</section>
{{end}}
{{ if eq .Type "article" }}<div class="p-summary" style="display:none">
{{ if eq .Type "article" }}<section class="p-summary" style="display:none">
{{ .Page.Params.summary }}<br/>
</div>
</section>
{{ end }}<br/>
</div>
{{ if not (eq .Type "article") }}<div class="info">
{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}
</div>{{ end }}
</section>
<section class="info">
{{ if not (eq .Type "article") }}<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span>{{ end }}
{{ $pathJSON := (print .Permalink "bridgy.json") }}
{{ $relpathJSON := (print .RelPermalink "bridgy.json") }}
{{ if fileExists $relpathJSON }}
<span class="syndication">
{{ $mJSON := getJSON $pathJSON }}
Syndicated to <a href="{{ printf $mJSON.url}}">Pleroma</a>
</span><span id="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span>
{{ end }}
Syndicated to <a href="{{ printf $mJSON.url}}">Pleroma</a></span>{{ end }}
<span class="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span></section>
<a href="https://brid.gy/publish/mastodon"></a>
<div class="interactions"><h4>Interactions</h4></div>
<div class="webmention-form">
<section id="interactions"><h4>Interactions</h4>
<section id="webmention-form">
<form action="https://webmention.io/jk.nipponalba.scot/webmention" method="post">
<label>Did you mention this {{ .Type }} on your website? Put the URL of your post here:</label><br/>
<input name="source" type="url"/>
<input name="target" value="{{ .Permalink }}" type="hidden"/>
<input value="Send Webmention" type="submit"/>
</form>
</div>
</section>
{{ $mention_ids := index $.Site.Data.index .RelPermalink }}
{{ if isset $mention_ids 1}}
{{ $mentions := apply $mention_ids "index" $.Site.Data.mentions "." }}
{{ $mentions := sort $mentions "wm-received" }}
<div class="webmentions">
<div class="like interaction"><h4>Likes</h4>{{ range $mentions }}{{ if eq (index . "wm-property") "like-of" }}
<section id="webmentions">
<section class="like interaction"><h4>Likes</h4>{{ range $mentions }}{{ if eq (index . "wm-property") "like-of" }}
<a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo }}" title="{{ .author.name }}" alt="{{ .author.name }}" /></a>{{ end}}
{{ end }}</div>
<div class="share interaction"><h4>Shares</h4>{{ range $mentions }}{{ if eq (index . "wm-property") "repost-of" }}
{{ end }}</section>
<section class="share interaction"><h4>Shares</h4>{{ range $mentions }}{{ if eq (index . "wm-property") "repost-of" }}
<a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo }}" title="{{ .author.name }}" alt="{{ .author.name }}" /></a>{{ end}}
{{ end }}</div>
{{ end }}</section>
<h4>Comments & Replies</h4>{{ partial "webmention.html" $mentions }}
</div>{{ end }}
</aside>
</section>{{ end }}</section>
</article>
{{ else if eq .Type "bookmarkof" }}
{{ $cats := slice }}
<section class="bookmarks">{{ $cats := slice }}
{{ range .Site.Data.bookmarks }}
{{ $cats = $cats | append .category }}
{{ end }}
{{ $cats = uniq $cats | sort }}
{{ range $cats }}
{{ $cat := . }}
<section id="{{ $cat }}">
<h4>{{ $cat }}</h4>
{{ range $.Site.Data.bookmarks }}
{{ if eq .category $cat }}
<section data-post-type="bookmark-of" data-post-id="{{ .Params.slug }}" class="bookmark h-entry">
<div class="author" style="display:none">
<article data-post-type="bookmark-of" data-post-id="{{ .Params.slug }}" class="bookmark h-entry">
<section class="author" style="display:none">
<a rel="author" class="p-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="h-cite">
<a href="{{ .bookmarkof | absURL }}" class="u-bookmark-of" target="_blank">{{ .name }}</a> - <div class="p-name p-content">{{ .content | markdownify }}</div>
</article>
</aside>
</section>
{{ end }}
</section>
<section class="h-cite">
<a href="{{ (index . "bookmark-of") | absURL }}" class="u-bookmark-of" target="_blank">{{ .name }}</a> - <div class="p-name p-content">{{ .content | markdownify }}</div>
</section>
</article></section>
{{ end }}
{{ end }}
{{ end }}</section>
{{ else }}
<article class="h-entry" id="response">
<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>
<div>
{{ if .Params.likeof }}<p>Liked <a href="{{ .Params.likeof }}" class="u-url u-like-of"> {{ .Params.likeof }}</a>{{ end }}
{{ if .Params.inreplyto }}<p>Replied to <a href="{{ .Params.inreplyto }}" class="u-url u-in-reply-to"> {{ .Params.inreplyto }}</a>{{ end }}
{{ if .Params.repostof }}<p>Shared <a href="{{ .Params.repostof }}" class="u-url u-repost-of"> {{ .Params.repostof }}</a>{{ end }}</p>
<section class="author" style="display:none;">
<a rel="author" class="u-author h-card" rel="me" href="https://jk.nipponalba.scot"><img src="/images/profile.jpg"/><span class="title">{{ .Site.Params.Title }}</span></a>
</section>
<section id="response-details"><br/>
{{ if .Params.likeof }}<p>{{ .Site.Params.Title }} liked <a href="{{ .Params.likeof }}" class="u-url u-like-of"> {{ .Params.likeof }}</a>{{ end }}
{{ if .Params.inreplyto }}<p>{{ .Site.Params.Title }} replied to <a href="{{ .Params.inreplyto }}" class="u-url u-in-reply-to"> {{ .Params.inreplyto }}</a>{{ end }}
{{ if .Params.repostof }}<p>{{ .Site.Params.Title }} shared <a href="{{ .Params.repostof }}" class="u-url u-repost-of"> {{ .Params.repostof }}</a>{{ end }}</p>
{{ if .Content }}<div class="p-name p-content"><p>{{ .Content }}</p></div> {{end}}
</div>
{{ if not (eq .Type "article") }}<div class="info">
{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}<span id="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
</div>{{ end }}
</section>
{{ if not (eq .Type "article") }}<section class="info">
<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
</section>{{ end }}
{{end}}
{{end}}

46
themes/nipponalba/layouts/index.html

@ -1,8 +1,8 @@
{{ 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">
<section class="about h-feed">
<section class="profile title h-card p-author">
<section class="profile-left"><img class="u-photo" src="/images/profile.jpg" alt="profile picture"></section>
<section 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 }}
@ -11,42 +11,38 @@
</a>
{{ end }}
</ul>
<div class="description">
<section class="description">
<p class="p-note">{{ .Site.Params.description }}</p>
</div>
</div>
</div>
</section>
</section>
</section>
<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;">
<section 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>
</section>
{{ with .Page.Params.Image }}{{ partial "taxonomy/image.html" . }}{{ end }}<h3 class="p-name entry-title">{{ .Title }}</h3>
<aside>
<div class="e-content">{{ .Content }}
<section class="e-content">{{ .Content }}
{{ if eq .Type "photo"}}
<div class="photos">
<section class="photos">
{{ range .Page.Params.Photo }}
<a class="u-url" href="{{ . }}"><img class="u-photo thumb" src="{{ replace . "800." "300."}}"/></a>
{{end}}
</div>
</section>
{{end}}
</div>
<div class="info">
</section>
<section class="info">
{{ if eq .Type "article" }}
{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}<span id="info-date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span><br/>
{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}<span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}
<span class="blogs_span">{{ with .Page.Params.Blog }}Blog: {{ partial "taxonomy/blog.html" . }}{{ end }}</span><span class="info-date"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></span><br/>
<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="reading-time">{{ .ReadingTime }}-minute read</span><br/>
<span class="tags_span">{{ with .Page.Params.tag }}Tags: {{ partial "taxonomy/tags.html" . }}{{ end }}</span>
{{ else }}
{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}<span id="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
<span class="categories_span">{{ with .Page.Params.category }}Categories: {{ partial "taxonomy/categories.html" . }}{{ end }}</span><span class="info-date"><a href="{{ .Permalink }}" class="u-url"><time class="dt-published" datetime="{{ .Date.Format "2 Jan 2006 15:04 GMT" }}">{{ .Date.Format "02/01/2006 15:04 GMT" }}</time></a></span><br/>
{{ end }}
</div>
</aside>
</div>
</section>
<a href="https://brid.gy/publish/mastodon"></a>
</article>
{{ end }}
</div>
</section>
{{ end }}

10
themes/nipponalba/layouts/partials/footer.html

@ -1,9 +1,9 @@
</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/>
</section>
<footer id="footer">
&copy; {{ now.Format "2006"}} | <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC-BY 4.0</a> | <a href="{{ .Permalink }}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>
Made with ❤ and <a href="https://gohugo.io/">Hugo</a> by {{ .Site.Params.author }}
</footer>
<script>
// This code is only used to remember theme selection between page loads

39
themes/nipponalba/layouts/partials/navbar.html

@ -1,27 +1,20 @@
<div class="page-top">
<div class="nav">
<header id="page-top">
<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>
{{ 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 }}
<li><label for="theme-switch"><i class="fa fa-adjust fa-2x light" aria-hidden="true" title="light/dark mode switch"></i></label></li>
</nav>
</header>

10
themes/nipponalba/layouts/partials/webmention.html

@ -1,16 +1,16 @@
{{ range sort . "published" "asc" }}
<br/>
{{ if eq (index . "wm-property") "mention" }}
<div class="mention interaction"><div class="remote_profile"><a href="{{ .author.url }}"><img src="{{ .author.photo }}" /></a></div><div class="intcontent"><div class="intactivity"><a href="{{ .author.url }}">{{ .author.name }}</a> mentioned this post in <a href="{{ .url }}">the post {{ .title }}</a></div>
<section class="mention interaction"><span class="remote_profile"><a href="{{ .author.url }}"><img src="{{ .author.photo }}" /></a></span><section class="intcontent"><span class="intactivity"><a href="{{ .author.url }}">{{ .author.name }}</a> mentioned this post in <a href="{{ .url }}">the post {{ .title }}</a></span>
<p>{{ .content.text | safeHTML }}</p>
<time>{{ dateFormat "02/01/2006 15:04 GMT" ( time .published ) }}</time></div></div>
<time>{{ dateFormat "02/01/2006 15:04 GMT" ( time .published ) }}</time></section></section>
{{ end }}
{{ if eq (index . "wm-property") "in-reply-to" }}
<div class="reply interaction"><div class="remote_profile"><a href="{{ .author.url }}"><img src="{{ .author.photo }}" /></a></div><div class="intcontent"><div class="intactivity"><a href="{{ .author.url }}">{{ .author.name }}</a> replied to this post <a href="{{ .url }}">here</a><br/></div>
<section class="reply interaction"><span class="remote_profile"><a href="{{ .author.url }}"><img src="{{ .author.photo }}" /></a></span><section class="intcontent"><span class="intactivity"><a href="{{ .author.url }}">{{ .author.name }}</a> replied to this post <a href="{{ .url }}">here</a><br/></span>
<p>{{ .content.text | safeHTML }}</p>
<time>{{ dateFormat "02/01/2006 15:04 GMT" ( time .published ) }}</time></div></div>
<time>{{ dateFormat "02/01/2006 15:04 GMT" ( time .published ) }}</time></section></section>
{{ end }}
{{ if eq (index . "wm-property") "bookmark" }}
<div class="bookmark interaction"><a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo }}" /></a><a href="{{ .author.url }}">{{ .author.name }}</a> bookmarked this post</div>
<section class="bookmark interaction"><a href="{{ .author.url }}"><img class="remote_profile" src="{{ .author.photo }}" /></a><a href="{{ .author.url }}">{{ .author.name }}</a> bookmarked this post</section>
{{ end }}
{{ end }}

686
themes/nipponalba/static/css/backup_style.css

@ -0,0 +1,686 @@
@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: 15px;
}
a {
text-decoration: none;
color: var(--link-colour);
}
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(--link-colour);
}
a:hover, a:active {
color: var(--text-colour);
}
img {
opacity: var(--opacity-img);
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 1
}
table {
border-collapse:collapse;
}
table, td, th{
border: 1px dotted var(--text-colour);
padding:15px;
}
h3 {
color: var(--text-colour);
font-size: 22px;
font-weight: 600;
line-height: 1.6;
}
h4 {
color: var(--text-colour);
font-size: 16px;
}
pre {
background: var(--bg-colour);
padding: 5px;
}
#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 a {
color: var(--text-colour);
}
.page-top a:hover {
color: var(--link-colour);
}
nav {
width:80%;
list-style: none;
padding: 18px 0px;
float: left;
font-size: 14px;
display:inline-block;
}
nav li{
position: relative;
display: initial;
padding-right: 20px;
}
.selectors{
width:130px;
float:right;
display:inline-block;
vertical-align:middle;
padding: 10px 0px;
}
.selectors i{
margin:0;
padding-left:10px;;
}
.language-selector {
position:relative;
display:inline-block;
float:right;
padding:0px 10px;padding:0;
margin:0;
}
.language-selector ul{
list-style:none;
padding:0;
margin:0;
}
.theme-selector{
margin:0;
padding:0;
}
.content {
height: 95%;
overflow:auto;
-ms-overflow-style: none;
scrollbar-width:none;
}
.content::-webkit-scrollbar{
display:none;
}
.about .post{
border: 1px dotted var(--text-colour);
padding: 10px;
display:block;
margin:0;
vertical-align:top;
}
.profile{
width:85% !important;
display:block;
margin: 0 auto;
padding-top:30px;
}
.profile-left{
width:20% !important;
min-width: 200px;
padding:0;
margin:0;
display:inline-block;
vertical-align:middle;
}
.profile-right{
vertical-align:top;
width:75%;
display:inline-block;
padding:0;
margin:0;
text-align:justify;
}
.profile-right a{
color: var(--text-colour);
}
.profile-right a:hover{
color: var(--link-colour);
}
.profile img{
width:165px;
border-radius: 5%;
margin-right: 40px;
}
.profile .title{
text-transform: uppercase;
font-size: 1.8rem;
font-weight: bold;
letter-spacing: 1.5px;
line-height: 1;
display:inline-block;
padding-left:10px;
}
.social-links {
list-style: none;
padding: 0;
}
.social-links i {
margin-right: 3px;
}
.social-links li {
display: inline;
}
.social-links a {
color: var(--text-colour);
}
.social-links a:hover {
color: var(--link-colour);
}
.info i{
opacity: 0.5;
margin-right: 5px;
}
.info{
padding: 30px 0;
font-size:13px;
}
#info-date{
float:right;
}
#info-date .dt-published{
font-size:13px;
}
.category, .blog, .tag, #info-date {
display: inline-block;
font-size: 13px;
line-height: 1.5;
}
.categories, .tags{
display:inline;
margin:0;
padding:0;
}
.categories li, .tags li{
list-style:none;
display:inline;
}
.tag::before {
content: "#";
opacity: .75;
}
.categories li::after, .tags li::after{
content: ", ";
}
.categories li:last-child:after, .tags li:last-child:after{
content: "";
}
.reading-time{
display:inline;
float:right;
font-weight:bold;
}
.stream{
padding-bottom:150px;
}
.post{
margin: 30px 0;
}
.index_content{
text-align:justify;
width:100%;
}
.banner{
width:90%;
max-height: 300px;
object-fit:scale-down;
object-position:top;
}
.h-entry p a {
text-decoration: none;
color: var(--link-colour);
}
.h-entry a:hover {
color: var(--link-colour);
}
.h-entry img {
text-align: center;
max-width: 800px;
margin: 0 auto;
display:block;
padding:10px;
}
#syndication{
display:inline-block;
float:left;
font-size:13px;
margin:0;
}
#interactions{
margin:20px 0 10px 0;
padding:0;
display:inline-flex;
float:left;
height:30px;
width:100%;
border-top:1px dotted var(--text-colour);
}
#webmention-form{
display:inline-flex;
margin-top:20px;
width: 100%;
}
#webmention-form label{
display:inline;
float:left;
margin-bottom:10px;
}
#webmention-form input[type=url]{
width:60%;
}
#webmentions{
display:block;
margin-top: 0 20px 0 0 ;
padding: 0 0 200px 0;
}
.remote_profile{
height: 100%;
width: 70px;
display:inline-block;
vertical-align:top;
}
.remote_profile img{
width: 50px;
border-radius: 50%;
display:inline;
float:left;
border:0;
padding:0;
}
.interaction{
border:1px dotted var(--text-colour);
padding: 10px;
display:block;
margin:0;
min-height:60px;
vertical-align:top;
}
.interaction .intactivity{
font-size:13px;
font-style:italic;
line-height:18px;
}
.interaction .intcontent{
display:inline-block;
font-size:15px;
vertical-align:top;
max-width: 90%;
}
.interaction time{
font-size:12px;
}
.interaction h4{
line-height:15px;
padding:0;
margin:0;
display:block;
}
.interaction.like, .interaction.share{
border:0;
color: var(--text-colour);
padding:2px;
margin:30px 0 0 0;
display:flex;
width:100%;
min-height:30px;
}
.interaction.like img,.interaction.share img{
display:inline-flex;
float:left;
width:30px;
height:30px;
margin:0;
border-radius: 50%;
}
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;
}
hr {
color: var(--text-colour);
}
.author .title{
display:none;
}
#response .h-cite{
width:100%;
display:inline-block;
vertical-align:top;
padding:0;
}
#response p{
margin:0;
}
time{
font-size:13px;
}
.bookmark .p-content{
display:inline;
margin:0;
padding:0;
}
.photo{
display:flex;
width:100%;
}
.photogrid{
display:block;
width:100%;
float:left;
min-width:100%;
margin-bottom:10px;
}
img.thumb{
width:300px;
float:left;
display:inline;
padding: 0px;
margin:10px;
border: 1px solid var(--text-colour);
}
hr{
border-top:1px dotted var(--text-colour);
border-bottom:0;
}
.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;
}
.pagination a {
color: var(--text-colour);
}
.pagination a:hover {
color: var(--link-colour);
}
.anchor {
display:none;
}
.anchor:target {
display:block;
}
@media screen and (max-width: 760px) {
.content {
width:100%;
z-index: 2;
position: absolute;
left:0;
}
.about, .post, .archive, .stream{
width:95%;
margin:0 auto;
}
.profile{
width:100%;
margin:0 auto;
padding:0;
text-align:center;
display:block;
}
.profile-left{
display:block;
margin:0 auto;
padding: 0;
width:100%;
text-align:center;
float:none;
}
.profile-left img{
padding: 0px;
margin: 10px;
}
.profile-right{
display:block;
width:100%;
text-align:center;
float:none;
margin:0 auto;
}
.page-top {
width: 95%;
padding: 10px 0;
}
.page-top nav{
width: 70%;
}
.page-top nav #Bookmarks{
display:none;
}
.page-top nav li{
padding-right: 10px;
}
.page-top .selectors{
width:130px;
}
.page-top .language-selector i{
padding:0 5px;
}
.content img, .post img{
width: 95%;
text-align:center;
float:none;
}
.interactions{
padding-bottom: 100px;
}
.remote_profile{
width: 50px;
}
.remote_profile img{
width: 30px;
}
.pagination li{
display:inline-block;
padding:0px 20px;
height: 30px;
}
.pagination-bottom{
margin-bottom:0px;
}
footer{
display:none;
}
}

361
themes/nipponalba/static/css/style.css

@ -38,7 +38,7 @@ html { font-family: 'Inter', sans-serif;}
.theme-switch:checked ~ *,
.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);
@ -57,18 +57,16 @@ html { font-family: 'Inter', sans-serif;}
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;
min-height:100%;
}
p {
line-height: 1.9em;
@ -122,115 +120,71 @@ pre {
#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%;
#page-top {
width: 100%;
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 a {
#page-top a {
color: var(--text-colour);
}
.page-top a:hover {
#page-top a:hover {
color: var(--link-colour);
}
.nav {
width:80%;
nav {
width:100%;
list-style: none;
padding: 18px 0px;
float: left;
font-size: 14px;
display:inline-block;
display:flex;
}
.nav li{
nav li{
position: relative;
display: initial;
padding-right: 20px;
}
.selectors{
width:130px;
float:right;
display:inline-block;
vertical-align:middle;
padding: 10px 0px;
}
.selectors i{
nav li i{
margin:0;
padding-left:10px;;
padding-left:10px;
}
.language-selector {
position:relative;
display:inline-block;
float:right;
padding:0px 10px;padding:0;
margin:0;
nav > li:nth-child(7) {
margin-left: auto;
padding-right:5px;
}
.language-selector ul{
list-style:none;
padding:0;
margin:0;
nav > li:nth-child(8) {
padding-right:0;
}
.theme-selector{
margin:0;
padding:0;
}
.content {
height: 95%;
overflow:auto;
-ms-overflow-style: none;
scrollbar-width:none;
main {
max-width: 1000px;
margin: 0 auto;
background: var(--bg-colour);
}
.content::-webkit-scrollbar{
display:none;
.about, .archive, .bookmarks {
height: calc(100vh - 150px);
}
.about .post{
border: 1px dotted var(--text-colour);
padding: 10px;
display:block;
margin:0;
vertical-align:top;
}
.profile{
width:85% !important;
display:block;
display:grid;
grid-template-columns: repeat (20%, 80%);
margin: 0 auto;
padding-top:30px;
}
.profile-left{
width:20% !important;
min-width: 200px;
padding:0;
margin:0;
display:inline-block;
vertical-align:middle;
grid-column: 1;
}
.profile-right{
vertical-align:top;
width:75%;
display:inline-block;
padding:0;
margin:0;
grid-column: 2;
text-align:justify;
}
.profile-right a{
@ -250,8 +204,7 @@ width:80%;
font-weight: bold;
letter-spacing: 1.5px;
line-height: 1;
display:inline-block;
padding-left:10px;
padding-left: 10px;
}
.social-links {
list-style: none;
@ -276,22 +229,20 @@ width:80%;
.info{
padding: 30px 0;
font-size:13px;
display:grid;
grid-template-columns: repeat (80%. 20%);
}
#info-date{
float:right;
}
#info-date .dt-published{
font-size:13px;
.blogs_span, .categories_span, .tags_span{
grid-column: 1;
}
.category, .blog, .tag, #info-date {
display: inline-block;
.category, .blog, .tag {
font-size: 13px;
line-height: 1.5;
display:inline;
}
.categories, .tags{
display:inline;
margin:0;
padding:0;
margin:0;padding:0;
}
.categories li, .tags li{
list-style:none;
@ -307,11 +258,25 @@ width:80%;
.categories li:last-child:after, .tags li:last-child:after{
content: "";
}
.info-date{
grid-column: 2;
text-align:right;
line-height:1.5;
}
.info-date .dt-published{
font-size:13px;
}
.reading-time{
display:inline;
float:right;
grid-column: 2;
text-align:right;
font-weight:bold;
}
.syndication{
grid-column:2;
font-size:13px;
margin:0;
}
.stream{
padding-bottom:150px;
}
@ -342,80 +307,36 @@ width:80%;
display:block;
padding:10px;
}
.syndication{
display:inline-block;
float:left;
font-size:13px;
margin:0;
}
.interactions{
#interactions{
margin:20px 0 10px 0;
padding:0;
display:inline-flex;
float:left;
height:30px;
display:grid;
grid-template-rows: repeat (20px, 40px, auto);
width:100%;
border-top:1px dotted var(--text-colour);
padding-bottom:150px;
}
.webmention-form{
display:inline-flex;
#webmention-form{
grid-row: 2;
margin-top:20px;
width: 100%;
}
.webmention-form label{
display:inline;
float:left;
margin-bottom:10px;
#webmention-form label{
line-height: 2;
}
.webmention-form input[type=url]{
width:60%;
#webmention-form input[type=url]{
width: 60%;
}
.webmentions{
display:block;
#webmentions{
grid-row: 4;
margin-top: 0 20px 0 0 ;
padding: 0 0 200px 0;
}
.remote_profile{
height: 100%;
width: 70px;
display:inline-block;
vertical-align:top;
}
.remote_profile img{
width: 50px;
border-radius: 50%;
display:inline;
float:left;
border:0;
padding:0;
}
.interaction{
border:1px dotted var(--text-colour);
padding: 10px;
display:block;
margin:0;
min-height:60px;
vertical-align:top;
}
.interaction .intactivity{
font-size:13px;
font-style:italic;
line-height:18px;
}
.interaction .intcontent{
display:inline-block;
font-size:15px;
vertical-align:top;
max-width: 90%;
}
.interaction time{
font-size:12px;
}
.interaction h4{
line-height:15px;
padding:0;
margin:0;
display:block;
}
.interaction.like, .interaction.share{
border:0;
@ -428,13 +349,42 @@ width:80%;
}
.interaction.like img,.interaction.share img{
display:inline-flex;
float:left;
width:30px;
height:30px;
margin:0;
border-radius: 50%;
}
.footer {
.interaction.mention, .interaction.reply{
border:1px dotted var(--text-colour);
display:flex;
min-height: 60px;
padding: 10px;
}
.interaction.mention .remote_profile, .interaction.reply .remote_profile{
width: 90px;
}
.interaction.mention .remote_profile img, .interaction.reply .remote_profile img{
width: 50px;
border-radius: 50%;
margin: 0 auto;
}
.intactivity{
font-size:13px;
font-style: italic;
line-height:18px;
text-align:left;
}
.intcontent{
font-size:15px;
vertical-align:top;
text-align:left;
padding-left: 10px;
}
.interaction time{
font-size:13px;
}
#footer {
clear: both;
text-align: center;
font-size: 14px;
@ -444,14 +394,15 @@ width:80%;
width: 100%;
padding:20px 0;
background: var(--bg-colour);
color: var(--text-colour);
}
.footer a {
#footer a {
color: var(--text-colour);
}
.footer a:hover {
#footer a:hover {
color: var(--link-colour);
}
.footer img{
#footer img{
max-height:40px;
margin-top:10px;
}
@ -464,6 +415,7 @@ width:80%;
margin:30px 0;
font-size:30px;
font-weight:bold;
display:flex;
color: var(--text-colour);
}
@ -482,19 +434,19 @@ width:80%;
list-style-type: none;
padding: 0;
}
.list-with-title .listing-title {
.listing-title {
font-size: 24px;
color: var(--text-colour);
font-weight: 600;
line-height: 2.2em;
}
.list-with-title .listing {
.listing {
padding: 0;
}
.list-with-title .listing .listing-post {
.listing-post {
padding-bottom: 5px;
}
.list-with-title .listing .listing-post .post-time {
.post-time {
float: right;
color: var(--text-colour);
}
@ -546,21 +498,20 @@ time{
margin:0;
padding:0;
}
.photo{
display:flex;
width:100%;
.picture{
flex: calc(100% / 3);
max-width:calc(100% / 3);
}
.photogrid{
display:block;
display:flex;
flex-wrap:wrap;
width:100%;
float:left;
height: 100%;
min-width:100%;
margin-bottom:10px;
}
img.thumb{
width:300px;
float:left;
display:inline;
padding: 0px;
margin:10px;
border: 1px solid var(--text-colour);
@ -574,12 +525,11 @@ hr{
margin: 0 auto;
border:0px;
padding-top:20px;
display:block;
display:flex;
max-width: 600px;
width:100%;
}
.pagination li{
display:inline-block;
padding:10px 50px;
font-weight:bold;
}
@ -600,14 +550,12 @@ hr{
display:block;
}
@media screen and (max-width: 760px) {
.content {
width:100%;
z-index: 2;
position: absolute;
left:0;
@media screen and (max-width: 960px) {
#page-top {
width: 95%;
padding: 10px 0;
}
.about, .post, .archive, .stream{
.about, .post, .archive, .stream, .bookmarks, #response{
width:95%;
margin:0 auto;
}
@ -621,66 +569,65 @@ hr{
.profile-left{
display:block;
margin:0 auto;
padding: 0;
padding: 10px;
width:100%;
text-align:center;
float:none;
}
.profile-left img{
padding: 0px;
margin: 10px;
max-width: 200px;
margin:0;
}
.profile-right{
display:block;
width:100%;
width:90%;
text-align:center;
float:none;
margin:0 auto;
}
.page-top {
width: 95%;
padding: 10px 0;
}
.page-top .nav{
width: 70%;
}
.page-top .nav #Bookmarks{
display:none;
}
.page-top .nav li{
padding-right: 10px;
}
.page-top .selectors{
width:130px;
}
.page-top .language-selector i{
padding:0 5px;
}
.content img, .post img{
.post img{
width: 95%;
text-align:center;
float:none;
}
.interactions{
padding-bottom: 100px;
}
.remote_profile{
width: 50px;
}
.remote_profile img{
width: 30px;
}
.pagination li{
display:inline-block;
padding:0px 20px;
padding:10px 50px;
height: 30px;
}
.pagination-bottom{
margin-bottom:0px;
}
.footer{
display:none;
}
}
@media screen and (max-width: 560px) {
#Bookmarks{
display:none;
}
.pagination li{
padding:10px 40px;
height: 30px;
}
article img{
width: 95%;
text-align:center;
}
.interactions{
padding-bottom: 0px;
}
footer{
display:none;
}
}
@media screen and (max-width: 560px) {
#Blogs{
display:none;
}
nav label{
display:none;
}
.pagination li{
padding:10px 10px;
height: 30px;
}
}