garth-jekyll-theme 0.1.9 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0613b542e5cd796cf8c912714a9adab8a765ff22
-  data.tar.gz: 10ec251c324c518266af1be8442a838fda24dbde
+  metadata.gz: 67b99194c976f4504447029ac1abcc8d8b5ab02f
+  data.tar.gz: 5764567fc66386ecae8625495f5ca21d5f5a5b07
 SHA512:
-  metadata.gz: 2ae01836675fd465bd26c5b43c814db2ecaac6862adb1a11fc049c03d2710f580502e89c55c494a137550c276dc94bd1eb8615b082c552c8565e2ea902266796
-  data.tar.gz: 9ab0cb8f6280d405ba0e0f4b73ebbd82db504258485cd1b86b7c29f3a4fd23d3179d022d2dc6964995d58856b84817d7292d63f2940d918d7902a27486ffc159
+  metadata.gz: 8c8e34dff89e9821d92075040106772cec940f1ea4580b86c01a125c3e69260e9b988d79086a72bf37ca2826ef1c2dc36059f5ad7f9576ff1a850425120cdbb1
+  data.tar.gz: 55a21948f69f106242aa81a7f85f6a4908935809ced7729aae2d4ca8244f38ed9a024ed07b1d2d50d6794e3e4a6714d1ae489577d2fe015d4a1eddb368f4e6ee

data/_includes/footer.html

@@ -2,7 +2,7 @@
 
 	<div class="container">
 
-		<small class="small">&copy; {{ site.time | date: '%Y' }} — {{ site.title }}</small>
+		<small class="small">&copy; {{ site.time | date: '%Y' }}&nbsp;–&nbsp;{{ site.title }}</small>
 
 	</div>
 

data/_includes/header.html

@@ -1,16 +1,32 @@
 <header class="header">
 
-	<a href="{{ page.url }}" title="{{ page.title }}">
+	<div class="container">
 
-			<img class="avatar" src="{{ site.logo | replace: "300", "72" }}" alt="{{ site.title }}" srcset="{{ site.logo | replace: "300", "72" }}  72w, {{ site.logo | replace: "300", "144" }} 144w" width="72" height="72">
+		{% if site.logo %}
+		  <a class="logo" href="{{ site.url }}" title="{{ site.title }}">
+		    <img class="image" src="{{ site.logo | replace: "300", "72" }}" alt="{{ site.title }}" srcset="{{ site.logo | replace: "300", "72" }}  72w, {{ site.logo | replace: "300", "144" }} 144w" width="72" height="72">
+		  </a>
+		{% endif %}
 
-	</a>
+		<button class="button">Menu</button>
 
-	{% include nav.html %}
+		<nav class="nav  nav--main">
+		  {% if data.nav %}
 
-	<div class="container">
+		    {% for item in data.nav %}
+		      <a class="item" href="{{ item.url }}" title="{{ item.name }}">{{ item.name }}</a>
+		    {% endfor %}
+
+		  {% else %}
+
+		    {% for page in site.pages %}
+					{% if page.title %}
+		      	<a class="item" href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a>
+					{% endif %}
+		    {% endfor %}
 
-		<h1>{{ page.title }}</h1>
+		  {% endif %}
+		</nav>
 
 	</div>
 

data/_includes/pagination.html

@@ -1,17 +1,21 @@
-<aside class="container">
+<aside class="aside">
 
-  {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path }}" class="pagination  pagination--previous">&larr; Previous</a>
-  {% else %}
-    <span class="pagination  pagination--previous">&larr; Previous</span>
-  {% endif %}
+  <nav class="paginator  container">
 
-  <span class="pagination  pagination--divider">&bull;</span>
+    {% if paginator.previous_page %}
+      <a href="{{ paginator.previous_page_path }}" class="pagination  pagination--previous">&larr; Previous</a>
+    {% else %}
+      <span class="pagination  pagination--previous">&larr; Previous</span>
+    {% endif %}
 
-  {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path }}" class="pagination  pagination--next">Next &rarr;</a>
-  {% else %}
-    <span class="pagination  pagination--next">Next &rarr;</span>
-  {% endif %}
+    <span class="pagination  pagination--divider">&bull;</span>
+
+    {% if paginator.next_page %}
+      <a href="{{ paginator.next_page_path }}" class="pagination  pagination--next">Next &rarr;</a>
+    {% else %}
+      <span class="pagination  pagination--next">Next &rarr;</span>
+    {% endif %}
+
+  </nav>
 
 </aside>

data/_includes/posts.html

@@ -1,9 +1,9 @@
 	<ul class="posts">
 		{% for item in paginator.posts %}
 
