first commit

layout/common/navbar.ftl

@@ -1,7 +1,7 @@
 <#macro navbar layout>
-    <nav class="navbar navbar-main">
+    <nav class="navbar navbar-main has-background-white is-fixed-top is-paddingless " style="box-shadow: none !important;">
-        <div class="container">
+        <div class="container ">
-            <div class="navbar-brand is-flex-center">
+            <div class="navbar-brand transparent">
                 <a class="navbar-item navbar-logo" href="${context!}">
                     <#if options.blog_logo?? && options.blog_logo!=''>
                         <img src="${options.blog_logo!}" alt="${options.blog_title!}" height="28">
@@ -9,8 +9,15 @@
                         ${options.blog_title!}
                     </#if>
                 </a>
+                <span class="navbar-burger burger" data-target="navMenu">
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                            </span>
             </div>
-            <div class="navbar-menu">
+            <div id="navMenu" class="navbar-menu transparent">
+                <div class="navbar-start transparent">
+
                     <@menuTag method="tree">
                         <#if menus?? && menus?size gt 0>
                             <#if settings.tree_menu_enable!false>
@@ -36,17 +43,21 @@
                                                target="${menu.target!}">${menu.name}</a>
                                         </#if>
                                     </#list>
+
                                 </div>
                             <#else>
                                 <#if menus?? && menus?size gt 0>
                                     <div class="navbar-start">
                                         <#list menus?sort_by('priority') as menu>
-                                        <a class="navbar-item" href="${menu.url}" target="${menu.target!}">${menu.name}</a>
+                                            <a class="navbar-item" href="${menu.url}"
+                                               target="${menu.target!}">${menu.name}</a>
                                         </#list>
                                     </div>
                                 </#if>                        </#if>
                         </#if>
                     </@menuTag>
+
+                </div>
                 <div class="navbar-end">
                     <#--                ${settings.links_top!}-->
                     <a class="navbar-item search" title="夜间模式" href="javascript:alert('开发中，敬请期待');">
@@ -57,21 +68,17 @@
                     </a>
                 </div>
             </div>
-        </div>
     </nav>
     <style>
-        .navbar-dropdown {
-            /*background-color: #fff;*/
-            /*border-bottom-left-radius: 6px;*/
-            /*border-bottom-right-radius: 6px;*/
-            /*border-top: 2px solid #dbdbdb;*/
-            /*box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);*/
-            /*font-size: .875rem;*/
-            /*min-width: 100%;*/
-            /*position: absolute;*/
-            /*top: 100%;*/
-            /*z-index: 20;*/
-            /*width: 120px;*/
-        }
     </style>
+    <script>
+        (function () {
+            var burger = document.querySelector('.burger');
+            var menu = document.querySelector('#' + burger.dataset.target);
+            burger.addEventListener('click', function () {
+                burger.classList.toggle('is-active');
+                menu.classList.toggle('is-active');
+            });
+        })();
+    </script>
 </#macro>

source/css/style.css

@@ -8,7 +8,7 @@ body {
   background-color: #f7f7f7;
 }
 .section {
-  padding: 2rem 1.5rem;
+  padding: 6rem 1.5rem;
 }
 body,
 button,
@@ -36,7 +36,7 @@ textarea {
 }
 @media screen and (max-width: 768px) {
   .section {
-    padding: 1.5rem 1rem;
+    padding: 5.5rem 1rem;
   }
 }
 @media screen and (min-width: 769px) {
@@ -100,30 +100,7 @@ img.thumbnail {
 .navbar-main {
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
 }
-.navbar-main .navbar-menu,
-.navbar-main .navbar-start,
-.navbar-main .navbar-end {
-  align-items: stretch;
-  display: flex;
-  padding: 0;
-  flex-shrink: 0;
-}
-.navbar-main .navbar-menu {
-  flex-grow: 1;
-  flex-shrink: 0;
-}
-.navbar-main .navbar-start {
-  justify-content: flex-start;
-  margin-right: auto;
-  font-size: 15px;
-}
-.navbar-main .navbar-end {
-  justify-content: flex-end;
-  margin-left: auto;
-}
 .navbar-main .navbar-item {
-  display: flex;
-  align-items: center;
   padding: 1.25rem 0.75rem;
   padding-right: 1.5rem;
 }
@@ -138,24 +115,13 @@ img.thumbnail {
 }
 .navbar-main .navbar-item .sub-menu {
   color: #4a4a4a;
+  padding-top: 3px;
 }
 .navbar-main .navbar-item .sub-menu:after {
   content: '\2022';
   position: absolute;
   color: #3273dc;
 }
-@media screen and (max-width: 1087px) {
-  .navbar-main .navbar-menu {
-    justify-content: center;
-    box-shadow: none;
-  }
-  .navbar-main .navbar-start {
-    margin-right: 0;
-  }
-  .navbar-main .navbar-end {
-    margin-left: 0;
-  }
-}
 .footer {
   background: #fff;
 }

source/css/style.styl

@@ -16,7 +16,7 @@ body
     background-color: #f7f7f7
 
 .section
-    padding: 2rem 1.5rem
+    padding: 6rem 1.5rem
 
 body, button, input, select, textarea
     font-family: family-sans
@@ -36,7 +36,7 @@ body, button, input, select, textarea
 
 @media screen and (max-width: screen-tablet - 1)
     .section
-        padding: 1.5rem 1rem
+        padding: 5.5rem 1rem
 
 @media screen and (min-width: screen-tablet)
     .column-main,
@@ -104,57 +104,25 @@ img.thumbnail
 
 .navbar-main
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
-    .navbar-menu,
-    .navbar-start,
-    .navbar-end
-        align-items: stretch
-        display: flex
-        padding: 0
-        flex-shrink: 0
-    .navbar-menu
-        flex-grow: 1
-        flex-shrink: 0
-    .navbar-start
-        justify-content: flex-start
-        margin-right: auto
-        font-size:15px
-    .navbar-end
-        justify-content: flex-end
-        margin-left: auto
     .navbar-item
-        display: flex
-        align-items: center
         padding: 1.25rem 0.75rem
         padding-right: 1.5rem
         &.is-active
             color: hsl(217, 71%, 53%)
             background-color: transparent
-        //&.is-active:after
-        //    content: '*';
-        //    position: absolute;
-        //    top: 40px;
-        //    left: 20px;
         .navbar-dropdown
             border-radius: 2px
             box-shadow 0 8px 8px rgba(10,10,10,.1)
             font-weight: 500
         .sub-menu {
             color: #4a4a4a
+            padding-top: 3px;
         }
         .sub-menu:after
             content '\2022'
             position absolute
             color: #3273dc
 
-    @media screen and (max-width: screen-desktop - 1)
-        .navbar-menu
-            justify-content: center
-            box-shadow: none
-        .navbar-start
-            margin-right: 0
-        .navbar-end
-            margin-left: 0
-
 .footer
     background: white
     .field