ybbond

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

commit 42d752574eddb4897e971b26ac3c3da875c00cbf
parent 796a0ab998884ccd5f5c4df970ebdeccbdcfe2f5
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Tue, 28 Apr 2020 18:07:43 +0700

style: general responsiveness

Diffstat:
Massets/styles.scss | 68++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
Mlayouts/_default/list.html | 2+-
Mlayouts/index.html | 28+++++++++++++++-------------
Mlayouts/partials/footer/footer.html | 8++++----
Mlayouts/partials/header/header.html | 21+++++++++++++++++++--
Dlayouts/partials/header/menu.html | 15---------------

6 files changed, 101 insertions(+), 41 deletions(-)

diff --git a/assets/styles.scss b/assets/styles.scss
@@ -7,6 +7,7 @@ html {
   color: $color-text;
   font-family: $font-text;
   line-height: 1.6;
+  font-size: 16px;
 }
 
 body {
@@ -14,11 +15,32 @@ body {
   margin: 0 auto;
 }
 
+@media (max-width: 599px) {
+  html {
+    font-size: 15px;
+  }
+  body {
+    padding: 0 10px;
+    margin: 0;
+  }
+  hr {
+    width: 90%;
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   color: $color-green;
   font-family: $font-mono;
 }
 
+h1 {
+  font-size: 2rem;
+}
+
+h1, h2, h3 {
+  line-height: 1.3;
+}
+
 a {
   text-decoration: none;
   color: $color-blue;
@@ -28,9 +50,6 @@ a {
   .link-white {
     color: $color-text;
   }
-  &.full-width {
-    width: 100%;
-  }
   &.button {
     display: inline-block;     
     position: relative;    
@@ -43,6 +62,11 @@ a {
       margin-left: -0.5em;
     }
   }
+  &.full-width {
+    width: calc(100% - 1.4em);
+    margin: 0;
+    align-self: center;
+  }
 }
 
 blockquote {
@@ -60,8 +84,17 @@ time {
   font-family: $font-mono;
 }
 
+.listing {
+  margin-left: 0.5em;
+}
+
 .header {
   margin-top: 1em;
+  @media (min-width: 599px) {
+    &__title:not(h1) {
+      margin-top: 1.4em;
+    }
+  }
   &__menu {
     margin: 0 0 10px;
     display: flex;
@@ -108,7 +141,7 @@ time {
   justify-content: space-around;
   &__item {
     padding: 0 30px;
-    @media (max-width: 600px) {
+    @media (max-width: 599px) {
       padding: 0 10px;
     }
     &__left {
@@ -131,7 +164,7 @@ time {
 }
 
 .footer {
-  margin-top: 100px;
+  margin-top: 40px;
   &__nav {
     display: flex;
     flex-direction: row;
@@ -142,10 +175,33 @@ time {
     &__right {
       text-align: right;
     }
+    @media (max-width: 599px) {
+      display: flex;
+      flex-direction: column;
+      &__left {
+        text-align: center;
+        margin: 0;
+      }
+      &__right {
+        text-align: center;
+        margin-top: 0;
+      }
+    }
   }
   &__copyright {
-    margin-top: 40px;
+    margin: 10px 0 40px;
     font-size: 0.8em;
     text-align: center;
+    @media (max-width: 599px) {
+      display: flex;
+      flex-direction: column;
+      margin-top: 0;
+      &__separator {
+        display: none;
+      }
+    }
+  }
+  @media (max-width: 599px) {
+    margin-top: 20px
   }
 }
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
   {{ if or .Title .Content }}
     <div>
-      {{ with .Title }}<h2>{{ . }}</h2>{{ end }}
+      {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
       {{ with .Content }}<div>{{ . }}</div>{{ end }}
     </div>
   {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,21 +1,24 @@
 {{ define "main" }}
 
-<article>
-  {{ .Content }}
+  <article>
+    {{ .Content }}
+  </article>
 
   <hr>
 
   <h2>Blog Posts:</h2>
-  {{ range first 5 (where .Site.RegularPages "Type" "posts") }}
-    <p>
-      <a href={{ .Permalink }} class="button full-width">
-        <time>{{ .Date.Format "02 Jan 2006" }}</time>
-        <br>
-        <span class="link-white">{{ .Title }}</span> »
-      </a>
-    </p>
-  {{ end }}
-  {{ $postURL := "/posts" | absURL }}
+  <div class="listing">
+    {{ range first 5 (where .Site.RegularPages "Type" "posts") }}
+      <p>
+        <a href={{ .Permalink }} class="button full-width">
+          <time>{{ .Date.Format "02 Jan 2006" }}</time>
+          <br>
+          <span class="link-white">{{ .Title }}</span> »
+        </a>
+      </p>
+    {{ end }}
+    {{ $postURL := "/posts" | absURL }}
+  </div>
   <p class="main__more"><a href={{ $postURL }} class="button">More Blogs ⤳</a></p>
 
   <hr>
@@ -29,6 +32,5 @@
   {{ $notesURL := "/notes" | absURL }}
   <p class="main__more"><a href={{ $notesURL }} class="button">More Notes ⤳</a></p>
 
-</article>
 
 {{ end }}
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
@@ -14,10 +14,10 @@
   </p>
 </div>
 <p class="footer__copyright">
-  &copy;{{ now.Year }} {{ .Site.Params.Author }}
-  {{ with .Site.BaseURL }} -
-    <a href="{{ . }}">
+  <span class="footer__copyright__year">&copy;{{ now.Year }} {{ .Site.Params.Author }}</span>
+  {{ with .Site.BaseURL }} <span class="footer__copyright__separator">-</span>
+    <span class="footer__copyright__site"><a href="{{ . }}">
       {{ . | replaceRE "^https?://([^/]+).*" "$1" }}
-    </a>
+    </a></span>
   {{ end }}
 </p> 
\ No newline at end of file
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -1,4 +1,21 @@
-<h1 class="header__title">Yohanes Bandung Bondowoso <span class="dark-toggler"></span></h1>
+{{ if .IsHome }}
+  <h1 class="header__title">Yohanes Bandung Bondowoso<span class="dark-toggler"></span></h1>
+{{ else }}
+  <h2 class="header__title">Yohanes Bandung Bondowoso</h2>
+{{ end }}
 <nav class="header__menu">
-  {{ partial "header/menu.html" . }}
+  <div class="header__menu__list">
+    {{ $baseURL := .Site.BaseURL }}
+    {{ range .Site.Menus.main }}
+      {{ $url := trim .URL "/" | absURL }}
+        <a
+          href={{ $url }}
+          data-rel="prefetch"
+          role="button"
+          class="header__menu__list__item button"
+        >
+          {{ .Pre }}<span>{{ .Name }}</span>
+        </a>
+    {{ end }}
+  </div>
 </nav> 
\ No newline at end of file
diff --git a/layouts/partials/header/menu.html b/layouts/partials/header/menu.html
@@ -1,14 +0,0 @@
-<div class="header__menu__list">
-  {{ $baseURL := .Site.BaseURL }}
-  {{ range .Site.Menus.main }}
-    {{ $url := trim .URL "/" | absURL }}
-      <a
-        href={{ $url }}
-        data-rel="prefetch"
-        role="button"
-        class="header__menu__list__item button"
-      >
-        {{ .Pre }}<span>{{ .Name }}</span>
-      </a>
-  {{ end }}
-</div>-
\ No newline at end of file