Implement modern post card layout with enhanced category system and mobile overlay

assets/sass/_dark.scss

@@ -0,0 +1,270 @@
+body {
+  color: $dark-text-base-color;
+  background-color: $dark-black;
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $dark-white;
+}
+
+// Table
+table {
+  thead {
+    color: $dark-white;
+    border-color: $dark-light;
+  }
+
+  th,
+  td,
+  tr {
+    border-color: $dark-light;
+  }
+}
+
+// Post
+.page-content {
+  a {
+    color: $dark-text-link-blue;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $dark-text-link-blue-active;
+    }
+  }
+
+  h3 {
+    border-color: $dark-light;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $dark-white;
+  }
+}
+
+// ToC
+.toc {
+  background-color: $dark-toc-bg;
+}
+
+// Go to top
+#totop {
+  color: $dark-text-base-color;
+  background-color: $dark-go-top-bg;
+
+  &:hover {
+    background-color: $dark-go-top-bg-hover;
+  }
+}
+
+// Inline code
+li>code,
+p>code {
+  font-size: 0.9em;
+  padding: 1px 3px;
+  position: relative;
+  top: -1px;
+  color: $dark-inline-code-text;
+  background-color: $dark-inline-code-bg;
+  border-radius: 2px;
+  border: 1px solid rgba(128, 128, 128, 0.1);
+}
+
+// kbd tag
+kbd {
+  color: $dark-inline-code-text;
+  background-color: $dark-inline-code-bg;
+}
+
+// horizontal rule
+hr {
+  border-color: $dark-light;
+}
+
+// Post Meta
+.post-meta {
+  color: $dark-gray;
+
+  time {
+    &::after {
+      background-color: $dark-light;
+    }
+  }
+
+  span[itemprop="author"] {
+    border-color: $dark-light;
+  }
+}
+
+// Link
+a {
+  color: inherit;
+  text-decoration-color: $dark-smoke;
+
+  &:hover {
+    color: $dark-text-link-blue;
+  }
+
+  &:focus {
+    outline-color: rgba(44, 118, 246, 0.6);
+  }
+}
+
+// List
+li {
+  &:before {
+    color: $dark-white;
+  }
+}
+
+// Blockquote
+blockquote {
+  color: $dark-blockquote-text;
+  border-color: $dark-bloquote-border;
+}
+
+// Strong, Bold
+strong,
+b {
+  color: $dark-white;
+}
+
+// Navbar
+.navbar {
+  border-color: $dark-light;
+
+  .menu {
+    a#mode {
+      .mode-sunny {
+        display: block;
+      }
+
+      .mode-moon {
+        display: none;
+      }
+    }
+
+    .menu-link {
+      color: $dark-white;
+    }
+
+    @include media-query($on-mobile) {
+      background-color: $dark-black;
+      border-color: $dark-light;
+
+      input[type="checkbox"]:checked~.trigger {
+        background: $dark-black;
+      }
+    }
+  }
+}
+
+// Post Item
+.post-item {
+  &:not(:first-child) {
+    border-color: $dark-light;
+  }
+
+  .post-item-date {
+    color: $dark-white;
+  }
+
+  .post-item-title {
+    a {
+      color: $dark-text-base-color;
+
+      &:hover,
+      &focus {
+        color: $dark-white;
+      }
+    }
+  }
+}
+
+// Post Navigation
+.post-nav {
+  border-color: $dark-light;
+
+  .post-nav-item {
+    font-weight: $bold-weight;
+
+    .post-title {
+      color: $dark-white;
+      opacity: 0.9;
+    }
+
+    &:hover,
+    &:focus {
+      .post-title {
+        color: $dark-text-link-blue-active;
+      }
+    }
+
+    .nav-arrow {
+      color: $dark-gray;
+    }
+  }
+
+  @include media-query($on-mobile) {
+    .post-nav-item:nth-child(even) {
+      border-color: $dark-light;
+    }
+  }
+}
+
+// Footer
+.footer {
+  span.footer_item {
+    color: $dark-white;
+  }
+
+  a.footer_item:not(:last-child) {
+    color: $dark-white;
+  }
+
+  .footer_copyright {
+    color: $dark-gray;
+    opacity: 1;
+  }
+}
+
+// 404 Page
+.not-found {
+  .title {
+    color: $dark-white;
+    text-shadow: 1px 0px 0px $dark-text-link-blue;
+  }
+
+  .phrase {
+    color: $dark-text-base-color;
+  }
+
+  .solution {
+    color: $dark-text-link-blue;
+  }
+
+  .solution:hover {
+    color: $dark-text-link-blue-active;
+  }
+}
+
+.search-article {
+  input[type="search"] {
+    color: $dark-text-base-color;
+
+    &::-webkit-input-placeholder {
+      color: rgba(128, 128, 128, 0.8);
+    }
+  }
+}

