plainwhite 0.9 → 0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 28b440feebddd7fbecdf5288524b58efa92f2b3f
-  data.tar.gz: 060ba59223a9b45b4344335fc63416f8f6dc8bfe
+  metadata.gz: 2dfdda677a59b796b7aaa95f6d947ae0b70d2581
+  data.tar.gz: 79caa0d4ea9cf95107a074cdd612ecfb33de51e5
 SHA512:
-  metadata.gz: a379f046bbf73c72975eeab9cd8baf6a3e1887e27b20f36d7dc87397936e3a50806e9bcb24176ef44c911927e1ca6639ebcecb8436947d515151c8ebda5e22fe
-  data.tar.gz: ee93974bb5e85afa315ca9dbdd58ba23026eadade36bd135190153bee7f8e90284c623296a4007d602e178c931b2f3a9a65abccc6bc870708daf7ac0afee8964
+  metadata.gz: 5a5291a3136e70b507f4b55cfd7b0073abd68f41c831ff4663bd1cd74f8bf044874bb5b5ad9fdfd6f2f68bee8f386a775213563da8239b336083c5996f2236ae
+  data.tar.gz: 84653fd3f3161436d8919352bef8dbfef48e1212aeb200f3fe1460556b9ed630bb9332b9267253ec7a1f9091edf6825508abf20f3505742aaad6b3356af2de25

data/README.md

