feat(style): use white theme color

Author: egoist

src/components/DocuteSelect.vue

@@ -0,0 +1,78 @@
+<template functional>
+  <div class="DocuteSelect">
+    <select class="select" v-on="listeners">
+      <slot name="default"></slot>
+    </select>
+    <div class="arrow">
+      <svg width="13" height="6" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#979797" fill-rule="evenodd" stroke-linecap="square"><path d="M1.367.375l5.185 5.303M11.685.375L6.5 5.678"></path></svg>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DocuteSelect'
+}
+</script>
+
+<style scoped>
+.DocuteSelect {
+  appearance: none;
+  color: #fff;
+  background: white;
+  display: inline-flex;
+  height: 40px;
+  outline: none;
+  border: 1px solid #eaeaea;
+  font-size: 12px;
+  text-transform: uppercase;
+  user-select: none;
+  font-weight: 100;
+  position: relative;
+  overflow: hidden;
+  transition: border 0.2s, background 0.2s, color 0.2s ease-out,
+    box-shadow 0.2s ease;
+  border-radius: 5px;
+  white-space: nowrap;
+  line-height: 0;
+  width: 100%;
+
+  &:hover {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    border-color: #ddd;
+
+    & .arrow {
+      border-color: #ddd;
+    }
+  }
+}
+
+.select {
+  appearance: none;
+  height: 100%;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  background-image: none;
+  line-height: 40px;
+  font-size: 14px;
+  margin-right: -20px;
+  padding: 0 76px 0 16px;
+  text-transform: none;
+  width: 100%;
+  outline: none;
+}
+
+.arrow {
+  border-left: 1px solid #eaeaea;
+  background: white;
+  width: 40px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/components/EditLink.vue

@@ -32,7 +32,6 @@ export default {
   margin-top: 50px;
 
   & a {
-    color: var(--accent-color);
     text-decoration: none;
     display: flex;
     align-items: center;

src/components/MobileHeader.vue

@@ -25,13 +25,17 @@ export default {
   padding: 0 20px;
   height: var(--mobile-header-height);
   line-height: var(--mobile-header-height);
-  background: var(--accent-color);
-  color: white;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 3;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--sidebar-bg);
+
+  @media (max-width: 768px) {
+    display: flex;
+  }
 }
 
 .SiteTitle {
@@ -51,11 +55,3 @@ export default {
   margin-right: 10px;
 }
 </style>
-
-<style scoped>
-@media screen and (max-width: 768px) {
-  .MobileHeader {
-    display: flex;
-  }
-}
-</style>

src/components/PrevNextLinks.vue

@@ -60,10 +60,8 @@ export default {
   margin-top: 40px;
   padding-top: 30px;
   border-top: 1px solid var(--border-color);
-  color: var(--accent-color);
 
   & a {
-    color: var(--accent-color);
     text-decoration: none;
 
     &:hover {

src/components/Rightbar.vue

@@ -78,16 +78,27 @@ export default {
   position: fixed;
   top: 0;
   bottom: 0;
-  left: 0;
   z-index: 9;
-  color: white;
   overflow-y: auto;
   padding: 20px 0;
   word-break: break-word;
+  border-right: 1px solid var(--border-color);
 
   & a {
-    color: white;
     text-decoration: none;
+    color: #000;
+  }
+
+  @media (max-width: 768px) {
+    left: 0;
+    transform: translateX(-100%);
+    width: 80%;
+    top: var(--mobile-header-height);
+    transition: transform 0.5s cubic-bezier(0.5, 0.32, 0.01, 1);
+
+    &.isShown {
+      transform: translateX(0);
+    }
   }
 }
 
@@ -97,13 +108,16 @@ export default {
   padding: 20px;
   padding-top: 0;
   line-height: 1.2;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .SidebarItem {
   &:not(:last-child) {
-    border-bottom: 1px solid var(--sidebar-border-color);
-    padding-bottom: 2rem;
-    margin-bottom: 2rem;
+    padding-bottom: 1.2rem;
+    margin-bottom: 1.2rem;
   }
 
   &.hasTitle {
@@ -118,12 +132,12 @@ export default {
 }
 
 .ItemTitle {
-  font-size: 1.2rem;
-  font-style: italic;
+  font-size: 1rem;
   padding: 0 20px;
   margin-bottom: 10px;
-  font-weight: 500;
   position: relative;
+  color: var(--sidebar-section-title-color);
+  text-transform: uppercase;
 }
 
 .ItemLink {
@@ -134,7 +148,7 @@ export default {
 
   &.active,
   &:hover {
-    background: var(--sidebar-border-color);
+    font-weight: bold;
   }
 }
 
@@ -160,50 +174,18 @@ export default {
     margin-left: 50px;
   }
 
-  &:before {
-    position: absolute;
-    content: '';
-    height: 4px;
-    width: 4px;
-    background: transparent;
-    display: block;
-    top: 50%;
-    margin-top: -2px;
-    left: -10px;
-    border-radius: 50%;
-  }
-
-  &:hover {
-    &:before {
-      background: rgba(228, 228, 228, 0.28);
-    }
-  }
-
   &.router-link-exact-active {
-    &:before {
-      background: white;
-    }
-  }
-}
-</style>
+    font-weight: bold;
 
-<style scoped>
-@import 'vars.css';
-
-@media screen and (max-width: 768px) {
-  .Sidebar {
-    transform: translateX(-100%);
-    width: 80%;
-    top: var(--mobile-header-height);
-    transition: transform 0.5s cubic-bezier(0.5, 0.32, 0.01, 1);
-
-    &.isShown {
-      transform: translateX(0);
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      right: 0;
+      background: #333;
     }
   }
-
-  .SiteTitle {
-    display: none;
-  }
 }
 </style>

src/components/Sidebar.vue

@@ -2,14 +2,17 @@
 
 body {
   margin: 0;
-  background: #fafafa;
   font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }
 
 * {
   box-sizing: border-box;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .external-link-icon {
   color: #aaa;
   display: inline-block;
@@ -19,6 +22,13 @@ body {
   z-index: 99;
 }
 
+.Wrap {
+  &.is-center {
+    max-width: 1020px;
+    margin: 0 auto;
+  }
+}
+
 /** Badge */
 .badge {
   display: inline-block;
@@ -43,44 +53,3 @@ body {
     background: #d82f2f;
   }
 }
-
-.docute-select {
-  position: relative;
-  display: inline-block;
-
-  &:after {
-    position: absolute;
-    top: 50%;
-    right: 0.95rem;
-    display: inline-block;
-    content: "";
-    width: 0;
-    height: 0;
-    margin-top: -.15rem;
-    pointer-events: none;
-    border-top: .35rem solid var(--sidebar-border-color);
-    border-right: .35rem solid transparent;
-    border-bottom: .35rem solid transparent;
-    border-left: .35rem solid transparent;
-  }
-
-  & select {
-    display: inline-block;
-    margin: 0;
-    padding: .3rem 1.95rem .3rem .7rem;
-    line-height: 1.5;
-    color: inherit;
-    background-color: transparent;
-    border: 1px solid var(--sidebar-border-color);
-    border-radius: .25rem;
-    outline: 0;
-    appearance: none;
-  }
-
-  &.is-block {
-    width: 100%;
-    & select {
-      width: 100%;
-    }
-  }
-}

src/css/main.css

@@ -6,7 +6,6 @@
   }
 
   & a {
-    color: var(--accent-color);
     text-decoration: none;
 
     &:hover {
@@ -25,15 +24,13 @@
   }
 
   & h1 {
-    color: var(--accent-color);
     font-size: 3rem;
     margin-bottom: 1.4rem;
   }
 
   & h2 {
-    color: var(--accent-color);
     font-size: 2rem;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--border-color);
     margin-top: 7rem;
     padding-bottom: 5px;
   }