materialize-jekyll 1.1.0 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 4c1e359bec60af2be8404d49a12db6ddf4f935da
-  data.tar.gz: 0bfa50bfe5dfe27bf1715d0c0b08b74d63484feb
+SHA256:
+  metadata.gz: e97d851dd33e6e3c75a68ffac6d8c2f1086336badd0b3ecf50d30375ba0f9dc4
+  data.tar.gz: '0071028f3ee258eb9c3462eefb4c9965a2ede8e18e7dc3cae3cbde6de3c0ad16'
 SHA512:
-  metadata.gz: baadfcc0e2039804995ba933dd7b59b507d5a89aebf84c32f8cb40f5097682aa118a7f6b3c73aebc53fa96bb5fb0b059a41f857cdcb8f00f6cd9cc4eed332306
-  data.tar.gz: 03a821b6fac6bebd3b17f2137e599c3c8bfab2dea0d7e139ada3e98e64067ebd292c36e7bb40c5750259726ba5709768b4834999bfa7151ff444e11a40319f79
+  metadata.gz: eb9b4c2d48201f484a89f89244308a814272d5d1758353ea38ab21c17d936787b4c956107f58df873e48d5eb7e4ae87fdabddfc9226dea8100aebdf4785af193
+  data.tar.gz: 9c8985fe51690da77655c683534bd84ddad359a252c6778d6fcc4ea6e70e9bb2ab1d00007c08663ce5dfc066d0c91f6c18b180e87df322b8d6033d2a878ee814

data/_includes/author.html

@@ -4,7 +4,7 @@
       <img itemprop="image" src="{{site.profile_img_url}}" alt="{{site.name}}" class="circle author-img responsive-img">
     </div>
     <div class="col s12 m7 author-info">
-      <h5 class="">Autor</h5>
+      <h5 class="">Author</h5>
       <h3 class="white-text author-name">{{ site.name }}</h3>
       <p class="white-text author-description">{{ site.user_description }}</p>
       <div class="contact-info">

data/_includes/footer.html

@@ -10,10 +10,11 @@
     </footer>
   <!--  Scripts-->
   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
 	<script src="{{ "/assets/js/vendor/masonry.pkgd.min.js" | prepend: site.baseurl }}"></script>
   <script src="{{ "/assets/js/init.js" | prepend: site.baseurl }}"></script>
+  <script src="{{ "/assets/js/mode-switcher.js" | prepend: site.baseurl }}"></script>
   {% include stats.html %}
  </body>
 </html>

data/_includes/header.html

@@ -9,7 +9,7 @@
 		 <!-- CSS  -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 
     <link href="{{ "/assets/css/main.css" | prepend: site.baseurl }}" type="text/css" rel="stylesheet" media="screen,projection"/>
   </head>

data/_includes/minutes-to-read.html

@@ -1,7 +1,7 @@
 {% assign words = content | number_of_words %}
 
 {% if words < 360 %}
-  {% assign minutesText = '1 min de leitura' %}
+  {% assign minutesText = '1 min.' %}
 {% else %}
-  {% assign minutesText = words | divided_by:180 | append: ' mins de leitura' %}
+  {% assign minutesText = words | divided_by:180 | append: ' mins.' %}
 {% endif %}

data/_includes/navbar.html

@@ -1,9 +1,8 @@
-
 <div class="navbar-fixed">
   <nav class="z-depth-5" role="navigation">
     <div class="nav-wrapper main-nav">
-      <a href="#" class="brand-logo">&lt;/&gt; {{ site.username  }}</a>
-      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
+      <a href="#" class="brand-logo center">&lt;/&gt; {{ site.username  }}</a>
+      <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
       <ul class="right hide-on-med-and-down">
 				{% for link in site.links %}
           {% if link.external %}
@@ -13,16 +12,20 @@
           {% endif  %}
         {% endfor %}
       </ul>
-
-      <ul class="side-nav" id="nav-mobile" >
-				{% for link in site.links %}
-          {% if link.external %}
-            <li><a href="{{ link.url }}">{{ link.title }}</a></li>
-          {% else %}
-            <li><a href="{{ site.url }}{{ site.baseurl }}{{ link.url }}">{{ link.title }}</a></li>
-          {% endif  %}
-        {% endfor %}
-      </ul>
     </div>
   </nav>
 </div>
