redesign: 沉浸式梦境主题 - 星空粒子、水晶效果、滚动动画

themes/dreamscape/layouts/index.html

@@ -1,28 +1,48 @@
 {{ define "main" }}
-<div class="home">
+<div class="dream-home">
     <section class="hero">
-        <h1 class="hero-title">{{ .Site.Title }}</h1>
-        <p class="hero-subtitle">{{ .Site.Params.description }}</p>
+        <div class="hero-constellation"></div>
+        <h1 class="hero-title reveal">
+            <span class="hero-glyph">◇</span>
+            Val's Dreamscape
+        </h1>
+        <p class="hero-subtitle reveal">{{ .Site.Params.description }}</p>
+        <div class="hero-scroll reveal">
+            <span>向下探索</span>
+            <div class="scroll-arrow"></div>
+        </div>
     </section>
 
     {{ $sections := slice "journey" "sketch" "gallery" "essay" }}
     {{ range $sections }}
     {{ $pages := where $.Site.RegularPages "Section" . }}
     {{ if $pages }}
-    <section class="section">
-        <h2 class="section-title">
-            <a href="/{{ . }}/">{{ . | title }} · {{ len $pages }}</a>
+    <section class="dream-section reveal">
+        <h2 class="section-heading">
+            <span class="section-glyph">
+                {{ if eq . "journey" }}◈{{ end }}
+                {{ if eq . "sketch" }}✎{{ end }}
+                {{ if eq . "gallery" }}❖{{ end }}
+                {{ if eq . "essay" }}✦{{ end }}
+            </span>
+            {{ if eq . "journey" }}旅程{{ end }}
+            {{ if eq . "sketch" }}速记{{ end }}
+            {{ if eq . "gallery" }}图志{{ end }}
+            {{ if eq . "essay" }}随笔{{ end }}
         </h2>
-        <div class="card-grid">
-            {{ range first 3 $pages }}
-            <article class="card">
-                <div class="card-meta">
-                    <time>{{ .Date.Format "2006-01-02" }}</time>
-                    {{ with .Params.tags }}<span class="tags">{{ range . }}<span class="tag">{{ . }}</span>{{ end }}</span>{{ end }}
+        <div class="card-constellation">
+            {{ range $pages }}
+            <a href="{{ .RelPermalink }}" class="dream-card reveal">
+                <div class="card-glow"></div>
+                <div class="card-content">
+                    <time class="card-time">{{ .Date.Format "2006.01.02" }}</time>
+                    <h3 class="card-title">{{ .Title }}</h3>
+                    <p class="card-excerpt">{{ .Summary | truncate 80 }}</p>
+                    <div class="card-tags">
+                        {{ range .Params.tags }}<span class="tag">{{ . }}</span>{{ end }}
+                    </div>
                 </div>
-                <h3 class="card-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-                <p class="card-summary">{{ .Summary | truncate 120 }}</p>
-            </article>
+            </a>
             {{ end }}
         </div>
     </section>