From 0e5ac67b83598adb66648dd385ad3c945b47c203 Mon Sep 17 00:00:00 2001
From: Nana Sakisaka <saki7@setna.io>
Date: Fri, 10 Nov 2017 22:23:12 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B5=E3=82=A4=E3=83=89=E3=83=90=E3=83=BC?=
 =?UTF-8?q?=E3=82=92=E5=9B=BA=E5=AE=9A=20ref:=20cpprefjp/site#476,=20close?=
 =?UTF-8?q?s=20#38?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

includes workaround for cpprefjp/site_generator#47
---
 css/browser.css            |   5 +-
 css/kunai/site/article.css |  47 +++++++++++++--
 css/kunai/site/body.css    |  21 -------
 css/kunai/site/layout.css  | 113 +++++++++++++++++++++++++++++--------
 css/kunai/site/navbar.css  |  11 +---
 css/kunai/site/sidebar.css |  22 +++++++-
 css/kunai/variables.css    |   5 +-
 js/kunai/compat.js         |  13 +++++
 8 files changed, 176 insertions(+), 61 deletions(-)

diff --git a/css/browser.css b/css/browser.css
index ab63a86..ae2f267 100644
--- a/css/browser.css
+++ b/css/browser.css
@@ -7,11 +7,12 @@ body.kunai {
             content: "[kunai-testing]";
 
             position: absolute;
-            top: 2px;
-            left: 40%;
+            top: 10px;
+            right: 10px;
             line-height: 1.5;
             font-size: 14px;
             display: block;
+            width: 10em;
 
             font-weight: bold;
             $c: rgb(240, 36, 54);
diff --git a/css/kunai/site/article.css b/css/kunai/site/article.css
index a202b31..849d18b 100644
--- a/css/kunai/site/article.css
+++ b/css/kunai/site/article.css
@@ -14,19 +14,19 @@ div[itemtype="http://schema.org/Article"] {
 
   > .row {
     &:nth-child(2) {
-      order: 1;
+      order: -12;
 
       display: flex;
       flex-direction: column;
     }
     &:nth-child(1) {
-      order: 2;
+      order: -11;
     }
     &:nth-child(3) {
-      order: 3;
+      order: -10;
     }
     &:nth-child(4) {
-      order: 4;
+      order: -9;
     }
   }
 
@@ -131,6 +131,7 @@ div[itemtype="http://schema.org/Article"] {
     overflow: visible;
     margin: 0;
 
+    word-break: break-word;
 
     $cl-heading-lighter: #666;
     > .identifier-type {
@@ -232,8 +233,46 @@ div[itemtype="http://schema.org/Article"] {
     }
   }
 
+  > footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+
+    border-radius: 0;
+    border: none;
+    border-top: 1px solid color($cl-shuri alpha(0.2));
+
+    margin: 0;
+    box-sizing: border-box;
+    padding: .5rem .75rem;
+
+    position: relative;
+
+    color: #676767;
+    background: #f8f8f8;
+
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
+
+    > .container-fluid {
+      display: flex;
+      flex-direction: column;
+    }
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
   @media (max-width: 414px) {
     .content-body {
+      $pad: 1rem;
+      padding-left: $pad;
+      padding-right: $pad;
+
       h1 {
         font-size: 1.8rem;
       }
diff --git a/css/kunai/site/body.css b/css/kunai/site/body.css
index 618cfad..244c748 100644
--- a/css/kunai/site/body.css
+++ b/css/kunai/site/body.css
@@ -10,27 +10,6 @@ html, html.cpprefjp, html.boostjp {
     padding: 0;
   }
 
-  body > footer {
-    overflow: hidden;
-
-    text-align: center;
-    border-radius: 0;
-    border: none;
-    border-top: 1px solid color($cl-shuri alpha(0.2));
-
-    min-height: unset;
-    margin: 0;
-    padding: .5rem .5rem;
-
-    position: relative;
-    z-index: 0;
-
-    color: #676767;
-    background: #f8f8f8;
-
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
-  }
-
   button {
     outline: none;
   }
diff --git a/css/kunai/site/layout.css b/css/kunai/site/layout.css
index b6583ff..9876fca 100644
--- a/css/kunai/site/layout.css
+++ b/css/kunai/site/layout.css
@@ -4,7 +4,39 @@ $main-z: 1;
 $content-z: calc($main-z + 1);
 $content-header-z: calc($content-z + 1);
 $side-z: calc($content-header-z + 1);
-$navbar-expand-z: calc($side-z + 1);
+$navbar-z: calc($side-z + 1);
+$navbar-expand-z: calc($navbar-z + 1);
+
+
+body {
+  overflow: hidden;
+
+  > header {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+
+    height: $navbar-height;
+    background: $nav-bg;
+
+    border: none;
+    border-bottom: 1px solid color($cl-shuri alpha(0.2));
+
+    position: relative;
+    z-index: $navbar-z;
+  }
+
+  main {
+    height: $main-height;
+  }
+
+  > footer {
+    // legacy footer;
+    // see: https://github.com/cpprefjp/site_generator/issues/47
+    display: none;
+  }
+}
 
 
 nav[role="navigation"] {
@@ -13,11 +45,8 @@ nav[role="navigation"] {
   // max-height: 8vh;
 
   padding: 0 .8rem;
-
   box-sizing: border-box;
 
-  height: $navbar-height;
-
   > .container-fluid {
     display: flex;
     flex-direction: column;
@@ -30,6 +59,11 @@ nav[role="navigation"] {
 }
 
 #navbar-collapse {
+  display: none;
+
+  flex-direction: column;
+  justify-content: center;
+
   position: absolute;
   top: $navbar-height;
   left: 0;
@@ -37,7 +71,7 @@ nav[role="navigation"] {
   z-index: $navbar-expand-z;
 
   width: 100vw;
-  min-height: 6rem;
+  min-height: 4rem;
 
   background: #EFEFEF;
   box-shadow: 0 1px 4px 0 #AAA;
@@ -46,6 +80,7 @@ nav[role="navigation"] {
     display: flex;
     flex-direction: column;
     list-style: none;
+    flex-shrink: 0;
 
     box-sizing: border-box;
     margin: 0;
@@ -61,6 +96,7 @@ nav[role="navigation"] {
       &:nth-child(1) {
         // goog
         order: 999;
+        padding: 0;
       }
 
       &:nth-child(2) {
@@ -87,6 +123,7 @@ main {
   z-index: $main-z;
 
   width: 100%;
+
   margin: 0;
   padding: 0;
 
@@ -113,6 +150,7 @@ main {
     flex-direction: row;
     // flex-wrap: wrap;
     justify-content: space-between;
+    flex-shrink: 0;
 
     position: relative;
     margin: 0;
@@ -159,27 +197,45 @@ main {
     flex-basis: 20rem;
     flex-shrink: 0;
     flex-grow: 0;
-    min-height: 8rem;
 
+    // min-height: 8rem;
+    height: $main-height;
+    overflow: hidden;
+
+    box-sizing: border-box;
     border-right: 1px solid color($cl-shuri alpha(0.2));
     box-shadow: -12px 0 12px 6px rgba(0, 0, 0, 0.8);
 
     z-index: $side-z;
-
-    overflow: hidden;
   }
 
   div[itemtype="http://schema.org/Article"] {
+    height: $main-height;
+
+    overflow-x: auto;
+    overflow-y: scroll;
+
     z-index: $content-z;
-    overflow: hidden;
-    // overflow-y: scroll;
 
     flex-shrink: 1;
     flex-grow: 1;
+
+    > .row, > footer {
+      flex-shrink: 0;
+    }
   }
 }
 
 @media (max-width: 768px) {
+  body > header {
+    box-shadow: 0px -12px 10px 8px rgba(0, 0, 0, 0.8);
+  }
+
+
+  #navbar-collapse:not(.collapse) {
+    display: flex;
+  }
+
   nav[role="navigation"] {
     padding: 0;
     min-height: 2.4rem;
@@ -198,24 +254,30 @@ main {
   }
 
   main {
+    overflow-y: scroll;
+
     > .container-fluid > .row:first-child {
       flex-direction: column;
     }
 
-    div[itemtype="http://schema.org/Article"] .content-header {
-      flex-direction: column;
-      flex-shrink: 0;
-      align-items: stretch;
+    div[itemtype="http://schema.org/Article"] {
+      overflow: hidden;
+      height: auto;
 
-      ol.breadcrumb, .crsearch {
-        flex-shrink: 0;
-      }
+      .content-header {
+        flex-direction: column;
+        align-items: stretch;
+
+        ol.breadcrumb, .crsearch {
+          flex-shrink: 0;
+        }
 
-      .crsearch {
-        flex-basis: auto;
-        min-width: 92%;
-        max-width: 94vw;
-        margin: .5rem 0 0 0;
+        .crsearch {
+          flex-basis: auto;
+          min-width: 92%;
+          max-width: 94vw;
+          margin: .5rem 0 0 0;
+        }
       }
     }
 
@@ -226,6 +288,7 @@ main {
       border: none;
 
       box-shadow: 0px 9px 16px 2px rgba(0, 0, 0, 0.8);
+      padding: 0 4vw;
     }
   }
 }
@@ -250,5 +313,11 @@ main {
       }
     }
   }
+
+  main {
+    div[itemtype="http://schema.org/Article"] + div {
+      padding: 0 2vw;
+    }
+  }
 }
 
diff --git a/css/kunai/site/navbar.css b/css/kunai/site/navbar.css
index e4116b5..450775b 100644
--- a/css/kunai/site/navbar.css
+++ b/css/kunai/site/navbar.css
@@ -2,19 +2,14 @@
 
 
 nav[role="navigation"] {
-  $bg: #f8f8f8;
-  background: $bg;
+  background: $nav-bg;
 
-  position: relative;
   display: flex;
 
   margin: 0;
 
   font-size: 1.2rem;
 
-  border: none;
-  border-bottom: 1px solid color($cl-shuri alpha(0.2));
-
   a {
     color: #777;
     font-family: sans-serif;
@@ -28,8 +23,6 @@ nav[role="navigation"] {
     margin: 0;
     padding: 0;
     width: 100%;
-
-    position: relative;
   }
 
   .navbar-brand {
@@ -66,7 +59,7 @@ nav[role="navigation"] {
     position: relative;
     // flex-basis: 100%;
     margin: 0;
-    background: $bg;
+    background: $nav-bg;
 
     align-items: center;
 
diff --git a/css/kunai/site/sidebar.css b/css/kunai/site/sidebar.css
index 7296123..9da7073 100644
--- a/css/kunai/site/sidebar.css
+++ b/css/kunai/site/sidebar.css
@@ -33,38 +33,48 @@ $cl-tree-border: #999;
 #sidebar, .kunai-sidebar.legacy, main div[itemtype="http://schema.org/Article"] + div {
   background: #fbfbfb;
   position: relative;
-  padding: 0;
 }
 
 main[role="main"] .tree:not(.v2) {
   @mixin tree $cl-tree-border;
   display: none;
+  flex-shrink: 0;
 }
 
 #forceLegacyWrapper {
   display: flex;
   cursor: pointer;
   align-self: flex-end;
+
+  flex-shrink: 0;
+
   padding: .2em .5em;
 
   font-weight: normal;
 
-  position: absolute;
+  position: relative;
   top: .15em;
   right: .5em;
 
+  > .notice, > input {
+    flex-shrink: 0;
+  }
+
   .notice {
     margin-right: .3em;
   }
 }
 
 main[role="main"] .kunai-sidebar.force-legacy {
+  overflow-y: scroll;
+
   #forceLegacyWrapper {
     font-weight: bold;
   }
 
   .tree:not(.v2) {
     display: flex;
+    overflow: visible;
   }
   .tree.v2 {
     display: none;
@@ -142,9 +152,13 @@ main[role="main"] .kunai-sidebar.force-legacy {
 
   display: flex;
 
+  // temporary workaround
+  overflow-y: scroll;
+
   flex-direction: column;
   margin: 0;
   padding: .5rem .8rem .5rem 1rem;
+  box-sizing: border-box;
 
   font-family: sans-serif;
   line-height: 1.5;
@@ -313,6 +327,8 @@ main[role="main"] .kunai-sidebar.force-legacy {
     display: flex;
     flex-direction: column;
 
+    flex-shrink: 0;
+
     list-style: none;
     padding: 0;
     margin: 0;
@@ -327,6 +343,8 @@ main[role="main"] .kunai-sidebar.force-legacy {
     }
 
     > li.top {
+      flex-shrink: 0;
+
       &:not(:last-child) {
         margin-bottom: 1rem;
       }
diff --git a/css/kunai/variables.css b/css/kunai/variables.css
index 3b83d3f..293f041 100644
--- a/css/kunai/variables.css
+++ b/css/kunai/variables.css
@@ -1,4 +1,7 @@
-$navbar-height: 2.8rem;
+$navbar-height: 5vh;
+$main-height: calc(100vh - $navbar-height);
+
+$nav-bg: #f8f8f8;
 
 $cl-shuri: #306E82;
 $cl-theme: #87ceeb;
diff --git a/js/kunai/compat.js b/js/kunai/compat.js
index 35f0ed5..1a26fac 100644
--- a/js/kunai/compat.js
+++ b/js/kunai/compat.js
@@ -14,6 +14,19 @@ class Compat {
     // real...
     $('.treespan').on('click', ::this.onTreeClick)
 
+    {
+      const url = 'https://github.com/cpprefjp/site_generator/issues/47'
+      let footer = $('body > footer')
+      if (footer.length) {
+        this.log.warn(`applying legacy <footer> workaround... (${url})`, footer[0])
+        footer.detach()
+        $('main div[itemtype="http://schema.org/Article"]').append(footer)
+
+      } else {
+        this.log.warn(`legacy <footer> not found. time to remove this workaround? (${url})`)
+      }
+    }
+
     this.log.info('applied.')
   } // constructor