Feature Update

- Responsive Layout
- Mobile Support
- Columns Block

_config.yml

@@ -37,6 +37,10 @@ exclude:
   - node_modules/
   - workspace.code-workspace
 
+# Include Files
+include:
+  - assets/
+
 # General Information
 title: Xaymar
 email: info@xaymar.com

_includes/blocks/_base.liquid

@@ -1,3 +1,3 @@
-<div class="block block-{{ include.type }} {% if include.float %}float-{{ include.float }}{% endif %}">
+<div class="block block-{{ include.type }} {% if include.float %}float float-{{ include.float }}{% else %}float-clear{% endif %}">
 	{{ include.content }}
 </div>

_includes/blocks/column.liquid

@@ -0,0 +1,6 @@
+{% capture content %}
+<div class="content">
+	{{ include.content }}
+</div>
+{% endcapture %}
+{% include blocks/_base.liquid type="column" content=content %}

_includes/blocks/columns.liquid

@@ -0,0 +1,6 @@
+{% capture content %}
+<div class="content {% if include.valign %}valign-{{include.valign}}{% else %}valign-stretch{% endif %} {% if include.halign %}halign-{{include.halign}}{% else %}halign-stretch{% endif %}" style="grid-template-columns: repeat({{ include.columns | default: 1 }}, 1fr);">
+	{{ include.content }}
+</div>
+{% endcapture %}
+{% include blocks/_base.liquid type="columns" content=content %}

_includes/blocks/heading.liquid

@@ -3,4 +3,4 @@
 	{{ include.content }}
 </p>
 {% endcapture %}
-{% include blocks/_base.liquid type=heading content=content %}
+{% include blocks/_base.liquid type="heading" content=content %}

_includes/blocks/list.liquid

@@ -11,4 +11,4 @@
 </ul>
 {% endif %}
 {% endcapture %}
-{% include blocks/_base.liquid type=list content=content %}
+{% include blocks/_base.liquid type="list" content=content %}

_includes/blocks/paragraph.liquid

@@ -3,4 +3,4 @@
 	{{ include.content }}
 </p>
 {% endcapture %}
-{% include blocks/_base.liquid type=paragraph content=content %}
+{% include blocks/_base.liquid type="paragraph" content=content %}

_includes/header.liquid

@@ -6,7 +6,8 @@
 			<figcaption>{{ site.title }}</figcaption>
 		</div>
 	</a>
-	<nav class="navigation" role="navigation">
+	<a id="navigation-toggle">≡</a>
+	<nav id="navigation" class="navigation" role="navigation">
 {% include navigation.liquid data=site.data.navigation %}
 	</nav>
 </div>

_includes/navigation.liquid

@@ -2,11 +2,15 @@
 {% for entry in include.data %}
 	<li id="{{ entry[0] }}" class="entry {% if entry[1].entries != nil %}has-menu {% endif %}">
 	{% if entry[1].url != nil %}
-		<a href="{{ entry[1].url | absolute_url }}" {% if entry[1].blank %}target="_blank"{% endif %}>
+		<a class="item" href="{{ entry[1].url | absolute_url }}" {% if entry[1].blank %}target="_blank"{% endif %}>
+	{% else %}
+		<span class="item">
 	{% endif %}
 		{{ entry[1].name }}
 	{% if entry[1].url != nil %}
 		</a>
+	{% else %}
+		</span>
 	{% endif %}
 	{% if entry[1].entries != nil %}
 		{% assign data=entry[1].entries %}

_includes/page_end.liquid

@@ -1,3 +1,4 @@
 		</div>
 	</body>
+	<script src="{{ site.xaymar.data.js | absolute_url }}"></script>
 </html>

_includes/page_start.liquid

@@ -44,6 +44,7 @@
 		<meta property="og:video" content="{{ page.video }}" />
 {% endif %}
 		<meta property="article:published_time" content="{{ page.date | default: site.time | date_to_xmlschema }}" />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="icon" href="{{ site.xaymar.data.logo | absolute_url }}">
 		<link rel="stylesheet" href="{{ site.xaymar.data.css | absolute_url }}">
 		<link rel="alternate" type="application/rss+xml" href="{{ site.xaymar.data.rss | absolute_url }}">

_posts/1993/1993-07-21-lorem-ipsum.html

