From 126655aa72f0c25167d44216f6393cc2ec5e0031 Mon Sep 17 00:00:00 2001
From: Baptiste Gelez <baptiste@gelez.xyz>
Date: Sun, 17 Feb 2019 12:32:32 +0100
Subject: [PATCH] Left menu improvements

---
 source/_nav.erb                  |   3 -
 source/federation.html.md        |   8 +-
 source/index.html.erb            |   1 +
 source/javascripts/site.js       |   4 +-
 source/layouts/layout.erb        |  18 ++-
 source/stylesheets/site.css.scss | 190 +++++++++++++++++++++----------
 6 files changed, 155 insertions(+), 69 deletions(-)
diff --git a/source/_nav.erb b/source/_nav.erb
index 2a8fd64..ecc50d8 100644
--- a/source/_nav.erb
+++ b/source/_nav.erb
@@ -2,9 +2,6 @@
   <ul>
    <li>
     <a href="https://joinplu.me"><img src="/images/logo.svg" alt="Plume logo">Plume</a>
-   </li>
-   <li>
-     <a href="/">Documentation</a>
    </li>
     <li>
        <a href="https://contribute.joinplu.me/">Contribute</a>
diff --git a/source/federation.html.md b/source/federation.html.md
index e4e681d..187d69a 100644
--- a/source/federation.html.md
+++ b/source/federation.html.md
@@ -7,6 +7,7 @@ and which parts of these standards are available or not in Plume.'
 
 To federate with other Fediverse software (and itself), Plume uses various 
 protocols:
