Merge branch 'rc-basscss8-01'

config.toml

@@ -76,15 +76,15 @@ paginate = 7
         name = "Topics"
         url = "/topics"
         pre = "All Topics"
-        post = "sm-show"
+        post = "xs-hide"
         identifier = "mainalltopics"
         weight = "3"
 
     [[menu.main]]
         name = "Tags"
         url = "/tags"
         pre = "All Tags"
-        post = "sm-show"
+        post = "xs-hide"
         identifier = "mainalltags"
         weight = "4"
 

content/about.md

@@ -36,11 +36,11 @@ images:
 
 ## Quick Summary
 
-<figure class="sm-show col-3 right fit center">
+<figure class="xs-hide col-3 right fit center">
   <a href="/img/rick-cogley-avatar-240x240.png" title="Rick Cogley" data-lightbox="set1" data-title="Rick Cogley"><img class="circle border border-darken-1" src="/img/rick-cogley-avatar-240x240.png" alt="Photo of Rick Cogley" ></a>
   <figcaption>&mdash; <em>Rick Cogley</em></figcaption>
 </figure>
-<figure class="sm-hide col-12 fit center">
+<figure class="sm-hide md-hide lg-hide col-12 fit center">
   <a href="/img/rick-cogley-avatar-240x240.png" title="Rick Cogley" data-lightbox="set1" data-title="Rick Cogley"><img class="circle border border-darken-1" src="/img/rick-cogley-avatar-240x240.png" alt="Photo of Rick Cogley" ></a>
   <figcaption>&mdash; <em>Rick Cogley</em></figcaption>
 </figure>

layouts/index.html

@@ -7,12 +7,12 @@
 
 <main class="m0 p4 bg-lightpaperfibers">
   <section id="latest-post" class="p0 m0 center">
-    <header class="mt3 mb1 py1 border-bottom">
+    <header class="mt3 mb1 py1 border-bottom border-darken-2">
       <h2 class="big-title text-shadow h2-responsive sans m0 rice-paper-dark">The Latest, <span class="rice-paper-light italic">& Freshest</span><svg class="rice-paper-light"><use xlink:href="/img/symbol-defs.svg#icon-feather2" /></svg></h2>
     </header>
     <div class="clearfix">
       {{ range first 1 .Site.Pages }}
-      <div class="sm-show sm-col sm-col-12 md-col-2 lg-col-3 px2">
+      <div class="xs-hide sm-col sm-col-12 md-col-2 lg-col-3 px2">
         <svg class="latest-accent-svg-icon"><use xlink:href="/img/symbol-defs.svg#{{ .Params.postsvg }}" /></svg>
       </div>
 
@@ -24,7 +24,7 @@ <h3 class="h2 h2-responsive m1">
       <div class="right p0 m0">
         <p><a href="{{ .RelPermalink }}" class="deco">Read More&hellip;</a></p>
       </div>
-      <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide">on {{ .Date.Format "2-Jan-2006" }}
+      <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide md-hide lg-hide">on {{ .Date.Format "2-Jan-2006" }}
         <br>In
         {{ $Site := .Site }}
         {{ if .Params.topics }}
@@ -42,7 +42,7 @@ <h3 class="h2 h2-responsive m1">
   </section>
 
   <section id="still-fresh-posts" class="py1 mt1">
-    <header class="mt3 mb1 py1 border-bottom">
+    <header class="mt3 mb1 py1 border-bottom border-darken-1">
       <h2 class="h2-responsive m0 text-shadow rice-paper-medium"><span class="italic">Still</span> Fresh</h2>
     </header>
     <div class="clearfix mxn2">
@@ -54,15 +54,15 @@ <h3 class="h3-responsive m1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
         <div class="right p0 m0">
           <p><a href="{{ .RelPermalink }}" class="deco"><svg><use xlink:href="/img/symbol-defs.svg#icon-pointer-right" /></svg></a></p>
         </div>
-        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
+        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide md-hide lg-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
         {{ end }}
         {{ if (eq $index 2) }}
         <h3 class="h3-responsive m1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
         <p class="italic m1">{{ .Params.postsummary | markdownify }}</p>
         <div class="right p0 m0">
           <p><a href="{{ .RelPermalink }}" class="deco"><svg><use xlink:href="/img/symbol-defs.svg#icon-pointer-right" /></svg></a></p>
         </div>
