dev-jekyll-theme 1.0.0

data/_sass/layout/home.scss

@@ -0,0 +1,178 @@
+/*
+  Style for Homepage
+*/
+
+.pagination {
+  color: var(--btn-patinator-text-color);
+  font-family: Lato, sans-serif;
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  .page-item {
+    .page-link {
+      color: inherit;
+      width: 2.5rem;
+      height: 2.5rem;
+      padding: 0;
+      display: -webkit-box;
+      -webkit-box-pack: center;
+      -webkit-box-align: center;
+      border-radius: 50%;
+      border: 1px solid var(--btn-paginator-border-color);
+      background-color: var(--button-bg);
+
+      &:hover {
+        background-color: var(--btn-paginator-hover-color);
+      }
+    }
+
+    &.active {
+      .page-link {
+        background-color: var(--btn-paginator-hover-color);
+        color: var(--btn-text-color);
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      .page-link {
+        color: rgba(108, 117, 125, 0.57);
+        border-color: var(--btn-paginator-border-color);
+        background-color: var(--button-bg);
+      }
+    }
+
+    &:first-child .page-link,
+    &:last-child .page-link {
+      border-radius: 50%;
+    }
+  } /* .page-item */
+} /* .pagination */
+
+#post-list {
+  margin-top: 1rem;
+  padding-right: 0.5rem;
+
+  .post-preview {
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--main-border-color);
+
+    a:hover {
+      @extend %link-hover;
+    }
+
+    h1 {
+      font-size: 1.4rem;
+      margin: 0;
+    }
+
+    .post-meta {
+      i {
+        font-size: 0.73rem;
+
+        &:not(:first-child) {
+          margin-left: 1.2rem;
+        }
+      }
+
+      em {
+        @extend %normal-font-style;
+      }
+
+      .pin {
+        i {
+          -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+          padding-left: 3px;
+          color: var(--pin-color);
+        }
+
+        span {
+          display: none;
+        }
+      }
+    }
+
+    .post-content {
+      margin-top: 0.6rem;
+      margin-bottom: 0.6rem;
+      color: var(--post-list-text-color);
+
+      > p {
+        /* Make preview shorter on the homepage */
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+  } /* .post-preview */
+} /* #post-list */
+
+/* Hide SideBar and TOC */
+@media all and (max-width: 830px) {
+  .pagination {
+    justify-content: space-evenly;
+
+    .page-item {
+      &:not(:first-child):not(:last-child) {
+        display: none;
+      }
+    }
+  }
+}
+
+/* Sidebar is visible */
+@media all and (min-width: 831px) {
+  #post-list {
+    margin-top: 1.5rem;
+
+    .post-preview .post-meta {
+      .pin {
+        background: var(--pin-bg);
+        border-radius: 5px;
+        line-height: 1.4rem;
+        height: 1.3rem;
+        margin-top: 3px;
+        padding-left: 1px;
+        padding-right: 6px;
+
+        > span {
+          display: inline;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    font-size: 0.85rem;
+
+    .page-item {
+      &:not(:last-child) {
+        margin-right: 0.7rem;
+      }
+
+      .page-link {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+
+    .page-index {
+      display: none;
+    }
+  } /* .pagination */
+}
+
+/* Panel hidden */
+@media all and (max-width: 1200px) {
+  #post-list {
+    padding-right: 0;
+  }
+}

data/_sass/layout/post.scss

@@ -0,0 +1,387 @@
+/*
+  Post-specific style
+*/
+
+@mixin btn-sharing-color($light-color, $important: false) {
+  @if $important {
+    color: var(--btn-share-color, $light-color) !important;
+  } @else {
+    color: var(--btn-share-color, $light-color);
+  }
+}
+
+@mixin btn-post-nav {
+  width: 50%;
+  position: relative;
+  border-color: var(--btn-border-color);
+}
+
+@mixin dot($pl: 0.25rem, $pr: 0.25rem) {
+  content: "\2022";
+  padding-left: $pl;
+  padding-right: $pr;
+}
+
+%text-color {
+  color: var(--text-color);
+}
+
+%preview-margin {
+  margin: 0;
+}
+
+.preview-img {
+  @include align-center;
+  @extend %preview-margin;
+  @extend %rounded;
+
+  max-width: 100%;
+
+  &:not(.no-bg) {
+    img.lazyloaded {
+      background: var(--img-bg);
+    }
+  }
+
+  img {
+    aspect-ratio: 40 / 21;
+    -o-object-fit: cover;
+    object-fit: cover;
+
+    @extend %preview-margin;
+    @extend %rounded;
+  }
+}
+
+h1 + .post-meta {
+  span + span::before {
+    @include dot;
+  }
+
+  em {
+    @extend %text-color;
+
+    a {
+      @extend %text-color;
+    }
+  }
+}
+
+.post-tail-wrapper {
+  margin-top: 6rem;
+  border-bottom: 1px double var(--main-border-color);
+  font-size: 0.85rem;
+
+  .post-tail-bottom a {
+    color: inherit;
+  }
+
+  .license-wrapper {
+    line-height: 1.2rem;
+
+    > a {
+      color: var(--text-color);
+
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+
+    span:last-child {
+      font-size: 0.85rem;
+    }
+  } /* .license-wrapper */
+
+  .post-meta a:not(:hover) {
+    @extend %link-underline;
+  }
+
+  .share-wrapper {
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+
+    .share-icons {
+      font-size: 1.2rem;
+
+      > i {
+        position: relative;
+        bottom: 1px;
+
+        @extend %cursor-pointer;
+
+        &:hover {
+          @extend %btn-share-hovor;
+        }
+      }
+
+      a {
+        &:not(:last-child) {
+          margin-right: 0.25rem;
+        }
+
+        &:hover {
+          text-decoration: none;
+
+          >i {
+            @extend %btn-share-hovor;
+          }
+        }
+      }
+
+      .fab {
+        &.fa-twitter {
+          @include btn-sharing-color(rgba(29, 161, 242, 1));
+        }
+
+        &.fa-facebook-square {
+          @include btn-sharing-color(rgb(66, 95, 156));
+        }
+
+        &.fa-telegram {
+          @include btn-sharing-color(rgb(39, 159, 217));
+        }
+
+        &.fa-linkedin {
+          @include btn-sharing-color(rgb(0, 119, 181));
+        }
+
+        &.fa-weibo {
+          @include btn-sharing-color(rgb(229, 20, 43));
+        }
+      }
+    } /* .share-icons */
+
+    .fas.fa-link {
+      @include btn-sharing-color(rgb(171, 171, 171));
+    }
+  } /* .share-wrapper */
+}
+
+.post-tags {
+  line-height: 2rem;
+}
+
+.post-navigation {
+  padding-top: 3rem;
+  padding-bottom: 4rem;
+
+  .btn {
+    @include btn-post-nav;
+
+    color: var(--link-color);
+
+    &:hover {
+      background: #2a408e;
+      color: #ffffff;
+      border-color: #2a408e;
+    }
+
+    &.disabled {
+      @include btn-post-nav;
+
+      pointer-events: auto;
+      cursor: not-allowed;
+      background: none;
+      color: gray;
+
+      &:hover {
+        border-color: none;
+      }
+    }
+
+    &.btn-outline-primary.disabled:focus {
+      box-shadow: none;
+    }
+
+    &::before {
+      color: var(--text-muted-color);
+      font-size: 0.65rem;
+      text-transform: uppercase;
+      content: attr(prompt);
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      left: 0.5px;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      right: 0.5px;
+    }
+  }
+
+  p {
+    font-size: 1.1rem;
+    line-height: 1.5rem;
+    margin-top: 0.3rem;
+    white-space: normal;
+  }
+} /* .post-navigation */
+
+@-webkit-keyframes fade-up {
+  from {
+    opacity: 0;
+    position: relative;
+    top: 2rem;
+  }
+
+  to {
+    opacity: 1;
+    position: relative;
+    top: 0;
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    position: relative;
+    top: 2rem;
+  }
+
+  to {
+    opacity: 1;
+    position: relative;
+    top: 0;
+  }
+}
+
+#toc-wrapper {
+  border-left: 1px solid rgba(158, 158, 158, 0.17);
+  position: -webkit-sticky;
+  position: sticky;
+  top: 4rem;
+  transition: top 0.2s ease-in-out;
+  -webkit-animation: fade-up 0.8s;
+  animation: fade-up 0.8s;
+}
+
+#toc {
+  ul.nav.navbar-nav {
+    margin: 0.5rem 0;
+    padding: 0;
+
+    li {
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+  }
+}
+
+nav[data-toggle="toc"] {
+  .nav {
+    .nav > li > a.active {
+      font-weight: 600 !important;
+    }
+  }
+}
+
+/* --- Related Posts --- */
+
+#related-posts {
+  > h3 {
+    @include label(1.1rem, 600);
+  }
+
+  em {
+    @extend %normal-font-style;
+
+    color: var(--relate-post-date);
+  }
+
+  p {
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  .card {
+    border-color: var(--card-border-color);
+    background-color: var(--card-bg);
+    box-shadow: 0 0 5px 0 var(--card-box-shadow);
+    transition: all 0.3s ease-in-out;
+
+    h3 {
+      @extend %text-color;
+    }
+
+    &:hover {
+      -webkit-transform: translate3d(0, -3px, 0);
+      transform: translate3d(0, -3px, 0);
+      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+#tail-wrapper {
+  min-height: 2rem;
+
+  > div:last-of-type {
+    margin-bottom: 2rem;
+  }
+
+  #disqus_thread { /* stylelint-disable-line selector-id-pattern */
+    min-height: 8.5rem;
+  }
+}
+
+%btn-share-hovor {
+  color: var(--btn-share-hover-color) !important;
+}
+
+.share-label {
+  @include label(inherit, 400, inherit);
+
+  &::after {
+    content: ":";
+  }
+}
+
+@media all and (max-width: 576px) {
+  .preview-img[data-src] {
+    margin-top: 2.2rem;
+  }
+
+  .post-tail-bottom {
+    flex-wrap: wrap-reverse !important;
+
+    > div:first-child {
+      width: 100%;
+      margin-top: 1rem;
+    }
+  }
+}
+
+@media all and (max-width: 768px) {
+  .post-content > p > img {
+    max-width: calc(100% + 1rem);
+  }
+}
+
+/* Hide SideBar and TOC */
+@media all and (max-width: 849px) {
+  .post-navigation {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+  .preview-img[data-src] {
+    max-width: 100vw;
+    border-radius: 0;
+  }
+}

data/_sass/layout/tags.scss

@@ -0,0 +1,19 @@
+/*
+  Styles for Tab Tags
+*/
+
+.tag {
+  border-radius: 0.7em;
+  padding: 6px 8px 7px;
+  margin-right: 0.8rem;
+  line-height: 3rem;
+  letter-spacing: 0;
+  border: 1px solid var(--tag-border) !important;
+  box-shadow: 0 0 3px 0 var(--tag-shadow);
+
+  span {
+    margin-left: 0.6em;
+    font-size: 0.7em;
+    font-family: Oswald, sans-serif;
+  }
+}

data/_sass/variables-hook.scss

@@ -0,0 +1,3 @@
+/*
+  Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
+*/

data/assets/404.html

@@ -0,0 +1,14 @@
+---
+layout: page
+title: "404: Page not found"
+permalink: /404.html
+
+redirect_from:
+  - /norobots/
+  - /assets/
+  - /posts/
+---
+
+<div class="lead">
+  <p>{{site.data.locales[site.lang].not_found.statment }}</p>
+</div>

data/assets/css/style.scss

@@ -0,0 +1,12 @@
+---
+---
+
+/*
+  If the number of TAB files has changed, the following variable is required.
+  And it must be defined before `@import`.
+*/
+$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
+
+@import "{{ site.theme }}";
+
+/* append your custom style below */

data/assets/feed.xml

@@ -0,0 +1,61 @@
+---
+layout: compress
+permalink: /feed.xml
+# Atom Feed, reference: https://validator.w3.org/feed/docs/atom.html
+---
+
+{% capture source %}
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <id>{{ "/" | absolute_url }}</id>
+  <title>{{ site.title }}</title>
+  <subtitle>{{ site.description }}</subtitle>
+  <updated>{{ site.time | date_to_xmlschema }}</updated>
+  <author>
+    <name>{{ site.social.name }}</name>
+    <uri>{{ "/" | absolute_url }}</uri>
+  </author>
+  <link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
+  <link rel="alternate" type="text/html" hreflang="{{ site.alt_lang | default: site.lang }}"
+    href="{{ '/' | absolute_url }}"/>
+  <generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
+  <rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>
+  <icon>{{ site.baseurl }}/assets/img/favicons/favicon.ico</icon>
+  <logo>{{ site.baseurl }}/assets/img/favicons/favicon-96x96.png</logo>
+
+{% for post in site.posts limit: 5 %}
+  {% assign post_absolute_url = post.url | absolute_url %}
+  <entry>
+    <title>{{ post.title }}</title>
+    <link href="{{ post_absolute_url }}" rel="alternate" type="text/html" title="{{ post.title }}" />
+    <published>{{ post.date | date_to_xmlschema }}</published>
+  {% if post.last_modified_at %}
+    <updated>{{ post.last_modified_at | date_to_xmlschema }}</updated>
+  {% else %}
+    <updated>{{ post.date | date_to_xmlschema }}</updated>
+  {% endif %}
+    <id>{{ post_absolute_url }}</id>
+    <content src="{{ post_absolute_url }}" />
+    <author>
+      <name>{{ post.author | default: site.social.name }}</name>
+    </author>
+
+  {% if post.categories %}
+    {% for category in post.categories %}
+    <category term="{{ category }}" />
+    {% endfor %}
+  {% endif %}
+
+  {% if post.summary %}
+    <summary>{{ post.summary | strip }}</summary>
+  {% else %}
+    <summary>
+      {% include no-linenos.html content=post.content %}
+      {{ content  | strip_html | truncate: 400 }}
+    </summary>
+  {% endif %}
+
+  </entry>
+{% endfor %}
+</feed>
+{% endcapture %}
+{{ source | replace: '&', '&amp;' }}

data/assets/img/favicons/browserconfig.xml

@@ -0,0 +1,13 @@
+---
+layout: compress
+---
+
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="{{ '/assets/img/favicons/mstile-150x150.png' | relative_url }}" />
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>