commit a57162cf2224ccb241c0c0505ef89a06b8bcc5e3 parent 775fc528bb1ebd870cf76585fbf5bf88cde8310c Author: Yohanes Bandung Bondowoso <hi@ybbond.id> Date: Thu, 20 May 2021 00:07:47 +0700 refactor: notes and responses styling, add micro page Diffstat:
| M | assets/content.css | | | 59 | ++++++++++++++++++++++++++++++++--------------------------- |
| M | assets/main.css | | | 7 | +++++++ |
| M | assets/theme.css | | | 14 | ++++++++------ |
| M | content/_index.md | | | 2 | -- |
| A | content/micro/_index.md | | | 6 | ++++++ |
| M | layouts/_default/list.html | | | 9 | +++++++++ |
| M | layouts/index.html | | | 19 | ++++++++++++------- |
| M | layouts/notes/rss.xml | | | 4 | ++-- |
| A | layouts/partials/components/preview.html | | | 7 | +++++++ |
| M | layouts/partials/post/notes-item.html | | | 17 | ++++++++--------- |
| M | layouts/partials/post/responses-item.html | | | 31 | ++++++++++++++++++------------- |
| M | layouts/responses/rss.xml | | | 4 | ++-- |
12 files changed, 111 insertions(+), 68 deletions(-)
diff --git a/assets/content.css b/assets/content.css @@ -23,6 +23,12 @@ left: -2.4em; } +.content.notes.h-entry, .content.responses.h-entry { + /*padding: 4px 10px 1px 10px;*/ + padding: .1px; + outline: solid 1px black; +} + .content figcaption { font-size: 0.8em; } @@ -118,36 +124,51 @@ margin: 4em 0 0; } -.notes { - margin-bottom: 2rem; +.notes, .responses { + margin-bottom: 3rem; } -.notes > div, .notes > p { +.notes > div, .notes > p, .responses > div, .responses > p { margin: 0; margin-top: 0.7rem; } -.notes > div > p, .notes > p > p { +.notes > div > p, .notes > p > p, .responses > div > p, .responses > p > p { margin: 0; margin-top: 0.7rem; } -.notes:target { +.notes:target, .responses:target { outline-style: solid; outline-width: 0.2em; outline-offset: 0.6em; } -.notes__title { +.content.notes, .content.responses { + position: relative; +} + +.notes__title, .responses__title { + position: absolute; + top: -1.8rem; + left: 1.5rem; margin: 0; + padding: .2rem .5rem; + outline-width: 1px; + outline-style: solid; } -.notes__title a { + +.notes__title a, .responses__title a { font-family: var(--font-mono); } -.notes__content { - margin-top: 0 !important; +.responses__original { + margin: 1.2rem 0 !important; } -.notes__content > p { - margin-top: 0 !important; + +.notes__content, .responses__content { + margin: 2rem 1rem 1px 1.5rem !important; } +/*.notes__content > p, .responses__content > p { + margin-top: 0 !important; +}*/ .twitter-link { margin-bottom: 0.2rem; @@ -159,22 +180,6 @@ font-size: 0.9rem; } -.responses { - margin-bottom: 3rem; -} -.responses:target { - outline-style: solid; - outline-width: 0.2rem; - outline-offset: 1.3rem; -} - .responses h1 { margin-bottom: 0; } - -.responses__subtitle { - margin: 0; -} -.responses__subtitle a { - font-family: var(--font-mono); -} diff --git a/assets/main.css b/assets/main.css @@ -95,6 +95,9 @@ time[title] { height: .9em; } +.listing__bottom { + margin-top: 3rem; +} .listing__post { width: 100%; display: inline-block; @@ -115,6 +118,10 @@ time[title] { text-align: right; } +.single__micro { + margin-top: 4rem; +} + .summary { margin: 1.5em 0; } diff --git a/assets/theme.css b/assets/theme.css @@ -48,11 +48,12 @@ } /* content */ - .notes:target { + .notes:target, .responses:target { outline-color: var(--light-background-hover); } - .responses:target { - outline-color: var(--light-background-hover); + .notes__title, .responses__title { + background-color: var(--light-background); + outline-color: var(--light-text); } .view-full-size svg { @@ -137,11 +138,12 @@ } /* content */ - .notes:target { + .notes:target, .responses:target { outline-color: var(--dark-background-hover); } - .responses:target { - outline-color: var(--dark-background-hover); + .notes__title, .responses__title { + background-color: var(--dark-background); + outline-color: var(--dark-text); } .view-full-size svg { diff --git a/content/_index.md b/content/_index.md @@ -3,5 +3,3 @@ menu: home --- Hi! I'm **Bandung**, welcome to my site! This site contains my [posts](/posts/ "Link to list of posts"), my often random [notes](/notes/ "Link to list of notes"), and the [archives](/archives/ "Link to list of archived posts") from my old blog. -See basic "snapshot" [report](/reports/ "Link to list of this site's basic reports") of this site's size. -Here is the RSS for [post](/index.xml "Link to the RSS feed for posts") and here is for [notes](/notes/index.xml "Link to the RSS feed for notes"). diff --git a/content/micro/_index.md b/content/micro/_index.md @@ -0,0 +1,5 @@ +--- +title: My Micros +--- + +Listed are my [notes](/notes) and [responses](/responses).+ \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html @@ -36,6 +36,15 @@ {{ range (where .Site.RegularPages "Type" "responses") }} {{ partial "post/responses-item.html" . }} {{ end }} + {{ else if eq .Type "micro" }} + {{ range (where .Site.RegularPages "Type" "in" (slice "notes" "responses")) }} + {{ .Scratch.Set "scope" "list" }} + {{ if eq .Type "responses" -}} + {{ partial "post/responses-item.html" . }} + {{ else -}} + {{ partial "post/notes-item.html" . }} + {{ end -}} + {{ end }} {{ else }} {{ range .Paginator.Pages }} {{ partial "post/summary.html" . }} diff --git a/layouts/index.html b/layouts/index.html @@ -1,6 +1,6 @@ {{ define "main" }} {{ $postURL := "/posts" | absURL }} - {{ $notesURL := "/notes" | absURL }} + {{ $notesURL := "/micro" | absURL }} <article> {{ .Content }} @@ -9,7 +9,7 @@ <hr> <h2>Blog Posts:</h2> - <div href={{ $postURL }} class="listing"> + <div href={{ $postURL }} class="listing__top"> {{ range first 5 (where .Site.RegularPages "Section" "posts") }} <a href={{ .Permalink }} @@ -32,13 +32,18 @@ <hr> - <h2>Notes:</h2> - <div class="listing"> - {{ range first 5 (where .Site.RegularPages "Type" "notes") }} - {{ partial "post/notes-item.html" . }} + <h2>My Micro:</h2> + <div class="listing__bottom"> + {{ range first 5 (where .Site.RegularPages "Type" "in" (slice "notes" "responses")) }} + {{ .Scratch.Set "scope" "list" }} + {{ if eq .Type "responses" -}} + {{ partial "post/responses-item.html" . }} + {{ else -}} + {{ partial "post/notes-item.html" . }} + {{ end -}} {{ end }} </div> - <p class="main__more"><a href={{ $notesURL }} class="button">More Notes ⤳</a></p> + <p class="main__more"><a href={{ $notesURL }} class="button">More Micros ⤳</a></p> {{ end }} diff --git a/layouts/notes/rss.xml b/layouts/notes/rss.xml @@ -32,10 +32,10 @@ {{ $idslug := (print "date-" $dateformat "-") | urlize }} <item> <title>{{ .Title }}</title> - <link>{{ .Site.BaseURL }}notes#{{ $idslug }}</link> + <link>{{ .Site.BaseURL }}notes/{{ $idslug }}</link> <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate> {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}} - <guid isPermaLink="true">{{ .Site.BaseURL }}notes#{{ $idslug }}</guid> + <guid isPermaLink="true">{{ .Site.BaseURL }}notes/{{ $idslug }}</guid> <description>{{ .Content | html }}</description> </item> {{ end }} diff --git a/layouts/partials/components/preview.html b/layouts/partials/components/preview.html @@ -0,0 +1,7 @@ +{{ $list_span := . | replaceRE "<li( id=\"fn:[\\d]+\" role=\"doc-endnote\")?>(\\n<p>)?" "<li${1}>${2}<span></span>" }} +{{ $fntag := $list_span | replaceRE "(<sup id=\"fnref:\\d{1,5}\")" "${1} style=\"display:none;\" " }} +{{ $footnote := $fntag | replaceRE "(<div class=\"footnotes\")" "${1} style=\"display:none;\" " }} +{{ $headerbefore := $footnote | replaceRE "(<a) (class=\"before-hash\")" "${1} style=\"display:none;\" ${2}" }} +{{ $headerafter := $footnote | replaceRE "(<a) (class=\"headline-hash\")" "${1} style=\"display:none;\" ${2}" }} +{{ $checkbox_non_disabled := $headerafter | replaceRE "disabled=\"\" type=\"checkbox" "type=\"checkbox" }} +{{ $checkbox_non_disabled | safeHTML }} diff --git a/layouts/partials/post/notes-item.html b/layouts/partials/post/notes-item.html @@ -20,15 +20,14 @@ <a class="p-category" href={{ "notes/" | absURL }}>notes</a> </div> <p class="notes__title"> - <span> - <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="notes__title__date dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00"> - {{ .Date.Format "02 Jan 2006" }} - </time> - {{ if .Title }} - {{ else }} - <a data-goatcounter-click="cl-note-hash" class="u-url" href="/notes/#{{ $idslug }}">#</a> <a data-goatcounter-click="cl-note-full" href={{ .Permalink }}>»</a> - {{ end }} - </span> + <a data-goatcounter-click="cl-note-full" href={{ .Permalink }}> + <span> + <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="notes__title__date dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00"> + {{ .Date.Format "02 Jan 2006" }} + </time> + » + </span> + </a> </p> <div class="notes__content e-content p-content p-name"> {{ .Content }} diff --git a/layouts/partials/post/responses-item.html b/layouts/partials/post/responses-item.html @@ -6,15 +6,15 @@ {{ end }} {{ $title := print "In response to " "«" .Params.Destination.Title "»" $author }} <div class="content responses h-entry" id={{ $idslug }}> - <a class="no-outline" data-goatcounter-click="cl-response-title" href={{ .Permalink }}><h1 class="p-name" class="listing__post__title" >{{ $title }}</h1></a> <div id="h-card" class="hcard" hidden=""> {{ $permalink := .Permalink }} - {{ $title := .Title }} {{ with .Params.Image.Src }} {{ $filename := . | safeURL }} {{ $original := printf "%s%s" $permalink $filename }} - <img class="u-photo" hidden="" src={{ $original }} alt="Illustration of {{ $title }}" /> + <img class="u-photo" hidden="" src={{ $original }} alt="Illustration of {{ .Title }}" /> {{ end }} + <a class="p-name" href={{ .Permalink }}>{{ $title }}</a> + <br> <a class="p-author h-card" href={{ .Site.Params.MainSiteURL }} rel="author">{{ substr .Site.Params.Author 0 20 }}.</a> <br> <a class="u-email" href="mailto:{{ .Site.Params.Email }}">{{ .Site.Params.Email }}</a> @@ -25,17 +25,22 @@ <br> <a class="p-category" href={{ "responses/" | absURL }}>responses</a> </div> - <p class="responses__subtitle"> - <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="responses__subtitle__date dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00"> - {{ .Date.Format "02 Jan 2006" }} - </time> - {{ if .Title }} - {{ else }} - <a data-goatcounter-click="cl-response-hash" class="u-url" href="/responses/#{{ $idslug }}">#</a> <a data-goatcounter-click="cl-response-full" href={{ .Permalink }}>»</a> - {{ end }} + <p class="responses__title"> + <a data-goatcounter-click="cl-response-full" href={{ .Permalink }}> + <span> + <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="responses__title__date dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00"> + {{ .Date.Format "02 Jan 2006" }} + </time> + » + </span> + </a> </p> - <p class="responses__original"><a class="u-in-reply-to" href={{ .Params.Destination.Url }}>»Link to responded post«</a></p> <div class="responses__content e-content p-content"> - {{ partial "components/content.html" .Content }} + <p class="responses__original"><a class="u-in-reply-to" href={{ .Params.Destination.Url }}>{{ $title }}</a></p> + {{ if eq ($.Scratch.Get "scope") "single" }} + {{ partial "components/content.html" .Content }} + {{ else }} + {{ partial "components/preview.html" .Content }} + {{ end }} </div> </div> diff --git a/layouts/responses/rss.xml b/layouts/responses/rss.xml @@ -32,10 +32,10 @@ {{ $idslug := (print "date-" $dateformat "-") | urlize }} <item> <title>{{ .Title }}</title> - <link>{{ .Site.BaseURL }}responses#{{ $idslug }}</link> + <link>{{ .Site.BaseURL }}responses/{{ $idslug }}</link> <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate> {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}} - <guid isPermaLink="true">{{ .Site.BaseURL }}responses#{{ $idslug }}</guid> + <guid isPermaLink="true">{{ .Site.BaseURL }}responses/{{ $idslug }}</guid> <description>{{ .Content | html }}</description> </item> {{ end }}