Skip to content

Commit bcda820

Browse files
author
y-yamasaki
committed
Merge branch 'develop'
2 parents 2aefa4e + d47545c commit bcda820

11 files changed

Lines changed: 772 additions & 479 deletions

File tree

‎assets/css/base.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,17 @@ button {
7878
color: var(--color-text-muted);
7979
font-size: 0.85rem;
8080
}
81+
82+
/* === Scroll Reveal 共通 === */
83+
.reveal-on-scroll {
84+
opacity: 0;
85+
transform: translateY(10px) scale(0.98);
86+
transition:
87+
opacity 0.75s ease-out,
88+
transform 0.75s ease-out;
89+
}
90+
91+
.reveal-on-scroll.is-visible {
92+
opacity: 1;
93+
transform: translateY(0) scale(1);
94+
}

‎assets/css/blog.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
background 0.12s ease-out,
6969
border-color 0.12s ease-out,
7070
color 0.12s ease-out,
71+
box-shadow 0.12s ease-out,
7172
transform 0.12s ease-out;
7273
}
7374

@@ -77,9 +78,16 @@
7778
}
7879

7980
.blog-tag-chip.active {
80-
background: var(--color-accent);
81-
border-color: var(--color-accent);
81+
background:
82+
radial-gradient(
83+
circle at 0 0,
84+
rgba(56, 189, 248, 0.4),
85+
transparent 55%
86+
),
87+
var(--color-accent);
8288
color: #f9fafb;
89+
border-color: var(--color-accent);
90+
box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
8391
}
8492

8593
/* 一覧 */

‎assets/css/layout.css‎

Lines changed: 73 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,46 @@
3232
}
3333

3434
.site-logo__mark {
35-
width: 26px;
36-
height: 26px;
35+
width: 32px;
36+
height: 32px;
3737
border-radius: 999px;
38-
background: radial-gradient(
39-
circle at 30% 20%,
40-
#38bdf8,
41-
#4f46e5
42-
);
38+
background:
39+
radial-gradient(
40+
circle at 30% 20%,
41+
#38bdf8,
42+
transparent 45%
43+
),
44+
radial-gradient(
45+
circle at 70% 80%,
46+
#4f46e5,
47+
transparent 55%
48+
),
49+
#020617;
4350
display: inline-flex;
4451
align-items: center;
4552
justify-content: center;
4653
font-weight: 700;
4754
font-size: 0.95rem;
48-
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.85);
55+
box-shadow:
56+
0 0 12px rgba(56, 189, 248, 0.9),
57+
0 0 24px rgba(79, 70, 229, 0.8);
58+
animation: logo-pulse 2.4s infinite ease-in-out;
59+
}
60+
61+
@keyframes logo-pulse {
62+
0%,
63+
100% {
64+
transform: scale(1);
65+
box-shadow:
66+
0 0 10px rgba(56, 189, 248, 0.7),
67+
0 0 20px rgba(79, 70, 229, 0.6);
68+
}
69+
50% {
70+
transform: scale(1.08);
71+
box-shadow:
72+
0 0 16px rgba(56, 189, 248, 1),
73+
0 0 30px rgba(79, 70, 229, 1);
74+
}
4975
}
5076

5177
.site-logo__text {
@@ -64,6 +90,7 @@
6490
}
6591

6692
.site-nav a {
93+
position: relative;
6794
color: #e5e7eb;
6895
text-decoration: none;
6996
font-size: 0.85rem;
@@ -85,6 +112,25 @@
85112
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.9);
86113
}
87114