@@ -0,0 +1,34 @@
+---
+title: Lorem Ipsum Dolor Sit Amet
+category: Test
+tags: [Test]
+---
+
+{% capture content %}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat mauris lorem, in auctor sapien tristique et. Quisque vestibulum in nisl sit amet dictum. Nulla eu neque sit amet ante ullamcorper tempus. Vestibulum molestie lorem tempus ex consequat, ac mattis leo pulvinar. Maecenas id sapien vel felis volutpat congue. Donec et massa ex. Integer rutrum libero dui, at pulvinar magna hendrerit et. Fusce vel mauris porta nunc elementum eleifend. Mauris posuere placerat condimentum.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+
+{% capture content %}
+Mauris ac efficitur massa, sit amet molestie felis. Proin eget efficitur elit, eget feugiat tortor. Suspendisse faucibus rhoncus aliquet. Maecenas in libero auctor, pretium felis non, placerat quam. Praesent quam ligula, tristique commodo justo non, eleifend blandit sem. Aenean quis augue ac dui elementum condimentum ut auctor mauris. Sed eu aliquet arcu. Ut at nunc lacinia, efficitur ligula ac, consequat elit. Cras ante nibh, elementum non euismod id, rutrum imperdiet dui. Cras mattis velit nec pretium ullamcorper. Quisque eu bibendum mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris elementum erat eget sem condimentum, vel laoreet libero convallis. Sed gravida tortor fermentum ipsum lacinia, ut faucibus lectus porta. Nunc mattis dignissim felis nec vehicula.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+
+{% capture columns %}
+{% capture column %}
+{% capture content %}
+Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+{% endcapture %}{% include blocks/column.liquid content=column %}
+{% capture column %}
+{% capture content %}
+Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+{% endcapture %}{% include blocks/column.liquid content=column %}
+{% endcapture %}{% include blocks/columns.liquid content=columns columns=2 %}
+
+{% capture content %}
+Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio, fringilla et molestie at, laoreet tristique ipsum. Proin lacinia lectus est, ut gravida ipsum aliquam sit amet. Donec pulvinar rutrum risus, eget posuere ipsum tempor id. Nullam quis nisi nec mauris interdum bibendum non eget magna. Pellentesque accumsan egestas cursus. Donec vestibulum pulvinar est. Etiam eleifend in quam non hendrerit. Cras felis sem, eleifend at luctus id, iaculis vulputate elit. Vivamus porttitor rutrum metus. Proin turpis ante, ultrices consequat libero id, placerat pellentesque ante. Vestibulum eget luctus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempus suscipit felis, ut egestas erat varius at.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+
+{% capture content %}
+Etiam tellus dolor, pretium eu metus vel, venenatis dictum justo. Mauris urna nunc, euismod eget mattis ac, posuere sit amet nunc. Donec sollicitudin enim et ligula commodo, at tempor lacus rhoncus. Suspendisse rhoncus metus ut metus pellentesque sagittis. Phasellus commodo tortor metus, sed rutrum leo eleifend vitae. Curabitur convallis sollicitudin nisl eget malesuada. Fusce dapibus felis nec ipsum rutrum, sit amet sagittis sem ornare. Nulla quam lorem, vestibulum sed sapien id, cursus dapibus dolor. Nullam interdum massa et tellus varius, vel placerat quam eleifend.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}

_sass/_base.scss

@@ -6,7 +6,7 @@ $theme-content-color: hsl($theme-hue, 0%, 90%);
 $theme-header-logo-height: 90px;
 $theme-header-background: hsl($theme-hue, 0%, 7.5%);
 $theme-header-color: hsl($theme-hue, 100%, 99%);
-$theme-menu-background: $theme-header-background;
+$theme-menu-background: hsl($theme-hue, 0%, 6.5%);
 $theme-menu-color: hsl($theme-hue, 0%, 85%);
 $theme-menu-color-active: hsl($theme-hue, 0%, 100%);
 $theme-article-background: hsl($theme-hue, 50%, 10%);
