krad 3.5.2 → 3.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b5c6900488b18055fabcd16d9a8b9fd5370946fc
-  data.tar.gz: 481309750608a0b8cae8959747b669ada9fbd4e2
+  metadata.gz: 8fce889afe780802d65af5ffc05e50e5419ab4fe
+  data.tar.gz: 8f76eeef1925d3ad2106e784fbbdbbfe34bb2773
 SHA512:
-  metadata.gz: 01a2234def79f191159b95927fc5d199f26699a0427c508b85ef1b4a98c63193726dad6353022ca7567f163c1275ca8392ea1ed7acded5d7e91bea6f584cf780
-  data.tar.gz: d5c87086085b0c6b01faf6a3184314a4225a822722078383757802fa95a4c92280ed198c55636ec191cba30eefa2304422f88f5c2ab2a79bd331a4f972f51912
+  metadata.gz: 21a9a822c94c6ed8195fc28f44d0ca4bf31d32f85ba6dd90a41f56257845e67901d309752d6bec30af8d5543b11c597ac14dff1676d97fa7a81138f84ef638ee
+  data.tar.gz: 63964134002e65d59b281e3a78e06b1904ae7402a8b9cde70256b0097f1b0cde3ad76330be1620d576066aed565505dbb696f5ac56d7a91491b54f12fb63dfc9

data/_includes/header.html

@@ -1,14 +1,46 @@
-<header class="header pure-g rm-wrapper" id="rm-nav">
-	<div class="wrapper pure-u-1 pure-u-md-1">
-	<div class="navbar pure-menu pure-menu-horizontal rm-can-transform">
-		<ul class="navigation pure-menu-list">
-			<li class="pure-menu-item"><a href="{{ site.url }}" title="Home Page">@tung<em>krad</em>le</a></li>
-			<li class="pure-menu-item"><a href="{{ "/archive" | relative_url }}">Archive</a></li>
-			<li class="pure-menu-item"><a href="{{ "/about" | relative_url }}">About</a></li>
-			<li class="pure-menu-item"><a href="{{ "/portfolio" | relative_url }}">Work</a></li>
-			<li class="pure-menu-item"><a href="{{ "/contact" | relative_url }}">Contact</a></li>
-			<!--<li class="pure-menu-item"><a href="{{ "/copypasta" | relative_url }}">Copypasta</a></li>-->
-		</ul>
-	</div>	
+<header class="header">
+	<!--Navbar on desktop-->
+	<div id="desktopNav" class="pure-g wrapper">
+		<div class="pure-u-1 pure-u-md-1">
+		<div class="navbar pure-menu pure-menu-horizontal">
+			<ul class="navigation pure-menu-list">
+				<li class="pure-menu-item"><a href="{{ site.url }}" title="Home Page">@tung<em>krad</em>le</a></li>
+				<li class="pure-menu-item"><a href="{{ "/archive" | relative_url }}">Archive</a></li>
+				<li class="pure-menu-item"><a href="{{ "/about" | relative_url }}">About</a></li>
+				<li class="pure-menu-item"><a href="{{ "/portfolio" | relative_url }}">Work</a></li>
+				<li class="pure-menu-item"><a href="{{ "/contact" | relative_url }}">Contact</a></li>
+				<!--<li class="pure-menu-item"><a href="{{ "/copypasta" | relative_url }}">Copypasta</a></li>-->
+			</ul>
+		</div>
+		</div>
+	</div>
+	<!--Navbar on mobile-->
+	<div id="mobileNav" class="pure-g">
+		<div class="pure-u-1 pure-u-md-1">
+		<div id="rm-nav" class="pure-g rm-wrapper">
+			<div class="pure-u-1 wrapper">
+			<div class="pure-menu rm-menu rm-menu-top">
+		        <a href="{{ site.url }}" class="rm-menu-brand" title="Home Page">@tung<em>krad</em>le</a>
+		        <div class="rm-toggle">
+			        <button class="hamburger hamburger--emphatic" type="button">
+					  <span class="hamburger-box">
+					    <span class="hamburger-inner"></span>
+					  </span>
+					</button>	
+		        </div>
+		    </div>
+		    </div>
+		    <div class="pure-u-1">
+			<div class="navbar pure-menu rm-can-transform">
+				<ul class="navigation pure-menu-list">
+					<li class="pure-menu-item"><a class="pure-menu-link" href="{{ "/archive" | relative_url }}">Archive</a></li>
+					<li class="pure-menu-item"><a class="pure-menu-link" href="{{ "/about" | relative_url }}">About</a></li>
+					<li class="pure-menu-item"><a class="pure-menu-link" href="{{ "/portfolio" | relative_url }}">Work</a></li>
+					<li class="pure-menu-item"><a class="pure-menu-link" href="{{ "/contact" | relative_url }}">Contact</a></li>
+				</ul>
+			</div>
+			</div>
+		</div>
+		</div>
 	</div>
 </header>

