Skip to content

Commit beaf040

Browse files
BreadMotionBreadMotion
committed
Merge branch 'develop'
2 parents 5da8521 + 250edc1 commit beaf040

2 files changed

Lines changed: 96 additions & 72 deletions

File tree

‎assets/css/layout.css‎

Lines changed: 94 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,44 @@
1+
:root {
2+
--color-accent: #6c63ff;
3+
--color-accent-dark: #4f47cc;
4+
5+
--color-accent-rgb: 108, 99, 255;
6+
--color-accent-dark-rgb: 79, 71, 204;
7+
8+
/* 新しく追加 */
9+
--color-border: rgba(var(--color-text-rgb), 0.1);
10+
--color-border-soft: rgba(var(--color-text-rgb), 0.05);
11+
12+
--color-text: #e0e0e0;
13+
--color-text-muted: #a0a0a0;
14+
--color-text-rgb: 224, 224, 224;
15+
16+
--color-background: #101217;
17+
--color-surface: #1e2027;
18+
--color-panel: #16181d;
19+
--color-heading: #ffffff;
20+
21+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
22+
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
23+
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
24+
--shadow-glow: 0 0 15px
25+
rgba(var(--color-accent-rgb), 0.3);
26+
27+
--radius-sm: 0.25rem;
28+
--radius-md: 0.5rem;
29+
--radius-lg: 0.75rem;
30+
31+
--transition-smooth: all 0.2s ease-in-out;
32+
}
33+
134
/* ==========================================================================
235
1. ヘッダー
336
========================================================================== */
437
.site-header {
538
position: sticky;
639
top: 0;
740
z-index: 20;
8-
background: rgba(
9-
22,
10-
27,
11-
34,
12-
0.8
13-
); /* 透明度を持たせる */
41+
background: rgba(22, 27, 34, 0.8);
1442
border-bottom: 1px solid;
1543
border-image-source: linear-gradient(
1644
to right,
@@ -46,7 +74,7 @@
4674
transition: var(--transition-smooth);
4775
}
4876
.site-logo:hover {
49-
transform: scale(1.02); /* ホバー時に少し拡大 */
77+
transform: scale(1.02);
5078
}
5179

5280
.site-logo__mark {
@@ -69,15 +97,18 @@
6997
}
7098

7199
@keyframes logo-pulse {
72-
0%,
73-
100% {
100+
0% {
74101
transform: scale(1);
75102
box-shadow: var(--shadow-md);
76103
}
77104
50% {
78105
transform: scale(1.05);
79106
box-shadow: var(--shadow-lg);
80107
}
108+
100% {
109+
transform: scale(1);
110+
box-shadow: var(--shadow-md);
111+
}
81112
}
82113

83114
/* ==========================================================================
@@ -171,15 +202,15 @@
171202
}
172203

173204
.card {
174-
position: relative; /* 擬似要素の位置決めの基点 */
205+
position: relative;
175206
z-index: 1;
176207
background: var(--color-surface);
177208
border-radius: var(--radius-md);
178209
padding: 1.25rem;
179210
border: 1px solid var(--color-border-soft);
180211
box-shadow: var(--shadow-md);
181212
transition: var(--transition-smooth);
182-
overflow: hidden; /* 擬似要素がはみ出さないように */
213+
overflow: hidden;
183214
}
184215

185216
.card::before {
@@ -209,13 +240,12 @@
209240

210241
.card:hover {
211242
transform: translateY(-4px);
212-
box-shadow:
213-
var(--shadow-lg), var(--shadow-glow); /* 複数のシャドウを適用 */
243+
box-shadow: var(--shadow-lg), var(--shadow-glow);
214244
background: var(--color-panel);
215245
}
216246

217247
.card:hover::before {
218-
opacity: 1; /* ホバー時にボーダーを表示 */
248+
opacity: 1;
219249
}
220250

221251
/* ==========================================================================
@@ -267,7 +297,7 @@
267297
opacity: 0.5;
268298
}
269299

270-
/* ==========================================================================
300+
/* ==========================================================================\
271301
5. ハンバーガーメニュー
272302
========================================================================== */
273303
.nav-toggle {
@@ -277,7 +307,7 @@
277307
cursor: pointer;
278308
padding: 0.5rem;
279309
position: relative;
280-
z-index: 30; /* ヘッダーより上に */
310+
z-index: 30;
281311
}
282312

283313
.nav-toggle__icon {
@@ -312,7 +342,7 @@
312342
}
313343

314344
.nav-toggle.is-active .nav-toggle__icon {
315-
background: transparent; /* 真ん中の線を消す */
345+
background: transparent;
316346
}
317347

318348
.nav-toggle.is-active .nav-toggle__icon::before {
@@ -325,52 +355,10 @@
325355
transform: rotate(-45deg);
326356
}
327357

328-
/* ==========================================================================
358+
/* ==========================================================================\
329359
6. レスポンシブデザイン
330360
========================================================================== */
331361
@media (max-width: 768px) {
332-
.site-header__inner {
333-
flex-direction: column;
334-
align-items: flex-start;
335-
padding: 0.75rem 1rem;
336-
}
337-
.site-logo {
338-
margin-bottom: 0.5rem;
339-
}
340-
.site-nav {
341-
justify-content: flex-start;
342-
width: 100%;
343-
}
344-
.site-nav a {
345-
padding: 0.3rem 0.75rem;
346-
font-size: 0.875rem;
347-
}
348-
.section {
349-
padding: 1.5rem;
350-
margin-bottom: 1.5rem;
351-
}
352-
.section__title {
353-
font-size: 1.5rem;
354-
margin-bottom: 1rem;
355-
}
356-
.card-list {
357-
grid-template-columns: 1fr;
358-
gap: 1rem;
359-
}
360-
.card {
361-
padding: 1rem;
362-
}
363-
.site-footer__inner {
364-
flex-direction: column;
365-
align-items: flex-start;
366-
padding: 1rem 1rem;
367-
}
368-
.site-footer__right {
369-
margin-top: 0.5rem;
370-
}
371-
.site-footer__right a {
372-
font-size: 0.8rem;
373-
}
374362
.site-header__inner {
375363
flex-direction: row;
376364
align-items: center;
@@ -387,35 +375,69 @@
387375
}
388376

389377
.site-nav {
390-
display: block;
378+
display: flex;
391379
position: fixed;
392380
top: 0;
393-
left: -100%;
394-
width: 100%;
381+
right: -100%;
382+
left: auto;
383+
width: 80%;
395384
height: 100vh;
396-
background: var(--color-panel);
385+
background: rgba(22, 27, 34, 0.97);
397386
flex-direction: column;
398-
justify-content: center;
399-
align-items: center;
387+
justify-content: flex-start;
388+
align-items: flex-start;
400389
gap: 1.5rem;
401-
transition: left 0.3s ease-in-out;
390+
transition: right 0.3s ease-in-out;
402391
z-index: 25;
403-
padding-top: 5rem;
392+
padding-top: calc(3.5rem + 2rem);
393+
padding-bottom: 2rem;
394+
flex-wrap: nowrap;
395+
overflow-y: auto;
396+
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
404397
}
405398

406399
.site-nav.is-open {
407-
left: 0;
400+
right: 0;
408401
}
409402

410403
.site-nav a {
411404
font-size: 1.5rem;
412405
padding: 0.75rem 1.5rem;
413-
width: fit-content;
414-
margin: 0 auto;
406+
width: 100%;
407+
text-align: left;
408+
margin: 0;
409+
display: block;
410+
}
411+
412+
.menu-animation-area {
413+
position: relative;
414+
margin-top: auto;
415+
bottom: auto;
416+
left: 0;
417+
width: 100%;
418+
height: 80px;
419+
background: linear-gradient(
420+
90deg,
421+
rgba(var(--color-accent-rgb), 0.1) 0%,
422+
rgba(var(--color-accent-dark-rgb), 0.1) 50%,
423+
rgba(var(--color-accent-rgb), 0.1) 100%
424+
);
425+
background-size: 200% 100%;
426+
animation: menuWave 10s linear infinite;
427+
z-index: 0;
428+
pointer-events: none;
429+
}
430+
431+
@keyframes menuWave {
432+
0% {
433+
background-position: 0% 0%;
434+
}
435+
100% {
436+
background-position: -200% 0%;
437+
}
415438
}
416439
}
417440

418-
/* bodyにno-scrollクラスが付与されたときのスタイル */
419441
body.no-scroll {
420442
overflow: hidden;
421443
}

‎partials/header.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
data-nav="https://breadmotion.github.io/WebSite/contact.html"
3838
>Contact</a
3939
>
40+
41+
<div class="menu-animation-area"></div>
4042
</nav>
4143
</div>
4244
</header>

0 commit comments

Comments
 (0)