-			<li class="post">
+			<li class="post  container">
 
-				<article class="container">
+				<article class="article  typeset">
 
 					<h2>
 						<a href="{{ item.url }}" title="{{ item.title }}">{{ item.title }}</a>

data/_layouts/default.html

@@ -15,8 +15,13 @@
 	</head>
 	<body>
 
+		{% include header.html %}
+
 		{{ content }}
 
+		{% include footer.html %}
+
+		<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Neuton" rel="stylesheet">
 		<script src="/js/scripts.js" type="text/javascript"></script>
 	</body>
 </html>

data/_layouts/front.html

@@ -2,11 +2,11 @@
 layout: default
 ---
 
-<main class="container">
+<main class="main  container">
 
-	{% include header.html %}
+	<article class="article  typeset">
 
-	<article class="content">
+		<h1>{{ page.title }}</h1>
 
 		{{ content }}
 
@@ -16,6 +16,4 @@ layout: default
 
 	{% include pagination.html %}
 
-	{% include footer.html %}
-
 </main>

data/_layouts/page.html

@@ -2,16 +2,14 @@
 layout: default
 ---
 
-<main class="container">
+<main class="main  container">
 
-	{% include header.html %}
+	<article class="article  typeset">
 
-	<article class="content">
+		<h1>{{ page.title }}</h1>
 
 		{{ content }}
 
 	</article>
 
-	{% include footer.html %}
-
 </main>

data/_layouts/post.html

@@ -2,21 +2,19 @@
 layout: default
 ---
 
-<main class="container">
+<main class="main  container">
 
-	{% include header.html %}
+	<article class="article  typeset">
 
-	<article class="content">
+		<h1>{{ page.title }}</h1>
 
 		<small class="small">
 				{% assign words = content | number_of_words %}
-				<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>&nbsp;&nbsp;–&nbsp;&nbsp;<span class="time  time--reading">{{ words | divided_by:180 }} minute read</span>
+				<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>&nbsp;–&nbsp;<span class="time  time--reading">{{ words | divided_by:180 }} minute read</span>
 		</small>
 
 		{{ content }}
 
 	</article>
 
-	{% include footer.html %}
-
 </main>

data/_sass/_sassline-base.scss

@@ -0,0 +1,7 @@
+// Import Sassline base SCSS files in order so variables are read correctly.
+@import "sassline-base/reset";
+@import "sassline-base/variables";
+@import "sassline-base/modular-scale";
+@import "sassline-base/mixins";
+@import "sassline-base/typography";
+@import "sassline-base/layouts";

data/_sass/sassline-base/_layouts.scss

