materialize-jekyll 1.2.0 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d3e8706449b479930706b2a823d6942772f87ee075f16c6a45772c55d1dee7d
-  data.tar.gz: 13a106d789e64bc6847d42c18bcdb929b971c8abbffb3a187bbda356c5b10325
+  metadata.gz: 9b791a3038cd8ef89f7c4fabdc506b718e8568c8d915b4a8ee294c5b8aef4612
+  data.tar.gz: 5ffab43ab0c4996c08966c0f52202d4ca4aaa4b8fe94c444cd7d202a73f9bf30
 SHA512:
-  metadata.gz: acd780597e9d29c7294a776f7450e7b0c13563b3611480c147ea5ce61d84786af7f8197a5270451613813565c395295749d575dc6cf6af06d586d4d1cb8db026
-  data.tar.gz: 327b597598e5cc6eca0eb251bcd59c00e988bcc03629f80b4e8ff981175b4d8cf984d038b572ce90aaa3053b720b372d7496a5418315fcc3b298f97e63d58a06
+  metadata.gz: 53f7f092b2383d8f214220f2ace4ccd0ee96d0cde24f6ebff8e6a869036909f76f295780a04c014b03b28180fb3e8b5770fca7cb83fb6ac3353301320251df59
+  data.tar.gz: d84faf6028fb081dac19b772420d1143946f6477579cc4355505cd7ee40d657127236e4f45f77b3cc633205fd9e7e710a0bb5391b9ae6f2912f72424f18cca89

data/_includes/footer.html

@@ -14,6 +14,7 @@
   <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/navbar.html

@@ -1,4 +1,3 @@
-
 <div class="navbar-fixed">
   <nav class="z-depth-5" role="navigation">
     <div class="nav-wrapper main-nav">
@@ -26,3 +25,5 @@
     </div>
   </nav>
 </div>
+
+<a id="theme-toggle" class="" onclick="modeSwitcher()"></a>

data/_layouts/home.html

@@ -48,11 +48,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 m6 l6 xl6">
-            <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 }}
+            </div>
           </div>
-          <div class="col s12 m6 l6 xl6">
-            <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

@@ -21,21 +21,15 @@
   transition: 0.4s ease;
 }
 
-.btm-menu {
   .btn-floating {
-    background-color: $secondaryColor;
+    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;
-}
-
 .read-more {
   color: $mainColor !important;
 }
@@ -43,3 +37,15 @@
 a.post-link {
   text-decoration: none;
 }
+
+.card-content {
+  background-color: var(--card-color);
+
+  .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/_tags.scss

@@ -12,7 +12,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 +22,7 @@
 
   .post-title {
     font-size: 20px;
-    color: $lighterMainColor;
+    color: var(--ligther-main-color);
     font-weight: 300;
     border-bottom: 5px;
     .entry-date{
@@ -35,22 +35,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,41 @@
 @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: var(--text-color);
+    mask: url(../img/icons/sun.svg)  no-repeat;
+    -webkit-mask: url(../img/icons/sun.svg)  no-repeat;
+  }
+  &.light {
+    background-color: #757575;
+    mask: url(../img/icons/moon.svg)  no-repeat;
+    -webkit-mask: url(../img/icons/moon.svg)  no-repeat;
+  }
+  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 {
@@ -60,6 +92,11 @@ p {
   .author-info {
     text-align: center;
   }
+
+  #theme-toggle {
+    top: 12px;
+    z-index: 1000;
+  }
 }
 
 @media screen and (max-width : 1250px ){
@@ -72,19 +109,89 @@ p {
     .container-main {
         width: 98%;
     }
+
+    #top-bar {
+      padding-top: 0px;
+      height: 150px;
+    }
+
+    #theme-toggle {
+      position: fixed;
+      top: 16px;
+      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 !important;
+  transition: background-color 1s !important;
+}

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/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('light');
+    document.getElementById("theme-toggle").classList.remove('dark');
+		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.2.0
+  version: 1.5.0
 platform: ruby
 authors:
 - Victor Presumido
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-04-21 00:00:00.000000000 Z
+date: 2020-05-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -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: