commit b8aa0474278144d63de3cea62a170082f306d213 parent 1ddf09c307587792c65d5af4f569f3dda6a1c1eb Author: Yohanes Bandung <hi@ybbond.dev> Date: Mon, 1 Jun 2020 21:46:41 +0700 refactor: step 2. rework header, text formatting, remove duplicate css Diffstat:
| M | .gitignore | | | 1 | - |
| M | assets/content.scss | | | 11 | ----------- |
| M | assets/styles.scss | | | 84 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------- |
| D | config.dev.toml | | | 44 | -------------------------------------------- |
| M | config.toml | | | 7 | ++++++- |
| M | content/_index.md | | | 18 | +++++------------- |
| M | content/about/index.md | | | 13 | ++++--------- |
| A | content/contact.md | | | 16 | ++++++++++++++++ |
| M | content/uses.md | | | 1 | - |
| M | layouts/_default/_markup/render-image.html | | | 4 | ++-- |
| M | layouts/partials/footer/footer.html | | | 6 | ------ |
| M | layouts/partials/header/header.html | | | 19 | +++++++++++-------- |
| M | layouts/partials/post/pagination.html | | | 2 | +- |
13 files changed, 113 insertions(+), 113 deletions(-)
diff --git a/.gitignore b/.gitignore @@ -1,4 +1,3 @@ .DS_Store -resources.nosync/ public/ resources/ diff --git a/assets/content.scss b/assets/content.scss @@ -31,17 +31,6 @@ } } - a { - &:hover { - outline-style: solid; - outline-width: 0.3em; - @include themify($themes) { - outline-color: themed('color-background-hover'); - background-color: themed('color-background-hover'); - } - } - } - table { display: block; overflow-x: auto; diff --git a/assets/styles.scss b/assets/styles.scss @@ -9,11 +9,14 @@ html { } font-family: $font-text; letter-spacing: -0.02rem; - line-height: 1.6; + line-height: 1.5; font-size: 16px; } @media (max-width: 599px) { + html { + font-size: 15px; + } body { padding: 0 1.5em; margin: 0; @@ -44,6 +47,14 @@ pre { } } +hr { + border: 0; + height: 0; + @include themify($themes) { + border-top: 1px solid themed('color-text'); + } +} + code { padding: 0.1rem; font-family: $font-mono; @@ -68,6 +79,10 @@ h1, h2, h3, h4, h5 { } } +h1:not(.header__title) { + font-size: 2.2rem; +} + a { text-decoration: none; @include themify($themes) { @@ -76,12 +91,15 @@ a { color: themed('color-text'); } } - &:hover { + &#active { + cursor: default; + } + &:hover, &#active { @include themify($themes) { background-color: themed('color-background-hover'); color: themed('color-red'); } - &:not(.no-outline) { + &:not(.no-outline):not(.footnote-ref) { outline-style: solid; outline-width: 0.3rem; @include themify($themes) { @@ -92,7 +110,10 @@ a { } &.button { display: inline-block; - padding: 0.3em 0.7em; + padding: 0.3rem 0.7rem; + @media(max-width: 360px) { + padding: 0.3rem; + } } } @@ -105,7 +126,7 @@ blockquote { border-color: themed('color-red'); } p { - font-size: 0.9em; + font-size: 0.9rem; } } @@ -123,7 +144,7 @@ time { &__post { width: 100%; display: inline-block; - padding: 0.7rem 0; + padding: 0.5rem 0 0.7rem; @media (max-width: 599px) { padding: 0.3em 0 1.3em 0; } @@ -146,13 +167,19 @@ time { } @media (max-width: 599px) { &__title { - font-size: 1.2rem; + font-size: 1.4rem; + margin: 1rem 0; } } + @media (max-width: 360px) { + &__title { + font-size: 1.2em; + } + } + &__menu { margin: 0 0 10px; display: flex; - overflow: auto; justify-content: flex-start; &__list { padding: 0; @@ -167,15 +194,23 @@ time { &:first-child { margin-left: 0; } - margin: 0 5px; + margin: 0 0.4rem; border-style: solid; border-width: 1px; + @media (max-width: 599px) { + margin: 0 0.1rem; + font-size: 0.9rem; + } + @media (max-width: 360px) { + font-size: 0.8rem; + } } + &__toggler { &__off { display: none; } - font-size: 1.75em; + font-size: 1.5rem; padding: 0 0.3em; background-color: transparent; background-repeat: no-repeat; @@ -222,6 +257,7 @@ time { } &__center { flex: 1; + text-align: center; } &__right { text-align: right; @@ -248,16 +284,16 @@ time { } &__left { text-align: left; - @media (min-width: 600px) { - &__back { - margin-left: -0.7em; - } - } } &__right { text-align: right; + a { + padding: 0 0.2rem; + margin: 0 0.2rem; + } } @media (max-width: 599px) { + font-size: 0.9rem; display: flex; flex-direction: column; &__left { @@ -269,7 +305,15 @@ time { text-align: center; margin-top: 0; a { - padding-bottom: 0.5em; + line-height: 2rem; + } + } + } + @media (max-width: 400px) { + &__right { + a { + padding: 0 0.15rem; + margin: 0 0.15rem; } } } @@ -335,3 +379,11 @@ time { margin: 0; } } +.footnote-ref { + &:before { + content: '['; + } + &:after { + content: ']'; + } +} diff --git a/config.dev.toml b/config.dev.toml @@ -1,44 +0,0 @@ -baseURL = "https://ybbond.dev/" -languageCode = "en-us" -title = "YBBond" - -[permalinks] - posts = "/posts/:year-:month-:slug/" - -[params] - author = "Yohanes Bandung Bondowoso" - description = "Thoughts, Ideas and Writings." - mainSiteURL = "https://ybbond.dev" - email = "hi@ybbond.dev" - twitter = "ybbond_" - github = "ybbond" - microblog = "ybbond" - -[markup.goldmark.renderer] - hardWraps = true - unsafe = true - xhtml = true - -[[menu.main]] - identifier = "home" - name = "Home" - url = "/" - weight = 8 -[[menu.main]] - identifier = "about" - name = "About" - url = "/about" - weight = 9 -[[menu.main]] - identifier = "uses" - name = "Uses" - url = "/uses" - weight = 10 - -[caches.images] - dir = "/Users/yohanesbandung/projects/bandung/ybbond-hugo/resources.nosync/_gen" - maxAge = -1 - -[caches.assets] - dir = "/Users/yohanesbandung/projects/bandung/ybbond-hugo/resources.nosync/_gen" - maxAge = -1 diff --git a/config.toml b/config.toml @@ -30,7 +30,12 @@ title = "YBBond" url = "/about" weight = 9 [[menu.main]] + identifier = "contact" + name = "Contact" + url = "/contact" + weight = 10 +[[menu.main]] identifier = "uses" name = "Uses" url = "/uses" - weight = 10 + weight = 11 diff --git a/content/_index.md b/content/_index.md @@ -1,15 +1,7 @@ --- menu: home --- -Currently work as Frontend Engineer of kumparan.com in Jakarta, Indonesia. Building it with React, React Native for Android and iOS. - -Eager to learn. - -Hardships. - -I cannot say that I am humble, but I learn from experience that each individuals, their own excellences. - -I try to learn from everyone, and everything. -<br /> - -૮ ・ﻌ・ა- \ No newline at end of file +Hi! I'm **Bandung**, welcome to my site! +This site contains my blog [posts](/posts/), my often random [notes](/notes/), "snapshot" [report](/reports/) of this site's size. +Here is the RSS for [post](/index.xml) and here is for [notes](/notes/index.xml). +Web analytics that I use respects your privacy, see it [here](https://stats.ybbond.dev/ "Link to stats.ybbond.dev").+ \ No newline at end of file diff --git a/content/about/index.md b/content/about/index.md @@ -4,19 +4,14 @@ menu: about description: "Hi, my name is Yohanes Bandung Bondowoso" --- -People call me **Bandung**. +People call me **Bandung**. ૮ ・ﻌ・ა  -You can contact me through hi@ybbond.dev,<br>or through any of my social medias in my [keybase](https://keybase.io/ybbond) or listed in the [footer down below](#down). +Currently work as **Frontend Engineer** of [kumparan.com](https://kumparan.com) in Jakarta, Indonesia. Building it with `ReactJS` and `React Native` for Web, Android and iOS. -If you prefer encrypted communication, you can get -my PGP key in [txt format](/ybbond-public.txt) or [asc format](/ybbond-public.asc). +Eager to learn. Hardships. I cannot say that I am humble, but I learn from experience that each individuals, their own excellences. I try to learn from everyone, and everything. -The fingerprint is: -```html -56DA ADB1 5246 1C80 6792 DBAB 8477 3B93 9886 81A0 -``` ## Quests @@ -34,7 +29,7 @@ I do a lil bit of design too. `React Native Web`, `TypeScript`. - <time>2019 -</time><br>**Frontend Engineer** [@kumparan](https://kumparan.com/) My current job. I like it here. -`React`, `React Native`, `JavaScript`, `Apollo GraphQL`. +`ReactJS`, `React Native`, `JavaScript`, `Apollo GraphQL`. ## Trivial diff --git a/content/contact.md b/content/contact.md @@ -0,0 +1,15 @@ +--- +title: Contact Me +menu: contact +description: Ways to get in touch with me +--- + +You can contact me through hi@ybbond.dev,<br>or through any of my social medias on my [keybase](https://keybase.io/ybbond) or listed in the footer down below. + +If you prefer encrypted communication, you can get +my PGP key in [txt format](/ybbond-public.txt) or [asc format](/ybbond-public.asc). + +The fingerprint is: +```html +56DA ADB1 5246 1C80 6792 DBAB 8477 3B93 9886 81A0 +```+ \ No newline at end of file diff --git a/content/uses.md b/content/uses.md @@ -24,7 +24,6 @@ Some others satisfy my hobbies. - Roland FP-30 - Guitars. Many of them. ---- ## Software diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html @@ -38,7 +38,7 @@ </style> <figure class="{{ $border_class }}"> <center> - <a href='{{ $image.RelPermalink }}'> + <a class="no-outline" href='{{ $image.RelPermalink }}'> <img src="{{ $src.RelPermalink }}" style="max-width: 100%; height: auto;" @@ -53,7 +53,7 @@ <figure class="{{ $border_class }} lazy"> <center> - <a href='{{ $image.RelPermalink }}'> + <a class="no-outline" 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/partials/footer/footer.html b/layouts/partials/footer/footer.html @@ -3,7 +3,6 @@ <p class="footer__nav__left"> {{ if not .IsHome }} <a - class="button footer__nav__left__back" data-goatcounter-click="cl-home-foot" data-rel="prefetch" href={{ .Site.BaseURL }} @@ -13,31 +12,26 @@ </p> <p class="footer__nav__right"> <a - class="button" data-goatcounter-click="cl-gh-foot" href="https://github.com/{{ .Site.Params.Github }}" rel="me" >GitHub</a> <a - class="button" data-goatcounter-click="cl-twit-foot" href="https://twitter.com/{{ .Site.Params.Twitter }}" rel="me" >Twitter</a> <a - class="button" data-goatcounter-click="cl-micro-foot" href="https://micro.blog/{{ .Site.Params.Microblog }}" rel="me" >Micro.blog</a> <a - class="button" data-goatcounter-click="cl-mast-foot" href="https://indieweb.social/@ybbond" rel="me" >Mastodon</a> <a - class="button" data-goatcounter-click="cl-rss-foot" href={{ "index.xml" | absURL }} >RSS</a> diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html @@ -6,17 +6,20 @@ <nav class="header__menu"> <div class="header__menu__list"> <span> - {{ $baseURL := .Site.BaseURL }} {{ range .Site.Menus.main }} {{ $url := trim .URL "/" | absURL }} - <a + <a + data-rel="prefetch" + role="button" + class="header__menu__list__item button no-outline" + {{ if eq $.RelPermalink (print .URL "/") }} + id="active" + {{ else }} href={{ $url }} - data-rel="prefetch" - role="button" - class="header__menu__list__item button no-outline" - > - {{ .Pre }}<span>{{ .Name }}</span> - </a> + {{ end }} + > + {{ .Pre }}<span>{{ .Name }}</span> + </a> {{ end }} </span> <button diff --git a/layouts/partials/post/pagination.html b/layouts/partials/post/pagination.html @@ -28,6 +28,6 @@ <span class="pagination__right"></span> {{ end }} {{ else }} - <span>No More Post</span> + <span class="pagination__center">No More Post</span> {{ end }} </nav> \ No newline at end of file