@@ -0,0 +1,282 @@
+// Layouts
+// ---------------------------------------
+
+// Container.
+.section {
+  @include clearfix;
+
+  margin: 0 auto;
+  position: relative;
+  width: 94%;
+
+  @include breakpoint(break-3) {
+    @include maxwidth(3);
+  }
+
+  @include breakpoint(break-4) {
+    @include maxwidth(4);
+  }
+}
+
+// Single column (based on measure for typeset content).
+.single-measure {
+  @include measure(all);
+
+  margin: 0 auto;
+}
+
+// Base column styles.
+.column {
+  @include measure(0);
+
+  margin: 0 auto;
+  width: 100%;
+
+  @include breakpoint(break-1) {
+    float: left;
+    margin: initial;
+    max-width: initial;
+    padding-left: map-get($gutterwidths, small);
+    padding-right: map-get($gutterwidths, small);
+  }
+
+  @include breakpoint(break-3) {
+    padding-left: map-get($gutterwidths, medium);
+    padding-right: map-get($gutterwidths, medium);
+  }
+}
+
+// Two columns.
+.column--duo {
+
+  @include breakpoint(break-1) {
+    width: 50%;
+
+    &:nth-of-type(2n+3) {
+      clear: left;
+    }
+
+    &:nth-of-type(n+3) {
+      margin-top: 3rem;
+    }
+  }
+}
+
+// Three columns.
+.column--trio {
+
+  @include breakpoint(break-1) {
+    width: 33.333%;
+
+    &:nth-of-type(3n+4) {
+      clear: left;
+    }
+
+    &:nth-of-type(n+4) {
+      margin-top: 3rem;
+    }
+  }
+}
+
+// Four columns. Two at smaller breakpoints.
+.column--quad {
+
+  @include breakpoint(break-1) {
+    width: 50%;
+  }
+
+  @include breakpoint(break-2) {
+    width: 25%;
+  }
+}
+
+// Two column layout with a main text column and a sidebar.
+
+// Main column.
+.column--main {
+
+  @include breakpoint(break-1) {
+    @include ideal-measure(1, small);
+  }
+
+  @include breakpoint(break-2) {
+    @include ideal-measure(2, small);
+  }
+
+  @include breakpoint(break-3) {
+    @include ideal-measure(3, medium);
+  }
+
+  @include breakpoint(break-4) {
+    @include ideal-measure(4, medium);
+  }
+}
+
+// Sidebar.
+.column--sidebar {
+
+  @include breakpoint(break-1) {
+    @include ideal-measure(1, small, false);
+
+    padding-right: map-get($gutterwidths, medium);
+  }
+
+  @include breakpoint(break-2) {
+    @include ideal-measure(2, small, false);
+  }
+
+  @include breakpoint(break-3) {
+    @include ideal-measure(3, medium, false);
+
+    padding-right: map-get($gutterwidths, large);
+  }
+
+  @include breakpoint(break-4) {
+    @include ideal-measure(4, medium, false);
+  }
+}
+
+// If sidebar on the right side.
+.column--main + .column--sidebar {
+  @include breakpoint(break-1) {
+    padding-left: map-get($gutterwidths, medium);
+    padding-right: map-get($gutterwidths, small);
+  }
+
+  @include breakpoint(break-3) {
+    padding-left: map-get($gutterwidths, large);
+    padding-right: map-get($gutterwidths, medium);
+  }
+}
+
+// Set the main text one level down in the modular scale for narrower columns.
+.column--trio,
+.column--quad,
+.column--sidebar {
+
+  @include breakpoint(break-3) {
+
+    p {
+      @include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 3);
+    }
+
+    li {
+      @include fontsize(eta, 3);
+    }
+  }
+
+  @include breakpoint(break-4) {
+
+    p {
+      @include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 4);
+    }
+
+    li {
+      @include fontsize(eta, 4);
+    }
+  }
+}
+
+// Main column on the right with inline sidenotes.
+// The sidenotes will move out the column into the sidebar position aligned to the baseline.
+.column--right {
+
+  @include breakpoint(break-1) {
+    @include ideal-measure(1, small);
+    @include ideal-measure(1, small, false, margin-left);
+  }
+
+  @include breakpoint(break-2) {
+    @include ideal-measure(2, small);
+    @include ideal-measure(2, small, false, margin-left);
+  }
+
+  @include breakpoint(break-3) {
+    @include ideal-measure(3, medium);
+    @include ideal-measure(3, medium, false, margin-left);
+  }
+
+  @include breakpoint(break-4) {
+    @include ideal-measure(4, medium);
+    @include ideal-measure(4, medium, false, margin-left);
+  }
+
+  .sidenote {
+
+    @include breakpoint(break-1) {
+      @include ideal-measure(1, small, false);
+
+      left: 0;
+      padding-left: map-get($gutterwidths, small);
+      padding-right: map-get($gutterwidths, medium);
+      position: absolute;
+    }
+
+    @include breakpoint(break-2) {
+      @include ideal-measure(2, small, false);
+    }
+
+    @include breakpoint(break-3) {
+      @include ideal-measure(3, medium, false);
+
+      padding-right: map-get($gutterwidths, large);
+    }
+
+    @include breakpoint(break-4) {
+      @include ideal-measure(4, medium, false);
+
+      padding-left: map-get($gutterwidths, medium);
+    }
+  }
+}
+
+// Main column on the left with inline sidenotes.
+.column--left {
+
+  @include breakpoint(break-1) {
+    @include ideal-measure(1, small);
+  }
+
+  @include breakpoint(break-2) {
+    @include ideal-measure(2, small);
+  }
+
+  @include breakpoint(break-3) {
+    @include ideal-measure(3, medium);
+  }
+
+  @include breakpoint(break-4) {
+    @include ideal-measure(4, medium);
+  }
+
+  .sidenote {
+
+    @include breakpoint(break-1) {
+      @include ideal-measure(1, small, false);
+      @include ideal-measure(1, small, true, left);
+
+      padding-left: map-get($gutterwidths, medium);
+      padding-right: map-get($gutterwidths, small);
+      position: absolute;
+    }
+
+    @include breakpoint(break-2) {
+      @include ideal-measure(2, small, false);
+      @include ideal-measure(2, small, true, left);
+    }
+
+    @include breakpoint(break-3) {
+      @include ideal-measure(3, medium, false);
+      @include ideal-measure(3, medium, true, left);
+
+      padding-left: map-get($gutterwidths, large);
+    }
+
+    @include breakpoint(break-4) {
+      @include ideal-measure(4, medium, false);
+      @include ideal-measure(4, medium, true, left);
+
+      padding-right: map-get($gutterwidths, medium);
+    }
+  }
+}