+
+
+<ul class="sidenav" id="nav-mobile" >
+  {% for link in site.links %}
+  {% if link.external %}
+  <li><a href="{{ link.url }}">{{ link.title }}</a></li>
+  {% else %}
+  <li><a href="{{ site.url }}{{ site.baseurl }}{{ link.url }}">{{ link.title }}</a></li>
+  {% endif  %}
+  {% endfor %}
+</ul>
+
+
+<a id="theme-toggle" class="" onclick="modeSwitcher()"></a>

data/_includes/share.html

@@ -1,7 +1,7 @@
 <section class="row share">
   <div class="col s12 valign-wrapper center-align">
     <div class="col s10 offset-s1">
-      <p class="share-header">Compartilhe</p>
+      <p class="share-header">{{ page.share_text }}</p>
       <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}" class="btn-floating btn-large waves-effect waves-light fb-color" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;" title="Compartilhar no Facebook">
         <div class="fb-btn btn-white ">
         </div>

data/_layouts/home.html

@@ -8,11 +8,13 @@ layout: default
       <div id="masonry-grid" class="row">
         {% for post in site.posts %}
           <div class="col s12 m6 l4 card-wrapper">
-            <div class="card hoverable">
+            <div class="card card-hoverable">
               {% if post.image  %}
-                <div class="card-image">
-                  <img src="{{ post.image }}">
-                </div>
+                <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
+                  <div class="card-image">
+                    <img src="{{ post.image }}">
+                  </div>
+                </a>
 
                 <div class="btn-menu" style="padding:0px">
                   <div class="fixed-action-btn horizontal click-to-toggle" style="position:relative; float:right; bottom:30px; right:10px; z-index: 1">
@@ -36,10 +38,12 @@ layout: default
 
               {% endif %}
               <div class="card-content">
-                <span class="grey-text text-lighten-1">{% include date.html date=post.date %}</span>
-                <a class="post-link" href="{{ post.url | prepend: site.baseurl }}"><span class="flow-text card-title"><b>{{ post.title }}</b></span></a>
                 <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
-                  <p class="post-description">{{ post.description }}</p>
+                  <div>
+                    <span class="grey-text text-lighten-1">{% include date.html date=post.date %}</span>
+                    <span class="flow-text card-title"><b>{{ post.title }}</b></span>
+                    <p class="post-description">{{ post.description }}</p>
+                  </div>
                 </a>
                 <br>
                 <div class="tags">
@@ -48,11 +52,6 @@ layout: default
                   {% endfor  %}
                 </div>
               </div>
-              <div class="card-action">
-                <div class="center-align">
-                  <a href="{{ post.url | prepend: site.baseurl }}" class="read-more">Read More</a>
-                </div>
-              </div>
             </div>
           </div>
         {% endfor %}

data/_layouts/post.html

@@ -5,30 +5,25 @@ layout: default
 
 <header id="top-bar" class="main-top"></header>
 <div class="container container-main">
-	<div class="post content">
-		<div class="row">
-			<div class="col s12 m12">
+  <div class="post content">
+    <div class="row">
+      <div class="col s12 m12">
         <div class="col s10 offset-s1" >
-          <div class="col s12 m5 l5 xl4">
-            <p class="grey-text text-lighten-1 valign-wrapper">
-              <i class="material-icons">today </i> &nbsp; {% include date.html date=page.date %}
-            </p>
+          <h2 class="post-title col s12 center-align">{{ page.title }}</h2>
+          <div class="col s12">
+            <div class="grey-text text-lighten-1 center-align valign post-specs">
+              <i class="material-icons">today </i> {% include date.html date=page.date %}  &nbsp; — &nbsp;<i class="material-icons">access_time </i> {{ minutesText }} {{ page.reading_time }}
+            </div>
           </div>