+
 - [ActivityPub](http://activitypub.rocks/), as the main federation protocol.
 - [WebFinger](https://webfinger.net/), to find other users and blog easily.
 - [HTTP Signatures](https://tools.ietf.org/id/draft-cavage-http-signatures-01.html), to 
@@ -15,6 +16,7 @@ authenticate activities.
 federation itself, but that gives some metadata about each instance.
 
 Currently, the following are federated:
+
 - User profiles
 - Blogs
 - Articles
@@ -23,6 +25,7 @@ Currently, the following are federated:
 - Reshares
 
 And these parts are not federated, but may be in the future:
+
 - Media gallery
 - Instance metadata
 
@@ -116,6 +119,7 @@ activity.
 Reshares an article (not available for other objects).
 
 Makes an user (`actor`) reshare a post (`object`).
+
 - `actor` is the ID of the user who reshared the post.
 - `object` is the ID of the post to reshare.
 
@@ -124,7 +128,8 @@ Makes an user (`actor`) reshare a post (`object`).
 Creates a new article or comment.
 
 If `object` is an `Article`:
-- `object.attibutedTo` is a list containing the ID of the authors and of the blog 
+
+- `object.attibutedTo` is a list containing the ID of the authors and of the blog
 in which this article have been published. If no blog ID is specified, the article 
 will be rejected. The `actor` of the activity corresponds to the user that clicked 
 the "Publish" button, and should normally be one of the author in `attributedTo`.
@@ -142,6 +147,7 @@ moment).
 article.
 
 If `object` is a `Note`:
+
 - `object.content` is the HTML source of the rendered comment.
 - `object.inReplyTo` is the ID of the previous comment in the thread, or of the 
 post that is commented if there is no previous comment.
diff --git a/source/index.html.erb b/source/index.html.erb
index f3a5375..0ea0846 100644
--- a/source/index.html.erb
+++ b/source/index.html.erb
@@ -1,5 +1,6 @@
 ---
 title: Plume documentation
+show_links: yes
 ---
 
 <h1>Topics</h1>
diff --git a/source/javascripts/site.js b/source/javascripts/site.js
index 9de6ff3..3b7183b 100644
--- a/source/javascripts/site.js
+++ b/source/javascripts/site.js
@@ -1 +1,3 @@
-// This is where it all goes :)
+document.getElementById('menu').addEventListener('click', evt =>
+  evt.target.parentElement.classList.toggle('show')
+)
\ No newline at end of file
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index ae7943e..7bff6da 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -12,21 +12,28 @@
     <style><%= Rouge::Themes::Github.render(:scope => '.highlight') %></style>
   </head>
   <body>
-    <%= partial 'nav' %>
     <header>
       <h1><%= current_page.data.title %></h1>
       <p><%= current_page.data.summary %></p>
     </header>
-    <nav class="left-menu">
-        <h1><a href="/"><img src="/images/logo.svg" alt="Plume logo"><span>Plume documentation</span></a></h1>
+    <aside>
+      <i id="menu" data-feather="menu"></i>
+      <nav>
+        <h1><a href="/"><span>Plume documentation</span><img src="/images/logo.svg" alt="Plume logo"></a></h1>
 	    <% resources = sitemap.resources
 	        .select{ |p| p.path =~ /\.html/ && p.path != "index.html" }
 	        .sort { |a, b| a.path <=> b.path }
         %>
         <%= partial :nav_item, :locals => { :items => resources.select { |r| r.url.chomp('/').split('/').size == 2 }, :resources => resources } %>
-    </nav>
+      </nav>
+    </aside>
     <main>
-      <%= yield %>
+      <% if current_page.data.show_links %>
+        <%= partial 'nav' %>
+      <% end %>
+      <article>
+        <%= yield %>
+      </article>
     </main>
     <footer>
       Website and documentation under the AGPL 3.0 license.
@@ -37,4 +44,3 @@
     <%= javascript_include_tag "site" %>
   </body>
 </html>
-
diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss
index c53c2bc..96d023a 100644
--- a/source/stylesheets/site.css.scss
+++ b/source/stylesheets/site.css.scss
@@ -1,6 +1,7 @@
 $plume: #7765e3;
 $plumedark: #6457a6;
 $gray: #F4F4F4;
+$black: invert($gray);
 
 @import url('https://fonts.googleapis.com/css?family=Playfair+Display');
 
@@ -14,19 +15,33 @@ h1, h2, h3 {
 }
 
 header {
-  margin: auto;
+  grid-area: head;
+  margin: 0;
   padding: 20vh 20vw;
   background: linear-gradient(0deg, $plumedark, $plume);
   color: white;
   font-size: 1.5em;
 }
 
-body > main > * {
-  padding: 0px 20vw;
+body {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: min-content 1fr min-content;
+  grid-template-areas:
+    "menu head head head head"
+    "menu cont cont cont cont"
+    "menu foot foot foot foot";
+}
+
+
+body > main > nav, body > main > nav ul {
+  padding: 0;
+  li {
+    padding: 0;
+  }
 }
 
 nav {
-  padding: 0px 20vw;
   background: $gray;
 
   img {
@@ -57,7 +72,7 @@ nav {
   }
 }
 
-nav:not(.left-menu) li {
+main nav li {
   display: flex;
   align-items: stretch;
   justify-items: stretch;
@@ -81,8 +96,8 @@ a, a:visited {
 footer {
   padding: 5em 5vw;
   background: $gray;
-  margin-top: 10vh;
   text-align: center;
+  grid-area: foot;
 }
 
 .highlight {
@@ -92,82 +107,101 @@ footer {
 }
 
 body > main {
-  margin-top: 2em;
+  grid-area: cont;
   line-height: 1.3em;
 
   ul {
-    padding-left: calc(20vw + 1.5em);
+    padding: 0 7.5vw;
     li {
       padding: 0.5em 0;
     }
   }
 }
 
-.left-menu {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 25vw;
-  left: -24vw;
-  padding: 0px;
-  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2);
-  transition: all ease-in 0.2s;
-
-  h1 a {
-    padding: 1em;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+aside {
+  grid-area: menu;
+  background: $black;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
+  z-index: 2;
+  svg {
+    display: none;
   }
 
-  ul {
-    display: block;
-    text-transform: none;
-    font-weight: 400;
+  nav {
+    padding: 0px;
+    height: 100%;
+    overflow-y: auto;
 
-    li {
-      display: inline;
+    h1 {
+      margin: 0;
+    }
 
-      a {
-        display: block;
-        padding: 2em;
-        border-bottom: none;
-        border-left: 5px solid transparent;
-        transition: all ease-in 0.2s;
+    h1 a {
+      padding: 2em;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
 
-        &:hover {
-          border-left-color: $plume;
+    ul {
+      display: block;
+      text-transform: none;
+      font-weight: 400;
+      list-style: none;
+      padding: 0px;
+      margin: 0px;
+
+      li {
+        display: inline;
+
+        a {
+          display: block;
+          padding: 2em;
+          border-bottom: none;
+          border-left: 5px solid transparent;
+          transition: all ease-in 0.2s;
+
+          &:hover {
+            border-left-color: $plume;
+          }
         }
       }
     }
-  }
 
-  & > ul {
-    text-transform: uppercase;
-    font-weight: 800;
-  }
+    & > ul {
+      text-transform: uppercase;
+      font-weight: 800;
+    }
 
-  & > ul > li > ul {
-    font-weight: 600;
-    & > li > a {
-      padding-left: 3em;
+    & > ul > li > ul {
+      font-weight: 600;
+      & > li > a {
+        padding: 1.5em;
+        padding-left: 3em;
+      }
     }
-  }
 
-  & > ul > li > ul > li > ul > li > a {
-    padding-left: 4em;
+    & > ul > li > ul > li > ul > li > a {
+      padding: 1em;
+      padding-left: 4em;
+    }
   }
+}
 
-  &:hover {
-    overflow-y: auto;
-    left: 0vw;
-  }
+main > article {
+  padding: 3em 0em;
+}
+
+main > article > * {
+  padding: 0 5vw;
 }
 
 .choices {
   display: flex;
+  flex-wrap: wrap;
   justify-items: stretch;
   list-style: none;
+  padding: 2em 5vw;
   & > li {
     flex: 1;
     a {
@@ -214,23 +248,63 @@ a.action {
   display: block;
   padding: 20px;
   max-width: 200px;
-  margin: 20px auto;
+  margin: 5em auto;
   border-radius: 5px;
   background: $plume;
   color: white;
 }
 
 @media screen and (max-width: 1000px) {
-  body > main > * {
+  main nav li a {
+    padding: 15px 0px;
+  }
+
+  aside svg {
+    display: block;
+    position: relative;
+    top: 0;
+    left: 100%;
+    color: white;
+    padding: 0.5em;
+    margin: 0.5em;
+    background: $black;
+    border-radius: 5px;
+  }
+
+  body > main > article > * {
     padding: 0 5vw;
   }
 
   header {
-    padding: 10vh 20vw;
+    padding: 10vh 0vw;
     text-align: center;
   }
 
-  .left-menu {
-    display: none;
+  .cards, body > main > nav ul {
+    grid: auto-flow / 1fr;
+  }
+
+  aside {
+    position: fixed;
+    left: -100vw;
+    top: 0;
+    bottom: 0;
+    width: 100vw;
+    transition: all ease-in 0.2s;
+  }
+
+  aside.show {
+    left: 0;
+
+    svg {
+      left: 0;
+    }
+  }
+
+  body {
+    grid-template-areas:
+      "head head head head head"
+      "cont cont cont cont cont"
+      "foot foot foot foot foot";
   }
 }
\ No newline at end of file
