adds new .sidebar-overlay modifier class for keeping the drawer over …

…the content when toggled
seon54 · Jun 22, 2014 · 0a982b1 · 0a982b1
1 parent 7293a46
commit 0a982b1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -78,6 +78,27 @@ Reverse the page orientation with a single class.
 ```
 
 
+### Sidebar overlay instead of push
+
+Make the sidebar overlap the viewport content with a single class:
+
+```html
+<body class="sidebar-overlay">
+  ...
+</body>
+```
+
+This will keep the content stationary and slide in the sidebar over the side content. It also adds a `box-shadow` based outline to the toggle for contrast against backgrounds, as well as a `box-shadow` on the sidebar for depth.
+
+It's also available for a reversed layout when you add both classes:
+
+```html
+<body class="layout-reverse sidebar-overlay">
+  ...
+</body>
+```
+
+
 ## Development
 
 Lanyon has two branches, but only one is used for active development.

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,7 +3,7 @@
 
   {% include head.html %}
 
-  <body>
+  <body class="layout-reverse sidebar-overlay">
 
     {% include sidebar.html %}
 

diff --git a/public/css/lanyon.css b/public/css/lanyon.css
@@ -278,6 +278,7 @@ a.sidebar-nav-item:focus {
 }
 
 #sidebar-checkbox:checked + .sidebar {
+  z-index: 10;
   visibility: visible;
 }
 #sidebar-checkbox:checked ~ .sidebar,
@@ -525,3 +526,28 @@ a.pagination-item:hover {
 .theme-base-0f .related-posts li a:hover {
   color: #8f5536;
 }
+
+
+/*
+ * Overlay sidebar
+ *
+ * Make the sidebar content overlay the viewport content instead of pushing it
+ * aside when toggled.
+ */
+
+.sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
+  -webkit-transform: translateX(0);
+      -ms-transform: translateX(0);
+          transform: translateX(0);
+}
+.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
+  box-shadow: 0 0 0 .25rem #fff;
+}
+.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
+  box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
+}
+
+/* Only one tweak for a reverse layout */
+.layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
+  box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);
+}