From 17962116c5c56dccbc885e13e41aedee7fcc3948 Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Thu, 2 Mar 2017 00:19:12 -0500
Subject: [PATCH 1/4] devPunk Pure CSS Tabs (Inspired by Vicente)   - based on
 https://gist.github.com/snuggs/d10c14af11c7ee3070e47168fa9bc0bb

---
 public/tabs.html | 96 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 public/tabs.html

diff --git a/public/tabs.html b/public/tabs.html
new file mode 100644
index 0000000..db6a910
--- /dev/null
+++ b/public/tabs.html
@@ -0,0 +1,96 @@
+<!-- This will degrade gracefully back to like IE6 Anchors or something ancient -->
+
+<meta charset='utf-8'>
+<meta name='viewport' content='width=device-width, initial-scale=1.0'>
+
+<title>#devPunk Pure CSS Tabs</title>
+
+<style>
+@import '//www.devpunks.com/typography.css';
+
+:root {
+  --lightest-color: rgba(255,255,255,0.9);
+  --lighter-color:  rgba(245,245,245,0.8);
+  --darker-color:   rgba(100,100,100, 0.8);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0; // this is just to override typography.css setting
+}
+
+h1 { text-align: center }
+section h1 { color: var(--darker-color) }
+
+menu {
+  margin: 0;
+  height: 3em;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  background: var(--darker-color);
+}
+menu a {
+  border-bottom: 0;
+  padding: 0.5em 1em;
+  margin: 0.5em 0.5em 0;
+  color: var(--darker-color);
+  background: var(--lighter-color);
+}
+menu a:hover  { background: var(--lightest-color) }
+
+/*
+targeted selectors (allows fragment identifier to be used for bookmarks
+https://en.wikipedia.org/wiki/Fragment_identifier
+https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+
+*/
+#about, #maintenance, #calibration { display: none }
+#about:target, #maintenance:target, #calibration:target
+{
+  flex: 1;
+  margin: 0;
+  display: block;
+  color: var(--darker-color);
+  background: var(--lightest-color);
+
+  // General sibling selectors
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
+}
+p { text-align: center; margin: var(--margin) }
+</style>
+
+<h1>#devPunk Pure CSS Tabs</h1>
+
+<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu -->
+
+<p>
+  <strong>BEHOLD</strong> Pure CSS Tabs 😂
+  <a title='Get the gist' rel='external' target='github' href='https://gist.github.com/snuggs/d10c14af11c7ee3070e47168fa9bc0bb'>Get the gist</a>
+</p>
+
+<menu>
+  <a title='About' href='#about'>About</a>
+  <a title='Maintenance' href='#maintenance'>Maintenance</a>
+  <a title='Calibration' href='#calibration'>Calibration</a>
+</menu>
+
+<section id='about'>
+  <h1>About</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
+</section>
+
+<section id='maintenance'>
+  <h1>Maintenance</h1>
+
+  <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
+</section>
+
+<section id='calibration'>
+  <h1>Calibratoin</h1>
+
+  <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
+</section>

From c69ae0cada315dcf6f38a83aa244c1f4b8739164 Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 11 Mar 2017 19:25:02 -0500
Subject: [PATCH 2/4] Update Markup

---
 public/tabs.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/tabs.html b/public/tabs.html
index db6a910..fdf80aa 100644
--- a/public/tabs.html
+++ b/public/tabs.html
@@ -1,10 +1,10 @@
 <!-- This will degrade gracefully back to like IE6 Anchors or something ancient -->
 
+<title>#devPunk Pure CSS Tabs</title>
+
 <meta charset='utf-8'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 
-<title>#devPunk Pure CSS Tabs</title>
-
 <style>
 @import '//www.devpunks.com/typography.css';
 
@@ -64,13 +64,13 @@
 
 <h1>#devPunk Pure CSS Tabs</h1>
 
-<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu -->
-
 <p>
   <strong>BEHOLD</strong> Pure CSS Tabs 😂
   <a title='Get the gist' rel='external' target='github' href='https://gist.github.com/snuggs/d10c14af11c7ee3070e47168fa9bc0bb'>Get the gist</a>
 </p>
 
+<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu -->
+
 <menu>
   <a title='About' href='#about'>About</a>
   <a title='Maintenance' href='#maintenance'>Maintenance</a>

From a1b2a2828896e4ae3b01b8e9290f04d0ecc25555 Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 11 Mar 2017 23:00:24 -0500
Subject: [PATCH 3/4] Refactor Mobile Responsive & Toggling

---
 public/tabs.html | 106 ++++++++++++++++++++++-------------------------
 1 file changed, 49 insertions(+), 57 deletions(-)