-        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
+        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide md-hide lg-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
         {{ end }}
         {{ end }}
       </div>
@@ -75,19 +75,19 @@ <h3 class="h3-responsive m1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
         <div class="right p0 m0">
           <p><a href="{{ .RelPermalink }}" class="deco"><svg><use xlink:href="/img/symbol-defs.svg#icon-pointer-right" /></svg></a></p>
         </div>
-        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
+        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide md-hide lg-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
         {{ end }}
         {{ if (eq $index 4) }}
         <h3 class="h3-responsive m1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
         <p class="italic m1">{{ .Params.postsummary | markdownify }}</p>
         <div class="right p0 m0">
           <p><a href="{{ .RelPermalink }}" class="deco"><svg><use xlink:href="/img/symbol-defs.svg#icon-pointer-right" /></svg></a></p>
         </div>
-        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
+        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide md-hide lg-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
         {{ end }}
         {{ end }}
 
-      <div class="sm-show">
+      <div class="xs-hide">
         <div class="rccpagination sans btn btn-primary bg-darken-1">
           <a href="/post" class="left">
             <svg><use xlink:href="/img/symbol-defs.svg#icon-arrow-left" /></svg>
@@ -105,19 +105,19 @@ <h3 class="h3-responsive m1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
         <div class="right p0 m0">
           <p><a href="{{ .RelPermalink }}" class="deco"><svg><use xlink:href="/img/symbol-defs.svg#icon-pointer-right" /></svg></a></p>
         </div>
-        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
+        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide md-hide lg-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
         {{ end }}
         {{ if (eq $index 6) }}
         <h3 class="h3-responsive m1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
         <p class="italic m1">{{ .Params.postsummary | markdownify }}</p>
         <div class="right p0 m0">
           <p><a href="{{ .RelPermalink }}" class="deco"><svg><use xlink:href="/img/symbol-defs.svg#icon-pointer-right" /></svg></a></p>
         </div>
-        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
+        <p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide md-hide lg-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
         {{ end }}
         {{ end }}
 
-        <div class="sm-hide">
+        <div class="sm-hide md-hide lg-hide">
           <div class="rccpagination sans btn btn-primary bg-darken-1">
             <a href="/posts" class="left">
               <svg><use xlink:href="/img/symbol-defs.svg#icon-arrow-left" /></svg>

layouts/partials/footer.html

@@ -1,7 +1,7 @@
 {{ "<!-- ENTERING partial footer.html -->" | safeHTML }}
 
 <footer class="deco bold py2 m0 border-top white border-darken-4 bg-darken-4">
-	<div class="flex flex-baseline flex-wrap px1">
+	<div class="flex items-baseline flex-wrap px1">
 		<div class="px1 italic">This is RCC.</div>
 		<!--{{ range .Site.Menus.footer }}-->
 			<!--<a href="{{ .URL }}" class="button button-narrow button-small button-transparent ml1">{{ .Name }}</a>-->
@@ -11,44 +11,44 @@
 		<a href="/license" class="button button-narrow button-small button-transparent ml1">License</a>
 
 		<div class="flex-auto flex-sm center">
-			<span class="socialicons flex-wrap">
+			<span class="socialicons flex-wrap pb1">
 				<span>Connect: </span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Let's work out on Strava">
-					<a href="//www.strava.com/athletes/1097516" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank">
+					<a href="//www.strava.com/athletes/1097516" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank">
 						<svg><use xlink:href="/img/symbol-defs.svg#icon-run" /></svg>
 					</a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Follow me on Twitter">
-					<a href="//twitter.com/rickcogley" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank">
+					<a href="//twitter.com/rickcogley" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank">
 						<svg><use xlink:href="/img/symbol-defs.svg#icon-twitter" /></svg>
 					</a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Follow me on Github">
