[opt] css

layout/_partial/sidebar/index.ejs

@@ -47,7 +47,7 @@ function layoutWidgets() {
   var el = '';
   el += '<div class="widgets">';
   if (page.layout == 'wiki' && proj && page.menu_id == 'wiki') {
-    el += '<div class="widget-wrap logo-wrap wiki">';
+    el += '<div class="widget-wrap logo-wrap wiki"><div class="widget-body">';
     // all products
     el += '<a style="filter: grayscale(100%)" class="wiki-home cap" href="' + url_for(config.wiki_dir) + '">';
     el += '<svg aria-hidden="true" viewBox="0 0 16 16" width="1rem" height="1rem" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
@@ -69,7 +69,7 @@ function layoutWidgets() {
       let sub = proj.subtitle;
       el += layoutTitle(main, url, sub);
     }
-    el += '</div>';
+    el += '</div></div>';
   }
   if (page.sidebar) {
     page.sidebar.forEach((w, i) => {

source/css/_layout/main.styl

@@ -5,8 +5,10 @@
     margin-left: "calc(2 * %s)" % var(--gap-l)
     margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-mobile-max)
-    padding-top: "calc(1 * %s)" % var(--gap-l)
+    padding-top: "calc(2 * %s)" % var(--gap-l)
+  @media screen and (max-width: $device-mobile-max)
+    padding-top: 1rem
   header
-    margin: 4rem 1rem 2rem
+    margin: 2rem 1rem 1rem
     .logo-wrap
       margin: 0

source/css/_layout/md.styl

@@ -1,6 +1,9 @@
 article.md
   max-width: 100%
-  padding: 1rem
+  padding: 0 1rem
+  margin-top: 1rem
+  &:first-child
+    margin-top: 0
   color: var(--text-p1)
   line-height: 1.7
   word-break: break-word
@@ -33,7 +36,7 @@ article.md.content
       align-self: center
       border-bottom-style: dashed
       border-bottom-color: $color-accent
-  >:first-child
+  >:first-child:not(h1)
     margin-top: 0
   h1:not(:first-child)
     margin-top: 2em

source/css/_layout/partial/bread-nav.styl

@@ -1,6 +1,6 @@
 // 面包屑导航
 .bread-nav
-  padding: 1rem 1rem 0
+  padding: 0.25rem 1rem 0
   color: var(--text-p3)
   font-weight: 500
   div#breadcrumb

source/css/_layout/partial/navbar.styl

@@ -1,7 +1,7 @@
 .nav-wrap
   position: sticky
   position: -webkit-sticky
-  margin-top: .75rem
+  margin-top: -0.5rem
   top: -2px
   background: var(--site-bg)
   padding: 0 1rem
@@ -57,3 +57,10 @@ nav.cap
 @media screen and (max-width: $device-mobile-max)
   .nav-wrap
     margin-top: 0
+    padding-left: 0
+    padding-right: 0
+    nav
+      a:first-child
+        margin-left: 1rem
+      a:last-child
+        margin-right: 1rem

source/css/_layout/sidebar/sidebar.styl

@@ -6,6 +6,7 @@
   height: "calc(100vh - 1 * %s)" % var(--gap-l)
   .header
     margin: var(--gap-l) var(--gap-l) 0
+    margin-top: "calc(2 * %s)" % var(--gap-l)
   @media screen and (min-width: $device-mobile-max)
     >.widgets:first-child>.widget-wrap:first-child
       margin-top: "calc(2 * %s)" % var(--gap-l)
@@ -23,7 +24,6 @@
 
 
 .logo-wrap
-  margin: 1rem 0
   display: flex
   align-items: center
   overflow: hidden

source/css/_layout/sidebar/widgets.styl

@@ -9,9 +9,10 @@
   z-index: 1
   line-height: 1.2
   .widget-wrap
-    margin: 1rem var(--gap-l) 2rem var(--gap-l)
+    margin: 1rem 0 2rem
     .widget-header
-      margin-top: 3rem
+      padding-left: var(--gap-l)
+      padding-right: var(--gap-l)
       display: flex
       justify-content: space-between
       align-items: center
@@ -41,7 +42,7 @@
             fill: $color-hover
 
     .widget-body
-      margin: 0.5rem 0
+      margin: 0.5rem var(--gap-l)
       color: var(--text-p1)
       p
         margin-top: .5em
@@ -49,6 +50,8 @@
         line-height: 1.5
     .widget-header+.widget-body
       margin-top: 0
+  .widget-wrap+.widget-wrap .widget-header
+    margin-top: 3rem
 
 
 .l_left .widgets
@@ -70,6 +73,7 @@
   .widget-wrap#related .widget-body a
     margin-top: 0.5rem
     margin-bottom: 1rem
+    max-width: 'calc(100% - %s * 2)' % var(--gap-l)
     .title 
       font-weight: 700
       font-size: $fs-14