ybbond

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

commit 281ec2a09fb6878596284cc00322eeffcd59fdae
parent 60dc9245c15d21739d28f7b701942ff0fc27bce9
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Fri,  1 May 2020 16:57:09 +0700

style: refactor notes and move scss mixins to variables.scss

Diffstat:
Massets/content.scss | 138++++++++++++++++++++++++++++++++++++-------------------------------------------
Massets/styles.scss | 35++++++++++++-----------------------
Massets/variables.scss | 21+++++++++++++++++++++
Mlayouts/index.html | 18+++++++++++-------
Mlayouts/partials/footer/footer.html | 2+-
Mlayouts/partials/post/notes-item.html | 6+++---

6 files changed, 111 insertions(+), 109 deletions(-)

diff --git a/assets/content.scss b/assets/content.scss
@@ -1,95 +1,84 @@
 @import "fonts";
 @import "variables";
 
-@mixin themify($themes: $themes) {
-  @each $theme, $map in $themes {
-
-    .theme-#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), '#{$key}');
-        $theme-map: map-merge($theme-map, ($key: $value)) !global;
-      }
-
-      @content;
-      $theme-map: null !global;
-    }
-
-  }
-}
-
 @function themed($key) {
   @return map-get($theme-map, $key);
 }
 
 .content {
-  @include themify($themes) {
-    font-family: $font-text;
-    width: 100%;
-    pre {
-      overflow: auto;
-      padding: 0.5em;
+  font-family: $font-text;
+  width: 100%;
+  pre {
+    overflow: auto;
+    padding: 0.5em;
+  }
+  code {
+    padding: 0.1em;
+    font-family: $font-mono;
+    font-size: 0.9em;
+  }
+  table {
+    display: block;
+    overflow-x: auto;
+    border-collapse: collapse;
+    td, th {
+      border: 1px solid #ddd;
     }
-    code {
-      padding: 0.1em;
-      font-family: $font-mono;
-      font-size: 0.9em;
+    td {
+      padding: 0.5em 1em;
     }
-    table {
-      display: block;
-      overflow-x: auto;
-      border-collapse: collapse;
-      td, th {
-        border: 1px solid #ddd;
-      }
-      td {
-        padding: 0.5em 1em;
-      }
-      th {
-        padding: 1em 2em;
-        background-color: #333;
+    th {
+      padding: 1em 2em;
+      background-color: #333;
+      @include themify($themes) {
         color: themed('color-text');
       }
-      tr:nth-child(even) {
-        background-color: #333;
-      }
-      tr:hover {
-        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;
+    tr:nth-child(even) {
+      background-color: #333;
+    }
+    tr:hover {
+      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;
+        @include themify($themes) {
           color: themed('color-red');
-          left: 0;
         }
+        left: 0;
       }
     }
   }
-
-  .notes {
-    & > p {
-      margin-top: 5px;
-    }
-    margin-bottom: 2em;
-    @media (max-width: 599px) {
-      &__title {
-        margin: 10px 0 0;
-        &__separator {
-          display: none;
-        }
-        display: flex;
-        flex-direction: column;
+}
+.notes {
+  & > p {
+    margin: 0;
+    margin-top: 0.7em;
+  }
+  &__title {
+    margin: 0;
+  }
+  padding: 0 0.7em;
+  margin-bottom: 2em;
+  @media (max-width: 599px) {
+    &__title {
+      margin: 10px 0 0;
+      &__separator {
+        display: none;
       }
+      display: flex;
+      flex-direction: column;
     }
   }
-}-
\ No newline at end of file
+}
diff --git a/assets/styles.scss b/assets/styles.scss
@@ -2,27 +2,6 @@
 @import "fonts";
 @import "content";
 
-@mixin themify($themes: $themes) {
-  @each $theme, $map in $themes {
-
-    .theme-#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), '#{$key}');
-        $theme-map: map-merge($theme-map, ($key: $value)) !global;
-      }
-
-      @content;
-      $theme-map: null !global;
-    }
-
-  }
-}
-
-@function themed($key) {
-  @return map-get($theme-map, $key);
-}
-
 html {
   @include themify($themes) {
     background-color: themed('color-background');
@@ -95,7 +74,7 @@ a {
         background-color: themed('color-background-hover');
       }
     }
-    &:first-child:not(.header__menu__list__item) {
+    &:first-child:not(.header__menu__list__item .listing_post) {
       margin-left: -0.5em;
     }
   }
@@ -127,7 +106,17 @@ time {
 }
 
 .listing {
-  margin-left: 0.5em;
+  &__post {
+    padding-bottom: 1.3em !important;
+    &__title {
+      margin-top: 0.7em;
+      margin-bottom: 0;
+    }
+    &__description {
+      margin: 0;
+      margin-top: 0.8em;
+    }
+  }
 }
 
 .header {
diff --git a/assets/variables.scss b/assets/variables.scss
@@ -1,3 +1,24 @@
+@mixin themify($themes: $themes) {
+  @each $theme, $map in $themes {
+
+    .theme-#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), '#{$key}');
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+
+      @content;
+      $theme-map: null !global;
+    }
+
+  }
+}
+
+@function themed($key) {
+  @return map-get($theme-map, $key);
+}
+
 $themes: (
   light: (
     color-text: #242424,
diff --git a/layouts/index.html b/layouts/index.html
@@ -9,13 +9,17 @@
   <h2>Blog Posts:</h2>
   <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>
+      <a href={{ .Permalink }} class="button full-width listing__post">
+        <h3 class="listing__post__title">
+          {{ .Title }}
+        </h3>
+        <time class="listing__post__date">
+          {{ .Date.Format "02 Jan 2006" }}
+        </time>
+        {{ with .Description }}
+          <p class="link-white listing__post__description">{{ . }}</p>
+        {{ end }}
+      </a>
     {{ end }}
     {{ $postURL := "/posts" | absURL }}
   </div>
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
@@ -12,7 +12,7 @@
 		<a class="button" href="https://twitter.com/{{ .Site.Params.Twitter }}" rel="me">Twitter</a>
     <a class="button" href="https://micro.blog/{{ .Site.Params.Microblog }}" rel="me">Micro.blog</a>
     <a class="button" href="https://indieweb.social/@ybbond" rel="me">Mastodon</a>
-		<a class="button" href={{ "index.xml" | absURL }}>RSS</a>
+		<a class="button" href={{ "posts/index.xml" | absURL }}>RSS</a>
   </p>
 </div>
 <p class="footer__copyright">
diff --git a/layouts/partials/post/notes-item.html b/layouts/partials/post/notes-item.html
@@ -1,14 +1,14 @@
 {{ $dateformat := .Date.Format "2006-01-02 15:04" }}
 {{ $idslug := (print $dateformat "-") | urlize }}
 <div class="notes">
-  <h4 class="notes__title" id={{ $idslug }}>
+  <p class="notes__title" id={{ $idslug }}>
     <span>
       <time class="notes__title__date">
         {{ .Date.Format "02 Jan 2006" }}
       </time>
         {{ if .Title }}
         {{ else }}
-          <a href="#{{ $idslug }}">#</a></span>
+          <a href="/notes/#{{ $idslug }}">#</a></span>
         {{ end }}
     </span>
     {{ with .Title}}
@@ -17,6 +17,6 @@
     {{ with .Title}}
       <span class="notes__title__title">{{ . }} <a href="#{{ $idslug }}">#</a></span>
     {{ end }}
-  </h4>
+  </p>
   {{ .Content }}
 </div> 
\ No newline at end of file