redesign: 沉浸式梦境主题 - 星空粒子、水晶效果、滚动动画
All checks were successful
Deploy / deploy (push) Successful in 2s
All checks were successful
Deploy / deploy (push) Successful in 2s
This commit is contained in:
Chen Gu
@@ -1,4 +1,4 @@
|
||||
baseURL = 'https://val-dreamscape.github.io'
|
||||
baseURL = 'https://gch3n.online/val-blog/'
|
||||
languageCode = 'zh-CN'
|
||||
title = "Val's Dreamscape Journal"
|
||||
theme = "dreamscape"
|
||||
|
||||
499
themes/dreamscape/assets/css/dreamscape.css
Normal file
499
themes/dreamscape/assets/css/dreamscape.css
Normal file
@@ -0,0 +1,499 @@
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
VAL'S DREAMSCAPE — 沉浸式梦境主题
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap');
|
||||
|
||||
:root {
|
||||
--void: #030308;
|
||||
--deep: #0a0a1a;
|
||||
--night: #12122a;
|
||||
--mist: #1a1a3e;
|
||||
--crystal: #2a2a5e;
|
||||
--glow-purple: #7b68ee;
|
||||
--glow-blue: #4a90d9;
|
||||
--glow-cyan: #22d3ee;
|
||||
--text-light: #e8e8f8;
|
||||
--text-dim: #8888aa;
|
||||
--font-serif: 'Noto Serif SC', 'Songti SC', serif;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-serif);
|
||||
background: var(--void);
|
||||
color: var(--text-light);
|
||||
line-height: 1.9;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ═══ 星空画布 ═══ */
|
||||
#starfield {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ═══ 导航 ═══ */
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
padding: 1.2rem;
|
||||
background: linear-gradient(180deg, rgba(3,3,8,0.95) 0%, transparent 100%);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-size: 1.5rem;
|
||||
color: var(--glow-purple);
|
||||
text-decoration: none;
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.3s, text-shadow 0.3s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--glow-cyan);
|
||||
text-shadow: 0 0 20px var(--glow-cyan);
|
||||
}
|
||||
|
||||
/* ═══ 主内容 ═══ */
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 6rem 1.5rem 4rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ═══ 首页英雄区 ═══ */
|
||||
.dream-home { padding-top: 8vh; }
|
||||
|
||||
.hero {
|
||||
min-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, var(--glow-purple), var(--glow-cyan), var(--glow-blue));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: shimmer 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero-glyph {
|
||||
display: block;
|
||||
font-size: 0.4em;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.6;
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: clamp(0.95rem, 2.5vw, 1.2rem);
|
||||
color: var(--text-dim);
|
||||
max-width: 600px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero-scroll {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.scroll-arrow {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: linear-gradient(180deg, var(--glow-purple), transparent);
|
||||
animation: scrollPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ═══ 内容区块 ═══ */
|
||||
.dream-section {
|
||||
padding: 5rem 0;
|
||||
border-top: 1px solid rgba(123,104,238,0.1);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
color: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.section-glyph {
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.7;
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ═══ 卡片星座 ═══ */
|
||||
.card-constellation {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.dream-card {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 1.8rem;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(26,26,62,0.6), rgba(10,10,26,0.8));
|
||||
border: 1px solid rgba(123,104,238,0.15);
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1), border-color 0.3s;
|
||||
}
|
||||
|
||||
.dream-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%; left: -50%;
|
||||
width: 200%; height: 200%;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(123,104,238,0.08), transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.dream-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
border-color: rgba(123,104,238,0.4);
|
||||
}
|
||||
|
||||
.dream-card:hover::before { opacity: 1; }
|
||||
|
||||
.card-glow {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--glow-purple), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.dream-card:hover .card-glow { opacity: 1; }
|
||||
|
||||
.card-time {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.15rem;
|
||||
margin: 0.5rem 0;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.card-excerpt {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.7rem;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
background: rgba(123,104,238,0.15);
|
||||
color: var(--glow-purple);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
/* ═══ 文章页 ═══ */
|
||||
.dream-article {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.article-hero {
|
||||
text-align: center;
|
||||
padding: 4rem 0 3rem;
|
||||
border-bottom: 1px solid rgba(123,104,238,0.1);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.article-glyph {
|
||||
font-size: 2rem;
|
||||
color: var(--glow-purple);
|
||||
opacity: 0.5;
|
||||
margin-bottom: 1rem;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: clamp(1.8rem, 5vw, 2.8rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.article-tags { display: flex; gap: 0.5rem; }
|
||||
|
||||
/* ═══ 文章正文 — 沉浸式排版 ═══ */
|
||||
.article-body {
|
||||
font-size: 1.1rem;
|
||||
line-height: 2;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.article-body p {
|
||||
margin-bottom: 1.8rem;
|
||||
text-align: justify;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.article-body p:nth-child(1) { animation-delay: 0.1s; }
|
||||
.article-body p:nth-child(2) { animation-delay: 0.2s; }
|
||||
.article-body p:nth-child(3) { animation-delay: 0.3s; }
|
||||
.article-body p:nth-child(4) { animation-delay: 0.4s; }
|
||||
.article-body p:nth-child(5) { animation-delay: 0.5s; }
|
||||
.article-body p:nth-child(n+6) { animation-delay: 0.6s; }
|
||||
|
||||
.article-body h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 3rem 0 1.5rem;
|
||||
color: var(--glow-cyan);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-body h3 {
|
||||
font-size: 1.2rem;
|
||||
margin: 2rem 0 1rem;
|
||||
color: var(--glow-purple);
|
||||
}
|
||||
|
||||
.article-body a {
|
||||
color: var(--glow-cyan);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(34,211,238,0.3);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.article-body a:hover { border-color: var(--glow-cyan); }
|
||||
|
||||
.article-body blockquote {
|
||||
margin: 2.5rem 0;
|
||||
padding: 1.5rem 2rem;
|
||||
border-left: 3px solid var(--glow-purple);
|
||||
background: linear-gradient(135deg, rgba(123,104,238,0.08), transparent);
|
||||
font-style: italic;
|
||||
color: var(--text-light);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-body blockquote::before {
|
||||
content: '"';
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
left: 1rem;
|
||||
font-size: 4rem;
|
||||
color: var(--glow-purple);
|
||||
opacity: 0.2;
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
.article-body strong {
|
||||
color: var(--glow-cyan);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-body img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 2rem 0;
|
||||
box-shadow: 0 0 40px rgba(123,104,238,0.2);
|
||||
}
|
||||
|
||||
.article-body pre {
|
||||
background: var(--night);
|
||||
border: 1px solid rgba(123,104,238,0.2);
|
||||
border-radius: 8px;
|
||||
padding: 1.2rem;
|
||||
overflow-x: auto;
|
||||
margin: 1.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.article-body code {
|
||||
background: var(--night);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* ═══ 文章导航 ═══ */
|
||||
.article-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid rgba(123,104,238,0.1);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.article-nav a {
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.article-nav a:hover { color: var(--glow-cyan); }
|
||||
|
||||
/* ═══ 列表页 ═══ */
|
||||
.dream-list { padding-top: 2rem; }
|
||||
|
||||
.list-heading {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.list-entry {
|
||||
display: block;
|
||||
padding: 1.5rem 0;
|
||||
border-bottom: 1px solid rgba(123,104,238,0.1);
|
||||
text-decoration: none;
|
||||
transition: padding-left 0.3s;
|
||||
}
|
||||
|
||||
.list-entry:hover { padding-left: 1rem; }
|
||||
|
||||
.list-entry time {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.list-entry h3 {
|
||||
font-size: 1.2rem;
|
||||
margin: 0.3rem 0;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.list-entry p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ═══ 页脚 ═══ */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
border-top: 1px solid rgba(123,104,238,0.1);
|
||||
}
|
||||
|
||||
/* ═══ 动画 ═══ */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.2); }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes scrollPulse {
|
||||
0%, 100% { opacity: 0.3; height: 40px; }
|
||||
50% { opacity: 1; height: 50px; }
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
|
||||
.reveal.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ═══ 响应式 ═══ */
|
||||
@media (max-width: 640px) {
|
||||
.nav { gap: 1rem; padding: 1rem; }
|
||||
.nav-link { font-size: 0.75rem; }
|
||||
main { padding: 5rem 1rem 3rem; }
|
||||
.hero-title { font-size: 2rem; }
|
||||
.article-body { font-size: 1rem; }
|
||||
.card-constellation { grid-template-columns: 1fr; }
|
||||
}
|
||||
150
themes/dreamscape/assets/js/dreamscape.js
Normal file
150
themes/dreamscape/assets/js/dreamscape.js
Normal file
@@ -0,0 +1,150 @@
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
VAL'S DREAMSCAPE — 星空粒子 + 滚动动画
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// ═══ 星空粒子系统 ═══
|
||||
const canvas = document.getElementById('starfield');
|
||||
const ctx = canvas.getContext('2d');
|
||||
let width, height, stars, nebulas;
|
||||
let animationId;
|
||||
|
||||
function init() {
|
||||
resize();
|
||||
createStars();
|
||||
createNebulas();
|
||||
animate();
|
||||
}
|
||||
|
||||
function resize() {
|
||||
width = canvas.width = window.innerWidth;
|
||||
height = canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
function createStars() {
|
||||
const count = Math.floor((width * height) / 8000);
|
||||
stars = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
stars.push({
|
||||
x: Math.random() * width,
|
||||
y: Math.random() * height,
|
||||
size: Math.random() * 1.5 + 0.5,
|
||||
speed: Math.random() * 0.3 + 0.1,
|
||||
opacity: Math.random() * 0.8 + 0.2,
|
||||
twinkle: Math.random() * Math.PI * 2,
|
||||
color: Math.random() > 0.7 ?
|
||||
`hsl(${220 + Math.random() * 60}, 70%, 80%)` :
|
||||
'#ffffff'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function createNebulas() {
|
||||
nebulas = [
|
||||
{ x: width * 0.2, y: height * 0.3, r: 200, color: 'rgba(123,104,238,0.03)' },
|
||||
{ x: width * 0.8, y: height * 0.7, r: 250, color: 'rgba(34,211,238,0.02)' },
|
||||
{ x: width * 0.5, y: height * 0.5, r: 300, color: 'rgba(74,144,217,0.02)' }
|
||||
];
|
||||
}
|
||||
|
||||
function animate() {
|
||||
ctx.fillStyle = 'rgba(3,3,8,0.1)';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// 绘制星云
|
||||
nebulas.forEach(n => {
|
||||
const gradient = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r);
|
||||
gradient.addColorStop(0, n.color);
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
// 绘制星星
|
||||
stars.forEach(star => {
|
||||
star.twinkle += 0.02;
|
||||
const twinkleFactor = 0.5 + Math.sin(star.twinkle) * 0.5;
|
||||
const currentOpacity = star.opacity * twinkleFactor;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = star.color;
|
||||
ctx.globalAlpha = currentOpacity;
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
// 缓慢漂移
|
||||
star.y += star.speed;
|
||||
if (star.y > height + 10) {
|
||||
star.y = -10;
|
||||
star.x = Math.random() * width;
|
||||
}
|
||||
});
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// ═══ 滚动显示动画 ═══
|
||||
function setupReveal() {
|
||||
const reveals = document.querySelectorAll('.reveal');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
reveals.forEach(el => observer.observe(el));
|
||||
}
|
||||
|
||||
// ═══ 视差效果 ═══
|
||||
function setupParallax() {
|
||||
const hero = document.querySelector('.hero');
|
||||
if (!hero) return;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
const opacity = Math.max(0, 1 - scrollY / 600);
|
||||
hero.style.opacity = opacity;
|
||||
hero.style.transform = `translateY(${scrollY * 0.3}px)`;
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
// ═══ 鼠标光效 ═══
|
||||
function setupGlow() {
|
||||
const cards = document.querySelectorAll('.dream-card');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
card.style.setProperty('--mouse-x', `${x}px`);
|
||||
card.style.setProperty('--mouse-y', `${y}px`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ═══ 初始化 ═══
|
||||
window.addEventListener('resize', () => {
|
||||
resize();
|
||||
createStars();
|
||||
createNebulas();
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
init();
|
||||
setupReveal();
|
||||
setupParallax();
|
||||
setupGlow();
|
||||
});
|
||||
|
||||
})();
|
||||
@@ -5,13 +5,27 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ if .Title }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
|
||||
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
{{- partial "head.html" . -}}
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
{{ $style := resources.Get "css/dreamscape.css" | minify }}
|
||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||||
<link rel="alternate" type="application/rss+xml" href='{{ "feed.xml" | relURL }}'>
|
||||
</head>
|
||||
<body class="{{ if .IsHome }}home{{ else }}page{{ end }}">
|
||||
{{- partial "header.html" . -}}
|
||||
<body>
|
||||
<canvas id="starfield"></canvas>
|
||||
<div id="app">
|
||||
<nav class="nav">
|
||||
<a href="/" class="nav-logo">✦</a>
|
||||
{{ range .Site.Menus.main }}
|
||||
<a href="{{ .URL | relURL }}" class="nav-link">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
<main>
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
<footer class="footer">
|
||||
<span>✦ Val's Dreamscape Journal ✦</span>
|
||||
</footer>
|
||||
</div>
|
||||
<script src='{{ "js/dreamscape.js" | relURL }}'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
{{ define "main" }}
|
||||
<div class="page-header">
|
||||
<h1>{{ .Title | default .Section | title }}</h1>
|
||||
{{ if .Content }}<div class="section-desc">{{ .Content }}</div>{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<div class="dream-list reveal">
|
||||
<h1 class="list-heading">
|
||||
<span class="section-glyph">◈</span>
|
||||
{{ .Title | default .Section | title }}
|
||||
</h1>
|
||||
{{ range .Paginator.Pages }}
|
||||
<article class="list-item">
|
||||
<time>{{ .Date.Format "2006-01-02" }}</time>
|
||||
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<a href="{{ .RelPermalink }}" class="list-entry reveal">
|
||||
<time>{{ .Date.Format "2006.01.02" }}</time>
|
||||
<h3>{{ .Title }}</h3>
|
||||
<p>{{ .Summary | truncate 100 }}</p>
|
||||
</article>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,19 +1,23 @@
|
||||
{{ define "main" }}
|
||||
<div class="page-header">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ if .Params.subtitle }}<p class="subtitle">{{ .Params.subtitle }}</p>{{ end }}
|
||||
<div class="meta">
|
||||
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006年01月02日" }}</time>
|
||||
{{ with .Params.tags }}<span class="tags">{{ range . }}<span class="tag">{{ . }}</span>{{ end }}</span>{{ end }}
|
||||
<article class="dream-article">
|
||||
<div class="article-hero reveal">
|
||||
<div class="article-glyph">◇</div>
|
||||
<h1 class="article-title">{{ .Title }}</h1>
|
||||
<div class="article-meta">
|
||||
<time>{{ .Date.Format "2006年01月02日" }}</time>
|
||||
<div class="article-tags">
|
||||
{{ range .Params.tags }}<span class="tag">{{ . }}</span>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="article">
|
||||
<div class="article-body">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<nav class="post-nav">
|
||||
{{ with .PrevInSection }}<a href="{{ .RelPermalink }}" class="prev">← {{ .Title }}</a>{{ end }}
|
||||
{{ with .NextInSection }}<a href="{{ .RelPermalink }}" class="next">{{ .Title }} →</a>{{ end }}
|
||||
<nav class="article-nav">
|
||||
{{ with .PrevInSection }}<a href="{{ .RelPermalink }}" class="nav-prev">← {{ .Title }}</a>{{ end }}
|
||||
{{ with .NextInSection }}<a href="{{ .RelPermalink }}" class="nav-next">{{ .Title }} →</a>{{ end }}
|
||||
</nav>
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
@@ -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>
|
||||
<h3 class="card-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<p class="card-summary">{{ .Summary | truncate 120 }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user