assets/sass/main.scss

@@ -0,0 +1,89 @@
+//////////////// 1. Light Colors /////////////////
+$text-base-color: #434648;
+$text-link-blue: #003fff;
+$text-link-blue-active: #0036c7;
+$bloquote-border: #c4c8cc;
+$blockquote-text: #525b66;
+$inline-code-text: #333638;
+$inline-code-bg: #d8dbe2;
+$toc-bg: #edecec;
+$go-top-bg: #dfe0e397;
+$go-top-bg-hover: #dfe0e3;
+
+$black: #0d122b;
+$light: #ececec;
+$smoke: #d2c7c7;
+$gray: #6b7886;
+$white: #fff;
+
+//////////////// 2. Dark Colors /////////////////
+$dark-text-base-color: #babdc4;
+$dark-text-link-blue: #77a8fd;
+$dark-text-link-blue-active: #5292ff;
+$dark-bloquote-border: #4a4d56;
+$dark-blockquote-text: #9b9ba3;
+$dark-inline-code-text: #c2c4ca;
+$dark-inline-code-bg: #2d2d2d;
+$dark-toc-bg: #323232;
+$dark-go-top-bg: #676767b3;
+$dark-go-top-bg-hover: #676767;
+
+$dark-black: #131418;
+$dark-white: #eaeaea;
+$dark-light: #1b1d25;
+$dark-smoke: #4a4d56;
+$dark-gray: #767f87;
+
+//////////////// 3. Fonts preferences /////////////////
+$sans-family: Roboto, sans-serif;
+$mono-family: Consolas, monospace;
+$base-font-size: 16px;
+$medium-font-size: $base-font-size * 0.938;
+$small-font-size: $base-font-size * 0.875;
+$base-line-height: 1.85;
+
+// Font weight
+// $light-weight: 300; // uncomment if necessary
+$normal-weight: 400;
+$bold-weight: 700;
+// $black-weight: 900; // uncomment if necessary
+
+//////////////// 4.Responsive design (media queries) /////////////////
+$wide-size: 890px;
+$narrow-size: 720px;
+
+// Padding unit
+$spacing-full: 30px;
+$spacing-half: $spacing-full / 2;
+
+// Screen sizes
+$on-mobile: 768px;
+$on-tablet: 769px;
+$on-desktop: 1024px;
+$on-widescreen: 1152px;
+
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+
+@mixin relative-font-size($ratio) {
+    font-size: $base-font-size * $ratio;
+}
+
+//////////////// 5. Import all sass files /////////////////
+
+@import "fonts";
+@import "base";
+@import "navbar";
+@import "layout";
+@import "post";
+@import "code";
+
+@import "tableOfContent";
+@import "miscellaneous";
+@import "listpage";
+@import "goToTop";
+@import "dark";
+@import "custom";

content/categories/anthropology/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Anthropology"
+description: "Ever watched Indiana Jones? It's not like that."
+---

content/categories/comp-sci/_index.md

@@ -0,0 +1,5 @@
+---
+title: "Computer Science"
+shortTitle: "Comp-Sci"
+description: "Conjuring the ghost in the machine."
+---

content/categories/epistemology/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Epistemology"
+description: "Thou shall not sin by engaging in impure reasoning."
+---

content/categories/law/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Law"
+description: "Dibs on the gavel."
+---

content/categories/philosophy/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Philosophy"
+description: "Things to ponder when life seems too absurd."
+---

content/categories/poli-sci/_index.md

@@ -0,0 +1,5 @@
+---
+title: "Political Science"
+shortTitle: "Poli-Sci"
+description: "Make it stop. Please."
+---

content/categories/sociology/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Sociology"
+description: "People are weird as shit, aren't they?"
+---