Skip to content

Commit 2a704dc

Browse files
batora9batora9
authored
Merge pull request #69 from saitamau-maximum/feat/news-page-design
feat: /newsのデザイン
2 parents 32ad4cb + 51ce71e commit 2a704dc

13 files changed

+400
-41
lines changed

‎src/app/_variables.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
11
$tablet-width: 768px;
2-
$pages-max-width: 1080px;
2+
$pages-max-width: 1080px;
3+
$hovering-color: #7FCC8F;
4+
$span-color: #47B660;
5+
$heroImage-change-width: 1280px;
6+
$header-change-width: 1200px;
7+
$background-color: #F1F1F1;

‎src/app/news/page.module.scss

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
@use 'src/app/variables';
2+
3+
/* heroImageとヘッダーのpadding調整 */
4+
@media (min-width: variables.$heroImage-change-width) {
5+
.heroImage {
6+
height: 60vh;
7+
}
8+
}
9+
10+
@media (max-width: variables.$heroImage-change-width) {
11+
.heroImage {
12+
height: 100%;
13+
}
14+
}
15+
16+
@media (max-width: variables.$header-change-width) {
17+
.main {
18+
padding-top: 64px;
19+
}
20+
}
21+
22+
@media (min-width: variables.$header-change-width) {
23+
.main {
24+
padding-top: 72px;
25+
}
26+
}
27+
28+
/* 画面幅が768px以下の場合のスタイル */
29+
@media (max-width: variables.$tablet-width) {
30+
.breadcrumb {
31+
height: 28px;
32+
}
33+
34+
.breadcrumbLink {
35+
font-size: 0.75rem; // 12px
36+
}
37+
38+
.contentTitle {
39+
margin: 0px 16px;
40+
padding: 24px 0px 0px;
41+
font-size: 1.5rem; // 24px
42+
}
43+
}
44+
45+
/* 画面幅が768px以上の場合のスタイル */
46+
@media (min-width: variables.$tablet-width) {
47+
.breadcrumb {
48+
height: 64px;
49+
}
50+
51+
.breadcrumbLink {
52+
font-size: 1.5rem; // 24px
53+
}
54+
55+
.contents {
56+
max-width: variables.$pages-max-width;
57+
}
58+
59+
.contentTitle {
60+
margin: 0px 40px;
61+
padding: 40px 0px 0px;
62+
font-size: 2.5rem; // 40px
63+
}
64+
}
65+
66+
/* 共通 */
67+
.heroImage {
68+
width: 100%;
69+
object-fit: cover;
70+
}
71+
72+
.main {
73+
flex-direction: column;
74+
background-color: variables.$background-color;
75+
}
76+
77+
.container {
78+
display: flex;
79+
flex-direction: column;
80+
background-color: variables.$background-color;
81+
}
82+
83+
.hero {
84+
align-items: center;
85+
justify-content: center;
86+
display: flex;
87+
flex-direction: column;
88+
background-color: variables.$background-color;
89+
}
90+
91+
.breadcrumb {
92+
width: 100%;
93+
background-color: black;
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
}
98+
99+
.breadcrumbLink {
100+
color: white;
101+
text-decoration: none;
102+
}
103+
104+
.contents {
105+
width: 100%;
106+
margin: 40px auto;
107+
background-color: #fff;
108+
box-shadow: 2px 2px 4px gray;
109+
}
110+
111+
.contentTitle {
112+
font-weight: normal;
113+
border-bottom: 1px solid black;
114+
width: 4em;
115+
}

‎src/app/news/page.tsx

+22-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import path from 'path';
2-
import type { Metadata } from 'next';
2+
import { Metadata } from 'next';
33
import Link from 'next/link';
4-
import { Doc, getMarkdowns } from '../../utils/markdown';
4+
import { getMarkdowns } from '../../utils/markdown';
5+
import style from './page.module.scss';
6+
import { NewsPageList } from '@/components/news-page-list';
57

68
export const metadata: Metadata = {
79
title: 'News',
@@ -20,13 +22,25 @@ export default async function News() {
2022
);
2123

2224
return (
23-
<div>
24-
<h1>News</h1>
25-
{docs.map((doc) => (
26-
<div key={doc.slug}>
27-
<Link href={`/news/${doc.slug}`}>{doc.frontmatter.title}</Link>
25+
<div className={style.container}>
26+
<main className={style.main}>
27+
<div className={style.hero}>
28+
<img src='/images/hero.png' alt='Hero' className={style.heroImage} />
29+
<div className={style.breadcrumb}>
30+
<Link href='/' className={style.breadcrumbLink}>
31+
Top
32+
</Link>
33+
<p className={style.breadcrumbLink}>&nbsp;&gt;&nbsp;</p>
34+
<Link href='/news' className={style.breadcrumbLink}>
35+
News
36+
</Link>
37+
</div>
2838
</div>
29-
))}
39+
<div className={style.contents}>
40+
<h1 className={style.contentTitle}>新着情報</h1>
41+
<NewsPageList />
42+
</div>
43+
</main>
3044
</div>
3145
);
3246
}

‎src/app/page.module.scss

+10-15
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
11
@use 'src/app/variables';
2-
$hovering-color: #7FCC8F;
3-
$span-color: #47B660;
4-
$heroImage-change-width: 1280px;
5-
$header-change-width: 1200px;
6-
$background-color: #F1F1F1;
72

