commit 28dd54a0ee22053191b4f537bfeb26b183280da5 parent 534d781a1cf8b9df49d4711353ec5092246f52ca Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Tue, 28 Apr 2020 14:54:56 +0700 feature: adjustments for the new web Diffstat:
23 files changed, 228 insertions(+), 88 deletions(-)
diff --git a/assets/colors.scss b/assets/colors.scss @@ -1,5 +0,0 @@ -$color-text: #E3E0D7; -$color-background: #242424; -$color-red: #F9690E; -$color-blue: #8DBFFF; -$color-green: #79D688;- \ No newline at end of file diff --git a/assets/content.scss b/assets/content.scss @@ -1,4 +1,8 @@ +@import "fonts"; +@import "variables"; + .content { + font-family: $font-text; width: 100%; pre { overflow: auto; @@ -6,7 +10,7 @@ } code { padding: 0.1em; - font-family: 'iA Writer Duospace', monospace; + font-family: $font-mono; font-size: 0.9em; } table { @@ -22,13 +26,30 @@ th { padding: 1em 2em; background-color: #333; - color: white; + color: $color-text; } tr:nth-child(even) { - background-color: #F1F1F1; + background-color: #333; } tr:hover { - background-color: #ddd; + background-color: #303030; + } + } + ul { + padding: 0; + li { + position: relative; + list-style: none; + padding-left: 20px; + margin-bottom: 10px; + &:before { + display: inline-block; + content: "- "; + position: absolute; + width: 20px; + color: $color-red; + left: 0; + } } } } \ No newline at end of file diff --git a/assets/styles.scss b/assets/styles.scss @@ -1,30 +1,48 @@ -@import "colors"; +@import "variables"; @import "fonts"; @import "content"; html { background-color: $color-background; color: $color-text; - font-family: 'iA Writer Quattro S', Arial, Helvetica, sans-serif; - font-size: 1.1rem; + font-family: $font-text; line-height: 1.6; } body { - max-width: 700px; + max-width: 600px; margin: 0 auto; } h1, h2, h3, h4, h5, h6 { color: $color-green; - font-family: 'iA Writer Duospace', monospace; + font-family: $font-mono; } a { + text-decoration: none; color: $color-blue; &:hover { color: $color-red; } + .link-white { + color: $color-text; + } + &.full-width { + width: 100%; + } + &.button { + display: inline-block; + position: relative; + z-index: 1; + padding: 0.3em 0.7em; + &:hover { + background-color: #303030; + } + &:first-child:not(.header__menu__list__item) { + margin-left: -0.5em; + } + } } blockquote { @@ -39,68 +57,77 @@ blockquote { time { color: $color-red; -} - -ul { - padding: 0; - li { - position: relative; - list-style: none; - padding-left: 20px; - margin-bottom: 10px; - &:before { - display: inline-block; - content: "- "; - position: absolute; - width: 20px; - color: $color-red; - left: 0; - } - } + font-family: $font-mono; } .header { margin-top: 1em; &__menu { - margin: 0; - padding: 0 0 10px; + margin: 0 0 10px; display: flex; overflow: auto; justify-content: flex-start; &__list { - & > *:first-child { - padding: 0 1.4em 0 0; - &:before { - content: ""; - } - } - & > *:not(:first-child) { - padding-left: 0; - &:before { - padding-right: 1em; - content: " :: "; - position: relative; - color: $color-text; - } - } padding: 0; + margin: 0; display: flex; flex-grow: 1; flex-wrap: nowrap; - li { - padding: 0 1em; - display: inline; + &__item { + &:first-child { + margin-left: 0; + } + margin: 0 10px; + border-style: solid; + border-width: 1px; } } } } +.main { + &__more { + padding: 1em 0; + text-align: right; + } +} + +.summary { + &:not(&:first-child) + &__links { + padding-left: 2em; + } +} + +.pagination { + border-top: dashed 2px; + border-bottom: dashed 2px; + margin: 3em auto 2em auto; + padding: 1em 0; + display: flex; + justify-content: space-around; + &__item { + padding: 0 30px; + @media (max-width: 600px) { + padding: 0 10px; + } + &__left { + flex: 1; + text-align: left; + } + &__right { + flex: 1; + text-align: right; + } + } +} + .taglist { margin: 0; padding: 0; - li { - display: inline; - } +} +.tagitem { + font-family: $font-mono; } .footer { diff --git a/assets/variables.scss b/assets/variables.scss @@ -0,0 +1,8 @@ +$color-text: #E3E0D7; +$color-background: #242424; +$color-red: #F9690E; +$color-blue: #8DBFFF; +$color-green: #79D688; + +$font-mono: 'iA Writer Duospace', monospace; +$font-text: 'iA Writer Quattro S', Arial, Helvetica, sans-serif; diff --git a/config.dev.toml b/config.dev.toml @@ -2,6 +2,9 @@ baseURL = "https://ybbond.dev" languageCode = "en-us" title = "YBBond" +[permalinks] + posts = "/:year/:month/:title/" + [params] author = "Yohanes Bandung Bondowoso" description = "Thoughts, ideas and writings of me, Yohanes Bandung. My other site: https://ybbond.dev/" diff --git a/config.toml b/config.toml @@ -2,6 +2,9 @@ baseURL = "https://ybbond.dev" languageCode = "en-us" title = "YBBond" +[permalinks] + posts = "/:year/:month/:title/" + [params] author = "Yohanes Bandung Bondowoso" description = "Thoughts, ideas and writings of me, Yohanes Bandung. My other site: https://ybbond.dev/" @@ -18,12 +21,12 @@ title = "YBBond" [[menu.main]] identifier = "home" name = "Home" - url = "/" + url = "https://ybbond.dev" weight = 8 [[menu.main]] identifier = "cv" name = "CV" - url = "/cv" + url = "https://ybbond.dev/cv" weight = 9 [[menu.main]] identifier = "author" diff --git a/content/_index.md b/content/_index.md @@ -2,7 +2,6 @@ menu: home --- Currently work as Frontend Engineer of kumparan.com in Jakarta, Indonesia. Building it with React, React Native for Android and iOS. -<br /> Eager to learn. @@ -14,3 +13,4 @@ I try to learn from everyone, and everything. <br /> ૮ ・ﻌ・ა +<br /> diff --git a/content/posts/2020-04-05-nuphy-nutype-f1-keyboard-review.md b/content/posts/2020-04-05-nuphy-nutype-f1-keyboard-review.md @@ -2,7 +2,7 @@ title: NuPhy NuType F1 Keyboard Review author: Yohanes Bandung Bondowoso tags: - - review #review + - Review #review date: 2020-04-05T18:23:12 --- diff --git a/content/posts/April Links.md b/content/posts/April Links.md @@ -4,6 +4,7 @@ author: Yohanes Bandung Bondowoso tags: - Bookmarks #bookmarks date: 2020-05-01T00:00:01 +type: links draft: true --- diff --git a/content/posts/February Links.md b/content/posts/February Links.md @@ -4,6 +4,7 @@ author: Yohanes Bandung Bondowoso tags: - Bookmarks #bookmarks date: 2020-03-01T00:00:01 +type: links --- ## Tech diff --git a/content/posts/March Links.md b/content/posts/March Links.md @@ -4,6 +4,7 @@ author: Yohanes Bandung Bondowoso tags: - Bookmarks #bookmarks date: 2020-04-01T00:00:01 +type: links --- ## Tech diff --git a/layouts/_default/list.html b/layouts/_default/list.html @@ -1,11 +1,19 @@ {{ define "main" }} {{ if or .Title .Content }} <div> - {{ with .Title }}<h1>{{ . }}</h1>{{ end }} + {{ with .Title }}<h2>{{ . }}</h2>{{ end }} {{ with .Content }}<div>{{ . }}</div>{{ end }} </div> {{ end }} - {{ range .Paginator.Pages }} + {{ if eq .Type "notes" }} + {{ range (where .Site.RegularPages "Type" "notes") }} + <p>{{ .Content }}</p> + {{ end }} + {{ else }} + {{ range .Paginator.Pages }} + {{ partial "post/summary.html" . }} + {{ end }} + {{ partial "post/pagination.html" . }} {{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html @@ -6,16 +6,12 @@ {{ with .Params.tags }} <br> <br> - <p>Published on <time>{{ $date }}</time>, for story like this:</p> - <div> - <ul class="taglist"> - {{ range . }} - <li> - {{- partial "components/tagitem.html" . -}} - </li> - {{ end }} - </ul> - </div> + <p>Published on <time>{{ $date }}</time>, for stories like this:</p> + <p class="taglist"> + {{ range . }} + {{- partial "components/tagitem.html" . -}} + {{ end }} + </p> {{ end }} </article> {{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html @@ -8,12 +8,14 @@ <h2>Blog</h2> {{ range first 5 (where .Site.RegularPages "Type" "posts") }} <p> - <time>{{ .Date.Format "02 Jan 2006" }}</time> - - <span>{{ .Title }} <a href={{ .Permalink }}>>></a></span> + <a href={{ .Permalink }} class="button full-width"> + <time>{{ .Date.Format "02 Jan 2006" }}</time> - + <span class="link-white">{{ .Title }}</span> » + </a> </p> {{ end }} {{ $postURL := "/posts" | absURL }} - <p>More Blogs <a href={{ $postURL }}>>></a></p> + <p class="main__more"><a href={{ $postURL }} class="button">More Blogs ⤳</a></p> <hr> @@ -22,7 +24,7 @@ <p>{{ .Content }}</p> {{ end }} {{ $notesURL := "/notes" | absURL }} - <p>More Notes <a href={{ $notesURL }}>>></a></p> + <p class="main__more"><a href={{ $notesURL }} class="button">More Notes ⤳</a></p> </article> diff --git a/layouts/partials/components/tagitem.html b/layouts/partials/components/tagitem.html @@ -1 +1 @@ -<a class="tagitem" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">#{{ . }}</a>- \ No newline at end of file +<a class="tagitem button" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">#{{ . }}</a>+ \ No newline at end of file diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html @@ -1,12 +1,16 @@ {{ $url := "/index.xml" | absURL }} <div class="footer__nav"> <p class="footer__nav__left"> - <a href={{ .Site.BaseURL }}> << Back to Home</a> + {{ if not .IsHome }} + <a class="button" href={{ .Site.BaseURL }}> + « Back to Home + </a> + {{ end }} </p> <p class="footer__nav__right"> - <a href="https://github.com/{{ .Site.Params.Github }}">GitHub</a> - <a href="https://twitter.com/{{ .Site.Params.Twitter }}">Twitter</a> - <a href={{ "index.xml" | absURL }}>RSS</a> + <a class="button" href="https://github.com/{{ .Site.Params.Github }}">GitHub</a> + <a class="button" href="https://twitter.com/{{ .Site.Params.Twitter }}">Twitter</a> + <a class="button" href={{ "index.xml" | absURL }}>RSS</a> </p> </div> <p class="footer__copyright"> diff --git a/layouts/partials/head/head.html b/layouts/partials/head/head.html @@ -24,5 +24,9 @@ {{ end }} </style> +<script type="application/javascript" src="../darkToggler.js"></script> + <link rel="canonical" href="{{ .Permalink }}" > <link rel="sitemap" href="{{ "sitemap.xml" | absURL }}" type="application/xml" /> + +{{ partial "head/og-metas.html" . }} diff --git a/layouts/partials/head/og-metas.html b/layouts/partials/head/og-metas.html @@ -0,0 +1,6 @@ +<meta property="og:title" content="{{ .Params.Ogp.Title | default .Title }}"> +<meta property="og:url" content="{{ .Permalink }}"> +<meta property="og:description" content="{{if .IsHome}}{{ .Site.Params.Description }}{{else}}{{.Params.Ogp.Description | default .Description}}{{end}}"> +<meta property="og:image" content="{{ .Params.Ogp.Image | default .Params.Image.Src | default "logo.png" | absURL}}"> +<meta property="og:type" content="article"> +<meta property="og:site_name" content="{{ .Params.Ogp.Site | default .Page.Params.FacebookSite }}">+ \ No newline at end of file diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html @@ -1,4 +1,4 @@ -<h1 class="header__title">Yohanes Bandung Bondowoso</h1> +<h1 class="header__title">Yohanes Bandung Bondowoso <span class="dark-toggler"></span></h1> <nav class="header__menu"> {{ partial "header/menu.html" . }} </nav> \ No newline at end of file diff --git a/layouts/partials/header/menu.html b/layouts/partials/header/menu.html @@ -1,8 +1,7 @@ -<ul class="header__menu__list"> +<div class="header__menu__list"> {{ $baseURL := .Site.BaseURL }} {{ range .Site.Menus.main }} {{ $url := trim .URL "/" | absURL }} - <li> <a href={{ $url }} {{ with .Page }} @@ -11,9 +10,10 @@ target="_blank" rel="nofollow noopener noreferrer" {{ end }} + role="button" + class="header__menu__list__item button" > {{ .Pre }}<span>{{ .Name }}</span> </a> - </li> {{ end }} -</ul>- \ No newline at end of file +</div>+ \ No newline at end of file diff --git a/layouts/partials/post/pagination.html b/layouts/partials/post/pagination.html @@ -0,0 +1,21 @@ +<nav class="pagination"> + {{ if gt .Paginator.TotalPages 1 }} + {{ if .Paginator.HasNext }} + <a class="button pagination__item__left" role="button" href="{{ trim .Paginator.Next.URL "/" | absLangURL }}" data-rel="prefetch"> + < Older + </a> + {{ else }} + <span class="pagination__item__left"></span> + {{ end }} + <span class="pagination__item">*</span> + {{ if .Paginator.HasPrev }} + <a class="button pagination__item__right" role="button" href="{{ trim .Paginator.Prev.URL "/" | absLangURL }}" data-rel="prefetch"> + Newer > + </a> + {{ else }} + <span class="pagination__item__right"></span> + {{ end }} + {{ else }} + <span>No More Post</span> + {{ end }} +</nav>+ \ No newline at end of file diff --git a/layouts/partials/post/summary.html b/layouts/partials/post/summary.html @@ -0,0 +1,33 @@ +<article class="summary"> + <a href="{{ .Permalink }}"><h2 class="summary__title">{{ .Title }}</h2></a> + <time>{{ .Date.Format "02 Jan 2006" }}</time> + <span> - </span> + {{ range .Params.tags }} + {{- partial "components/tagitem.html" . -}} + {{ end }} +<!-- {{ with .Params.Image.Src }} + <amp-img class="summary__image" + src="{{ . }}" + layout="responsive" + width="1280" + height="720" + object-fit="contain" + alt="{{ $.Title }}"></amp-img> + {{ end }} + --> + {{ $hell := .Type }} + {{ if .Params.Description }} + <p> {{ .Params.Description }} </p> + {{ else }} + <p> + {{ .Summary }} + {{ if .Truncated }} + <p> + <a href="{{ .Permalink }}"> + Read more ⤳ + </a> + </p> + {{ end }} + </p> + {{ end }} +</article> diff --git a/static/darkToggler.js b/static/darkToggler.js @@ -0,0 +1,4 @@ +(function() { + let toggler = document.getElementsByClassName("dark-toggler"); + toggler.innerHTML = "🌛"; +})()+ \ No newline at end of file