mindark 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2537fbe909c6a2b0b9fc387d1b5701bfd8374c6f10624adb351035e982601b89
-  data.tar.gz: 4074081ad333e3ea8f72a1f7b3fa7f32cdcf8f5762bd8c6e484f28c98e4850a4
+  metadata.gz: aa0452242e6b6bc0b82f8f9340109ebfe0f007d9ca81be7f74fd98f093f5532b
+  data.tar.gz: b434a6df8b2e6546dadedb8bff1350584fea6021cd166ec7808e67371abeef1e
 SHA512:
-  metadata.gz: ee98568bfebd3e30da98d9802de4f2e9e7caaa804055c37b726341efaa4b42c6f0c5fae1ded5ca404c3235dfc902e05353374495209605186c8d899770321fcf
-  data.tar.gz: fe6fda55592a22dcded35c1f1c901c65f34e58d5200aa7138af4895607fc89c4b1792186b341716220ecbb8aff50421318997c08c3954a1e0e4f998294056371
+  metadata.gz: 9b70975157ba579ff68908ee0be814ea76acf4b9b5f0db92aa1ee14b988f8213a768c1048274a825e7573c3d3d0bb634a62f583e0519f3d9d8dce27af64f535e
+  data.tar.gz: 396892a3e5aba68516d185a2c9317b9974049b22944f9dc1affb2ce26d3b9d6fe7170941caf8f6a5bdb987e6d67c97f9912ef589be45b710d4ef17d634010c34

data/_includes/articles.html

@@ -1,25 +1,29 @@
-<h2 class="home section-name categories text-center">Articles</h2>
-<section class="articles">
-  {%- assign column = 3 -%}
-  {%- assign maxIndex = column | minus: 1 -%}
-  {%- for index in (0..maxIndex) -%}
-    <div class="column">
-      {%- for post in site.posts -%}
-      {%- assign mod = forloop.index0 | modulo: column -%}
-        {%- if mod == index -%}
-          <article class="preview">
-            <div class="thumbnail">
-              <a class="post-link" href="{{ post.url | relative_url }}">
-                <img src="{{ post.image | relative_url }}">
-              </a>
-            </div>
-            <a class="post-link" href="{{ post.url | relative_url }}">
-              <h2 class="title">{{ post.title }}</h2>
-            </a>
-            <p class="description">{{ post.excerpt }}</p>
-          </article>
-        {%- endif -%}
+<section id="articles">
+  <h2 class="text-center">Articles</h2>
+  <div class="container">
+    <div class="articles">
+      {%- assign column = 3 -%}
+      {%- assign maxIndex = column | minus: 1 -%}
+      {%- for index in (0..maxIndex) -%}
+        <div class="column">
+          {%- for post in site.posts -%}
+          {%- assign mod = forloop.index0 | modulo: column -%}
+            {%- if mod == index -%}
+              <article class="preview">
+                <div class="thumbnail">
+                  <a class="post-link" href="{{ post.url | relative_url }}">
+                    <img src="{{ post.image | relative_url }}">
+                  </a>
+                </div>
+                <a class="post-link" href="{{ post.url | relative_url }}">
+                  <h2 class="title">{{ post.title }}</h2>
+                </a>
+                <p class="description">{{ post.excerpt }}</p>
+              </article>
+            {%- endif -%}
+          {%- endfor -%}
+        </div>
       {%- endfor -%}
     </div>
-  {%- endfor -%}
+  </div>
 </section>

data/_includes/font.html

@@ -1,2 +1,2 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

data/_includes/head.html

@@ -7,8 +7,8 @@
   {%- feed_meta -%}
   {%- include icon.html -%}
   {%- include font.html -%}
-  <link rel="stylesheet" href="{{ "/assets/css/mindark.css" | relative_url }}">
-  <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/css/mindark.css?v=0.1.1" | relative_url }}">
+  {%- include style.html -%}
   {%- if jekyll.environment == 'production' and site.analytics -%}
     {%- include analytics.html -%}
   {%- endif -%}

data/_layouts/home.html

@@ -2,6 +2,4 @@
 layout: default
 ---
 
-<div class="container">
-  {%- include articles.html -%}
-</div>
+{%- include articles.html -%}

data/_layouts/post.html

@@ -2,12 +2,12 @@
 layout: default
 ---
 
-<div class="container post">
-  <article>
+<article>
+  <div class="container post">
     <h1 class="title">{{ page.title }}</h1>
     <h6 class="author">
       {% if page.author %}