83
/* heroImageとヘッダーのpadding調整 */
9-
@media (min-width: $heroImage-change-width) {
4+
@media (min-width: variables.$heroImage-change-width) {
105
.heroImage {
116
height: 60vh;
127
}
138
}
149

15-
@media (max-width: $heroImage-change-width) {
10+
@media (max-width: variables.$heroImage-change-width) {
1611
.heroImage {
1712
height: 100%;
1813
}
1914
}
2015

21-
@media (max-width: $header-change-width) {
16+
@media (max-width: variables.$header-change-width) {
2217
.main {
2318
padding-top: 64px;
2419
}
2520
}
2621

27-
@media (min-width: $header-change-width) {
22+
@media (min-width: variables.$header-change-width) {
2823
.main {
2924
padding-top: 72px;
3025
}
@@ -42,7 +37,7 @@ $background-color: #F1F1F1;
4237

4338
.contentTitle {
4439
margin: 20px;
45-
font-size: 1.25rem; // 20px
40+
font-size: 1.5rem; // 24px
4641
}
4742

4843
.aboutText {
@@ -211,21 +206,21 @@ $background-color: #F1F1F1;
211206

212207
.main {
213208
flex-direction: column;
214-
background-color: $background-color;
209+
background-color: variables.$background-color;
215210
}
216211

217212
.container {
218213
display: flex;
219214
flex-direction: column;
220-
background-color: $background-color;
215+
background-color: variables.$background-color;
221216
}
222217

223218
.hero {
224219
align-items: center;
225220
justify-content: center;
226221
display: flex;
227222
flex-direction: column;
228-
background-color: $background-color;
223+
background-color: variables.$background-color;
229224
}
230225

231226
.breadcrumb {
@@ -311,15 +306,15 @@ $background-color: #F1F1F1;
311306
}
312307

313308
.breadcrumbLink:hover {
314-
color: $hovering-color;
309+
color: variables.$hovering-color;
315310
}
316311

317312
.bold {
318313
font-weight: bold;
319314
}
320315

321316
.span {
322-
color: $span-color;
317+
color: variables.$span-color;
323318
}
324319

325320
.news {

‎src/components/NewsLinkCard/NewsLinkCard.module.scss

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@use '/src/app/variables';
2+
3+
@media (max-width: variables.$tablet-width) {
4+
.container {
5+
margin: 16px;
6+
}
7+
8+
.headForMobile {
9+
display: flex;
10+
gap: 16px;
11+
.date {
12+
font-size: 1rem; // 16px
13+
margin: 0px;
14+
color: black;
15+
}
16+
}
17+
18+
.dateForPC {
19+
display: none;
20+
}
21+
22+
.title {
23+
font-size: 1.25rem; // 20px
24+
}
25+
26+
.head {
27+
margin: 8px 0px;
28+
.group {
29+
display: none;
30+
}
31+
}
32+
}
33+
34+
@media (min-width: variables.$tablet-width) {
35+
.container {
36+
margin: 24px;
37+
}
38+
39+
.dateForMobile {
40+
display: none;
41+
}
42+
43+
.dateForPC {
44+
color: black;
45+
text-decoration: none;
46+
font-size: 1rem; // 16px
47+
margin: 4px 0px 0px;
48+
}
49+
50+
.headForMobile {
51+
display: none;
52+
}
53+
}
54+
55+
.container {
56+
display: flex;
57+
gap: 16px;
58+
}
59+
60+
.card {
61+
text-decoration: none;
62+
width: 100%;
63+
}
64+
65+
.head {
66+
display: flex;
67+
align-items: center;
68+
gap: 16px;
69+
}
70+
71+
.title {
72+
margin: 0px;
73+
color: black;
74+
}
75+
76+
.learn {
77+
color: #439154;
78+
margin: 0px;
79+
font-weight: bold;
80+
}
81+
82+
.text {
83+
color: black;
84+
font-size: 0.875rem; // 14px
85+
margin: 8px 0px;
86+
overflow-wrap: break-word;
87+
}
88+
89+
.group {
90+
font-size: 0.75rem; // 12px
91+
color: #fff;
92+
text-align: center;
93+
margin: 0px;
94+
padding: 4px 8px;
95+
background-color: #439154;
96+
white-space: nowrap;
97+
}

‎src/components/NewsLinkCard/NewsLinkCard.stories.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { StoryFn, Meta } from '@storybook/react';
2+
import React from 'react';
3+
import { NewsLinkCard } from './NewsLinkCard';
4+
5+
export default {
6+
title: 'Components/LinkCard',
7+
component: NewsLinkCard,
8+
argTypes: {
9+
style: { control: 'object' },
10+
title: { control: 'text' },
11+
content: { control: 'text' },
12+
date: { control: 'text' },
13+
group: { control: 'text' },
14+
to: { control: 'text' },
15+
},
16+
} as Meta;
17+
18+
const Template: StoryFn<typeof NewsLinkCard> = (args) => (
19+
<NewsLinkCard {...args} />
20+
);
21+
export const Default = Template.bind({});
22+
23+
Default.args = {
24+
title: 'Maximum Cup 2023',
25+
content: 'description',
26+
date: '2024/08',
27+
group: 'Web研',
28+
to: '/',
29+
};

0 commit comments

Comments
 (0)