115+
.site-nav a::after {
116+
content: "";
117+
position: absolute;
118+
left: 12px;
119+
right: 12px;
120+
bottom: 2px;
121+
height: 1px;
122+
border-radius: 999px;
123+
background: linear-gradient(90deg, #38bdf8, #4f46e5);
124+
transform: scaleX(0);
125+
transform-origin: left;
126+
transition: transform 0.18s ease-out;
127+
}
128+
129+
.site-nav a:hover::after,
130+
.site-nav a.active::after {
131+
transform: scaleX(1);
132+
}
133+
88134
.site-nav a.active {
89135
background: var(--color-accent);
90136
border-color: var(--color-accent);
@@ -233,3 +279,22 @@
233279
align-items: flex-start;
234280
}
235281
}
282+
283+
/* sticky footer 用の指定 */
284+
.page-shell {
285+
min-height: 100vh;
286+
display: flex;
287+
flex-direction: column;
288+
}
289+
290+
.site-header {
291+
flex-shrink: 0;
292+
}
293+
294+
.main-container {
295+
flex: 1 0 auto; /* ここが「余り高さ」を担当する */
296+
}
297+
298+
.site-footer {
299+
flex-shrink: 0;
300+
}

‎assets/css/portfolio.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
background 0.12s ease-out,
6969
border-color 0.12s ease-out,
7070
color 0.12s ease-out,
71+
box-shadow 0.12s ease-out,
7172
transform 0.12s ease-out;
7273
}
7374

@@ -77,9 +78,16 @@
7778
}
7879

7980
.portfolio-tag-chip.active {
80-
background: var(--color-accent);
81-
border-color: var(--color-accent);
81+
background:
82+
radial-gradient(
83+
circle at 0 0,
84+
rgba(56, 189, 248, 0.4),
85+
transparent 55%
86+
),
87+
var(--color-accent);
8288
color: #f9fafb;
89+
border-color: var(--color-accent);
90+
box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
8391
}
8492

8593
/* 一覧レイアウト */

‎assets/css/top.css‎

Lines changed: 115 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,104 @@
77
}
88

99
.hero-main {
10+
position: relative;
11+
overflow: hidden;
12+
border-radius: var(--radius-lg);
13+
padding: 22px 22px 20px;
14+
border: 1px solid rgba(148, 163, 184, 0.45);
1015
background:
1116
radial-gradient(
12-
circle at top left,
13-
rgba(56, 189, 248, 0.25),
17+
circle at 0% 0%,
18+
rgba(56, 189, 248, 0.3),
19+
transparent 55%
20+
),
21+
radial-gradient(
22+
circle at 100% 100%,
23+
rgba(79, 70, 229, 0.2),
1424
transparent 60%
1525
),
16-
rgba(15, 23, 42, 0.95);
17-
border-radius: var(--radius-lg);
18-
padding: 22px 22px 20px;
19-
border: 1px solid var(--color-border-soft);
20-
box-shadow: var(--shadow-soft);
26+
#020617;
27+
box-shadow:
28+
0 20px 50px rgba(15, 23, 42, 0.95),
29+
0 0 0 1px rgba(15, 23, 42, 0.9);
30+
isolation: isolate; /* 中身と背景のレイヤーを分離 */
31+
}
32+
33+
/* グリッド + 斜めの動き（HUD っぽい） */
34+
.hero-main::before {
35+
content: "";
36+
position: absolute;
37+
inset: -40%;
38+
background-image:
39+
linear-gradient(
40+
to right,
41+
rgba(148, 163, 184, 0.18) 1px,
42+
transparent 1px
43+
),
44+
linear-gradient(
45+
to bottom,
46+
rgba(148, 163, 184, 0.12) 1px,
47+
transparent 1px
48+
);
49+
background-size: 26px 26px;
50+
opacity: 0.35;
51+
mix-blend-mode: soft-light;
52+
transform: translate3d(0, 0, 0) rotate(5deg);
53+
animation: hero-grid-shift 26s linear infinite;
54+
}
55+
56+
/* 軽い斜めのハイライト帯だけ入れる */
57+
.hero-main::after {
58+
content: "";
59+
position: absolute;
60+
top: -40%;
61+
left: -10%;
62+
width: 50%;
63+
height: 180%;
64+
background: linear-gradient(
65+
135deg,
66+
transparent,
67+
rgba(248, 250, 252, 0.08),
68+
transparent
69+
);
70+
opacity: 0;
71+
pointer-events: none;
72+
animation: hero-highlight-swing 5s infinite ease-in-out;
73+
}
74+
75+
/* 中身ははっきり見せたいので、手前に出しておく */
76+
.hero-main > * {
77+
position: relative;
78+
z-index: 1;
79+
}
80+
81+
/* グリッドがゆっくり斜めに動く */
82+
@keyframes hero-grid-shift {
83+
0% {
84+
transform: translate3d(0, 0, 0) rotate(5deg);
85+
}
86+
100% {
87+
transform: translate3d(40px, 40px, 0) rotate(5deg);
88+
}
89+
}
90+
91+
/* ハイライト帯がゆっくり揺れるだけ */
92+
@keyframes hero-highlight-swing {
93+
0% {
94+
opacity: 0;
95+
transform: translateX(-10%) rotate(8deg);
96+
}
97+
35% {
98+
opacity: 0.5;
99+
}
100+
60% {
101+
opacity: 0;
102+
transform: translateX(15%) rotate(8deg);
103+
}
104+
100% {
105+
opacity: 0;
106+
transform: translateX(15%) rotate(8deg);
107+
}
21108
}
22109