diff --git a/public/tabs.html b/public/tabs.html
index fdf80aa..2c70d06 100644
--- a/public/tabs.html
+++ b/public/tabs.html
@@ -14,52 +14,44 @@
   --darker-color:   rgba(100,100,100, 0.8);
 }
 
-body {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 0; // this is just to override typography.css setting
-}
+h1, p { text-align: center }
 
-h1 { text-align: center }
-section h1 { color: var(--darker-color) }
-
-menu {
-  margin: 0;
-  height: 3em;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: center;
-  background: var(--darker-color);
-}
-menu a {
+.tabs { display: flex; flex-flow: column nowrap }
+.tabs > a {
+  line-height: 2em;
   border-bottom: 0;
-  padding: 0.5em 1em;
-  margin: 0.5em 0.5em 0;
-  color: var(--darker-color);
-  background: var(--lighter-color);
+  text-align: center;
 }
-menu a:hover  { background: var(--lightest-color) }
 
 /*
-targeted selectors (allows fragment identifier to be used for bookmarks
-https://en.wikipedia.org/wiki/Fragment_identifier
-https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+  targeted selectors (allows fragment identifier to be used for bookmarks
+  https://en.wikipedia.org/wiki/Fragment_identifier
+  https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+*/
+.tabs > a, .tabs > a:target { flex: 1; order: 0 }
+.tabs > a:target { color: var(--hover-link) }
 
+/*
+  Adjacent sibling selectors & General sibling selectors
+  https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
+  https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
 */
-#about, #maintenance, #calibration { display: none }
-#about:target, #maintenance:target, #calibration:target
-{
-  flex: 1;
-  margin: 0;
-  display: block;
-  color: var(--darker-color);
-  background: var(--lightest-color);
-
-  // General sibling selectors
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
+.tabs > section { order: 2 }
+.tabs a:target + section { order: 1; color: var(--lightest-color) }
+
+@media only screen and (orientation: landscape) {
+  .tabs { flex-flow: row wrap }
+  .tabs > a { background: var(--lighter-color) }
+  .tabs > a:hover, .tabs > a:target, .tabs a:target ~ section {
+    color: var(--darker-color);
+    background: var(--lightest-color)
+  }
+  .tabs > a ~ section { order: 1; min-height: 70% }
+  .tabs > a:not(:target) + section { display: none }
 }
-p { text-align: center; margin: var(--margin) }
+
+/* uncomment for toggle tabs (current one not visible */
+// .tabs > a:target { display: none; }
 </style>
 
 <h1>#devPunk Pure CSS Tabs</h1>
@@ -69,28 +61,28 @@ <h1>#devPunk Pure CSS Tabs</h1>
   <a title='Get the gist' rel='external' target='github' href='https://gist.github.com/snuggs/d10c14af11c7ee3070e47168fa9bc0bb'>Get the gist</a>
 </p>
 
-<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu -->
-
-<menu>
-  <a title='About' href='#about'>About</a>
-  <a title='Maintenance' href='#maintenance'>Maintenance</a>
-  <a title='Calibration' href='#calibration'>Calibration</a>
-</menu>
+<main class='tabs'>
+  <a title='About' id='about' href='#about'>About</a>
+  <section>
+    <h1>About</h1>
 
-<section id='about'>
-  <h1>About</h1>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
+  </section>
 
-  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
-</section>
+  <a title='Maintenance' id='maintenance' href='#maintenance'>Maintenance</a>
+  <section>
+    <h1>Maintenance</h1>
 
-<section id='maintenance'>
-  <h1>Maintenance</h1>
+    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
+  </section>
 
-  <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
-</section>
+  <!--
+  -->
 
-<section id='calibration'>
-  <h1>Calibratoin</h1>
+  <a title='Calibration' id='calibration' href='#calibration'>Calibration</a>
+  <section>
+    <h1>Calibratoin</h1>
 
-  <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
-</section>
+    <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
+  </section>
+</main>

From b005ba2a31b486c870a7b100f0582b08dc07d32a Mon Sep 17 00:00:00 2001
From: Snuggs <rashaunstovall@gmail.com>
Date: Sat, 11 Mar 2017 23:04:45 -0500
Subject: [PATCH 4/4] Update h1 Header

---
 public/tabs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/tabs.html b/public/tabs.html
index 2c70d06..660d182 100644
--- a/public/tabs.html
+++ b/public/tabs.html
@@ -1,6 +1,6 @@
 <!-- This will degrade gracefully back to like IE6 Anchors or something ancient -->
 
-<title>#devPunk Pure CSS Tabs</title>
+<title>#devPunks Pure CSS Responsive Flexbox Tabs</title>
 
 <meta charset='utf-8'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>