Skip to content

Commit 6c108c8

Browse files
endaamanendaaman
committed
Renew top page
1 parent 98f6b76 commit 6c108c8

File tree

5 files changed

+100
-44
lines changed

5 files changed

+100
-44
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
public/
33
resources/_gen/
44
.hugo_build.lock
5+
hugo_stats.json
56

67
# Dependencies
78
node_modules/

‎hugo.toml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,31 @@ title = '株式会社テクノプラズム'
1313
[markup.goldmark]
1414
[markup.goldmark.renderer]
1515
unsafe = true
16+
17+
[build]
18+
[build.buildStats]
19+
enable = true
20+
[[build.cachebusters]]
21+
source = 'assets/notwatching/hugo_stats\.json'
22+
target = 'css'
23+
[[build.cachebusters]]
24+
source = '(postcss|tailwind)\.config\.js'
25+
target = 'css'
26+
27+
[module]
28+
[[module.mounts]]
29+
source = 'assets'
30+
target = 'assets'
31+
[[module.mounts]]
32+
source = 'hugo_stats.json'
33+
target = 'assets/notwatching/hugo_stats.json'
34+
disableWatch = true
35+
[[module.mounts]]
36+
source = 'content'
37+
target = 'content'
38+
[[module.mounts]]
39+
source = 'static'
40+
target = 'static'
41+
[[module.mounts]]
42+
source = 'layouts'
43+
target = 'layouts'

‎layouts/_default/baseof.html‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,13 @@
2020
<meta name="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}">
2121
<meta name="twitter:description" content="{{ with .Params.description }}{{ . }}{{ else }}{{ with .Summary }}{{ . | plainify | truncate 120 }}{{ else }}{{ .Site.Params.description }}{{ end }}{{ end }}">
2222
{{ with .Params.image }}<meta name="twitter:image" content="{{ . | absURL }}">{{ end }}
23+
{{ with (templates.Defer (dict "key" "global")) }}
2324
{{ $css := resources.Get "css/main.css" | css.PostCSS }}
2425
{{ if hugo.IsProduction }}
2526
{{ $css = $css | fingerprint }}
2627
{{ end }}
2728
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
29+
{{ end }}
2830
<link rel="preconnect" href="https://fonts.googleapis.com">
2931
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3032
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
@@ -36,35 +38,13 @@
3638
font-family: 'Public Sans', sans-serif;
3739
}
3840

39-
@keyframes stencil-shine {
40-
0% {
41-
background-position: -200% 0;
42-
}
43-
100% {
44-
background-position: 200% 0;
45-
}
46-
}
47-
4841
.text-stencil {
4942
background: #64748b;
5043
background-clip: text;
5144
-webkit-background-clip: text;
5245
-webkit-text-fill-color: transparent;
5346
text-decoration: none;
5447
}
55-
56-
.hero-container:hover .text-stencil {
57-
background: linear-gradient(
58-
110deg,
59-
#64748b 40%,
60-
#f1f5f9 50%,
61-
#64748b 60%
62-
);
63-
background-size: 200% 100%;
64-
background-clip: text;
65-
-webkit-background-clip: text;
66-
animation: stencil-shine 2s ease-in-out infinite;
67-
}
6848
</style>
6949
{{ block "head" . }}{{ end }}
7050
</head>

‎layouts/index.html‎

