ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

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-
Massets/content.scss | 11-----------
Massets/styles.scss | 84++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------
Dconfig.dev.toml | 44--------------------------------------------
Mconfig.toml | 7++++++-
Mcontent/_index.md | 18+++++-------------
Mcontent/about/index.md | 13++++---------
Acontent/contact.md | 16++++++++++++++++
Mcontent/uses.md | 1-
Mlayouts/_default/_markup/render-image.html | 4++--
Mlayouts/partials/footer/footer.html | 6------
Mlayouts/partials/header/header.html | 19+++++++++++--------
Mlayouts/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**. ૮ ・ﻌ・ა
 
 ![photo by Soraya Azizah](bandung-mosh-on-tarintih.jpg)
 
-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