@@ -110,6 +110,19 @@ plainwhite:
       url: "/resume"
 ```
 
+**Dark mode**
+
+Dark mode can be enabled by setting the `dark_mode` flag in your `_config.yml`
+
+The website will check the OS preferred color scheme and set the theme accordingly, the preference will then be saved in a cookie
+
+```yaml
+plainwhite:
+  dark_mode: true
+```
+
+![plainwhite dark theme previe](/dark.png)
+
 **Multiline tagline**
 
 Tagline can be multiline in this way
@@ -137,6 +150,11 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
 When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
 To add a custom directory to your theme-gem, please edit the regexp in `plainwhite.gemspec` accordingly.
 
+## Donation
+If this project help you reduce time to develop, you can give me a cup of coffee :) 
+
+[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://paypal.me/thelehhman)
+
 ## License
 
 The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_layouts/default.html

@@ -33,8 +33,49 @@
               </li>
             </a>
           {%- endif -%}
+          {%- if site.plainwhite.social_links.instagram -%}
+            <a href="https://instagram.com/{{ site.plainwhite.social_links.instagram }}">
+              <li>
+                <i class="icon-instagram"></i>
+              </li>
+            </a>
+          {%- endif -%}
+          {%- if site.plainwhite.social_links.facebook -%}
+            <a href="https://facebook.com/{{ site.plainwhite.social_links.facebook }}">
+              <li>
+                <i class="icon-facebook"></i>
+              </li>
+            </a>
+          {%- endif -%}
+          {%- if site.plainwhite.social_links.youtube -%}
+            <a href="https://youtube.com/{{ site.plainwhite.social_links.youtube }}">
+              <li>
+                <i class="icon-youtube"></i>
+              </li>
+            </a>
+          {%- endif -%}
+          {%- if site.plainwhite.social_links.pinterest -%}
+            <a href="https://pinterest.com/{{ site.plainwhite.social_links.pinterest }}">
+              <li>
+                <i class="icon-pinterest"></i>
+              </li>
+            </a>
+          {%- endif -%}
+          {%- if site.plainwhite.social_links.dribbble -%}
+            <a href="https://dribbble.com/{{ site.plainwhite.social_links.dribbble }}">
+              <li>
+                <i class="icon-dribbble"></i>
+              </li>
+            </a>
+          {%- endif -%}
+          {%- if site.plainwhite.social_links.flickr -%}
+            <a href="https://flickr.com/{{ site.plainwhite.social_links.flickr }}">
+              <li>
+                <i class="icon-flickr"></i>
+              </li>
+            </a>
+          {%- endif -%}
         </ul>
-
         {%- if site.plainwhite.navigation -%}
           <nav class="navigation">
             <ul>
@@ -49,6 +90,18 @@
 
         <p>&copy;
           {{ "now" | date: "%Y" }}</p>
+          {%- if site.plainwhite.dark_mode -%}
+            <div>
+              <p>Dark Mode
+                <i class="icon-moon"></i>
+                <label class="switch"> 
+                  <input type="checkbox" id="dark-mode-toggle"> 
+                  <span class="slider round" onclick="toggleDarkMode()"></span>
+                </label>
+              </p>
+            </div>
+            <script type="text/javascript" src="/assets/js/darkmode.js"></script>
+          {%- endif -%}
       </section>
       <section class="content">
         {{ content }}

data/_layouts/home.html

@@ -21,14 +21,17 @@ layout: default
           <h2 class="post-title">{{ post.title | escape }}</h2>
         </a>
         <div class="post-meta">
+          <div class="post-date">
+            <i class="icon-calendar"></i>
+            {{ post.date | date: date_format }}
+          </div>
+          {%- if post.categories.size > 0-%}
           <ul class="post-categories">
             {%- for tag in post.categories -%}
-              <li>{{ tag }}</li>
+            <li>{{ tag }}</li>
             {%- endfor -%}
           </ul>
-          <div class="post-date">
-            <i class="icon-calendar"></i>
-            {{ post.date | date: date_format }}</div>
+          {%- endif -%}
         </div>
         <div class="post">
           {%- if site.show_excerpts -%}

data/_layouts/post.html

@@ -7,12 +7,14 @@ layout: default
     <h2 class="post-title">{{ page.title | escape }}</h2>
   </a>
   <div class="post-meta">
+    <div class="post-date"><i class="icon-calendar"></i>{{ page.date | date: date_format }}</div>
+    {%- if page.categories.size > 0 -%}
     <ul class="post-categories">
       {%- for tag in page.categories -%}
       <li>{{ tag }}</li>
       {%- endfor -%}
     </ul>
-    <div class="post-date"><i class="icon-calendar"></i>{{ page.date | date: date_format }}</div>
+    {%- endif -%}
   </div>
   <div class="post">
     {{ content }}

data/_sass/dark.scss

@@ -0,0 +1,51 @@
+.dark,
+.dark * {
+	$dark_text_color: #f6f6f6;
+	$dark_link_color: #4da3ff;
+	background-color: #171717;
+	color: $dark_text_color;
+	border-color: #e6e6e6;
+	
+	.social [class^="icon-"] {
+		color: $dark_text_color 
+	}
+
+	#posts-label {
+		color: $dark_text_color;
+		border-bottom: 1px solid #272727;
+	}
+
+	@import 'ext/solarized-dark';
+	.highlight, .highlight * 
+	{
+		background-color: #00080a;
+		color: #93a1a1;
+	}
+
+	div.highlight-dark {
+		padding: 5px 20px;
+	}
+	pre.highlight-dark, code {
+		font-family: 'Consolas', Menlo, monospace;
+		line-height: 1.4em;
+		tab-size: 4;
+	}
+
+	.post-categories {
+		li {
+			background-color: #333;
+			color: #fff;
+		}
+	}
+
+	a {
+		color: $dark_link_color;
+	}
+	#title a {
+		color: #fff;
+		&:hover {
+			color: $dark_link_color;
+		}
+	}
+
+}

data/_sass/ext/_fonts.scss

@@ -58,4 +58,10 @@
 .icon-calendar:before { content: '\e800'; } /* '' */
 .icon-github-circled:before { content: '\f09b'; } /* '' */
 .icon-twitter-squared:before { content: '\f304'; } /* '' */
-.icon-linkedin-squared:before { content: '\f30c'; } /* '' */
+.icon-linkedin-squared:before { content: '\f30c'; } /* '' */
+.icon-instagram:before { content: '\f16d'; } /* '' */
+.icon-facebook:before { content: '\f308'; } /* '' */
+.icon-youtube:before { content: '\f167'; } /* '' */
+.icon-dribbble:before { content: '\f17d'; } /* '' */
+.icon-flickr:before { content: '\f16e'; } /* '' */
+

data/_sass/ext/_solarized-dark.scss

@@ -0,0 +1,87 @@
+/* Solarized Dark 
+
+For use with Jekyll and Pygments
+
+http://ethanschoonover.com/solarized
+
+SOLARIZED HEX      ROLE
+--------- -------- ------------------------------------------
+base03    #002b36  background
+base01    #586e75  comments / secondary content
+base1     #93a1a1  body text / default code / primary content
+orange    #cb4b16  constants
+red       #dc322f  regex, special keywords
+blue      #268bd2  reserved keywords
+cyan      #2aa198  strings, numbers
+green     #859900  operators, other keywords
+*/
+
+.highlight { background-color: #002b36; color: #93a1a1 }
+.highlight .c { color: #586e75 } /* Comment */
+.highlight .err { color: #93a1a1 } /* Error */
+.highlight .g { color: #93a1a1 } /* Generic */
+.highlight .k { color: #859900 } /* Keyword */
+.highlight .l { color: #93a1a1 } /* Literal */
+.highlight .n { color: #93a1a1 } /* Name */
+.highlight .o { color: #859900 } /* Operator */
+.highlight .x { color: #cb4b16 } /* Other */
+.highlight .p { color: #93a1a1 } /* Punctuation */
+.highlight .cm { color: #586e75 } /* Comment.Multiline */
+.highlight .cp { color: #859900 } /* Comment.Preproc */
+.highlight .c1 { color: #586e75 } /* Comment.Single */
+.highlight .cs { color: #859900 } /* Comment.Special */
+.highlight .gd { color: #2aa198 } /* Generic.Deleted */
+.highlight .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #dc322f } /* Generic.Error */
+.highlight .gh { color: #cb4b16 } /* Generic.Heading */
+.highlight .gi { color: #859900 } /* Generic.Inserted */
+.highlight .go { color: #93a1a1 } /* Generic.Output */
+.highlight .gp { color: #93a1a1 } /* Generic.Prompt */
+.highlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #cb4b16 } /* Generic.Subheading */
+.highlight .gt { color: #93a1a1 } /* Generic.Traceback */
+.highlight .kc { color: #cb4b16 } /* Keyword.Constant */
+.highlight .kd { color: #268bd2 } /* Keyword.Declaration */
+.highlight .kn { color: #859900 } /* Keyword.Namespace */
+.highlight .kp { color: #859900 } /* Keyword.Pseudo */
+.highlight .kr { color: #268bd2 } /* Keyword.Reserved */
+.highlight .kt { color: #dc322f } /* Keyword.Type */
+.highlight .ld { color: #93a1a1 } /* Literal.Date */
+.highlight .m { color: #2aa198 } /* Literal.Number */
+.highlight .s { color: #2aa198 } /* Literal.String */
+.highlight .na { color: #93a1a1 } /* Name.Attribute */
+.highlight .nb { color: #B58900 } /* Name.Builtin */
+.highlight .nc { color: #268bd2 } /* Name.Class */
+.highlight .no { color: #cb4b16 } /* Name.Constant */
+.highlight .nd { color: #268bd2 } /* Name.Decorator */
+.highlight .ni { color: #cb4b16 } /* Name.Entity */
+.highlight .ne { color: #cb4b16 } /* Name.Exception */
+.highlight .nf { color: #268bd2 } /* Name.Function */
+.highlight .nl { color: #93a1a1 } /* Name.Label */
+.highlight .nn { color: #93a1a1 } /* Name.Namespace */
+.highlight .nx { color: #93a1a1 } /* Name.Other */
+.highlight .py { color: #93a1a1 } /* Name.Property */
+.highlight .nt { color: #268bd2 } /* Name.Tag */
+.highlight .nv { color: #268bd2 } /* Name.Variable */
+.highlight .ow { color: #859900 } /* Operator.Word */
+.highlight .w { color: #93a1a1 } /* Text.Whitespace */
+.highlight .mf { color: #2aa198 } /* Literal.Number.Float */
+.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
+.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
+.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
+.highlight .sb { color: #586e75 } /* Literal.String.Backtick */
+.highlight .sc { color: #2aa198 } /* Literal.String.Char */
+.highlight .sd { color: #93a1a1 } /* Literal.String.Doc */
+.highlight .s2 { color: #2aa198 } /* Literal.String.Double */
+.highlight .se { color: #cb4b16 } /* Literal.String.Escape */
+.highlight .sh { color: #93a1a1 } /* Literal.String.Heredoc */
+.highlight .si { color: #2aa198 } /* Literal.String.Interpol */
+.highlight .sx { color: #2aa198 } /* Literal.String.Other */
+.highlight .sr { color: #dc322f } /* Literal.String.Regex */
+.highlight .s1 { color: #2aa198 } /* Literal.String.Single */
+.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
+.highlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #268bd2 } /* Name.Variable.Class */
+.highlight .vg { color: #268bd2 } /* Name.Variable.Global */
+.highlight .vi { color: #268bd2 } /* Name.Variable.Instance */
+.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */

data/_sass/plain.scss

@@ -82,6 +82,7 @@ main {
     }
     @media screen and (min-width: $mobileW + 1) {
       position: fixed;
+      max-width: 285px;
     }
     min-width: $leftWidth;
     justify-content: center;
@@ -115,8 +116,13 @@ main {
   list-style-type: none;
   padding: 0;
   margin-top: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  a {
+    margin-bottom: .5em;
+  }
   li {
-    float: left;
     i {
       font-size: 34px;
     }
@@ -172,7 +178,6 @@ main {
       margin-top: 5px;
     }
     margin-right: 10px;
-    margin-bottom: 10px;
   }
 }
 .post-date {
@@ -184,11 +189,12 @@ main {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  min-height: 30px;
   @media screen and (max-width: $mobileW) {
-    flex-direction: column-reverse;
+    flex-direction: column;
     align-items: baseline;
     .post-date {
-      margin-bottom: 16px;
+      margin: 10px 0;
     }
   }
 }
@@ -199,6 +205,7 @@ main {
 .post-title {
   line-height: 1.2em;
   font-size: 28px;
+  margin-bottom: 10px;
 }
 .posts,
 .post-container {
@@ -221,6 +228,9 @@ main {
   font-weight: 300;
   color: #222;
   line-height: 1.9em;
+  p {
+    margin-top: 10px;
+  }
   a {
     color: $linkColor;
     text-decoration: none;

data/_sass/toggle.scss

@@ -0,0 +1,59 @@
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 17px;
+  }
+  
+  .switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 13px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  input:checked + .slider {
+    background-color: #002b36 }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+  }
+  
+  input:checked + .slider:before {
+    -webkit-transform: translateX(13px);
+    -ms-transform: translateX(13px);
+    transform: translateX(13px);
+  }
+  
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 17px;
+  }
+  
+  .slider.round:before {
+    border-radius: 50%;
+  }

data/assets/css/style.scss

@@ -1,4 +1,8 @@
 ---
 ---
 
-@import "plain";
+@import "plain";
+{%- if site.plainwhite.dark_mode -%}
+  @import "toggle";
+  @import "dark";
+{%- endif -%}

data/assets/font/fontello-config.json

@@ -0,0 +1,70 @@
+{
+  "name": "",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "531bc468eecbb8867d822f1c11f1e039",
+      "css": "calendar",
+      "code": 59392,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "0f6a2573a7b6df911ed199bb63717e27",
+      "css": "github-circled",
+      "code": 61595,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "906348dc798a0d42715cc97c875e3ac6",
+      "css": "twitter-squared",
+      "code": 62212,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "1145676a91138011729fa2909997af66",
+      "css": "linkedin-squared",
+      "code": 62220,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "4743b088aa95d6f3b6b990e770d3b647",
+      "css": "facebook-squared",
+      "code": 62216,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "4c1ef492f1d2c39a2250ae457cee2a6e",
+      "css": "instagram",
+      "code": 61805,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "a9862b9d5197886c1ad693ecd7120b31",
+      "css": "youtube",
+      "code": 61799,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "199c44bca402ec5a6351f75ba5228375",
+      "css": "dribbble",
+      "code": 61821,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "79689c4c425b7cdaa2746f510e81e27a",
+      "css": "pinterest-squared",
+      "code": 61651,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "649004fb1ed50395a33c3780236ba8aa",
+      "css": "flickr",
+      "code": 61806,
+      "src": "fontawesome"
+    }
+  ]
+}

data/assets/font/fontello.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2020 by original authors @ fontello.com</metadata>
 <defs>
 <font id="fontello" horiz-adv-x="1000" >
 <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@@ -10,8 +10,20 @@
 
 <glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="pinterest-squared" unicode="&#xf0d3;" d="M696 779q67 0 114-48t47-113v-536q0-66-47-113t-114-48h-404q47 68 60 118 5 19 30 116 11-21 41-37t63-16q101 0 164 83t64 208q0 47-19 91t-54 77-85 54-110 21q-58 0-109-16t-85-43-60-61-37-71-12-74q0-57 22-101t65-61q7-3 13 0t8 10q6 25 9 35 3 12-7 23-28 35-28 84 0 83 58 143t151 59q83 0 130-45t47-117q0-94-38-160t-97-66q-33 0-54 25t-13 57q5 19 15 52t16 57 6 42q0 27-14 45t-42 18q-34 0-58-31t-24-78q0-40 13-68l-54-231q-14-56-4-142h-102q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="youtube" unicode="&#xf167;" d="M542 156v-118q0-37-22-37-13 0-25 12v168q12 12 25 12 22 0 22-37z m189-1v-25h-51v25q0 38 25 38t26-38z m-540 122h60v52h-174v-52h59v-318h55v318z m161-318h50v276h-50v-211q-17-23-32-23-10 0-11 11-1 2-1 20v203h-50v-218q0-28 5-41 7-21 32-21 27 0 57 34v-30z m240 83v110q0 41-5 55-10 31-40 31-28 0-52-30v121h-50v-370h50v27q25-31 52-31 30 0 40 31 5 15 5 56z m188 6v7h-51q0-29-1-34-4-20-22-20-26 0-26 38v49h100v57q0 44-15 65-22 28-59 28-38 0-60-28-15-21-15-65v-96q0-44 16-65 22-29 60-29 40 0 60 30 10 15 12 30 1 5 1 33z m-339 509v117q0 39-24 39t-24-39v-117q0-39 24-39t24 39z m401-419q0-131-14-195-8-33-33-56t-57-25q-102-12-309-12t-310 12q-32 3-57 25t-32 56q-15 62-15 195 0 131 15 195 7 33 32 56t57 26q103 11 310 11t309-11q33-4 58-26t32-56q14-62 14-195z m-557 712h57l-67-223v-151h-56v151q-8 42-34 119-21 57-37 104h60l39-147z m207-186v-97q0-46-16-66-21-29-59-29-37 0-59 29-15 21-15 66v97q0 45 15 66 22 28 59 28 38 0 59-28 16-21 16-66z m187 91v-279h-51v31q-30-35-58-35-25 0-33 21-4 13-4 42v220h51v-205q0-19 0-20 2-12 12-12 15 0 32 24v213h51z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="instagram" unicode="&#xf16d;" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m77 0q0-91-64-156t-155-64-156 64-64 156 64 156 156 64 155-64 64-156z m61 229q0-21-15-36t-37-15-36 15-15 36 15 36 36 15 37-15 15-36z m-280 123q-4 0-43 0t-59 0-54-2-57-5-40-11q-28-11-49-32t-33-49q-6-16-10-40t-6-58-1-53 0-59 0-43 0-43 0-59 1-53 6-58 10-40q12-28 33-49t49-32q16-6 40-11t57-5 54-2 59 0 43 0 42 0 59 0 54 2 58 5 39 11q28 11 50 32t32 49q6 16 10 40t6 58 1 53 0 59 0 43 0 43 0 59-1 53-6 58-10 40q-11 28-32 49t-50 32q-16 6-39 11t-58 5-54 2-59 0-42 0z m428-352q0-128-3-177-5-116-69-180t-179-69q-50-3-177-3t-177 3q-116 6-180 69t-69 180q-3 49-3 177t3 177q5 116 69 180t180 69q49 3 177 3t177-3q116-6 179-69t69-180q3-49 3-177z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="flickr" unicode="&#xf16e;" d="M696 779q67 0 114-48t47-113v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535z m-306-429q0 49-35 84t-84 34-83-34-35-84 35-84 83-34 84 34 35 84z m314 0q0 49-34 84t-84 34-84-34-34-84 34-84 84-34 84 34 34 84z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="dribbble" unicode="&#xf17d;" d="M571 13q-23 134-78 278h-1l-1-1q-9-3-24-9t-56-27-77-46-73-64-57-82l-9 6q103-84 234-84 73 0 142 29z m-103 339q-11 27-29 62-174-52-376-52 0-4 0-12 0-69 24-132t69-112q28 49 69 93t80 69 73 45 55 27l21 7q2 1 7 2t7 3z m-59 118q-67 119-137 211-77-36-130-104t-72-152q169 0 339 45z m381-178q-117 33-228 16 49-133 71-262 62 42 104 106t53 140z m-449 414q-1 0-1-1 0 1 1 1z m329-81q-103 91-241 91-43 0-87-10 73-95 137-214 39 15 73 34t54 34 36 32 21 23z m125-271q-2 129-83 229l-1-1q-5-7-11-13t-24-25-40-34-55-36-74-36q14-30 25-53 1-3 3-10t5-9q20 2 41 4t41 1 39-1 35-2 32-3 27-4 20-3 14-3z m62-4q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="twitter-squared" unicode="&#xf304;" d="M714 510q-31-14-67-19 38 22 52 65-37-21-75-28-34 36-85 36-49 0-83-34t-35-83q0-16 3-27-72 4-135 37t-107 86q-16-28-16-59 0-64 51-98-27 1-56 15v-1q0-42 28-75t68-40q-16-5-28-5-7 0-22 3 12-36 42-59t67-23q-64-50-145-50-15 0-28 2 82-53 180-53 62 0 117 20t94 53 67 76 42 91 13 94q0 10 0 15 35 25 58 61z m143 108v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="facebook-squared" unicode="&#xf308;" d="M696 779q67 0 114-48t47-113v-536q0-66-47-113t-114-48h-104v333h111l16 129h-127v83q0 31 13 46t51 16l68 1v115q-35 5-100 5-75 0-121-44t-45-127v-95h-112v-129h112v-333h-297q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="linkedin-squared" unicode="&#xf30c;" d="M132 61h129v387h-129v-387z m138 507q-1 29-21 48t-51 19-53-19-21-48q0-29 20-48t52-19h0q33 0 53 19t21 48z m326-507h129v222q0 86-41 130t-107 44q-76 0-117-65h1v56h-129q2-37 0-387h129v217q0 21 4 31 8 19 25 33t41 14q65 0 65-88v-207z m261 557v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
 </font>
 </defs>

data/assets/js/darkmode.js

@@ -0,0 +1,33 @@
+function toggleDarkMode() {
+    const DARK_CLASS = 'dark';
+
+    var body = document.querySelector("body");
+    if (body.classList.contains(DARK_CLASS)) {
+        setCookie('theme', 'light');
+        body.classList.remove(DARK_CLASS);
+    } else {
+        setCookie('theme', 'dark');
+        body.classList.add(DARK_CLASS);
+    }
+}
+
+function getCookie(name) {
+    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
+    return v ? v[2] : null;
+}
+function setCookie(name, value, days) {
+    var d = new Date;
+    d.setTime(d.getTime() + 24*60*60*1000*days);
+    document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
+}
+
+function deleteCookie(name) { setCookie(name, '', -1); }
+
+
+const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+var theme = getCookie('theme');
+if ( (theme === null && userPrefersDark) || theme === 'dark') {
+    var toggleInput = document.querySelector('#dark-mode-toggle');
+    toggleInput.checked = true;
+    toggleDarkMode();
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plainwhite
 version: !ruby/object:Gem::Version
-  version: '0.9'
+  version: '0.10'
 platform: ruby
 authors:
 - Samarjeet
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-01-11 00:00:00.000000000 Z
+date: 2020-05-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -82,17 +82,22 @@ files:
 - _layouts/page.html
 - _layouts/post.html
 - _sass/_syntax.scss
+- _sass/dark.scss
 - _sass/ext/_fonts.scss
 - _sass/ext/_normalize.scss
+- _sass/ext/_solarized-dark.scss
 - _sass/ext/_solarized-light.scss
 - _sass/plain.scss
+- _sass/toggle.scss
 - assets/.DS_Store
 - assets/css/style.scss
+- assets/font/fontello-config.json
 - assets/font/fontello.eot
 - assets/font/fontello.svg
 - assets/font/fontello.ttf
 - assets/font/fontello.woff
 - assets/font/fontello.woff2
+- assets/js/darkmode.js
 - assets/portfolio.png
 - sitemap.xml
 homepage: https://thelehhman.com/