refactor: organize overall stylings

4 years ago · 901bd4ef3f
parent a20bcf3cd7
commit 901bd4ef3f
9 changed files with 107 additions and 30 deletions
--- a/src/client/theme-default/components/NavBar.ts
+++ b/src/client/theme-default/components/NavBar.ts
@ -7,8 +7,6 @@ export default {
  },

  setup() {
-    return {
-      withBase
-    }
+    return { withBase }
  }
 }
--- a/src/client/theme-default/components/NavBarLink.ts
+++ b/src/client/theme-default/components/NavBarLink.ts
@ -1,4 +1,3 @@
-// TODO dropdowns
 import { defineComponent, computed, PropType } from 'vue'
 import { useRoute } from 'vitepress'
 import { withBase, isExternal } from '../utils'
--- a/src/client/theme-default/components/NavBarLink.vue
+++ b/src/client/theme-default/components/NavBarLink.vue
@ -24,6 +24,14 @@
  line-height: 2rem;
 }

+@media screen and (max-width: 719px) {
+  .nav-item {
+    display: block;
+    margin-left: 0;
+    padding: 0.3rem 1.5rem;
+  }
+}
+
 .nav-link {
  display: block;
  margin-bottom: -2px;
@ -45,11 +53,6 @@
 }

@media screen and (max-width: 719px) {
-  .nav-item {
-    margin-left: 0;
-    padding: 0.35rem 1.5rem 0.35rem 1.25rem;
-  }
-
  .nav-link {
    line-height: 1.7;
    font-size: 1em;
@ -57,6 +60,7 @@
    border-bottom: none;
    margin-bottom: 0;
  }
+
  .nav-link:hover,
  .nav-link.active {
    color: var(--accent-color);
--- a/src/client/theme-default/components/NavBarLinks.vue
+++ b/src/client/theme-default/components/NavBarLinks.vue
@ -22,7 +22,7 @@
  .nav-links {
    display: block;
    height: auto;
-    padding-bottom: 0.5rem;
+    padding: 0.5rem 0 1rem;
    border-bottom: 1px solid var(--border-color);
  }
 }
--- a/src/client/theme-default/components/NavDropdownLink.vue
+++ b/src/client/theme-default/components/NavDropdownLink.vue
@ -49,10 +49,12 @@
  display: block;
  margin-left: 1.5rem;
 }
+
 .dropdown-wrapper .dropdown-title {
  font: inherit;
  color: var(--text-color);
-  font-weight: 600;
+  font-size: 0.9rem;
+  font-weight: 500;
  display: inline-block;
  height: 1.75rem;
  line-height: 1.75rem;
@ -60,6 +62,7 @@
  background: transparent;
  border: none;
 }
+
 .dropdown-wrapper .dropdown-title:hover {
  border-color: transparent;
 }
@ -75,15 +78,22 @@
  color: inherit;
  line-height: 1.7rem;
 }
+
 .dropdown-wrapper .nav-dropdown .dropdown-item h4 {
  margin: 0.45rem 0 0;
  border-top: 1px solid #eee;
  padding: 0.45rem 1.5rem 0 1.25rem;
 }
+
+.dropdown-wrapper .nav-dropdown .dropdown-item .nav-item {
+  margin-left: 0.5rem;
+}
+
 .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper {
  padding: 0;
  list-style: none;
 }
+
 .dropdown-wrapper
  .nav-dropdown
  .dropdown-item
@ -91,6 +101,7 @@
  .dropdown-subitem {
  font-size: 0.9em;
 }
+
 .dropdown-wrapper .nav-dropdown .dropdown-item a {
  display: block;
  line-height: 1.7rem;
@ -101,12 +112,15 @@
  margin-left: 0;
  padding: 0 1.5rem 0 1.25rem;
 }
+
 .dropdown-wrapper .nav-dropdown .dropdown-item a:hover {
  color: var(--accent-color);
 }
+
 .dropdown-wrapper .nav-dropdown .dropdown-item a.active {
  color: var(--accent-color);
 }
+
 .dropdown-wrapper .nav-dropdown .dropdown-item a.active::after {
  content: '';
  width: 0;
@ -115,9 +129,10 @@
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  position: absolute;
-  top: calc(50% - 2px);
-  left: 9px;
+  top: calc(50% - 1.5px);
+  left: 8px;
 }
+
 .dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4 {
  margin-top: 0;
  padding-top: 0;
@ -127,19 +142,23 @@
 .dropdown-wrapper {
  height: 1.8rem;
 }
+
 .dropdown-wrapper:hover .nav-dropdown,
 .dropdown-wrapper.open .nav-dropdown {
  display: block;
 }
+
 .dropdown-wrapper.open:blur {
  display: none;
 }
+
 .dropdown-wrapper .dropdown-title .arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #aaa;
  border-bottom: 0;
 }
