WIP: apply bootstrap theme

* header

lib/views/crowi-plus/widget/header.html

@@ -2,8 +2,8 @@
   <header id="page-header">
     <div class="flex-title-line">
       <div class="title-logo-container hidden-xs hidden-sm">
-        <a href="/">
-          <img alt="Crowi" src="/images/logo/32x32_g.png" />
+        <a class="logo" href="/">
+          <div class="light-logo">{% include '../../widget/logo.html' %}</div>
         </a>
       </div>
       <div class="title-container">

lib/views/layout/layout.html

@@ -131,12 +131,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
             <!-- <svg viewBox="0 0 448 448">
               <path d="M0 376v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 280v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 184v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 88v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM96 376v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 280v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 184v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 88v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625z"></path>
             </svg> -->
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.44 196.11" class="light-logo">
-              <polygon class="group2" points="56.61 196.11 169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11" />
-              <polygon class="group1" points="75.48 98.05 94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05" />
-              <polygon class="group1" points="0 98.06 56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06" />
-              <polygon class="group1" points="75.48 163.43 56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43" />
-            </svg>
+            <div class="light-logo">{% include '../widget/logo.html' %}</div>
           </b>
           <span class="hidden-xs" style="color: black">
             {% set appTitle = config.crowi['app:title'] | default('GROWI') %}
@@ -145,11 +140,13 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
             <!-- <img src="../plugins/images/agileadmin-text.png" alt="home" class="dark-logo" /> -->
             <!--This is light logo text-->
             <!-- <img src="../plugins/images/agileadmin-text-dark.png" alt="home" class="light-logo" /> -->
-            <svg xmlns="http://www.w3.org/2000/svg" class="light-logo-text">
-              <text x="0" y="{{22+appTitleFontSize/2}}" font-size="{{appTitleFontSize}}">
-                {% block title %}{{ appTitle }}{% endblock %}
-              </text>
-            </svg>
+            <span class="light-logo-text">
+              <svg xmlns="http://www.w3.org/2000/svg">
+                <text x="0" y="{{22+appTitleFontSize/2}}" font-size="{{appTitleFontSize}}">
+                  {% block title %}{{ appTitle }}{% endblock %}
+                </text>
+              </svg>
+            </span>
           </span>
         </a>
       </div>

lib/views/widget/logo.html

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.44 196.11">
+  <polygon class="group2" points="56.61 196.11 169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11" />
+  <polygon class="group1" points="75.48 98.05 94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05" />
+  <polygon class="group1" points="0 98.06 56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06" />
+  <polygon class="group1" points="75.48 163.43 56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43" />
+</svg>

resource/styles/scss/_override-agileadmin.scss

@@ -20,25 +20,32 @@
   a {
     text-transform: none;
   }
+}
+.logo {
+  // set transition for fill
+  svg * {
+    transition: fill 0.8s ease-out;
+  }
 
-  .logo {
-    // set transition for fill
-    svg * {
-      transition: fill 0.8s ease-out;
-    }
-
-    svg.dark-logo, svg.dark-logo-text {
+  .dark-logo, .dark-logo-text {
+    svg {
       fill: white;
     }
-    svg.light-logo, svg.light-logo-text {
+  }
+  .light-logo, .light-logo-text {
+    svg {
       fill: $dark-themecolor;
     }
-    svg.dark-logo, svg.light-logo {
+  }
+  .dark-logo, .light-logo {
+    svg {
       padding: 12px;
       width: 50px;
       height: 50px;
     }
-    svg.dark-logo-text, svg.light-logo-text {
+  }
+  .dark-logo-text, .light-logo-text {
+    svg {
       width: 156px;
       height: 50px;
     }
@@ -50,12 +57,14 @@
     background-color: darken($topbar, 10%);
 
     .logo {
-      svg.dark-logo, svg.light-logo {
-        fill: lighten($topbar, 15%);
-
-        &:hover {
-          .group1 { fill: #74bc45; }
-          .group2 { fill: #1664b0; }
+      .dark-logo, .light-logo {
+        svg {
+          fill: lighten($topbar, 15%);
+
+          &:hover {
+            .group1 { fill: #74bc45; }
+            .group2 { fill: #1664b0; }
+          }
         }
       }
     }

resource/styles/scss/_page_crowi-plus.scss

@@ -23,6 +23,9 @@
     // the container of h1
     div.title-container {
       margin-right: auto;
+      h1 {
+        line-height: 1.1em;
+      }
     }
 
     ul.authors {
@@ -50,7 +53,7 @@
   /*
    * affix header
    */
-  .main #page-header.affix {
+  header.affix {
     // show logo link
     div.title-logo-container {
       display: unset;