style: enhance page-edit and avoid so much !important

vuejs · May 27, 2018 · 6c7e88d · 6c7e88d
1 parent ff3ac21
commit 6c7e88d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 31 deletions.
diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="page">
     <Content :custom="false"/>
-    <div class="content edit-link">
-      <template v-if="editLink">
+    <div class="page-edit">
+      <div class="edit-link" v-if="editLink">
         <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
         <OutboundLink/>
-      </template>
-      <div v-if="lastUpdated" class="last-updated">
+      </div>
+      <div class="last-updated" v-if="lastUpdated">
         <span class="prefix">{{ lastUpdatedText }}: </span>
         <span class="time">{{ lastUpdated }}</span>
       </div>
     </div>
-    <div class="content page-nav" v-if="prev || next">
+    <div class="page-nav" v-if="prev || next">
       <p class="inner">
         <span v-if="prev" class="prev">
           ← <router-link v-if="prev" class="prev" :to="prev.path">
@@ -138,43 +138,50 @@ function find (page, items, offset) {
 
 <style lang="stylus">
 @import './styles/config.styl'
+@require './styles/wrapper.styl'
 
 .page
   padding-bottom 2rem
 
-.edit-link.content
-  padding-top 0 !important
-  a
-    color lighten($textColor, 25%)
-    margin-right 0.25rem
+.page-edit
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom .5rem
+  overflow auto
+  .edit-link
+    display inline-block
+    a
+      color lighten($textColor, 25%)
+      margin-right 0.25rem
   .last-updated
-    margin-top: 0 !important
-    margin-bottom .5rem
     float right
     font-weight 500
-    font-size .9em
+    font-size 0.9em
     .prefix
       color lighten($textColor, 25%)
     .time
       color #aaa
 
-.page-nav.content
-  padding-top 1rem !important
-  padding-bottom 0 !important
+.page-nav
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 0
   .inner
     min-height 2rem
-    margin-top 0 !important
+    margin-top 0
     border-top 1px solid $borderColor
     padding-top 1rem
     overflow auto // clear float
   .next
     float right
 
 @media (max-width: $MQMobile)
-  .edit-link.content .last-updated
-    float none
-    text-align left
-    margin-top 1rem
-    font-size .8em
+  .page-edit
+    .edit-link
+      margin-bottom .5rem
+    .last-updated
+      font-size .8em
+      float none
+      text-align left
 
 </style>
diff --git a/lib/default-theme/styles/mobile.styl b/lib/default-theme/styles/mobile.styl
@@ -9,8 +9,6 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
     width $mobileSidebarWidth
   .page
     padding-left $mobileSidebarWidth
-  .content:not(.custom)
-    padding 2rem
 
 // wide mobile
 @media (max-width: $MQMobile)
@@ -33,8 +31,6 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
 @media (max-width: $MQMobileNarrow)
   h1
     font-size 1.9rem
-  .content:not(.custom)
-    padding 1.5rem
   .content
     div[class*="language-"]
       margin 0.85rem -1.5rem

diff --git a/lib/default-theme/styles/theme.styl b/lib/default-theme/styles/theme.styl
@@ -3,6 +3,7 @@
 @require './code'
 @require './custom-blocks'
 @require './arrow'
+@require './wrapper'
 
 html, body
   padding 0
@@ -53,9 +54,7 @@ body
   overflow-y auto
 
 .content:not(.custom)
-  max-width $contentWidth
-  margin 0 auto
-  padding 2rem 2.5rem
+  @extend $wrapper
   > *:first-child
     margin-top $navbarHeight
   a:hover
@@ -169,8 +168,7 @@ th, td
     .sidebar-mask
       display: block
   &.no-navbar
-    .content:not(.custom) >
-      h1, h2, h3, h4, h5, h6
+    .content:not(.custom) > h1, h2, h3, h4, h5, h6
         margin-top 1.5rem
         padding-top 0
     .sidebar

diff --git a/lib/default-theme/styles/wrapper.styl b/lib/default-theme/styles/wrapper.styl
@@ -0,0 +1,9 @@
+$wrapper
+  max-width $contentWidth
+  margin 0 auto
+  padding 2rem 2.5rem
+  @media (max-width: $MQNarrow)
+    padding 2rem
+  @media (max-width: $MQMobileNarrow)
+    padding 1.5rem
+