feat: animation & dark mode (#273)

theme-nexmoe · Apr 29, 2023 · 78219c8 · 78219c8
2 parents 4bed6b0 + 120e5d0
commit 78219c8
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 21 deletions.
diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -29,31 +29,30 @@ if (is_archive()){
 
 <%- css_auto_version('lib/iconfont/iconfont.css') %>
 <% if (theme.iconlib) { %>
-<link rel="stylesheet" href="<%= theme.iconlib %>">
+    <link rel="stylesheet" href="<%= theme.iconlib %>">
 <% } %>
 <%- css_auto_version('css/style') %>
 
 <% if (theme.preset) { %>
-<%- css_auto_version('preset/'＋theme.preset) %>
+    <%- css_auto_version(`preset/${theme.preset}`) %>
 <% } %>
 
 <% if (theme.customStyles) { %>
-<% theme.customStyles.forEach(function(custom){ %>
-<%- css_auto_version('custom.css') %>
-<% }) %>
+    <% theme.customStyles.forEach(function(custom){ %>
+        <%- css_auto_version('custom.css') %>
+    <% }) %>
 <% } %>
 
 <%- js([
     { src:'lib/mdui_043tiny/mdui.js' , async: true}, 
-    { src:'lib/fancybox/fancybox.umd.js' , async: true}
+    { src:'lib/fancybox/fancybox.umd.js' , async: true},
+    { src:'lib/lax.min.js' , async: true}
 ]) %>
 
 <%- js_auto_version('js/app') %>
 
 <% if (theme.copyText) { %>
-<script>
-    var copyTip = "<%- theme.copyText %>"
-</script>
-<% } %>
+    <script>var copyTip = "<%- theme.copyText %>"</script>
+<% } %> 
 
-<%- theme.slotHead %>
+<%- theme.slotHead %>
diff --git a/layout/_partial/right.ejs b/layout/_partial/right.ejs
@@ -15,6 +15,6 @@
 
             <%} %>
 
-            <a href="#nexmoe-content" class="toc-link" aria-label="Back To Top" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
+            <a href="#nexmoe-content" class="backtop toc-link" aria-label="Back To Top" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
         </div>
     </div>
diff --git a/layout/layout.jsx b/layout/layout.jsx
@@ -18,7 +18,7 @@ module.exports = class extends Component {
 				></head>
 				<body class={layout + " " + bodyClass}>
 					<Background {...this.props} />
-					<Body {...this.props} />
+					<Body  {...this.props} />
 
 					<div
 						dangerouslySetInnerHTML={{

diff --git a/source/css/_layout/nexmoe/content.styl b/source/css/_layout/nexmoe/content.styl
@@ -4,7 +4,7 @@
 
     .nexmoe-primary {
         box-shadow: 0 0 1rem var(--color-shadow);
-        background-color: #fff;
+        background-color: var(--color-card);
         float: left;
         width: 100%;
         padding: $gutter;

diff --git a/source/css/_layout/nexmoe/header.styl b/source/css/_layout/nexmoe/header.styl
@@ -54,7 +54,7 @@
             color: #a3a8ae;
 
             span {
-                color: #363636;
+                color: var(--color-text-2);
                 display: block;
             }
         }

diff --git a/source/css/_layout/xiaoshu/content.styl b/source/css/_layout/xiaoshu/content.styl
@@ -8,6 +8,6 @@
     width: 100%;
     padding: var(--gutter);
     margin: 0;
-    background: #fff;
+    background: var(--color-card);
     box-shadow: 0 0 1rem var(--color-shadow)
 }
diff --git a/source/css/_layout/xiaoshu/header.styl b/source/css/_layout/xiaoshu/header.styl
@@ -0,0 +1,31 @@
+#nexmoe-header {
+    height: 4em;
+    background-color: transparent;
+    line-height: 4em;
+    margin-bottom: 10rem;
+}
+
+#nexmoe-header .nexmoe-container {
+    display: flex;
+    flex-direction: row;
+}
+
+#nexmoe-header .logo {
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 10em;
+}
+
+#nexmoe-header .nav {
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    margin: 0;
+    margin-left: auto;
+}
+
+#nexmoe-header .nav .nav-item {
+    margin-left: 1.5em;
+}
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -1,5 +1,5 @@
 article {
-	color: #444;
+	color: var(--color-text-2);
 	font-family: microsoft yahei;
 }
 
@@ -183,7 +183,7 @@ article img {
 }
 
 article h1, article h2, article h3, article h4, article h5, article h6 {
-	color: #111;
+	color: var(--color-text-1);
 	margin: $gutter 0;
 }
 

diff --git a/source/css/_widget/index.styl b/source/css/_widget/index.styl
@@ -1,6 +1,6 @@
 .nexmoe-widget-wrap {
     box-shadow: 0 0 1rem var(--color-shadow);
-    background-color: #fff;
+    background-color: var(--color-card);
     margin: 20px;
     border-radius: var(--radius);
     overflow: hidden;

diff --git a/source/css/style.styl b/source/css/style.styl
@@ -18,17 +18,35 @@ $gutter = 24px;
     --color6-bg: rgba(26, 152, 255, 0.15);
     --color7-bg: rgba(144, 144, 255, 0.15);
     --color-shadow: rgba(161, 177, 204, 0.4);
+    --color-card: #fff;
+    --color-text-1: #111;
+    --color-text-2: #444;
+    --color-text-3: #363636;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-card: #2b2b2b;
+        --color-text-1: #fff;
+        --color-text-2: #ccc;
+    }
 }
 
 @import '_partial/*';
 @import '_index/*';
 @import '_widget/*';
 
+body {
+    background: var(--color-card);
+    font-size: 17px;
+}
+
 .xiaoshu {
-    @import '_layout/xiaoshu/*';    
+    @import '_layout/xiaoshu/*';
 }
+
 .nexmoe {
-    @import '_layout/nexmoe/*';    
+    @import '_layout/nexmoe/*';
 }
 
 *, *:after, *::before {
@@ -115,6 +133,10 @@ body.mdui-drawer-body-left {
             font-size: 20px;
         }
     }
+
+    .backtop {
+        opacity: 0;
+    }
 }
 
 .nexmoe-post-right .nexmoe-tool .mdui-fab {

diff --git a/source/js/app.js b/source/js/app.js
@@ -54,3 +54,31 @@ document
 	.forEach(function (item) {
 		item.style.minHeight = item.childNodes[3].clientHeight + "px";
 	});
+
+window.onload = function () {
+	lax.init();
+
+	// Add a driver that we use to control our animations
+	lax.addDriver("scrollY", function () {
+		return window.scrollY;
+	});
+
+	// Add animation bindings to elements
+	lax.addElements(".backtop", {
+		scrollY: {
+			opacity: [
+				["screenHeight", "screenHeight+300", "screenHeight+600"],
+				[0, 0, 1],
+			],
+		},
+	});
+
+	lax.addElements(".nexmoe-post-cover", {
+		scrollY: {
+			opacity: [
+				["elInY", "elInY+200"],
+				[0, 1],
+			],
+		},
+	});
+};
diff --git a/source/lib/lax.min.js b/source/lib/lax.min.js