feat: new style and faster

2019-08-12 01:36:19 +08:00
parent a8bb44da3a
commit 9433736ede
75 changed files with 2330 additions and 4364 deletions
--- a/assets/css/_core/base.scss
+++ b/assets/css/_core/base.scss
@@ -0,0 +1,129 @@
+/** Font **/
+/* Lato */
+@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
+
+/* Montserrat */
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
+
+/* Roboto */
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
+
+html {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      height: 40px;
+      background-color: #eee;
+      border-radius: 16px;
+      &:hover {
+        background-color: #ddd;
+      }
+    }
+}
+
+::selection {
+  background: rgba(0, 149, 255, 0.1);
+}
+
+html {
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
+}
+
+body {
+  font-size: 11pt;
+  font-weight: 400;
+  line-height: 2em;
+  background-color: $light-background-color;
+  color: $light-font-color;
+  &:before {
+    content: "";
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: 0.05;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
+  }
+
+  &.dark-theme {
+    background-color: $dark-background-color;
+    color: $dark-font-color;
+  }
+}
+
+a {
+  color: $light-global-link-color;
+  text-decoration: none;
+  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
+  &:hover {
+    color: $light-global-link-hover-color;
+    text-decoration: none;
+    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
+  }
+
+  .dark-theme & {
+  color: $dark-global-link-color;
+  text-decoration: none;
+  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
+
+  &:hover {
+    color: $dark-global-link-hover-color;
+    text-decoration: none;
+    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
+  }
+  }
+}
+
+blockquote {
+  font-size: 1rem;
+  display: block;
+  border-width: 1px 0;
+  border-style: solid;
+  border-color: $light-border-color;
+  padding: 1.5em 1.2em 0.5em 1.2em;
+  margin: 0 0 2em 0;
+  position: relative;
+
+  &:before {
+    content: '\201C';
+    position: absolute;
+    top: 0em;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 3rem;
+    height: 2rem;
+    font: 6em/1.08em 'PT Sans', sans-serif;
+    color: $light-post-link-color;
+    text-align: center;
+
+    .dark-theme & {
+      color: $dark-post-link-color;
+    }
+  }
+  &:after {
+    content: "#blockquote" attr(cite);
+    display: block;
+    text-align: right;
+    font-size: 0.875em;
+    color: $light-post-link-color;
+
+    .dark-theme & {
+      color: $dark-post-link-color;
+    }
+  }
+
+  .dark-theme & {
+    border-color: $dark-border-color;
+  }
+}