-          <div class="col s12 m7 l7 xl8">
-            <p class="grey-text text-lighten-1 valign-wrapper">
-              <i class="material-icons">access_time </i> &nbsp;{{ minutesText }}
-            </p>
-          </div>
-					<h2 class="post-title col s12">{{ page.title }}</h2>
-					<p class="flow-text grey-text text-lighten-1 col s12">{{ page.introduction }}</p>
-					<img class="center-align" style="width: 100%;" src="{{ page.image }}">
-					{{ content }}
-				</div>
-			</div>
-		</div>
-		{% include share.html %}
-		{% include author.html %}
-	</div>
+          <p class="flow-text grey-text text-lighten-1 col s12">{{ page.introduction }}</p>
+          <img class="center-align" style="width: 100%;" src="{{ page.image }}">
+          {{ content }}
+        </div>
+      </div>
+    </div>
+    {% include share.html %}
+    {% include author.html %}
+  </div>
 </div>
 
 {% include comments.html %}

data/_sass/_author.scss

@@ -1,5 +1,5 @@
 .author {
-  background-color: $lighterMainColor;
+  background-color: var(--ligther-main-color);
 }
 .author-img-wrapper {
   margin: 25px 0;

data/_sass/_cards.scss

@@ -2,44 +2,65 @@
   color: rgba(0, 0, 0, 0.87);
 }
 
