モバイルレイアウトの全面修正

css/browser.css

@@ -7,17 +7,22 @@ body.kunai {
             content: "[kunai-testing]";
 
             position: absolute;
-            top: 10px;
+            top: 2px;
             left: 40%;
             line-height: 1.5;
             font-size: 14px;
             display: block;
 
             font-weight: bold;
-            background: rgba(240, 36, 54, 0.8);
-            color: #FFF;
+            $c: rgb(240, 36, 54);
+            background: color($c alpha(0.2));
+            border: 3px dashed color($c alpha(0.6));
+            box-sizing: border-box;
+            color: rgba(20, 20, 20, 0.6);
             padding: .2em .4em;
             margin-left: 1em;
+
+            z-index: 999999;
           }
         }
       }

css/kunai/site-ext.scss

@@ -1,4 +1,5 @@
 @import './site/badge-ext';
 @import './site/body-ext';
+@import './site/nav-ext';
 @import './site/sidebar-ext';
 

css/kunai/site.css

@@ -1,5 +1,8 @@
 @import './site/body.css';
+@import './site/layout.css';
+@import './site/nav.css';
 @import './site/navbar.css';
 @import './site/sidebar.css';
 @import './site/article.css';
+@import './site/goog.css';
 

css/kunai/site/article.css

@@ -6,19 +6,7 @@ div[itemtype="http://schema.org/Article"] {
   margin: 0;
   padding: 0;
 
-  // flex-basis: 42rem;
-  flex-basis: 300px;
-
-  width: initial;
-  left: unset;
-  right: unset;
-
-  float: none;
-  flex-grow: 1;
-  width: initial;
-  left: unset;
-
-  padding: 0;
+  flex-basis: auto;
 
   line-height: 1.5;
 
@@ -168,13 +156,16 @@ div[itemtype="http://schema.org/Article"] {
       justify-content: flex-start;
       align-items: baseline;
 
-      // FIXME: FLOAT
-      width: 100%;
-      flex-wrap: wrap;
-
       margin: 0;
       padding: .3rem 0 .1rem 0;
 
+      // float workaround :(
+      width: 100%;
+      box-sizing: border-box;
+      padding-right: 2em;
+
+      flex-wrap: wrap;
+
       color: #333;
       text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
 
@@ -207,20 +198,24 @@ div[itemtype="http://schema.org/Article"] {
       }
     }
 
-
     h1 {
-      font-size: 2.5rem;
+      font-size: 2rem;
     }
 
     > h1:first-child {
       margin-top: 0px;
     }
     h2 {
+      font-size: 1.8rem;
       border-left: solid 8px skyblue;
       padding-left: 5px;
       border-bottom: solid 2px skyblue;
     }
 
+    h3 {
+      font-size: 1.6rem;
+    }
+
     div[itemprop="articleBody"] {
       .codehilite > pre, & > pre {
         overflow-x: auto;
@@ -240,59 +235,18 @@ div[itemtype="http://schema.org/Article"] {
     }
   }
 
-  .content-header {
-    display: flex;
-    flex-direction: row;
-
-    @media (max-width: 768px) {
-      flex-direction: column;
-    }
-
-    padding: 0 1em 0 0;
-    margin-bottom: 5px;
-    background: #f5f5f5;
-    border-radius: 0;
-    align-items: center;
-    justify-content: space-between;
-
-    box-shadow: 0 -4px 12px 0 rgba(20, 20, 20, 0.6);
-
-    float: none;
-
-    ol.breadcrumb {
-      display: inline-flex;
-      align-items: baseline;
-      margin-bottom: 0;
-
-      margin: 0;
-      padding: .75rem 1rem;
-
-      background: none;
-      border-radius: 0;
-
-      list-style: none;
-
-      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
-
-      @media (max-width: 768px) {
-        width: 100%;
+  @media (max-width: 414px) {
+    .content-body {
+      h1 {
+        font-size: 1.8rem;
       }
 
-      > .active {
-        color: #777;
+      h2 {
+        font-size: 1.6rem;
       }
 
-      > li {
-        + li:before {
-          content: '/';
-          color: #ccc;
-          padding: 0 0 0 .3rem;
-          font-size: 1rem;
-        }
-
-        &:first-child {
-          font-size: 1.2rem;
-        }
+      h3 {
+        font-size: 1.4rem;
       }
     }
   }

css/kunai/site/badge-ext.scss

@@ -22,21 +22,3 @@ main[role="main"] {
   }
 } // main
 
-
-#navbar-collapse {
-  ul.nav {
-    li {
-      a:before {
-        margin-right: .2em;
-      }
-    }
-
-    li:nth-child(1) {
-      a:before {
-        @include fa-patch;
-        @extend .fa-github;
-      }
-    }
-  }
-}
-

css/kunai/site/body.css

@@ -11,6 +11,8 @@ html, html.cpprefjp, html.boostjp {
   }
 
   body > footer {
+    overflow: hidden;
+
     text-align: center;
     border-radius: 0;
     border: none;
@@ -23,6 +25,7 @@ html, html.cpprefjp, html.boostjp {
     position: relative;
     z-index: 0;
 
+    color: #676767;
     background: #f8f8f8;
 
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
@@ -32,16 +35,6 @@ html, html.cpprefjp, html.boostjp {
     outline: none;
   }
 
-  .google-search {
-    width: 250px;
-    margin-top: 2px;
-  }
-
-  .google-search-result .gsc-control-cse {
-    padding: 0px;
-    border: 0px;
-  }
-
   .fa {
     @include box-reset;
 
@@ -57,48 +50,11 @@ html, html.cpprefjp, html.boostjp {
 
   .row {
     margin: 0;
-  }
-
-  .crsearch {
-    width: 320px;
-    font-size: .9rem;
-
-    input[type="text"] {
-      font-family: monospace;
-      font-size: .9rem;
-      color: #232323;
-    }
-
-    @media (max-width: 768px) {
-      width: 90vw;
-      margin-bottom: .2rem;
-    }
-  }
+    padding: 0;
+    box-sizing: border-box;
 
-  main[role="main"] {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-
-    > .container-fluid > .row {
-      display: flex;
-      flex-direction: row;
-
-      @media (max-width: 768px) {
-        & {
-          flex-direction: column;
-        }
-      }
-
-      width: 100%;
-      margin: 0;
-
-      @media (min-width: 768px) {
-        & {
-          flex-direction: row-reverse;
-        }
-      }
-    }
   }
 }
 

css/kunai/site/goog.css

@@ -0,0 +1,32 @@
+#navbar-collapse {
+  .google-search {
+    font-size: .7rem;
+
+    &:not(.enabled) {
+      display: none;
+    }
+  }
+}
+
+main div[itemtype="http://schema.org/Article"] {
+  .google-search-result {
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+
+    max-height: 60vh;
+    overflow-x: auto;
+    overflow-y: scroll;
+
+    .gsc-control-wrapper-cse > .gsc-results-wrapper-visible {
+      &:before {
+        content: 'Googleカスタム検索';
+        font-size: 1.1rem;
+        color: #888;
+        font-weight: bold;
+      }
+    }
+  }
+}
+