css

source/css/_layout/main.styl

@@ -45,30 +45,8 @@
         margin-bottom: $gap
         .title
           font-size: $font-size-h3
-      .full-width
-        margin-left: 0 - $gap
-        margin-right: 0 - $gap
-        padding-left: $gap
-        padding-right: $gap
-        width:"calc(100% + 2 * %s)" % $gap
-      .auto-padding
-        padding-left: $gap
-        padding-right: $gap
-        border-bottom-left-radius: $border-radius
-        border-bottom-right-radius: $border-radius
-        overflow: auto
-      .highlight
-        margin-left: 0*$gap
-        margin-right: 0*$gap
-        width: 100%
-      @media(max-width:@on_phone)
-        padding: 1.5*$gap $gap
-        .highlight
-          margin-left: 0*$gap
-          margin-right: 0*$gap
-        .auto-padding
-          border-bottom-left-radius: 0
-          border-bottom-right-radius: 0
+      @media screen and (max-width: $device-mobile)
+        padding: 1.5 * $gap $gap
 
   .post-wrapper
     margin-bottom: $gap
@@ -79,26 +57,7 @@
           font-size: $font-size-h2
           a
             font-size: $font-size-h2
-
-      .full-width
-        margin-left: -1.5*$gap
-        margin-right: -1.5*$gap
-        width: "calc(100% + 3 * %s)" % $gap
-
-      .auto-padding
-        padding-left: 1.5*$gap
-        padding-right: 1.5*$gap
-        border-bottom-left-radius: $border-radius
-        border-bottom-right-radius: $border-radius
-        overflow: auto
-
-
-    .tags
-      margin-bottom: -2*$gap
-
-    @media(max-width:@on_phone)
-      .tags
-        margin-bottom: -1.5*$gap
+    @media screen and (max-width: $device-mobile)
       mobile-post()
 
   .widget
@@ -139,7 +98,6 @@
           border-radius: 25%
           transform: scale(1.1)
           box-shadow: $box-shadow-card-float
-
         @media screen and (max-width: $device-mobile)
           &:hover
             border-radius: 100%
@@ -332,6 +290,8 @@ details
   @media screen and (max-width: $device-mobile)
     margin: $navbar-height + $gap 0 $gap
     border-radius: 0
+    &.nocover
+      margin-top: $navbar-height - $gap
 
   .s-top
     trans(0.6s)

source/css/_layout/navbar.styl

@@ -189,11 +189,12 @@
       width: $iconW
       left: $iconMargin + 1px
       color: alpha($color-text, 70%)
-
+      @media screen and (max-width: $device-mobile)
+        display: none
     .input
       display: block
-      padding-top: 8px
-      padding-bottom: 8px
+      padding-top: $gap * 0.5
+      padding-bottom: $gap * 0.5
       width: 100%
       color: $color-text
       background: alpha(darken($color-card, 5), .75)
@@ -201,28 +202,21 @@
       box-sizing: border-box
       padding-left: $iconW + $iconMargin
       font-size: $font-size-meta
-      @media screen and (max-width: $device-mobile)
-        padding-left: $iconW + $iconMargin
-
       border-radius: $border-radius-searchbar
       border: 1px dashed transparent
-      // .set-placeholder(
-      //   color: alpha($color-text, 50%)
-      // )
+      @media screen and (max-width: $device-mobile)
+        padding-left: $gap
+        line-height: "calc(%s - 32px)" % $navbar-height
+        border: none
+        &:hover,&:focus
+          border: none
       &:hover
-        color: $color-inner
         ~.icon
           color: alpha($color-theme, 80%)
-        border: 1px solid alpha($color-theme, 60%)
-
       &:focus
         ~.icon
           color: $color-theme
 
-        color: $color-text
-        background: bgcolor($color-theme)
-        border: 1px solid $color-theme
-
 
 
   @media (max-width: $device-mobile)
@@ -232,13 +226,14 @@
       overflow: hidden
       position: absolute
       trans()
-      margin: 0 $gap * 0.5
+      margin-left: $gap * 0.5
 
     &.z_search-open
       .logo
         opacity:0
       .m_search
-        width: "calc(100vw - %s)" % (2 * $gap + 2 * $iconW)
+        $offset = 2 * ($gap + $iconW)
+        width: "calc(100vw - %s)" % $offset
 
 
 .menu-phone

source/css/_layout/search.styl

@@ -216,17 +216,10 @@
       -webkit-overflow-scrolling: touch
       background: $color-card
       border-radius: $border-radius
-      @media screen and (max-width: $modal-threshold)
-        padding: 60px 20px 80px 20px
 
       .modal-results
         list-style: none
-        // li
-        //   border-bottom: 1px solid #e6e8ea
-          // &:last-child
-          //   border-bottom: none
-
-
+        
         .result
           position: relative
           display: block

source/css/_layout/sidebar.styl

@@ -26,7 +26,7 @@
     &.mobile
       display: block !important
 
-  @media screen and (max-width: @on_phone)
+  @media screen and (max-width: $device-mobile)
     width: "calc(100% - 2 * %s)" % $gap
     margin: $gap $gap 0 $gap
     display: none !important