data/_includes/scripts.html

@@ -1,5 +1,6 @@
 <!-- Scripterino! -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" async></script>
+<script src="{{ "/assets/scripts/responsive-menu.js" | relative_url }}" async></script>
 <script src="{{ "/assets/scripts/backtop.js" | relative_url }}" async></script>
 <script src="{{ "/assets/scripts/img-cs.js" | relative_url }}" async></script>

data/_sass/hamburgers/_base.scss

@@ -0,0 +1,69 @@
+// Hamburger
+// ==================================================
+.hamburger {
+  padding: $hamburger-padding-y $hamburger-padding-x;
+  display: inline-block;
+  cursor: pointer;
+
+  transition-property: opacity, filter;
+  transition-duration: $hamburger-hover-transition-duration;
+  transition-timing-function: $hamburger-hover-transition-timing-function;
+
+  // Normalize (<button>)
+  font: inherit;
+  color: inherit;
+  text-transform: none;
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  overflow: visible;
+
+  &:hover {
+    @if $hamburger-hover-use-filter == true {
+      filter: $hamburger-hover-filter;
+    }
+    @else {
+      opacity: $hamburger-hover-opacity;
+    }
+  }
+}
+
+.hamburger-box {
+  width: $hamburger-layer-width;
+  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+  display: inline-block;
+  position: relative;
+}
+
+.hamburger-inner {
+  display: block;
+  top: 50%;
+  margin-top: $hamburger-layer-height / -2;
+
+  &,
+  &::before,
+  &::after {
+    width: $hamburger-layer-width;
+    height: $hamburger-layer-height;
+    background-color: $hamburger-layer-color;
+    border-radius: $hamburger-layer-border-radius;
+    position: absolute;
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+  }
+
+  &::before {
+    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+
+  &::after {
+    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+}

data/_sass/hamburgers/hamburgers.scss

@@ -0,0 +1,117 @@
+@charset "UTF-8";
+/*!
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */
+
+// Settings
+// ==================================================
+$hamburger-padding-x                       : 15px !default;
+$hamburger-padding-y                       : 15px !default;
+$hamburger-layer-width                     : 40px !default;
+$hamburger-layer-height                    : 4px !default;
+$hamburger-layer-spacing                   : 6px !default;
+$hamburger-layer-color                     : #000 !default;
+$hamburger-layer-border-radius             : 4px !default;
+$hamburger-hover-opacity                   : 0.7 !default;
+$hamburger-hover-transition-duration       : 0.15s !default;
+$hamburger-hover-transition-timing-function: linear !default;
+
+// To use CSS filters as the hover effect instead of opacity,
+// set $hamburger-hover-use-filter as true and
+// change the value of $hamburger-hover-filter accordingly.
+$hamburger-hover-use-filter: false !default;
+$hamburger-hover-filter    : opacity(50%) !default;
+
+// Types (Remove or comment out what you don’t need)
+// ==================================================
+$hamburger-types: (
+  3dx,
+  3dx-r,
+  3dy,
+  3dy-r,
+  3dxy,
+  3dxy-r,
+  arrow,
+  arrow-r,
+  arrowalt,
+  arrowalt-r,
+  arrowturn,
+  arrowturn-r,
+  boring,
+  collapse,
+  collapse-r,
+  elastic,
+  elastic-r,
+  emphatic,
+  emphatic-r,
+  minus,
+  slider,
+  slider-r,
+  spin,
+  spin-r,
+  spring,
+  spring-r,
+  stand,
+  stand-r,
+  squeeze,
+  vortex,
+  vortex-r
+) !default;
+
+// Base Hamburger (We need this)
+// ==================================================
+@import "base";
+
+// Hamburger types
+// ==================================================
+@import "types/3dx";
+@import "types/3dx-r";
+@import "types/3dy";
+@import "types/3dy-r";
+@import "types/3dxy";
+@import "types/3dxy-r";
+@import "types/arrow";
+@import "types/arrow-r";
+@import "types/arrowalt";
+@import "types/arrowalt-r";
+@import "types/arrowturn";
+@import "types/arrowturn-r";
+@import "types/boring";
+@import "types/collapse";
+@import "types/collapse-r";
+@import "types/elastic";
+@import "types/elastic-r";
+@import "types/emphatic";
+@import "types/emphatic-r";
+@import "types/minus";
+@import "types/slider";
+@import "types/slider-r";
+@import "types/spin";
+@import "types/spin-r";
+@import "types/spring";
+@import "types/spring-r";
+@import "types/stand";
+@import "types/stand-r";
+@import "types/squeeze";
+@import "types/vortex";
+@import "types/vortex-r";
+
+// ==================================================
+// Cooking up additional types:
+//
+// The Sass for each hamburger type should be nested
+// inside an @if directive to check whether or not
+// it exists in $hamburger-types so only the CSS for
+// included types are generated.
+//
+// e.g. hamburgers/types/_new-type.scss
+//
+// @if index($hamburger-types, new-type) {
+//   .hamburger--new-type {
+//     ...
+//   }
+// }

data/_sass/hamburgers/types/_3dx-r.scss

@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dx-r) {
+  /*
+   * 3DX Reverse
+   */
+  .hamburger--3dx-r {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
+    }
+
+    .hamburger-inner {
+      transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateY(-180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
+      }
+    }
+  }
+}