-					<a href="//github.com/rickcogley" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-github" /></svg></a>
+					<a href="//github.com/rickcogley" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-github" /></svg></a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Circle me on Google+">
-					<a href="//plus.google.com/&#43;RickCogley?rel=author" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-google-plus3" /></svg></a>
+					<a href="//plus.google.com/&#43;RickCogley?rel=author" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-google-plus3" /></svg></a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Friend me on Facebook">
-					<a href="//www.facebook.com/rickcogley" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-facebook2" /></svg></a>
+					<a href="//www.facebook.com/rickcogley" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-facebook2" /></svg></a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Connect with me on LinkedIn">
-					<a href="//www.linkedin.com/in/rickcogley" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-linkedin" /></svg></a>
+					<a href="//www.linkedin.com/in/rickcogley" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-linkedin" /></svg></a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Browse my Photos on Flickr">
-					<a href="//www.flickr.com/photos/rickcogley/" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-flickr2" /></svg></a>
+					<a href="//www.flickr.com/photos/rickcogley/" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-flickr2" /></svg></a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="View my Videos on Vimeo">
-					<a href="//vimeo.com/rickcogley" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-vimeo" /></svg></a>
+					<a href="//vimeo.com/rickcogley" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-vimeo" /></svg></a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Subscribe to my Youtube Channel">
-					<a href="//www.youtube.com/user/rickcogley?sub_confirmation=1" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-youtube" /></svg></a>
+					<a href="//www.youtube.com/user/rickcogley?sub_confirmation=1" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-youtube" /></svg></a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Browse my Pinboard Pins">
-					<a href="//pinboard.in/u:rickcogley" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-pushpin" /></svg></a>
+					<a href="//pinboard.in/u:rickcogley" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-pushpin" /></svg></a>
 				</span>
 				<span class="r-Tooltip r-Tooltip--top r-Tooltip--nowrap" data-r-tooltip="Subscribe to the RSS Feed">
-					<a href="/index.xml" class="btn btn-primary px1 sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-rss" /></svg></a>
+					<a href="/index.xml" class="btn btn-small btn-primary sans light bg-lighten-4" target="_blank"><svg><use xlink:href="/img/symbol-defs.svg#icon-rss" /></svg></a>
 				</span>
 			</span>
 		</div>
@@ -68,14 +68,14 @@
 
 				<span class="email-octopus-success-message"></span>
 				<span class="email-octopus-error-message"></span>
-				<form method="post" action="https://emailoctopus.com/lists/64dbf442-b268-11e5-b4ea-0a4287b2e8c5/members/external-add" class="email-octopus-form clearfix m1">
-					<span>Get Email Updates: </span>
-					<input type="email" name="emailAddress" class="col-4 email-octopus-email-address field rounded-left x-group-item" placeholder="Your Email Address">
-					<button type="submit" class="btn btn-primary bg-teal rounded-right x-group-item">Subscribe</button>
-					<div class="email-octopus-form-row-honeypot">
+				<form method="post" action="https://emailoctopus.com/lists/64dbf442-b268-11e5-b4ea-0a4287b2e8c5/members/external-add" class="email-octopus-form clearfix m1 pt2">
+					<label>Get Email Updates: </label>
+					<input type="email" name="emailAddress" class="col-4 email-octopus-email-address input bg-teal bg-lighten-1 border border-darken-1 rounded-left x-group-item inline-block" placeholder="Your Email Address">
+					<button type="submit" class="btn btn-primary bg-lighten-2 rounded-right x-group-item inline-block">Subscribe</button>
+					<span class="email-octopus-form-row-honeypot">
 						<label>Protecting against bot signups - leave this field blank</label>
 						<input type="text" name="hp64dbf442-b268-11e5-b4ea-0a4287b2e8c5" autocomplete="off">
-					</div>
+					</span>
 
 				</form>
 			</div>

layouts/partials/headerbanner1.html

@@ -1,34 +1,34 @@
 {{ "<!-- ENTERING partial headerbanner1.html -->" | safeHTML }}
 <header role="banner" class="clearfix px4 m0 white bg-gradient-greenblue2">
-  <div class="flex flex-center py4">
+  <div class="flex items-center py4">
     <div class="flex-auto">
-      <div class="sm-hide r-Tooltip r-Tooltip--bottom r-Tooltip--nowrap" data-r-tooltip="RCC Home">
+      <div class="sm-hide md-hide lg-hide r-Tooltip r-Tooltip--bottom r-Tooltip--nowrap" data-r-tooltip="RCC Home">
         <a href="{{ .Site.BaseURL }}"><img src="/img/rcc-logo-1.svg" width="40" class="m0 p1 bg-white rounded"></a>
       </div>