@@ -35,8 +35,7 @@ $theme-breadcrumbs-link-color-active: hsl($theme-hue, 100%, 85%);
 }
 
 html {
-	// Font
+	font-size: 16pt;
-	font-size: 1.05rem;
 }
 
 body {
@@ -45,6 +44,7 @@ body {
 	background: $theme-content-background;
 
 	// Font
+	font-size: 1.0em;
 	font-family: "Roboto", sans-serif;
     text-rendering: optimizelegibility;
 	color: $theme-content-color;

_sass/_block-columns.scss

@@ -0,0 +1,69 @@
+// --------------------------------------------------------------------------------
+// Columns
+// --------------------------------------------------------------------------------
+.block-columns {
+}
+.block-columns > .content {
+	display: grid;
+}
+
+// Columns: Horizontal Alignment
+.block-columns > .content.halign-start,
+.block-columns > .content.halign-left {
+	align-items: start;
+}
+
+.block-columns > .content.halign-end,
+.block-columns > .content.halign-right {
+	align-items: end;
+}
+
+.block-columns > .content.halign-center,
+.block-columns > .content.halign-middle {
+	align-items: center;
+}
+
+.block-columns > .content.halign-baseline,
+.block-columns > .content.halign-text {
+	align-items: baseline;
+}
+
+.block-columns > .content.halign-stretch,
+.block-columns > .content.halign-fill {
+	align-items: stretch;
+}
+
+.block-columns > .content.valign-start,
+.block-columns > .content.valign-left {
+	justify-items: start;
+}
+
+.block-columns > .content.valign-end,
+.block-columns > .content.valign-right {
+	justify-items: end;
+}
+
+.block-columns > .content.valign-center,
+.block-columns > .content.valign-middle {
+	justify-items: center;
+}
+
+.block-columns > .content.valign-baseline,
+.block-columns > .content.valign-text {
+	justify-items: baseline;
+}
+
+.block-columns > .content.valign-stretch,
+.block-columns > .content.valign-fill {
+	justify-items: stretch;
+}
+
+// --------------------------------------------------------------------------------
+// Individual Column
+// --------------------------------------------------------------------------------
+.block-column {
+}
+
+.block-column ~ .block-column {
+	margin-top: 0;
+}

_sass/_blocks.scss

@@ -1,42 +1,32 @@
 .block {
 	padding: 0;
 	margin: 0;
+	overflow: auto;
 }
 
 .block ~ .block {
 	margin-top: 1.25em;
 }
 
+.block.float {
+	margin-top: 0;
+}
+
 .block > .content {
 	padding: 0;
 	margin: 0;
 }
 
+.float {}
 .float-left {
 	float: left;
 }
-
 .float-right {
 	float: right;
 }
 
-.clear-left {
+.float-clear {
-	clear: left;
-}
-
-.clear-right {
-	clear: right;
-}
-
-.clear {
 	clear: both;
 }
 
-
+@import "_block-columns.scss";
-.block-columns {
-	display: grid;
-}
-
-.block-columns > .block-column {
-
-}

_sass/_content.scss

@@ -1,10 +1,8 @@
 body > .content {
-	$pad-h: 1rem;
 	max-width: $theme-width;
 	margin-left: auto;
 	margin-right: auto;
-	padding: 0 $pad-h;
+	padding: 0;
-	width: calc(100% - #{$pad-h} * 2);
 }
 
 @import "_breadcrumbs.scss";

_sass/_header.scss

@@ -25,28 +25,34 @@
 	}
 }
 
-body > .header {
+// --------------------------------------------------------------------------------
+// Header
+// --------------------------------------------------------------------------------
+#header {
 	padding: 5px;
 	background: $theme-header-background;
 	color: $theme-header-color;
 }
 
-body > .header > .content {
+#header > .content {
 	display: grid;
-	grid-template-columns: auto 1fr;
+	grid-template-columns: min-content auto;
 	max-width: $theme-width;
 	margin-left: auto;
 	margin-right: auto;
 }
 
-body > .header > .content .logo {
+// --------------------------------------------------------------------------------
+// Header > Logo
+// --------------------------------------------------------------------------------
+#header > .content .logo {
 	display: grid;
 	grid-template-columns: auto 1fr;
-	margin: 0 2em 0 0;
+	margin: 0 20px 0 0;
 	padding: 0;
 }
 
-body > .header > .content .logo > .icon {
+#header > .content .logo > .icon {
 	justify-self: stretch;
 	align-self: stretch;
 	height: 90px;
@@ -54,7 +60,7 @@ body > .header > .content .logo > .icon {
 	padding: 0;
 }
 
-body > .header > .content .logo > figcaption {
+#header > .content .logo > figcaption {
 	justify-self: left;
 	align-self: center;
 	margin: 0;
@@ -66,57 +72,120 @@ body > .header > .content .logo > figcaption {
 	letter-spacing: .25ch;
 }
 
-body > .header > .content .navigation {
+// --------------------------------------------------------------------------------
-	justify-self: left;
+// Header > Navigation
-	align-self: center;
+// --------------------------------------------------------------------------------
-	font-size: 0.9rem;
+#navigation-toggle {
+	display: none;
+}
+
+#navigation {
+	font-size: 1.0rem;
 	color: $theme-menu-color;
 }
 
-body > .header > .content .navigation > .menu {
+#navigation .menu {
 	list-style: none inside;
+}
+
+#navigation .menu > .entry > .item {
+	color: $theme-menu-color;
+}
+#navigation .menu > .entry > .item:hover,
+#navigation .menu > .entry > .item:active,
+#navigation .menu > .entry > .item:focus {
+	color: $theme-menu-color-active;
+}
+
+// Responsive Layout
+@media (pointer: coarse), (max-width: 767px) {
+	#navigation-toggle {
+		justify-self: stretch;
+		align-self: center;
+		display: block;
+		margin: 0;
+		padding: 0rem 2.5rem;
+		text-align: right;
+		font-size: 3.0rem;
+		color: $theme-menu-color;
+	}
+
+	#navigation {
+		grid-column-start: span 2;
+	}
+
+	// Show/Hide menu
+	#navigation {
+		display: none;
+	}
+	#navigation.open {
+		display: block;
+	}
+
+	#navigation .menu {
+		margin: 0;
+		padding: 0;
+		background: transparent;
+	}
+
+	#navigation .menu .menu {
+		padding-left: 1.5rem;
+		background: $theme-menu-background;
+		box-shadow: 2px 2px 5px 0px black;
+	}
+
+	#navigation .item {
+		display: block;
+		padding: .5rem .5rem;
+		//border: 1px solid $theme-menu-background;
+		transition: color 250ms linear;
+	}
+}
+
+@media (pointer: fine) and (min-width: 768px) {
+	#navigation {
+		justify-self: stretch;
+		align-self: center;
+	}
+
+	#navigation > .menu {
 		text-transform: uppercase;
 		padding: 0px;
 		margin: 0;