data/_sass/hamburgers/types/_3dx.scss

@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dx) {
+  /*
+   * 3DX
+   */
+  .hamburger--3dx {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
+    }
+
+    .hamburger-inner {
+      transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateY(180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
+      }
+    }
+  }
+}

data/_sass/hamburgers/types/_3dxy-r.scss

@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dxy-r) {
+  /*
+   * 3DXY Reverse
+   */
+  .hamburger--3dxy-r {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
+    }
+
+    .hamburger-inner {
+      transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
+      }
+    }
+  }
+}

data/_sass/hamburgers/types/_3dxy.scss

@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dxy) {
+  /*
+   * 3DXY
+   */
+  .hamburger--3dxy {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
+    }
+
+    .hamburger-inner {
+      transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateX(180deg) rotateY(180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
+      }
+    }
+  }
+}

data/_sass/hamburgers/types/_3dy-r.scss

@@ -0,0 +1,35 @@
+@if index($hamburger-types, 3dy-r) {
+  /*
+   * 3DY Reverse
+   */
+  .hamburger--3dy-r {
+    .hamburger-box {
+      perspective: $hamburger-layer-width * 2;
+    }
+
+    .hamburger-inner {
+      transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+                  background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &::before,
+      &::after {
+        transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        background-color: transparent;
+        transform: rotateX(180deg);
+
+        &::before {
+          transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
+        }
+      }
+    }
+  }
+}