-      <!--<div class="sm-hide h2 sans bold flex m0">RCC</div>-->
-      <div class="sm-show h1 sans bold caps flex flex-center m0">RCC</div>
-      <nav role="navigation" class="sm-hide rccnav mxn1">
+      <!--<div class="sm-hide md-hide lg-hide h2 sans bold flex m0">RCC</div>-->
+      <div class="xs-hide h1 sans bold caps flex items-center m0">RCC</div>
+      <nav role="navigation" class="sm-hide md-hide lg-hide rccnav mxn1">
         {{ range .Site.Menus.main }}
           <a href="{{ .URL }}" class="btn btn-primary px1 sans light bg-darken-2 {{ .Post }}">{{ .Name }}</a>
         {{ end }}
       </nav>
-      <nav role="navigation" class="sm-show rccnav mxn1">
+      <nav role="navigation" class="xs-hide rccnav mxn1">
         {{ range .Site.Menus.main }}
           <a href="{{ .URL }}" class="btn btn-primary px1 sans light bg-darken-2 r-Tooltip r-Tooltip--bottom r-Tooltip--nowrap" data-r-tooltip="{{ .Pre }}">{{ .Name }}</a>
         {{ end }}
       </nav>
     </div>
-    <div class="clearfix sm-hide px2"></div>
-    <div class="flex-center overflow-hidden px2 py1" role="search">
+    <div class="clearfix sm-hide md-hide lg-hide px2"></div>
+    <div class="items-center overflow-hidden px1 py1" role="search">
       <form id="cse-search-box" action="http://google.com/cse">
         <input type="hidden" name="cx" value="018195656038046585595:v0aqyxd648a" />
         <input type="hidden" name="ie" value="UTF-8" />
-        <input type="text" name="q" class="fit field white sans light rounded-left x-group-item bg-darken-2" placeholder="Google Custom Search" />
-        <input type="submit" name="sa" class="sm-show right white sans light btn btn-primary bg-lighten-2 rounded-right x-group-item" value="Search" />
+        <input type="text" name="q" class="fit input inline-block white sans light rounded-left x-group-item border-darken-1 bg-darken-2" placeholder="Google Custom Search" />
+        <!--<input type="submit" name="sa" class="inline-block xs-hide right white sans light btn btn-primary bg-lighten-2 rounded-right x-group-item" value="Search" />-->
       </form>
     </div>
-    <div class="sm-show r-Tooltip r-Tooltip--bottom r-Tooltip--nowrap" data-r-tooltip="RCC Home">
-      <a href="{{ .Site.BaseURL }}"><img src="/img/rcc-logo-1.svg" width="40" class="m0 p1 bg-lighten-4 rounded"></a>
+    <div class="xs-hide r-Tooltip r-Tooltip--bottom r-Tooltip--nowrap px2 pb1" data-r-tooltip="RCC Home">
+      <a href="{{ .Site.BaseURL }}"><img src="/img/rcc-logo-1.svg" width="45" class="m0 p1 bg-lighten-4 rounded"></a>
     </div>
   </div>
 </header>

layouts/partials/listtop_default_section.html

@@ -1,8 +1,8 @@
 {{ "<!-- ENTERING partial listtop_default_section.html -->" | safeHTML }}
 <section id="sectiontop" class="py2 px4 m0 border-bottom white bg-darkgrey border-darken-4">
 {{ if eq .Title "Posts" }}
-  <img class="sm-show right p2 circle" src="/img/Cogley-TopPhotos-Obi-Color.jpg" alt="Beautiful Obi Belt for a Formal Kimono">
-  <img class="sm-hide center p2 circle" src="/img/Cogley-TopPhotos-Obi-Color.jpg" alt="Beautiful Obi Belt for a Formal Kimono">
+  <img class="xs-hide right p2 circle" src="/img/Cogley-TopPhotos-Obi-Color.jpg" alt="Beautiful Obi Belt for a Formal Kimono">
+  <img class="sm-hide md-hide lg-hide center p2 circle" src="/img/Cogley-TopPhotos-Obi-Color.jpg" alt="Beautiful Obi Belt for a Formal Kimono">
 {{ end }}
   <h2 class="h2-responsive mt0 mb2">Welcome to the {{ .Title }} Section</h2>
   <p>