commit e334b4e47ce7336fcc1e97c2aae07fc57c550d63 parent 29604e6cde3eebf96d9d42f43305a26cfa9efdd3 Author: Yohanes Bandung Bondowoso <hi@ybbond.dev> Date: Sun, 14 Jun 2020 00:25:40 +0700 refactor: use ventura as main font, use rem, add 404 for netlify Diffstat:
| M | assets/content.scss | | | 22 | ++++++++++++++++++++-- |
| M | assets/fonts.scss | | | 21 | --------------------- |
| M | assets/styles.scss | | | 71 | ++++++++++++++++++++++++++++++++++++++++++++++++----------------------- |
| M | assets/variables.scss | | | 2 | +- |
| M | config.toml | | | 38 | +++++++++++++++++++------------------- |
| M | content/_index.md | | | 2 | +- |
| M | content/uses.md | | | 15 | +++++++++++---- |
| A | layouts/404.html | | | 29 | +++++++++++++++++++++++++++++ |
| M | layouts/_default/_markup/render-image.html | | | 8 | ++++---- |
| M | layouts/_default/single.html | | | 38 | ++++++++++++++++++++------------------ |
| M | layouts/partials/components/content.html | | | 2 | +- |
| M | layouts/partials/post/notes-item.html | | | 8 | +------- |
| M | layouts/partials/post/webmentions-handler.html | | | 166 | ++++++++++++++++++++++++++++++++++++++++--------------------------------------- |
| A | static/_redirects | | | 2 | ++ |
| D | static/fonts/iAWriterQuattroS-Bold.woff | | | 0 | |
| D | static/fonts/iAWriterQuattroS-Regular.woff | | | 0 |
16 files changed, 241 insertions(+), 183 deletions(-)
diff --git a/assets/content.scss b/assets/content.scss @@ -31,6 +31,10 @@ } } + p:not([class]) { + margin: 1.2rem 0; + } + table { display: block; overflow-x: auto; @@ -139,6 +143,16 @@ &__title { margin: 0; + a { + font-family: $font-mono; + } + } + + &__content { + margin-top: 0 !important; + & > p { + margin-top: 0 !important; + } } @media (max-width: 599px) { @@ -167,4 +181,9 @@ .content__hr { margin: 4em 0 0; -}- \ No newline at end of file +} + +.image-figure { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} diff --git a/assets/fonts.scss b/assets/fonts.scss @@ -1,25 +1,4 @@ @font-face { - font-family: 'iA Writer Quattro S'; - src: url('/fonts/iAWriterQuattroS-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: swap; - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, - U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, - U+FEFF, U+FFFD; -} -@font-face { - font-family: 'iA Writer Quattro S'; - src: url('/fonts/iAWriterQuattroS-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; - font-display: swap; - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, - U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, - U+FEFF, U+FFFD; -} - -@font-face { font-family: 'iA Writer Duospace'; src: url('/fonts/iAWriterDuospace-Regular.woff') format('woff'); font-weight: normal; diff --git a/assets/styles.scss b/assets/styles.scss @@ -8,8 +8,10 @@ html { color: themed('color-text'); } font-family: $font-text; - letter-spacing: -0.02rem; - line-height: 1.5; + letter-spacing: 0.025rem; + font-weight: 300; + line-height: 1.6; + text-rendering: optimizeLegibility; font-size: 16px; } @@ -23,6 +25,10 @@ html { } } +strong { + font-weight: 600; +} + body { @include themify($themes) { background-color: themed('color-background'); @@ -94,7 +100,7 @@ a { &#active { cursor: default; } - &:hover:not(.wm-avatar), &#active { + &:hover:not(.wm-avatar):not(.no-hover), &#active { @include themify($themes) { background-color: themed('color-background-hover'); color: themed('color-red'); @@ -235,6 +241,7 @@ time { &__more { padding: 1em 0 0; margin-bottom: 0; + margin-right: 0.3em; text-align: right; } } @@ -254,6 +261,7 @@ time { display: flex; &__left { text-align: left; + margin-left: 0.3rem; } &__center { flex: 1; @@ -261,6 +269,7 @@ time { } &__right { text-align: right; + margin-right: 0.3rem; } } @@ -271,7 +280,7 @@ time { .footer { &__separator { - margin: 0.5rem auto 1.4em; + margin: 0.5rem auto 1.4rem; } &__nav { @@ -324,18 +333,18 @@ time { } .hcard { - max-width: 25em; - font-size: 0.8em; - margin: 2em auto 0.5em; - padding: 1.5em; + max-width: 19rem; + font-size: 0.8rem; + margin: 2rem auto 0.5rem; + padding: 1rem 1rem 0.8rem; position: relative; @include themify($themes) { - border: solid 2px themed('color-border'); + border: solid 1px themed('color-border'); } &__description { - top: -0.9em; - left: 1em; - padding: 0 0.5em; + top: -0.7rem; + left: 0.8rem; + padding: 0 0.4rem; position: absolute; @include themify($themes) { background-color: themed('color-background'); @@ -348,26 +357,26 @@ time { position: relative; img { position: absolute; - width: 5em; - height: 5em; + width: 3.8rem; + height: 3.8rem; } & > a { - margin-left: 6.5em; + margin-left: 5rem; } & > .p-locality { - margin-left: 6.5em; + margin-left: 5rem; } } } .web-ring { - font-size: 0.8em; - margin: 0 0 1.8em; + font-size: 0.8rem; + margin: 0 0 1.5rem; } &__license { - margin: 0.7em 0 1em; - font-size: 0.7em; + margin: 0.7rem 0 1rem; + font-size: 0.7rem; } } @@ -389,15 +398,31 @@ time { } } +.bottom-hcard-container { + margin: 4rem 0 1rem; +} +.hcard-top { + margin: 0 0 0.8rem; +} +.hcard-tags { + margin: 0.8rem 0 0.7rem; +} +.hcard-bottom { + margin: 0; +} + .wm-hr { - margin-top: 3rem; margin-bottom: 0.2rem; } +.wm-div { + margin-bottom: 3rem; +} + .wm-title { - margin: 0 0 1rem; + margin: 0 0 0.7rem; } .wm-subtitle { - margin: 1rem 0 0.3rem; + margin: 0.7rem 0 0.3rem; font-size: 0.8rem; } diff --git a/assets/variables.scss b/assets/variables.scss @@ -41,4 +41,4 @@ $themes: ( ); $font-mono: 'iA Writer Duospace', monospace; -$font-text: 'iA Writer Quattro S', -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica, helvetica neue, ubuntu, roboto, noto, segoe ui, arial, sans-serif; +$font-text: -apple-system, avenir next, avenir, helvetica, helvetica neue, ubuntu, roboto, noto, segoe ui, arial, sans-serif; diff --git a/config.toml b/config.toml @@ -17,27 +17,27 @@ copyright = "CC-BY 4.0" instagram = "ybbond" [markup.goldmark.renderer] - hardWraps = true - unsafe = true - xhtml = true + hardWraps = true + unsafe = true + xhtml = true [[menu.main]] - identifier = "home" - name = "Home" - url = "/" - weight = 8 + identifier = "home" + name = "Home" + url = "/" + weight = 8 [[menu.main]] - identifier = "about" - name = "About" - url = "/about" - weight = 9 + identifier = "about" + name = "About" + url = "/about" + weight = 9 [[menu.main]] - identifier = "contact" - name = "Contact" - url = "/contact" - weight = 10 + identifier = "contact" + name = "Contact" + url = "/contact" + weight = 10 [[menu.main]] - identifier = "uses" - name = "Uses" - url = "/uses" - weight = 11 + identifier = "uses" + name = "Uses" + url = "/uses" + weight = 11 diff --git a/content/_index.md b/content/_index.md @@ -2,7 +2,7 @@ menu: home --- Hi! I'm **Bandung**, welcome to my site! -This site contains my blog [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. +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"). Web analytics that I use respects your privacy, see [the stats](https://stats.ybbond.dev/ "Link to stats.ybbond.dev"). \ No newline at end of file diff --git a/content/uses.md b/content/uses.md @@ -36,11 +36,18 @@ Some others satisfy my hobbies. - **nnn**, n³ The missing terminal file manager for X. - **lazygit** [my post][lazygit] -### Daily +### Services -- ~~Canary mail~~ Apple's **Mail.app** with - » **iPGMail** (iOS) - » **GPG Mail** extension (Mac) +- **Fastmail** + <small>I try to use less Google, but I cannot find replacement for YouTube and Translate :(</small> +- **BitWarden** + +### Daily Applications + +I use these app on both macOS and iOS (or iPadOS). + +- **Canary mail** + <small>lightweight email client with configurable keyboard shortcuts, and PGP encryption</small> - **2Do App** - **Reeder 4** <small>beautiful and gesture-based RSS Reader.</small> diff --git a/layouts/404.html b/layouts/404.html @@ -0,0 +1,28 @@ +{{ define "main"}} + <main id="main"> + <div> + <h1 id="title">404 Not Found :(</h1> + <div class="content"> + <blockquote> + <p>The <strong>HTTP 404</strong>, <strong>404 Not Found</strong>, <strong>404</strong>, <strong>Page Not Found</strong>, or <strong>Server Not Found</strong> <a rel="noopenner noreferrer" target="_blank" href="https://en.wikipedia.org/wiki/Error_message">error message</a> is a <a rel="noopenner noreferrer" target="_blank" href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol">Hypertext Transfer Protocol</a> (HTTP) <a rel="noopenner noreferrer" target="_blank" href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">standard response code</a>, in computer network communications, to indicate that the <a rel="noopenner noreferrer" target="_blank" href="https://en.wikipedia.org/wiki/Web_browser">browser</a> was able to communicate with a given <a rel="noopenner noreferrer" target="_blank" href="https://en.wikipedia.org/wiki/Server_(computing)">server</a>, but the server could not find what was requested. The error may also be used when a server does not wish to disclose whether it has the requested information.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p> + <p><em>From Wikipedia - <a rel="noreferrer noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTTP_404">HTTP 404</a></em></p> + </blockquote> + + <p>The current URL you are visiting is invalid.</p> + <p>You might want to go to the Home Page.</p> + + <div class="footnotes" role="doc-endnotes"> + <hr> + <h4 class="footnotes__text">Footnotes:</h4> + <ol> + <li id="fn:1" role="doc-endnote"> + <p> + <span></span> + <a href="http://tools.ietf.org/html/rfc7231#section-6.5.4" target="_blank" rel="noreferrer noopener">"RFC 7231, HTTP/1.1 Semantics and Content, Section 6.5.4 404 Not Found"</a>. ietf.org. June 2014. Retrieved 13 December 2018.<a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> + </li> + </ol> + </div> + </div> + </div> + </main> +{{ end }}+ \ No newline at end of file diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html @@ -27,7 +27,7 @@ {{ $src_set = (print $src_set ", " $large.RelPermalink " 1500w") }} {{ end }} -{{ $border_class := "image-border" }} +{{ $figure_class := "image-figure" }} <noscript> @@ -36,7 +36,7 @@ display: none; } </style> - <figure class="{{ $border_class }}"> + <figure class="{{ $figure_class }}"> <center> <a class="no-outline" href='{{ $image.RelPermalink }}'> <img @@ -51,9 +51,9 @@ </figure> </noscript> -<figure class="{{ $border_class }} lazy"> +<figure class="{{ $figure_class }} lazy"> <center> - <a class="no-outline" href='{{ $image.RelPermalink }}'> + <a class="no-outline no-hover" href='{{ $image.RelPermalink }}'> <img class="lazyload" data-sizes="auto" src="{{ $src.RelPermalink }}" style="max-width: 100%; height: auto;" srcset="data:image/jpeg;base64,{{ $placeholder.Content | base64Encode }}" data-src="{{ $src.RelPermalink }}" diff --git a/layouts/_default/single.html b/layouts/_default/single.html @@ -21,30 +21,32 @@ <div class="e-content"> {{ partial "components/content.html" .Content }} </div> + + <div class="bottom-hcard-container" {{ if eq .Type "page" }} hidden=""{{ end }}> + <p class="hcard-top hcard"> + <a class="u-url link-white" href={{ .Permalink }}>Published</a> on + <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00"> + {{ .Date.Format "02 January 2006" }}</time>, + for stories like this: + </p> + {{ with .Params.tags }} + <p class="hcard-tags"> + {{ range . }} + {{- partial "components/tagitem.html" . -}} + {{ end }} + </p> + {{ end }} + {{ if ne .Type "page" -}} + <p class="hcard-bottom">If you have any feedback, please contact me at <a title="Open default mail client and add my email as recipient" href="mailto:hi@ybbond.dev">hi@ybbond.dev</a></p> + {{ end -}} + </div> + {{- if ne .Type "page" }} - <hr class="wm-hr"> {{ partial "post/webmentions-handler.html" . }} {{- else }} <br> <br> {{- end }} - - - <p {{ if eq .Type "page" }}class="hcard" hidden=""{{ end }}> - <a class="u-url link-white" href={{ .Permalink }}>Published</a> on - <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00"> - {{ .Date.Format "02 January 2006" }}</time>, - for stories like this:</p> - {{ with .Params.tags }} - <p> - {{ range . }} - {{- partial "components/tagitem.html" . -}} - {{ end }} - </p> - {{ end }} - {{ if ne .Type "page" -}} - <p>If you have any feedback, please contact me at <a href="mailto:hi@ybbond.dev">hi@ybbond.dev</a></p> - {{ end -}} </article> {{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/components/content.html b/layouts/partials/components/content.html @@ -1,4 +1,4 @@ {{ $list_span := . | replaceRE "<li( id=\"fn:[\\d]+\" role=\"doc-endnote\")?>(\\n<p>)?" "<li${1}>${2}<span></span>" }} -{{ $footnote := $list_span | replaceRE "(<div class=\"footnotes\" role=\"doc-endnotes\">\\n<hr />)" "${1}<p class=\"footnotes__text\">Footnotes:</p>" }} +{{ $footnote := $list_span | replaceRE "(<div class=\"footnotes\" role=\"doc-endnotes\">\\n<hr />)" "${1}<h4 class=\"footnotes__text\">Footnotes:</h4>" }} {{ $checkbox_non_disabled := $footnote | 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 @@ -29,14 +29,8 @@ <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> - {{ with .Title}} - <span class="notes__title__separator"> - </span> - {{ end }} - {{ with .Title}} - <span class="notes__title__title">{{ . }} <a class="u-url" href="#{{ $idslug }}">#</a></span> - {{ end }} </p> - <div class="e-content p-name"> + <div class="notes__content e-content p-name"> {{ .Content }} </div> </div> \ No newline at end of file diff --git a/layouts/partials/post/webmentions-handler.html b/layouts/partials/post/webmentions-handler.html @@ -1,91 +1,93 @@ {{ with index $.Site.Data.webmentions (replace (trim .RelPermalink "/") "/" "--") }} - {{- with where . "wm-property" "in" (slice "like-of" "repost-of" "bookmark-of" "rsvp" "in-reply-to" "mention-of") }} - <p class="wm-title"> - Webmentions <a - href="https://indieweb.org/Webmention" - >?</a>: - </p> - {{- end }} + <hr class="wm-hr"> + <div class="wm-div"> + {{- with where . "wm-property" "in" (slice "like-of" "repost-of" "bookmark-of" "rsvp" "in-reply-to" "mention-of") }} + <h4 class="wm-title"> + Webmentions <a + href="https://indieweb.org/Webmention" + rel="noopenner noreferrer" + target="_blank" + class="no-outline" + >?</a>: + </h4> + {{- end }} - {{ with where . "wm-property" "in" (slice "repost-of" "bookmark-of" "rsvp") -}} - <p class="wm-subtitle">Reposted/Boosted by:</p> - {{- range . }} - {{ $like := . }} - <a - href="{{ $like.author.url }}" - title="Photo of {{ $like.author.name }}" - class="wm-avatar" - > - <img - src="{{ $like.author.photo }}" - alt="Photo of {{ $like.author.name }}" + {{ with where . "wm-property" "in" (slice "repost-of" "bookmark-of" "rsvp") -}} + <p class="wm-subtitle">Reposted/Boosted by:</p> + {{- range . }} + {{ $like := . }} + <a + href="{{ $like.author.url }}" + title="Photo of {{ $like.author.name }}" class="wm-avatar" - /> - </a> - {{- end }} - {{ end -}} + > + <img + src="{{ $like.author.photo }}" + alt="Photo of {{ $like.author.name }}" + class="wm-avatar" + /> + </a> + {{- end }} + {{ end -}} - {{ with where . "wm-property" "in" (slice "like-of") -}} - <p class="wm-subtitle">Liked by:</p> - {{- range . }} - {{ $like := . }} - <a - href="{{ $like.author.url }}" - title="Photo of {{ $like.author.name }}" - class="wm-avatar" - > - <img - src="{{ $like.author.photo }}" - alt="Photo of {{ $like.author.name }}" + {{ with where . "wm-property" "in" (slice "like-of") -}} + <p class="wm-subtitle">Liked by:</p> + {{- range . }} + {{ $like := . }} + <a + href="{{ $like.author.url }}" + title="Photo of {{ $like.author.name }}" class="wm-avatar" - /> - </a> - {{- end }} - {{ end -}} + > + <img + src="{{ $like.author.photo }}" + alt="Photo of {{ $like.author.name }}" + class="wm-avatar" + /> + </a> + {{- end }} + {{ end -}} - {{ with where . "wm-property" "in" (slice "in-reply-to" "mention-of") }} - <div> - <p class="wm-subtitle">Replies:</p> - {{ range . }} - {{ $reply := . }} - <div class="wm-reply"> - <div class="wm-reply-head"> - <a - href="{{ $reply.author.url }}" - title="Photo of {{ $reply.author.name }}" - class="wm-avatar" - > - <img - src="{{ $reply.author.photo }}" - alt="Photo of {{ $reply.author.name }}" + {{ with where . "wm-property" "in" (slice "in-reply-to" "mention-of") }} + <div> + <p class="wm-subtitle">Replies:</p> + {{ range . }} + {{ $reply := . }} + <div class="wm-reply"> + <div class="wm-reply-head"> + <a + href="{{ $reply.author.url }}" + title="Photo of {{ $reply.author.name }}" class="wm-avatar" - /> - </a> - <a - href="{{ $reply.author.url }}" - title="Profile of {{ $reply.author.name }}" - class="wm-author no-outline" - > - <span class="">{{ $reply.author.name }}</span> - </a> - on - <a href="{{ $reply.url }}" class="no-outline"> - {{ substr (index $reply "wm-received") 0 10 }} - </a> + > + <img + src="{{ $reply.author.photo }}" + alt="Photo of {{ $reply.author.name }}" + class="wm-avatar" + /> + </a> + <a + href="{{ $reply.author.url }}" + title="Profile of {{ $reply.author.name }}" + class="wm-author no-outline" + > + <span class="">{{ $reply.author.name }}</span> + </a> + on + <a href="{{ $reply.url }}" class="no-outline"> + {{ substr (index $reply "wm-received") 0 10 }} + </a> + </div> + <div class="wm-reply-content"> + {{ if $reply.content.html }} + {{ safeHTML $reply.content.html }} + {{ else }} + {{ $reply.content.text }} + {{ end }} + </div> </div> - <div class="wm-reply-content"> - {{ if $reply.content.html }} - {{ safeHTML $reply.content.html }} - {{ else }} - {{ $reply.content.text }} - {{ end }} - </div> - </div> - {{ end }} - </div> - {{ end }} - - {{- with where . "wm-property" "in" (slice "like-of" "repost-of" "bookmark-of" "rsvp" "in-reply-to" "mention-of") -}} - <hr class="wm-hr"> - {{- end -}} + {{ end }} + </div> + {{ end }} + </div> {{ end }} \ No newline at end of file diff --git a/static/_redirects b/static/_redirects @@ -0,0 +1 @@ +/* /404.html 404+ \ No newline at end of file diff --git a/static/fonts/iAWriterQuattroS-Bold.woff b/static/fonts/iAWriterQuattroS-Bold.woff Binary files differ. diff --git a/static/fonts/iAWriterQuattroS-Regular.woff b/static/fonts/iAWriterQuattroS-Regular.woff Binary files differ.