-        Writen by <span class="author-name">{{ page.author }}</span> —
+        Writen by <span class="author-name">{{ page.author }}</span> <span class="author-separator">—</span>
       {% endif %}
       <span class="publish-date">{{ page.date | date: "%B %-d, %Y" }}</span>
     </h6>
@@ -15,5 +15,5 @@ layout: default
       <img class="poster" src="{{ page.poster | relative_url }}">
     {% endif %}
     {{ content }}
-  </article>
-</div>
+  </div>
+</article>

data/_sass/_variables.scss

@@ -9,7 +9,7 @@ $code-background-color: #171b20;
 $border-color: #212529;
 
 $min-body-width: 320px;
-$container-max-width: 1080px;
+$medium-breakpoint: 768px;
 $post-width: 860px;
 $spacing: 30px;
 $font-size: 18px;
@@ -17,5 +17,5 @@ $font-weight-normal: 400;
 $font-weight-bold: 600;
 
 $font-family: 'Inter', sans-serif;
-$font-family-italic: 'Montserrat', sans-serif;
+$font-family-italic: 'Raleway', sans-serif;
 $font-monospace: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

data/_sass/base.scss

@@ -1,8 +1,8 @@
 $margin-bottom: $spacing * 4 / 5;
 
 html {
-  background-color: $background-color;
   color: $text-color;
+  background-color: $background-color;
   font-family: $font-family;
   font-size: $font-size;
   font-weight: $font-weight-normal;
@@ -16,6 +16,8 @@ body {
   margin: 0;
   padding: 0;
   min-width: $min-body-width;
+  color: $text-color;
+  background-color: $background-color;
 }
 
 h1, h2, h3, h4, h5, h6, ul, ol, p, blockquote, pre {
@@ -86,7 +88,7 @@ p {
   + h1 {
     margin-top: $spacing * 2.25;
   }
-  
+
   + h2 {
     margin-top: $spacing * 1.75;
   }
@@ -103,12 +105,20 @@ em {
   font-family: $font-family-italic;
 }
 
+section {
+  margin-top: $spacing * 2;
+  @media screen and (max-width: $medium-breakpoint - 1) {
+    margin-top: $spacing;
+  }
+}
+
 blockquote {
   position: relative;
   padding-left: $spacing / 1.25;
   margin-bottom: $spacing * 2 / 3;
   font-style: italic;
   font-family: $font-family-italic;
+  letter-spacing: 0.5px;
 
   &:before {
     content: " ";
@@ -125,7 +135,7 @@ blockquote {
     &:first-child::first-letter {
       font-size: 1.5 * $font-size;
     }
-    
+
     margin-bottom: 0px;
 
     > code::first-letter {
@@ -136,7 +146,7 @@ blockquote {
 
 ul {
   padding-left: $spacing * 2 / 3;
-  
+
   li {
     margin-bottom: $margin-bottom / 1.5;
     line-height: $font-size * 1.5;
@@ -146,7 +156,7 @@ ul {
       line-height: initial;
     }
   }
-  
+
   ol, ul {
     margin-top: $margin-bottom / 1.5;
   }
@@ -154,17 +164,17 @@ ul {
 
 ol {
   padding-left: 26px;
-  
+
   li {
     margin-bottom: $margin-bottom / 1.5;
     line-height: $font-size * 1.5;
-    
+
     p {
       margin: 0;
       line-height: initial;
     }
   }
-  
+
   ol, ul {
     margin-top: $margin-bottom / 1.5;
   }
@@ -174,7 +184,7 @@ pre {
   padding: $spacing / 3 $spacing / 2;
   font-family: $font-monospace;
   font-size: $font-size - 3;
-  font-variant-ligatures: common-ligatures; 
+  font-variant-ligatures: common-ligatures;
   line-height: round(($font-size - 2) * 1.6);
   background-color: $code-background-color;
   margin-bottom: $spacing / 2;
@@ -202,15 +212,15 @@ table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: $margin-bottom;
-  
+
   td, th {
     border: 1px solid $border-color;
   }
-  
+
   td {
     padding: ($spacing / 2.5) ($spacing / 1.5);
   }
-  
+
   th {
     color: $text-bright-color;
     font-weight: $font-weight-bold;
@@ -234,12 +244,6 @@ a {
   }
 }
 
-img {
-  max-width: 100%;
-  display: block;
-  margin: auto;
-}
-
 ::selection {
   background-color: rgba($accent-color, 0.2)
   // background-color: #b6c253;

data/_sass/elements.scss

@@ -18,13 +18,11 @@
 }
 
 .container {
-  max-width: $container-max-width;
-  padding: $spacing;
+  max-width: 100%;
   margin: auto;
-
-  @media (min-width: $container-max-width + $spacing * 2) {
-    padding-left: 0px;
-    padding-right: 0px;
+  padding: $spacing / 2;
+  @media screen and (min-width: 1200px) {
+    max-width: 1140px;
   }
 }
 
@@ -42,65 +40,76 @@
 }
 
 header {
-  position: fixed;
+  position: sticky;
+  top: 0px;
   width: 100%;
   background-color: rgba($background-color, 0.9);
   border-bottom: 1px solid $border-color;
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   z-index: 100;
-  
+
   .wrapper {
     display: flex;
     justify-content: center;
   }
-  
+
   img {
     padding: $spacing / 2 $spacing * 2 / 3;
   }
 }
 
-main {
-  padding-top: 80px;
-}
-
 .container.post {
-  margin-top: 40px;
+  margin-top: $spacing * 4 / 3;;
   max-width: $post-width;
   margin-left: auto;
   margin-right: auto;
 }
 
-.post {
-  article {
+article {
+  .post {
     .title {
       font-size: $font-size * 3;
       text-align: center;
       margin-bottom: $spacing / 2;
       word-wrap: break-word;
+      @media screen and (max-width: $medium-breakpoint - 1) {
+        font-size: $font-size * 2.25;
+      }
     }
 
     .author {
       color: $text-color;
       text-align: center;
       margin-bottom: $spacing * 2;
-      
+
       &-name {
         color: $accent-color;
       }
+
+      &-separator {
+        @media screen and (max-width: $medium-breakpoint - 1) {
+          display: none;
+        }
+      }
     }
 
     .publish-date {
       font-size: $font-size;
+      @media screen and (max-width: $medium-breakpoint - 1) {
+        display: block;
+      }
     }
 
     .poster {
-      width: 130%;
-      max-width: 130%;
-      margin-left: -15%;
+      width: 100%;
       margin-bottom: $spacing * 2;
       border-radius: 2px;
       box-shadow: 0px 10px 10px rgba(black, 0.3);
+      @media screen and (min-width: 1040px) {
+        min-width: 120%;
+        margin-left: -10%;
+      }
     }
 
     > p:first-of-type::first-letter {
@@ -111,6 +120,9 @@ main {
     }
 
     img {
+      max-width: 100%;
+      display: block;
+      margin: auto;
       border-radius: 2px;
     }
   }
@@ -119,7 +131,7 @@ main {
 footer {
   font-size: $font-size * 0.8;
   border-top: 1px solid $border-color;
-  
+
   .wrapper {
     padding: $spacing $spacing / 2;
     text-align: center;
@@ -143,20 +155,14 @@ footer {
   }
 }
 
-.section-name:not(:first-child) {
-  margin-top: $spacing;
-}
-
 .articles {
   display: flex;
   flex-wrap: wrap;
-  margin-left: -$spacing / 2;
-  margin-right: -$spacing / 2;
 
   .column {
     width: 33.33%;
 
-    @media (max-width: 480px) {
+    @media screen and (max-width: $medium-breakpoint - 1) {
       width: 100%;
     }
   }
@@ -164,6 +170,9 @@ footer {
   article {
     padding: $spacing / 2;
     margin-bottom: $spacing * 4 / 5;
+    @media screen and (max-width: $medium-breakpoint - 1) {
+      padding: 0px;
+    }
 
     img {
       transition: all 0.3s;
@@ -172,11 +181,19 @@ footer {
       }
     }
 
+    .post-link {
+      display: block;
+    }
+
     .thumbnail {
       overflow: hidden;
       border-radius: 5px;
       box-shadow: 0px 10px 10px rgba(black, 0.15);
       background-color: #1b1e21;
+
+      img {
+        max-width: 100%;
+      }
     }
 
     .title {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mindark
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - thang-nm
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-23 00:00:00.000000000 Z
+date: 2020-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -69,6 +69,7 @@ files:
 - _includes/header.html
 - _includes/icon.html
 - _includes/meta.html
+- _includes/style.html
 - _layouts/default.html
 - _layouts/home.html
 - _layouts/post.html
@@ -79,7 +80,6 @@ files:
 - _sass/jetbrains-mono.scss
 - _sass/minidark.scss
 - assets/css/mindark.scss
-- assets/css/style.scss
 - assets/img/apple-touch-icon.png
 - assets/img/favicon.ico
 - assets/img/logo.svg

data/assets/css/style.scss

@@ -1,2 +0,0 @@
----
----