Split styles in essential and non-essential

hydecorp · Sep 13, 2016 · 99ea12e · 99ea12e
1 parent a05271e
commit 99ea12e
Show file tree

Hide file tree

Showing 33 changed files with 318 additions and 370 deletions.
diff --git a/_config.yml b/_config.yml
@@ -21,7 +21,7 @@ paginate_path:     '/page-:num/'
 
 # Markdown enabled, however don't use more than one paragraph (enforced by `>`)
 description:       >
-  A pretentious two-column [Jekyll](http://jekyllrb.com/) theme, stolen by [`@qwtel`](https://twitter.com/qwtel)
+  A pretentious two-column [Jekyll](http://jekyllrb.com/) theme, stolen by [`@qwtel`{:style="background: rgba(255, 255, 255, 0.15)"}](https://twitter.com/qwtel)
   from [Hyde](http://hyde.getpoole.com).
   You could say it was.. [hydejacked](http://media3.giphy.com/media/makedRIckZBW8/giphy.gif).
 

diff --git a/_includes/essentials.scss b/_includes/essentials.scss
@@ -1,15 +1,37 @@
-@import "poole/variables";
-
-@import "poole/base";
-@import "poole/type";
-@import "poole/code";
-@import "poole/layout";
-@import "poole/posts";
-@import "poole/related";
-@import "poole/message";
-
-@import "hydejack/globals";
-@import "hydejack/sidebar";
+
+
+
+
+
+@import "pooleparty/variables";
+
+@import "pooleparty/base";
+@import "pooleparty/type-essential";
+// @import "pooleparty/type";
+// @import "pooleparty/table";
+// @import "pooleparty/footnotes";
+// @import "pooleparty/code";
+@import "pooleparty/layout";
+// @import "pooleparty/footer";
+// @import "pooleparty/masthead";
+@import "pooleparty/posts-essential";
+// @import "pooleparty/posts";
+// @import "pooleparty/pagination";
+@import "pooleparty/related-essential";
+// @import "pooleparty/related";
+@import "pooleparty/message";
+
+@import "hydejack/base-essential";
+// @import "hydejack/base";
+@import "hydejack/sidebar-essential";
+// @import "hydejack/sidebar";
+// @import "hydejack/aside";
+// @import "hydejack/drawer";
+// @import "hydejack/social";
 @import "hydejack/menu";
 @import "hydejack/content";
-@import "hydejack/me";
+@import "hydejack/me-essential";
+// @import "hydejack/me";
+// @import "hydejack/katex";
+
+// @import "jekyll-github";
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,11 +8,7 @@
   {% include head.html %}
 
   <body>
-    <a id="_menu" class="menu" href="#_sidebar">
-      <span>☰</span>
-      <span class="sr-only"> </span>
-      <span class="sr-only">Menu</span>
-    </a>
+    <a id="_menu" class="menu" href="#_sidebar">☰</a>
 
     <main class="content container">
       {{ content }}

diff --git a/_posts/2016-03-08-introducing-hydejack.md b/_posts/2016-03-08-introducing-hydejack.md
@@ -7,18 +7,6 @@ description: >
 
 ---
 
-<style>
-  .preview {
-    display: none;
-  }
-
-  @media (min-width: 48em) {
-    .preview {
-      display: block;
-    }
-  }
-</style>
-
 ## Features
 Unlike Hyde, it's very opinionated about how you are going to use it.
 

diff --git a/_sass/_hydejack.scss b/_sass/_hydejack.scss
diff --git a/_sass/_poole.scss b/_sass/_poole.scss
diff --git a/_sass/hydejack/_base-essential.scss b/_sass/hydejack/_base-essential.scss
@@ -0,0 +1,20 @@
+/*
+ * Global resets
+ *
+ * Update the foundational and global aspects of the page.
+ */
+@media (min-width: 48em) {
+  html {
+    font-size: 16px;
+  }
+}
+@media (min-width: 58em) {
+  html {
+    font-size: 18px;
+  }
+}
+
+.sr-only {
+  // will be properly styled in the non-essential part
+  display: none;
+}
diff --git a/_sass/hydejack/_globals.scss → _sass/hydejack/_base.scss b/_sass/hydejack/_globals.scss → _sass/hydejack/_base.scss
@@ -1,17 +1,10 @@
-/*
- * Global resets
- *
- * Update the foundational and global aspects of the page.
- */
-@media (min-width: 48em) {
-  html {
-    font-size: 16px;
-  }
-}
-@media (min-width: 58em) {
-  html {
-    font-size: 18px;
-  }
+body {
+  /* Prevent side-scrolling on mobile */
+  overflow-x: hidden;
+  position: relative;
+
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
 }
 
 a {
@@ -23,13 +16,20 @@ a {
     text-decoration: none;
     border-bottom: 0.18rem solid;
   }
+
+  &.menu {
+    &:hover, &:focus {
+      border-bottom: none;
+    }
+  }
 }
 
 h1 > a {
   padding-bottom: 0;
 }
 
 .sr-only {
+  display: static;
   position: absolute;
   width: 1px;
   height: 1px;

diff --git a/_sass/hydejack/_me-essential.scss b/_sass/hydejack/_me-essential.scss
@@ -0,0 +1,3 @@
+.me {
+  float: right;
+}
diff --git a/_sass/hydejack/_me.scss b/_sass/hydejack/_me.scss
@@ -5,7 +5,6 @@
     border-radius: 100%;
     position: relative;
     z-index: 2;
-    float: right;
 }
 @media (min-width: 38em) {
   .me {

diff --git a/_sass/hydejack/_menu.scss b/_sass/hydejack/_menu.scss
@@ -6,10 +6,6 @@
   padding: 1.25rem 1rem ;
   color: #9a9a9a;
   z-index: 2;
-
-  &:hover, &:focus {
-    border-bottom: none;
-  }
 }
 
 @media (min-width: 48em) {

diff --git a/_sass/hydejack/_sidebar-essential.scss b/_sass/hydejack/_sidebar-essential.scss
@@ -0,0 +1,67 @@
+/*
+ * Sidebar
+ *
+ * Flexible banner for housing site name, intro, and "footer" content. Starts
+ * out above content in mobile and later moves to the side with wider viewports.
+ */
+
+.backdrop {
+  display: none;
+}
+
+.sidebar {
+  position: relative;
+  z-index: 4;
+  padding: 2rem 1rem;
+  color: rgba(255,255,255,.75);
+  background-color: #202020;
+  text-align: left;
+  min-height: 100vh;
+  background-size: cover;
+  background-position: center center;
+
+  /* Sidebar links */
+  a {
+    color: #fff;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+  }
+}
+
+.sidebar-sticky {
+  position: absolute;
+  right:  1rem;
+  bottom: 1rem;
+  left:   1rem;
+}
+
+/* About section */
+.sidebar-about > h1 {
+  color: #fff;
+  font-size: 2rem;
+}
+
+.sidebar-nav-item {
+  font-weight: bold;
+  display: block;
+  line-height: 1.75;
+  padding: .25rem .1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.23);
+}
+
+.sidebar-social > ul {
+  min-height: 3.5rem;
+}
+
+@media (min-width: 48em) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 18rem;
+  }
+}