Implemented dark mode and copy to clipboard feature

assets/scss/03-components/_c-article.scss

@@ -13,7 +13,6 @@
 }
 
 .l-article {
-  background-color: #fff;
   border-radius: rem(4px);
 
   &--with-aside {

assets/scss/03-components/_c-footer.scss

@@ -1,6 +1,6 @@
 .c-footer {
   margin-top: auto;
-  border-top: rem(1px) solid $border-color;
+  // border-top: rem(1px) solid $border-color;
 
   &__copyright {
     display: flex;

assets/scss/03-components/_c-navbar.scss

@@ -1,7 +1,7 @@
 .c-navbar {
   padding: rem(16px) 0;
   background-color: #fff;
-  border-bottom: rem(1px) solid $border-color;
+  // border-bottom: rem(1px) solid $border-color;
   position: sticky;
   top: 0;
   z-index: $z-index-navbar;

assets/scss/03-components/_nuxt-content.scss

@@ -157,3 +157,19 @@
     line-height: 1;
   }
 }
+
+pre[class*="language-"] {
+  margin-top: 0 !important;
+}
+
+.c-code-wrapper__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: rem(8px) rem(16px);
+  background: #393e46;
+}
+
+.c-code-wrapper__copy {
+  cursor: pointer;
+}

assets/scss/index.scss

@@ -21,3 +21,71 @@ This project follows Sass architecture inspired by following articles:
 
 // 04. UTILITIES
 @import "./04-utilities/utilities.scss";
+
+@media (prefers-color-scheme: dark) {
+  /**
+   * Read more:
+   * https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li
+   */
+  // html {
+  //   filter: invert(1) hue-rotate(180deg);
+
+  //   img {
+  //     filter: invert(1) hue-rotate(180deg);
+  //   }
+  // }
+
+  /**
+   * https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
+   */
+  body {
+    color: #eee;
+    background: #222831;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  .c-navbar__brand,
+  .c-social-media__name,
+  .c-portfolio__stats dt,
+  .c-pagination__link-label,
+  .c-table th {
+    color: #e0e0e0;
+  }
+
+  .c-footer__copyright::after {
+    color: #1e242c;
+  }
+
+  .c-navbar {
+    background: #121212;
+  }
+
+  .c-navbar__menu-link::after {
+    background-color: #36373d;
+  }
+
+  .c-blog-post {
+    background-color: #393e46;
+    border: 0.0625rem solid #222831;
+  }
+
+  hr {
+    background-color: #393e46;
+  }
+
+  .c-table tr:nth-child(even),
+  .c-table thead tr {
+    background-color: #393e46;
+  }
+
+  .c-table th,
+  .c-table td {
+    border-color: #393e46;
+  }
+}

content/articles/safari-inline-block-fix-for-columns-layout.md

@@ -12,7 +12,7 @@ tags:
 
 <div class="l-wrap l-wrap--sm">
 
-### The problem
+## The problem
 
 Using css columns property gives us different results for Chrome and Safari. Check below gif file.
 
@@ -31,7 +31,7 @@ Using css columns property gives us different results for Chrome and Safari. Che
 
 Look closely to the above gif file and you'll see the border positions differently if we toggle <code>display: inline-block</code> rule. In this case, border-bottom for last child of the left column goes above the first child of the right column. This issue only occurs in Safari browser.
 
-### The finding
+## The finding
 
 Border bottom works incorrectly in Safari while using CSS columns for layout.
 

content/snippets/detect-horizontal-swipe.md

@@ -7,6 +7,12 @@ tags:
   - javascript
 ---
 
+<div class="c-code-wrapper">
+  <div class="c-code-wrapper__header">
+    <div class="c-code-wrapper__title">Detect horizontal swipe</div>
+    <div class="c-code-wrapper__copy">Copy</div>
+  </div>
+
 ```js [js]
 // Detect horizontal swipe
 !(function detectHorizontalSwipe() {
@@ -20,17 +26,19 @@ tags:
     if (touchendX > touchstartX) alert("swiped right!");
   }
 
-  body.addEventListener("touchstart", e => {
+  body.addEventListener("touchstart", (e) => {
     touchstartX = e.changedTouches[0].screenX;
   });
 
-  body.addEventListener("touchend", e => {
+  body.addEventListener("touchend", (e) => {
     touchendX = e.changedTouches[0].screenX;
     handleGesture();
   });
 })();
 ```
 
+</div>
+
 ## Further reading
 
 - https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android

content/snippets/style-placeholder-text.md

@@ -8,7 +8,15 @@ tags:
   - scss
 ---
 
+<div class="c-code-wrapper">
+  <div class="c-code-wrapper__header">
+    <div class="c-code-wrapper__title">Style placeholder text</div>
+    <div class="c-code-wrapper__copy">Copy</div>
+  </div>
+
 ```css [css]
+/* Style placeholder text */
+
 ::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: red;
@@ -27,6 +35,8 @@ tags:
 }
 ```
 
+</div>
+
 ## Further reading
 
 - https://css-tricks.com/almanac/selectors/p/placeholder/

pages/blog/index.vue

@@ -1,29 +1,43 @@
 <template>
   <div class="l-main">
     <div class="c-banner">
-      <div class="l-wrap l-wrap--sm">
+      <div class="l-wrap">
         <h1 class="c-page-title u-text-center u-text-uppercase">My writings</h1>
-        <input type="text" placeholder="Search articles" v-model="searchQuery" class="c-search-input">
+        <input
+          type="text"
+          placeholder="Search articles"
+          v-model="searchQuery"
+          class="c-search-input"
+        />
         <div v-if="uniqueArticleTags.length" class="c-tags u-mt-32">
-          <nuxt-link 
-            v-for="(tag, index) in uniqueArticleTags" 
+          <nuxt-link
+            v-for="(tag, index) in uniqueArticleTags"
             :key="index"
             class="c-tag"
-            :to="`/blog/tag/${tag}`">
+            :to="`/blog/tag/${tag}`"
+          >
             {{ tag }}
           </nuxt-link>
         </div>
       </div>
     </div>
-    <div class="l-wrap l-wrap--sm">
+    <div class="l-wrap">
       <div class="u-py-32">
         <ul class="c-articles-list" v-if="articles.length">
-          <li v-for="article of articles" :key="article.slug" class="c-blog-post">
+          <li
+            v-for="article of articles"
+            :key="article.slug"
+            class="c-blog-post"
+          >
             <div>
-              <NuxtLink 
-                :to="{ name: 'blog-slug', params: { slug: article.slug } }" class="c-blog-post__link">
+              <NuxtLink
+                :to="{ name: 'blog-slug', params: { slug: article.slug } }"
+                class="c-blog-post__link"
+              >
               </NuxtLink>
-              <NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">
+              <NuxtLink
+                :to="{ name: 'blog-slug', params: { slug: article.slug } }"
+              >
                 <h2 class="c-blog-post__title">{{ article.title }}</h2>
               </NuxtLink>
               <p class="c-blog-post__text">{{ article.description }}</p>
@@ -33,82 +47,81 @@
             </div>
           </li>
         </ul>
-        <p v-else class="no-article-matched">No articles matched to your search query!</p>
+        <p v-else class="no-article-matched">
+          No articles matched to your search query!
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import driftBot from '@/utils/driftBot';
-  import vhHack from '@/utils/vhHack';
-  
-  export default {
-    name: 'BlogIndex',
-    head() {
-      return {
-        title: 'Blog - Saabbir Hossain',
-      }
-    },
-    async asyncData({ $content }) {
-      const articles = await $content('articles')
-        .sortBy('createdAt', 'desc')
-        .fetch()
+import driftBot from "@/utils/driftBot";
+import vhHack from "@/utils/vhHack";
 
+export default {
+  name: "BlogIndex",
+  head() {
+    return {
+      title: "Blog - Saabbir Hossain",
+    };
+  },
+  async asyncData({ $content }) {
+    const articles = await $content("articles")
+      .sortBy("createdAt", "desc")
+      .fetch();
 
-      // Get unique article tags
-      const allArticleTags = [];
-      articles.forEach(article => {
-        allArticleTags.push(...article.tags)
-      })
-      const uniqueArticleTags = [...new Set(allArticleTags)]
+    // Get unique article tags
+    const allArticleTags = [];
+    articles.forEach((article) => {
+      allArticleTags.push(...article.tags);
+    });
+    const uniqueArticleTags = [...new Set(allArticleTags)];
 
-      return {
-        articles,
-        uniqueArticleTags
-      }
-    },
-    data() {
-      return {
-        searchQuery: ''
-      }
+    return {
+      articles,
+      uniqueArticleTags,
+    };
+  },
+  data() {
+    return {
+      searchQuery: "",
+    };
+  },
+  methods: {
+    formatDate(date) {
+      const options = { year: "numeric", month: "long", day: "numeric" };
+      return new Date(date).toLocaleDateString("en", options);
     },
-    methods: {
-      formatDate(date) {
-        const options = { year: 'numeric', month: 'long', day: 'numeric' }
-        return new Date(date).toLocaleDateString('en', options)
-      }
-    },
-    mounted() {
-      // Load drift widget after window finished loading
-      window.onload = driftBot;
-
-      // Set --vh CSS custom property
-      vhHack();
+  },
+  mounted() {
+    // Load drift widget after window finished loading
+    window.onload = driftBot;
 
-      
-    },
-    watch: {
-      async searchQuery(searchQuery) {
-        if (!searchQuery) {
-          this.articles = await this.$content('articles')
-            .sortBy('createdAt', 'desc')
-            .fetch()
-          return
-        }
-        this.articles = await this.$content('articles')
-          .limit(6)
-          .search(searchQuery)
-          .sortBy('createdAt', 'desc')
-          .fetch()
+    // Set --vh CSS custom property
+    vhHack();
+  },
+  watch: {
+    async searchQuery(searchQuery) {
+      if (!searchQuery) {
+        this.articles = await this.$content("articles")
+          .sortBy("createdAt", "desc")
+          .fetch();
+        return;
       }
-    }    
-  }
+      this.articles = await this.$content("articles")
+        .limit(6)
+        .search(searchQuery)
+        .sortBy("createdAt", "desc")
+        .fetch();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .no-article-matched {
-    margin: 0;
-    text-align: center;
-  }
-</style>
+.no-article-matched {
+  margin: 0;
+  text-align: center;
+}
+</style>