+
 .dropdown-wrapper .nav-dropdown {
  display: none;
  height: auto !important;
@ -162,7 +181,12 @@
@media screen and (max-width: 719px) {
  .dropdown-wrapper {
    height: auto;
-    margin-left: 1.25rem;
+    margin-left: 1.5rem;
+  }
+
+  .dropdown-wrapper .dropdown-title {
+    font-size: 1rem;
+    font-weight: 600;
  }

  .dropdown-wrapper .nav-dropdown {
@ -170,13 +194,25 @@
    top: none;
    right: none;
    border: none;
+    padding: 4px 0;
    background-color: transparent;
  }
+
  .dropdown-wrapper:hover .nav-dropdown {
    display: none;
  }
+
  .dropdown-wrapper.open .nav-dropdown {
    display: block;
  }
+
+  .dropdown-wrapper .nav-dropdown .dropdown-item .nav-item {
+    margin: 0;
+    padding: 0;
+  }
+
+  .dropdown-wrapper .nav-dropdown .dropdown-item .nav-link {
+    font-size: 0.9rem;
+  }
 }
-</style>
+</style>
--- a/src/client/theme-default/components/NextAndPrevLinks.vue
+++ b/src/client/theme-default/components/NextAndPrevLinks.vue
@ -2,12 +2,12 @@
  <div v-if="hasLinks" class="links-wrapper">
    <div class="prev-link">
      <div v-if="prev">
-      ← <a :href="prev.link">{{prev.text}}</a>
+      ← <a :href="prev.link">{{ prev.text }}</a>
      </div>
    </div>
    <div class="next-link">
      <div v-if="next">
-      <a :href="next.link">{{next.text}}</a> →
+        <a :href="next.link">{{ next.text }}</a> →
      </div>
    </div>
  </div>
@ -17,9 +17,19 @@

 <style>
 .links-wrapper {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
  display: flex;
  justify-content: space-between;
+  margin-top: 4rem;
+  border-top: 1px solid var(--border-color);
+  padding-top: 1rem;
+  padding-bottom: 2rem;
+}
+
+.links-wrapper a {
+  font-weight: 500;
+}
+
+.links-wrapper a:hover {
+  text-decoration: none !important;
 }
-</style>
+</style>
--- a/src/client/theme-default/components/Page.vue
+++ b/src/client/theme-default/components/Page.vue
@ -14,9 +14,9 @@ export default {

 <style>
 .content {
-  max-width: 46rem;
-  margin: 0px auto;
-  padding: 1rem 2rem;
+  margin: 0 auto;
+  padding: 0.025rem 2.5rem 2rem;
+  max-width: 50rem;
 }

 .content a {
--- a/src/client/theme-default/components/SideBar.vue
+++ b/src/client/theme-default/components/SideBar.vue
@ -1,5 +1,6 @@
 <template>
-  <NavBarLinks class="show-mobile"/>
+  <NavBarLinks class="show-mobile" />
+
  <ul class="sidebar">
    <SideBarItem v-for="item of items" :item="item" />
  </ul>
@ -11,6 +12,7 @@
 .show-mobile {
  display: none;
 }
+
@media screen and (max-width: 719px) {
  .show-mobile {
    display: block;
@ -25,6 +27,20 @@
  margin: 0;
 }

+.sidebar {
+  padding: 1.5rem 0;
+}
+
+.sidebar-data {
+  padding: 1.5rem 0;
+}
+
+@media screen and (max-width: 719px) {
+  .sidebar-data {
+    padding: 1rem;
+  }
+}
+
 .sidebar-items .sidebar-items {
  padding-left: 1rem;
 }
@ -40,18 +56,26 @@
 .sidebar-items .sidebar-link {
  padding: .35rem 1rem .35rem 2rem;
  line-height: 1.4;
-  font-size: 0.9em;
+  font-size: 0.95em;
  font-weight: 400;
 }

+.sidebar-item + .sidebar-item {
+  padding-top: 0.75rem;
+}
+
+.sidebar-items > .sidebar-item + .sidebar-item {
+  padding-top: 0;
+}
+
 .sidebar-link {
  display: block;
  margin: 0;
  border-left: .25rem solid transparent;
  padding: .35rem 1.5rem .35rem 1.25rem;
  line-height: 1.7;
-  font-size: 1em;
-  font-weight: 600;
+  font-size: 1.05em;
+  font-weight: 700;
  color: var(--text-color);
 }

--- a/src/client/theme-default/styles/layout.css
+++ b/src/client/theme-default/styles/layout.css
@ -43,13 +43,19 @@ aside {
  left: 0;
  height: 100%;
  width: var(--sidebar-width);
-  padding: calc(var(--header-height) + 1.5rem) 0 1.5rem 0;
+  padding: var(--header-height) 0 1.5rem 0;
  border-right: 1px solid var(--border-color);
  background-color: #fff;
  z-index: 3;
  overflow-y: auto;
 }

+@media screen and (max-width: 959px) {
+  aside {
+    width: 16.4rem;
+  }
+}
+
@media screen and (max-width: 719px) {
  aside {
    transition: transform .2s ease;
@ -78,9 +84,9 @@ main {
  margin-left: var(--sidebar-width);
 }

-@media screen and (max-width: 719px) {
+@media screen and (max-width: 959px) {
  main {
-    margin-left: 0;
+    margin-left: 16.4rem;
  }
 }