Lines changed: 68 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
1+
{{ define "head" }}
2+
<style>
3+
body {
4+
background-color: #000 !important;
5+
}
6+
7+
header {
8+
background-color: transparent !important;
9+
border-bottom-color: rgba(255,255,255,0.1) !important;
10+
}
11+
header a, header button {
12+
color: #ccc !important;
13+
}
14+
15+
footer {
16+
background-color: #000 !important;
17+
}
18+
19+
.gif-text {
20+
background-image: url(https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTlueXllMmF0YzYxMjY5aHY1b3JpNHJ3NmZpZWgxcnliaTVmbHZtbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/h6IEWL7c19SS6Yn1FM/giphy.gif);
21+
background-size: cover;
22+
background-position: center;
23+
background-attachment: fixed;
24+
-webkit-background-clip: text;
25+
-moz-background-clip: text;
26+
background-clip: text;
27+
color: transparent;
28+
-webkit-text-fill-color: transparent;
29+
text-decoration: none;
30+
}
31+
</style>
32+
{{ end }}
33+
134
{{ define "main" }}
235
<style>
336
.gradient-overlay {
437
position: fixed;
538
inset: 0;
639
pointer-events: none;
740
z-index: 0;
8-
opacity: 0.2;
41+
opacity: 0.15;
942
animation: gradientShift 30s ease-in-out infinite;
1043
}
1144
@keyframes gradientShift {
@@ -23,7 +56,7 @@
2356
.particle {
2457
position: absolute;
2558
border-radius: 50%;
26-
opacity: 0.4;
59+
opacity: 0.3;
2760
animation: float var(--particle-duration, 120s) linear infinite;
2861
transform-origin: 50vw 50vh;
2962
}
@@ -41,7 +74,6 @@
4174
const container = document.getElementById('particles');
4275
const baseSize = 1920 * 1080;
4376

44-
// 画面サイズに応じてアニメーション速度を計算
4577
function calcDuration() {
4678
const currentSize = window.innerWidth * window.innerHeight;
4779
const ratio = Math.sqrt(currentSize / baseSize);
@@ -79,30 +111,48 @@
79111
}
80112
})();
81113
</script>
82-
<div class="hero-container relative z-10" id="heroContainer">
83-
<h1 class="font-public-sans font-bold text-4xl sm:text-6xl md:text-8xl mb-8 tracking-tight">
84-
<a href="/" class="text-stencil">Technoplasm</a>
114+
<div class="relative z-10">
115+
<h1 class="font-public-sans font-bold text-6xl sm:text-8xl md:text-[120px] mb-4 tracking-tight leading-tight gif-text">
116+
Technoplasm
85117
</h1>
86-
<p class="text-xl sm:text-2xl md:text-3xl font-medium">
87-
<span class="text-gray-900">その身体は</span><span class="text-stencil">テクノロジー</span><span class="text-gray-900">で出来ている</span>
118+
<p class="text-xl sm:text-2xl md:text-3xl font-medium leading-loose">
119+
<span class="text-white">その身体は</span><span class="gif-text text-2xl sm:text-3xl md:text-4xl">テクノロジー</span><span class="text-white">で出来ている</span>
88120
</p>
89121
</div>
122+
<script>
123+
(function() {
124+
var gifs = [
125+
'url(https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTlueXllMmF0YzYxMjY5aHY1b3JpNHJ3NmZpZWgxcnliaTVmbHZtbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/h6IEWL7c19SS6Yn1FM/giphy.gif)',
126+
'url(https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExOGliYmcxOWltOHRuZmR2aXdyd3Rsc2V0b3h6aThjMTIzbGU5MmRobCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/RinDK3M9VVPclvxfKo/giphy.gif)',
127+
'url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcDM2YmR6aHFqMTF1ZnFiYTUwN2k2MjN3ajA5azdlMzM2eWtycHM3biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/59UXwJA1Wq6ZWgmgAi/giphy.gif)',
128+
'url(https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExOXM5eGNxYTVuZWZpaDVwaGk4ZTg4ejR6MzJmamVqdW5xdHE4bWZ5ZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/GIY4FhXDnT49CamnRn/giphy.gif)',
129+
'url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcmNlMTBpZzU2MHl6NWIyZ2M1YnN1bGg1ZTJ5eXdqeGFzZmxrOGl2ZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l0IyhNlpfmQtjkuDC/giphy.gif)'
130+
];
131+
var idx = Math.floor(Math.random() * gifs.length);
132+
var els = document.querySelectorAll('.gif-text');
133+
for (var i = 0; i < els.length; i++) {
134+
els[i].style.backgroundImage = gifs[idx];
135+
}
136+
setInterval(function() {
137+
idx = (idx + 1) % gifs.length;
138+
for (var i = 0; i < els.length; i++) {
139+
els[i].style.backgroundImage = gifs[idx];
140+
}
141+
}, 10000);
142+
})();
143+
</script>
90144
</div>
91145

92146
<!-- News Section -->
93-
<section class="py-16 px-6">
147+
<section class="py-6 px-6">
94148
<div class="max-w-4xl mx-auto">
95-
<div class="flex items-center justify-between mb-8">
96-
<h2 class="text-2xl font-bold text-slate-800">お知らせ</h2>
97-
<!-- <a href="/news/" class="text-sm text-slate-600 hover:text-slate-800 transition">すべて見る →</a> -->
98-
</div>
99-
<div class="bg-white rounded border border-gray-200 overflow-hidden">
100-
<div class="max-h-[11rem] overflow-y-auto divide-y divide-gray-100">
149+
<div class="rounded border border-white/20 overflow-hidden bg-white/10">
150+
<div class="max-h-[11rem] overflow-y-auto divide-y divide-white/10">
101151
{{ range first 5 (where .Site.RegularPages "Section" "news") }}
102152
<div class="flex items-center px-4 py-3">
103-
<time class="text-base text-gray-500 shrink-0 w-36">{{ .Date.Format "2006年1月2日" }}</time>
104-
<p class="text-base text-slate-800">{{ .Title }}
105-
{{ with .Params.blog }}　<a href="{{ . }}" class="text-sm text-blue-600 hover:text-blue-800">ブログ記事</a>{{ end }}
153+
<time class="text-base shrink-0 w-36 text-neutral-400">{{ .Date.Format "2006年1月2日" }}</time>
154+
<p class="text-base text-neutral-100">{{ .Title }}
155+
{{ with .Params.blog }}　<a href="{{ . }}" class="text-sm text-blue-400 hover:text-blue-300">ブログ記事</a>{{ end }}
106156
</p>
107157
</div>
108158
{{ end }}

‎tailwind.config.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ module.exports = {
44
'./content/**/*.{html,md}',
55
'./layouts/**/*.html',
66
],
7-
safelist: process.env.NODE_ENV === 'development' ? [
8-
{ pattern: /^(w|h|p)-/ },
9-
] : [],
10-
theme: {
7+
theme: {
118
extend: {},
129
},
1310
plugins: [

0 commit comments

Comments
 (0)