-}
+	}
 
-body > .header > .content .navigation > .menu > li {
+	#navigation > .menu > li {
 		display: inline-block;
 		padding: 0px .5em 0px 0px;
 		margin: 0;
-}
+	}
 
-body > .header > .content .navigation > .menu > li > .menu {
+	#navigation > .menu > li > .menu {
 		display: block;
 		position: absolute;
 		padding: 0px .5em;
 		margin: 0;
 		cursor: auto;
-	list-style: none inside;
 		background: $theme-menu-background;
 		box-shadow: 2px 2px 5px 0px black;
-}
+	}
 
-body > .header > .content .navigation > .menu > li > .menu > li {
+	#navigation > .menu > li > .menu > li {
 		display: block;
 		padding: 0 .5em;
 		margin: 0;
-}
+	}
 
-body > .header > .content .navigation .menu > li > a {
+	#navigation .menu > li > a {
 		display: block;
 		padding: .5em 0;
-}
+	}
 
-body > .header > .content .navigation .menu li {
+	#navigation .menu li.has-menu {
-	color: hsl(0, 0%, 75%);
-}
-
-body > .header > .content .navigation .menu li.has-menu {
 		cursor: pointer;
-}
+	}
 
-body > .header > .content .navigation .menu li.has-menu > .menu {
+	#navigation .menu li.has-menu > .menu {
 		position: absolute;
 		pointer-events: none;
 		display: block;
@@ -124,24 +193,19 @@ body > .header > .content .navigation .menu li.has-menu > .menu {
 		animation-duration: 100ms;
 		animation-fill-mode: both;
 		animation-direction: reverse;
-}
+	}
 
-body > .header > .content .navigation .menu li.has-menu:hover > .menu,
+	#navigation .menu li.has-menu:hover > .menu,
-body > .header > .content .navigation .menu li.has-menu > .menu:hover,
+	#navigation .menu li.has-menu > .menu:hover,
-body > .header > .content .navigation .menu li.has-menu:focus > .menu,
+	#navigation .menu li.has-menu:focus > .menu,
-body > .header > .content .navigation .menu li.has-menu > .menu:focus,
+	#navigation .menu li.has-menu > .menu:focus,
-body > .header > .content .navigation .menu li.has-menu:active > .menu,
+	#navigation .menu li.has-menu:active > .menu,
-body > .header > .content .navigation .menu li.has-menu > .menu:active {
+	#navigation .menu li.has-menu > .menu:active {
 		display: block;
 		pointer-events: auto;
 		animation-name: menu_show;
 		animation-duration: 100ms;
 		animation-fill-mode: both;
 		animation-direction: normal;
-}
+	}
-
-body > .header > .content .navigation .menu li:hover,
-body > .header > .content .navigation .menu li:active,
-body > .header > .content .navigation .menu li:focus {
-	color: $theme-menu-color-active;
 }

assets/site.js

@@ -1,3 +1,9 @@
----
+(function() {
-# Ensure Jekyll converts this file.
+    'use strict';
----
+
+	// Support for Mobile Devices
+	document.querySelector("#navigation-toggle").addEventListener("click", (ev) => {
+		document.querySelector("#header #navigation").classList.toggle("open");
+	});
+
+})();