-.hoverable {
-  overflow: hidden;
-}
+.card-hoverable {
+  position: relative; /* For positioning the pseudo-element */
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
 
-.hoverable:hover {
-  transition: box-shadow .25s;
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 0 0 0 rgba(0, 0, 0, 0);
+  .post-link-hidden {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 }
 
-.hoverable:hover .card-image img {
-  -webkit-transform: scale(1.08);
-  transform: scale(1.08);
+.card-hoverable::before {
+  /* Position the pseudo-element. */
+  content: ' ';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  /* Create the box shadow at expanded size. */
+  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5);
+
+  /* Hidden by default. */
+  opacity: 0;
+  transition: opacity 500ms;
 }
 
-.card-image img {
-  -webkit-transition: 0.4s ease;
-  transition: 0.4s ease;
+.card-hoverable:hover::before {
+  /* Show the pseudo-element on hover. */
+  cursor: pointer;
+  opacity: 1;
 }
 
-.btm-menu {
-  .btn-floating {
-    background-color: $secondaryColor;
-  }
+.btn-floating {
+  background-color: var(--secondary-color);
 }
+
 .nested-btn {
   width: 36px !important;
   height: 22px !important;
   margin-top: 8px;
 }
 
-.post-description {
-  color: rgba(0, 0, 0, 0.87) !important;
+a.post-link {
+  text-decoration: none;
+  position: relative;
 }
 
-.read-more {
-  color: $mainColor !important;
-}
+.card-content {
+  background-color: var(--card-color);
 
-a.post-link {
-  text-decoration: none;
+  .card-title {
+    color: var(--main-text-color);
+  }
+
+  .post-description {
+    color: var(--main-text-color) !important;
+  }
 }

data/_sass/_navbar.scss

@@ -1,14 +1,15 @@
 .nav-wrapper {
   z-index: 150;
-  background-color: $mainColor;
+  background-color: var(--main-color);
 
   li a {
-    color: $lighterMainColor;
+    color: var(--ligther-main-color);
   }
 
   #nav-mobile {
+    background-color: var(--main-background-color);
     a {
-      color: #000;
+      color: var(--text-color);
     }
   }
 }
@@ -30,7 +31,7 @@
 }
 
 .button-collapse {
-  color: $lighterMainColor;
+  color: var(--ligther-main-color);
 }
 
 @media only screen and (max-width : 537px) {

data/_sass/_post.scss

@@ -1,5 +1,5 @@
 .main-top {
-  background-color: $lighterMainColor;
+  background-color: var(--ligther-main-color);
   height: 200px;
   float: left;
   width: 100%;
@@ -8,7 +8,7 @@
 }
 
 .content {
-  background-color: #fff;
+  background-color: var(--card-color);
   box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.26);
   border-radius: 2px;
   overflow: hidden;
@@ -20,6 +20,7 @@
   display: inline-block;
   padding: 50px 0 0 0;
   max-width: 100%;
+  color: var(--main-text-color);
 }
 
 .post > .row {
@@ -46,6 +47,10 @@ section {
   .blog-post-img img {
     width: 100%;
   }
+
+  .post-specs {
+    font-size: .8em;
+  }
 }
 
 .browser-default > li {
@@ -54,3 +59,10 @@ section {
 	font-size: 1.25rem;
 	letter-spacing: 0.1rem;
 }
+
+.material-icons {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}

data/_sass/_syntax.scss

@@ -211,7 +211,7 @@
   margin: 0 auto;
   color: #f8f8f2;
   background-color: #222;
-  overflow-x: scroll;
+  overflow-x: hidden;
   overflow-y: hidden;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;

data/_sass/_tags.scss

@@ -1,3 +1,7 @@
+.tag-name {
+  position: relative;
+}
+
 .tags-collection {
   padding: 50px 25px 100px 25px;
 }
@@ -12,7 +16,7 @@
   li {
     transition: 0.4s ease;
     margin-bottom: 50px;
-    border-bottom: 1px solid $lighterMainColor;
+    border-bottom: 1px solid var(--ligther-main-color);
     line-height: 50px;
   }
 
@@ -22,7 +26,7 @@
 
   .post-title {
     font-size: 20px;
-    color: $lighterMainColor;
+    color: var(--ligther-main-color);
     font-weight: 300;
     border-bottom: 5px;
     .entry-date{
@@ -35,22 +39,22 @@
 }
 
 .chip {
-  color: $secondaryColor;
-  background: white;
-  border: $secondaryColor solid 1px;
+  color: var(--secondary-color);
+  background-color: var(--card-color);
+  border: var(--secondary-color) solid 1px;
   transition: background-color 0.4s ease;
   transition: border-color 0.4s ease;
   transition: color 0.4s ease;
 }
 
 .chip:hover {
-  background: $secondaryColor;
+  background: var(--secondary-color);
   color: #fff;
   border: #e4e4e4 solid 1px;
 }
 
 .chip.active {
-  background: $secondaryColor;
+  background: var(--secondary-color);
   color: #fff;
   border: #e4e4e4 solid 1px;
 }

data/_sass/_variables.scss

@@ -1,7 +1,18 @@
 $mainColor: #8d6e63;
+$cardColor: #fff;
+$textColor: #000;
 $lightMainColor: #bcaaa4;
 $lighterMainColor: #d7ccc8;
+$background: #fff;
 $secondaryColor: #26a69a;
 
+$darkMainColor: #3A3A3A;
+$darkCardColor: #191919;
+$darkTextColor: #e0e0e0;
+$darkLightMainColor: #757575;
+$darkLighterMainColor: #616161;
+$darkBackground: #808080;
+$darkSecondaryColor: #00796b;
+
 $facebookColor: #3b5998;
 $twitterColor: #55acee;

data/assets/css/main.scss

@@ -10,9 +10,50 @@
 @import "post";
 
 body {
+  background-color: var(--main-background-color);
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+
+  .highlighter-rouge {
+    color: #000;
+  }
+}
+
+nav {
+  background-color: var(--main-color);
+}
+
+#theme-toggle {
+  &.dark {
+    background-color: #fff;
+    mask: url(../img/icons/sun.svg)  no-repeat;
+    -webkit-mask: url(../img/icons/sun.svg)  no-repeat;
+
+    &:hover {
+      background-color: #212121;
+    }
+  }
+
+  &.light {
+    background-color: #000;
+    mask: url(../img/icons/moon.svg)  no-repeat;
+    -webkit-mask: url(../img/icons/moon.svg)  no-repeat;
+    &:hover {
+      background-color: #9e9e9e;
+    }
+  }
+  cursor: pointer;
+  right: 30px;
+  top: 75px;
+  position: absolute;
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
 }
 
 main {
@@ -24,10 +65,10 @@ main {
 }
 
 p {
-	line-height: 2.0rem;
-	font-size: 1.25rem;
-	letter-spacing: 0.1rem;
-	font-weight: 300;
+  line-height: 2.0rem;
+  font-size: 1.25rem;
+  letter-spacing: 0.1rem;
+  font-weight: 300;
 }
 
 
@@ -60,31 +101,112 @@ p {
   .author-info {
     text-align: center;
   }
+
+  #theme-toggle {
+    top: 12px;
+    z-index: 1000;
+  }
 }
 
 @media screen and (max-width : 1250px ){
-    .blog-posts {
-        width: 98%;
-    }
+  .blog-posts {
+    width: 75%;
+  }
+
+  #theme-toggle {
+    z-index: 1;
+  }
 }
 
 @media screen and (max-width : 768px ){
-    .container-main {
-        width: 98%;
-    }
+  .container-main {
+    width: 98%;
+  }
+  .blog-posts {
+    width: 90%;
+  }
+  #top-bar {
+    padding-top: 0px;
+    height: 150px;
+  }
+
+  #theme-toggle {
+    position: fixed;
+    top: 12px;
+    z-index: 1000;
+  }
+}
+
+@media screen and (max-width : 425px ){
+  #theme-toggle {
+    top: 12px;
+  }
 }
 
 footer.page-footer {
   margin: 0;
   padding-top: 0px;
-  background-color: $mainColor;
+  background-color: var(--main-color);
 
   .footer-copyright {
-    background-color: $mainColor;
+    background-color: var(--main-color);
   }
 
   .container {
-    color: $lighterMainColor;
+    color: var(--ligther-main-color);
+  }
+}
+
+html, html[data-theme="light"] {
+  --text-color: #{$textColor};
+  --main-color: #{$mainColor};
+  --card-color: #{$cardColor};
+  --main-background-color: #{$background};
+  --light-main-color: #{$lightMainColor};
+  --ligther-main-color: #{$lighterMainColor};
+  --main-text-color: #{$textColor};
+  --secondary-color: #{$secondaryColor};
+}
+
+html[data-theme="dark"] {
+  --text-color: #{$darkTextColor};
+  --main-color: #{$darkMainColor};
+  --card-color: #{$darkCardColor};
+  --main-background-color: #{$darkBackground};
+  --light-main-color: #{$darkLightMainColor};
+  --ligther-main-color: #{$darkLighterMainColor};
+  --main-text-color: #{$darkTextColor};
+  --secondary-color: #{$darkSecondaryColor};
+}
+
+@media (prefers-color-scheme: dark) {
+  html, html[data-theme="dark"] {
+    --text-color: #{$darkTextColor};
+    --main-color: #{$darkMainColor};
+    --card-color: #{$darkCardColor};
+    --main-background-color: #{$darkBackground};
+    --light-main-color: #{$darkLightMainColor};
+    --ligther-main-color: #{$darkLighterMainColor};
+    --main-text-color: #{$darkTextColor};
+    --secondary-color: #{$darkSecondaryColor};
+  }
+
+  html[data-theme="light"] {
+    --text-color: #{$textColor};
+    --main-color: #{$mainColor};
+    --card-color: #{$cardColor};
+    --main-background-color: #{$background};
+    --light-main-color: #{$lightMainColor};
+    --ligther-main-color: #{$lighterMainColor};
+    --main-text-color: #{$textColor};
+    --secondary-color: #{$secondaryColor};
   }
 }
 
+html,
+html *,
+html *:before,
+html *:after {
+  transition: color 1s;
+  transition: background-color 1s;
+}

data/assets/img/icons/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.999 312.999"><path d="M305.6 178.053c-3.2-.8-6.4 0-9.2 2-10.4 8.8-22.4 16-35.6 20.8-12.4 4.8-26 7.2-40.4 7.2-32.4 0-62-13.2-83.2-34.4-21.2-21.2-34.4-50.8-34.4-83.2 0-13.6 2.4-26.8 6.4-38.8 4.4-12.8 10.8-24.4 19.2-34.4 3.6-4.4 2.8-10.8-1.6-14.4-2.8-2-6-2.8-9.2-2-34 9.2-63.6 29.6-84.8 56.8-20.4 26.8-32.8 60-32.8 96.4 0 43.6 17.6 83.2 46.4 112s68.4 46.4 112 46.4c36.8 0 70.8-12.8 98-34 27.6-21.6 47.6-52.4 56-87.6 2-6-1.2-11.6-6.8-12.8zm-61.2 83.6c-23.2 18.4-52.8 29.6-85.2 29.6-38 0-72.4-15.6-97.2-40.4-24.8-24.8-40.4-59.2-40.4-97.2 0-31.6 10.4-60.4 28.4-83.6 12.4-16 28-29.2 46-38.4-2 4.4-4 8.8-5.6 13.6-5.2 14.4-7.6 29.6-7.6 45.6 0 38 15.6 72.8 40.4 97.6s59.6 40.4 97.6 40.4c16.8 0 32.8-2.8 47.6-8.4 5.2-2 10.4-4 15.2-6.4-9.6 18.4-22.8 34.8-39.2 47.6z"/></svg>

data/assets/img/icons/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.4 302.4"><path d="M204.8 97.6C191.2 84 172 75.2 151.2 75.2s-40 8.4-53.6 22.4c-13.6 13.6-22.4 32.8-22.4 53.6s8.8 40 22.4 53.6c13.6 13.6 32.8 22.4 53.6 22.4s40-8.4 53.6-22.4c13.6-13.6 22.4-32.8 22.4-53.6s-8.4-40-22.4-53.6zm-14.4 92.8c-10 10-24 16-39.2 16s-29.2-6-39.2-16-16-24-16-39.2 6-29.2 16-39.2 24-16 39.2-16 29.2 6 39.2 16 16 24 16 39.2-6 29.2-16 39.2zM292 140.8h-30.8c-5.6 0-10.4 4.8-10.4 10.4 0 5.6 4.8 10.4 10.4 10.4H292c5.6 0 10.4-4.8 10.4-10.4 0-5.6-4.8-10.4-10.4-10.4zM151.2 250.8c-5.6 0-10.4 4.8-10.4 10.4V292c0 5.6 4.8 10.4 10.4 10.4 5.6 0 10.4-4.8 10.4-10.4v-30.8c0-5.6-4.8-10.4-10.4-10.4zM258 243.6l-22-22c-3.6-4-10.4-4-14.4 0s-4 10.4 0 14.4l22 22c4 4 10.4 4 14.4 0s4-10.4 0-14.4zM151.2 0c-5.6 0-10.4 4.8-10.4 10.4v30.8c0 5.6 4.8 10.4 10.4 10.4 5.6 0 10.4-4.8 10.4-10.4V10.4c0-5.6-4.8-10.4-10.4-10.4zM258.4 44.4c-4-4-10.4-4-14.4 0l-22 22c-4 4-4 10.4 0 14.4 3.6 4 10.4 4 14.4 0l22-22c4-4 4-10.4 0-14.4zM41.2 140.8H10.4c-5.6 0-10.4 4.8-10.4 10.4s4.4 10.4 10.4 10.4h30.8c5.6 0 10.4-4.8 10.4-10.4 0-5.6-4.8-10.4-10.4-10.4zM80.4 221.6c-3.6-4-10.4-4-14.4 0l-22 22c-4 4-4 10.4 0 14.4s10.4 4 14.4 0l22-22c4-4 4-10.4 0-14.4zM80.4 66.4l-22-22c-4-4-10.4-4-14.4 0s-4 10.4 0 14.4l22 22c4 4 10.4 4 14.4 0s4-10.4 0-14.4z"/></svg>

data/assets/js/init.js

@@ -46,11 +46,6 @@
       $("#sidenav-overlay").addClass("adjust-index");
     }
 
-    $(".button-collapse").sideNav({
-      menuWidth: 1000, // Default is 240
-      edge: 'left', // Choose the horizontal origin
-      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
-    });
 
     $('.button-collapse').click(function(){
       adjustIndex();
@@ -61,9 +56,18 @@
       var icon = $(this).find(".btn-floating > i");
       if ($(this).hasClass('active')) {
           icon.text("share");
-      }else{
+      } else{
           icon.text("clear");
       }
     });
   }); // end of document ready
 })(jQuery); // end of jQuery name space