23110
.hero-main h1 {
@@ -72,25 +159,39 @@
72159
}
73160

74161
.btn-primary {
75-
background: var(--color-accent);
76-
border-color: var(--color-accent);
162+
background:
163+
radial-gradient(
164+
circle at 20% 0%,
165+
rgba(248, 250, 252, 0.15),
166+
transparent 55%
167+
),
168+
linear-gradient(135deg, #4f46e5, #06b6d4);
169+
border-color: #4f46e5;
77170
color: #f9fafb;
78-
box-shadow: 0 10px 24px rgba(79, 70, 229, 0.6);
171+
box-shadow: 0 10px 24px rgba(79, 70, 229, 0.7);
79172
}
80173

81174
.btn-primary:hover {
82175
transform: translateY(-1px);
83-
box-shadow: 0 16px 36px rgba(79, 70, 229, 0.8);
176+
box-shadow: 0 16px 36px rgba(79, 70, 229, 0.9);
84177
}
85178

86179
.btn-outline {
87-
background: transparent;
88-
border-color: rgba(148, 163, 184, 0.55);
180+
background: rgba(15, 23, 42, 0.95);
181+
border-color: rgba(148, 163, 184, 0.7);
89182
color: var(--color-text-muted);
90183
}
91184

92185
.btn-outline:hover {
93-
background: rgba(15, 23, 42, 0.85);
186+
background:
187+
radial-gradient(
188+
circle at 0 0,
189+
rgba(56, 189, 248, 0.2),
190+
transparent 55%
191+
),
192+
rgba(15, 23, 42, 0.98);
193+
border-color: var(--color-accent);
194+
color: #e5e7eb;
94195
}
95196

96197
/* サイドパネル（例：最近の更新など） */

‎assets/js/layout.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
document.addEventListener("DOMContentLoaded", () => {
2+
// header/footer を挿入する先：page-shell があればそこ、なければ body
3+
const shell =
4+
document.querySelector(".page-shell") || document.body;
5+
26
// 今のページのファイル名を取得（クエリは無視されるので blog.html?id=xxx でも blog.html になる）
37
const currentPath = (() => {
48
const name = location.pathname.split("/").pop();
@@ -12,16 +16,10 @@ document.addEventListener("DOMContentLoaded", () => {
1216
])
1317
.then(([headerHtml, footerHtml]) => {
1418
// body の先頭に header、末尾に footer を挿入
15-
document.body.insertAdjacentHTML(
16-
"afterbegin",
17-
headerHtml,
18-
);
19-
document.body.insertAdjacentHTML(
20-
"beforeend",
21-
footerHtml,
22-
);
19+
shell.insertAdjacentHTML("afterbegin", headerHtml);
20+
shell.insertAdjacentHTML("beforeend", footerHtml);
2321

24-
// ★ ヘッダー挿入後にナビの active を設定
22+
// ヘッダー挿入後にナビの active を設定
2523
const navLinks =
2624
document.querySelectorAll(".site-nav a");
2725
navLinks.forEach((link) => {

0 commit comments

Comments
 (0)