+
+document.addEventListener('DOMContentLoaded', function() {
+  const M = window.M;
+  var elems = document.querySelectorAll('.sidenav');
+  var opts = {
+    edge: 'left' // Choose the horizontal origin
+  };
+  var instances = M.Sidenav.init(elems, opts);
+});

data/assets/js/mode-switcher.js

@@ -0,0 +1,64 @@
+let systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)");
+let theme = sessionStorage.getItem('theme');
+
+if (systemInitiatedDark.matches) {
+	document.getElementById("theme-toggle").classList.add('dark');
+	document.getElementById("theme-toggle").classList.remove('light');
+} else {
+	document.getElementById("theme-toggle").classList.add('light');
+	document.getElementById("theme-toggle").classList.remove('dark');
+}
+
+function prefersColorTest(systemInitiatedDark) {
+  if (systemInitiatedDark.matches) {
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.getElementById("theme-toggle").classList.add('light');
+    document.getElementById("theme-toggle").classList.remove('dark');
+   	sessionStorage.setItem('theme', '');
+  } else {
+    document.documentElement.setAttribute('data-theme', 'light');
+    document.getElementById("theme-toggle").classList.add('dark');
+    document.getElementById("theme-toggle").classList.remove('light');
+    sessionStorage.setItem('theme', '');
+  }
+}
+systemInitiatedDark.addListener(prefersColorTest);
+
+
+function modeSwitcher() {
+  let theme = sessionStorage.getItem('theme');
+  if (theme === "dark") {
+    document.getElementById("theme-toggle").classList.add('light');
+    document.getElementById("theme-toggle").classList.remove('dark');
+    document.documentElement.setAttribute('data-theme', 'light');
+    sessionStorage.setItem('theme', 'light');
+	}	else if (theme === "light") {
+    document.getElementById("theme-toggle").classList.add('dark');
+    document.getElementById("theme-toggle").classList.remove('light');
+		document.documentElement.setAttribute('data-theme', 'dark');
+		sessionStorage.setItem('theme', 'dark');
+  } else if (systemInitiatedDark.matches) {
+    document.getElementById("theme-toggle").classList.add('dark');
+    document.getElementById("theme-toggle").classList.remove('light');
+		document.documentElement.setAttribute('data-theme', 'light');
+		sessionStorage.setItem('theme', 'light');
+	} else {
+    document.getElementById("theme-toggle").classList.add('dark');
+    document.getElementById("theme-toggle").classList.remove('light');
+		document.documentElement.setAttribute('data-theme', 'dark');
+		sessionStorage.setItem('theme', 'dark');
+	}
+}
+
+if (theme === "dark") {
+  document.getElementById("theme-toggle").classList.add('dark');
+  document.getElementById("theme-toggle").classList.remove('light');
+  document.documentElement.setAttribute('data-theme', 'dark');
+  sessionStorage.setItem('theme', 'dark');
+	// document.getElementById("theme-toggle").innerHTML = sun;
+} else if (theme === "light") {
+  document.getElementById("theme-toggle").classList.add('light');
+  document.getElementById("theme-toggle").classList.remove('dark');
+  document.documentElement.setAttribute('data-theme', 'light');
+  sessionStorage.setItem('theme', 'light');
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: materialize-jekyll
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.6.0
 platform: ruby
 authors:
 - Victor Presumido
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-29 00:00:00.000000000 Z
+date: 2020-05-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.16.1
+        version: 1.17.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.16.1
+        version: 1.17.1
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -96,16 +96,17 @@ files:
 - _sass/_syntax.scss
 - _sass/_tags.scss
 - _sass/_variables.scss
-- assets/.DS_Store
 - assets/css/.DS_Store
 - assets/css/main.scss
-- assets/img/.DS_Store
 - assets/img/icons/facebook.svg
 - assets/img/icons/github.svg
 - assets/img/icons/instagram.svg
 - assets/img/icons/linkedin.svg
+- assets/img/icons/moon.svg
+- assets/img/icons/sun.svg
 - assets/img/icons/twitter.svg
 - assets/js/init.js
+- assets/js/mode-switcher.js
 - assets/js/vendor/masonry.pkgd.min.js
 homepage: https://github.com/victorpre/materialize-jekyll
 licenses:
@@ -127,7 +128,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.12
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
 summary: A material design Jekyll theme for blog using MaterializeCSS.