Skip to content

Commit 2fdf550

Browse files
kagomenkagomen
authored
レスポンシブ対応（確認用） (#131)
* 🎨 style:レスポンシブデザインの実装、スタイルの手直し #64 * 🐛 fix: スタイルの修正 * 🐛 fix: (PC)ヒーロエリアのレイアウトのずれを修正 * 🐛 fix: READMEの目次を反映 * 🐛 fix: 不要なアイコンと画像の削除 * 🐛 fix: リスト周辺の不要なCSSの削除・修正 * 🐛 fix: アバウトセクションの修正とフッターの調整 * 🐛 fix: カラーの変更・スタイルの微調整 * 🐛 fix: 最終的なスタイルの微調整、コード内の不要な空白の削除
1 parent b0caccb commit 2fdf550

File tree

5 files changed

+130
-41
lines changed

5 files changed

+130
-41
lines changed

‎public/logo.svg‎

Lines changed: 35 additions & 0 deletions
Loading

‎src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default function RootLayout({
4343
}>) {
4444
return (
4545
<html lang="ja">
46-
<body className={`${inter.variable} ${notojp.variable} `}>
46+
<body className={`${inter.variable} ${notojp.variable} text-stone-800`}>
4747
<Header />
4848
{children}
4949
<Footer />

‎src/app/page.tsx‎

Lines changed: 83 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,115 @@
11
import Image from "next/image";
22
import { basePath } from "../../next.config";
3-
const BASE_PATH = basePath ? basePath : "";
3+
export const BASE_PATH = basePath ? basePath : "";
44
import GitHubIcon from "@mui/icons-material/GitHub";
55
import { SITE_NAME } from "../../lib/constants";
6+
import KeyboardDoubleArrowDownSharpIcon from "@mui/icons-material/KeyboardDoubleArrowDownSharp";
67

78
export default function Home() {
89
return (
910
<>
10-
<section className="border-box mx-auto flex h-screen w-11/12 max-w-7xl items-center justify-center gap-16">
11-
<div className="flex-1">
12-
<p className="inline-block bg-zinc-100 px-4 py-2">
11+
<section className="mx-auto mt-20 max-w-2xl px-6 lg:-mb-4 lg:mt-4 lg:flex lg:h-screen lg:max-w-7xl lg:items-center lg:gap-10">
12+
<div className="lg:flex-1">
13+
<p className="hidden bg-stone-100 px-4 py-2 lg:inline-block">
1314
<span className="text-2xl font-bold text-red-600">1234</span>
14-
人が参加中
15+
人が参加中！
1516
</p>
16-
<p className="mt-4 text-3xl font-bold">
17+
<div className="my-8 w-full lg:hidden">
18+
<Image
19+
src={`${BASE_PATH}/logo.svg`}
20+
width={640}
21+
height={324}
22+
alt="logo"
23+
className="mx-auto w-[70%] max-w-[400px]"
24+
/>
25+
</div>
26+
<p className="mt-4 text-2xl font-bold lg:text-3xl">
1727
誰でも簡単に
1828
<br />
19-
コントリビューション体験
29+
コントリビューション体験 🚀
2030
</p>
21-
<h2 className="mt-4 inline-block bg-red-600 px-4 py-2 text-5xl font-bold text-white">
31+
<h2 className="mt-4 hidden bg-red-600 px-4 py-2 text-5xl font-bold text-white lg:inline-block">
2232
{SITE_NAME}
2333
</h2>
24-
<p className="mt-4">
25-
完全日本語のコントリビューション体験リポジトリです。フォーク、クローン、コミット、プルリクを行うことでOSSプロジェクト貢献方法を学べます。
26-
</p>
34+
<div className="mt-4 text-sm leading-relaxed lg:text-lg">
35+
<p>
36+
初心者でも簡単に参加できる日本語のオープンソースプロジェクトです。
37+
</p>
38+
<p>
39+
Git/GitHubの実践的な使い方や、オープンソースでコラボレーションする作法を学べます
40+
🌟
41+
</p>
42+
</div>
2743
</div>
28-
<div className="flex-[1.1]">
44+
<div className="hidden lg:inline-block lg:flex-[0.8]">
2945
<Image
30-
src={`${BASE_PATH}/peoples.svg`}
46+
src={`${BASE_PATH}/logo.svg`}
3147
width={640}
3248
height={324}
33-
alt="peoples"
49+
alt="logo"
3450
className="w-full"
3551
/>
3652
</div>
53+
<p className="mx-auto mb-10 mt-5 rounded-sm bg-stone-100 px-4 py-2 text-center lg:hidden">
54+
<span className="text-2xl font-bold text-red-600">1234</span>
55+
人が参加中！
56+
</p>
3757
</section>
38-
<section className="bg-red-600 px-10 py-12">
39-
<div className="rounded-xl bg-white p-20">
40-
<h2 className="text-center text-4xl font-bold tracking-tighter text-red-600">
41-
簡単７ステップでコントリビューション！
58+
59+
<section className="bg-red-600 p-6 pb-0 pt-8 md:px-10 md:pt-10">
60+
<div className="rounded-md bg-white px-5 pb-16 pt-12 md:p-20 md:pt-8">
61+
<h2 className="text-center text-xl font-bold tracking-tighter text-red-600 md:pb-4 md:pt-12 md:text-3xl">
62+
簡単 8 STEP でコントリビューション！
4263
</h2>
43-
<ol className="mx-auto mb-8 mt-10 max-w-[500px] list-inside list-decimal text-2xl font-bold leading-loose">
44-
<li>プロジェクトをフォークする</li>
45-
<li>ローカルリポジトリにクローンする</li>
46-
<li>ブランチを作成する</li>
47-
<li>ソースコードを変更！</li>
48-
<li>コミットメッセージを添えてコミットする</li>
49-
<li>コミット内容をプッシュする</li>
50-
<li>プルリクエストを作成する</li>
51-
</ol>
52-
<div className="mb-16 text-center text-2xl font-bold leading-relaxed">
53-
<p className="mb-8 text-4xl text-red-600">⬇︎</p>
54-
<p>マージされると……</p>
55-
<p>🎉 あなたの変更がメインプロジェクトに反映されます 🎉</p>
64+
<ul className="mx-auto mt-8 w-fit list-inside rounded-md px-2 text-lg font-bold md:text-xl md:leading-7 lg:mb-8 lg:mt-10 lg:flex lg:gap-16 lg:bg-stone-100 lg:px-12 lg:pb-4 lg:pt-8">
65+
<div>
66+
<li className="pb-4 md:pb-6">
67+
<p className="mr-6 text-sm text-red-600 md:text-lg">STEP 1</p>
68+
プロジェクトをフォーク
69+
</li>
70+
<li className="pb-4 md:pb-6">
71+
<p className="mr-6 text-sm text-red-600 md:text-lg">STEP 2</p>
72+
ローカルマシンへクローン
73+
</li>
74+
<li className="pb-4 md:pb-6">
75+
<p className="mr-6 text-sm text-red-600 md:text-lg">STEP 3</p>
76+
作業用ブランチを作成
77+
</li>
78+
<li className="pb-4 md:pb-6">
79+
<p className="mr-6 text-sm text-red-600 md:text-lg">STEP 4</p>
80+
変更を加える
81+
</li>
82+
</div>
83+
<div>
84+
<li className="pb-4 md:pb-6">
85+
<p className="mr-6 text-sm text-red-600 md:text-lg">STEP 5</p>
86+
変更をコミット
87+
</li>
88+
<li className="pb-4 md:pb-6">
89+
<p className="mr-6 text-sm text-red-600 md:text-lg">STEP 6</p>
90+
変更をプッシュ
91+
</li>
92+
<li className="pb-4 md:pb-6">
93+
<p className="mr-6 text-sm text-red-600 md:text-lg">STEP 7</p>
94+
プルリクエストを作成
95+
</li>
96+
<li className="pb-4 md:pb-6">
97+
<p className="mr-6 text-sm text-red-600 md:text-lg">STEP 8</p>
98+
レビューとフィードバックに対応
99+
</li>
100+
</div>
101+
</ul>
102+
<div className="mb-8 text-center font-bold leading-7 md:text-xl md:leading-8">
103+
<KeyboardDoubleArrowDownSharpIcon className="mb-4 text-6xl text-red-600" />
104+
<p>プルリクエストが承認されると</p>
105+
<p>あなたの変更がメインプロジェクトに反映されます 🎉</p>
56106
</div>
57107
<div className="text-center">
58108
<a
59109
href="https://github.com/first-contributions-ja/first-contributions-ja.github.io"
60-
className="rounded-xl bg-red-600 px-5 py-4 text-lg text-white transition hover:opacity-70"
110+
className="rounded-md bg-red-600 px-3 py-3 text-sm text-white transition hover:opacity-70 md:px-5 md:py-4 md:text-lg"
61111
>
62-
<GitHubIcon fontSize="large" className="mr-3 -translate-y-0.5" />
112+
<GitHubIcon className="mr-3 -translate-y-0.5 text-3xl md:text-4xl" />
63113
詳しい手順はこちら
64114
</a>
65115
</div>

‎src/components/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { SITE_NAME } from "../../lib/constants";
22

33
export default function Footer() {
44
return (
5-
<footer className="bg-red-600 py-2 text-center text-white">
5+
<footer className="bg-red-600 py-4 text-center text-white">
66
<small>&copy; {SITE_NAME}</small>
77
</footer>
88
);

‎src/components/header.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import Link from "next/link";
22
import { SITE_NAME } from "../../lib/constants";
3-
import GitHubIcon from "@mui/icons-material/GitHub";
3+
import Image from "next/image";
4+
import { BASE_PATH } from "../app/page";
45

56
export default function Header() {
67
return (
7-
<header className="fixed w-full py-6 backdrop-blur-sm">
8+
<header className="fixed left-0 top-0 w-full py-3 backdrop-blur-sm lg:py-4">
89
<Link href="/">
9-
<h1 className="ml-7 inline text-xl font-bold text-red-600 transition hover:opacity-70">
10-
<GitHubIcon
11-
fontSize="large"
12-
className="mr-4 -translate-y-0.5 text-red-600"
10+
<h1 className="ml-3 inline text-lg font-bold text-red-600 transition hover:opacity-70 lg:ml-5">
11+
<Image
12+
src={`${BASE_PATH}/logo.svg`}
13+
width={640}
14+
height={324}
15+
alt="logo"
16+
className="mr-2 inline-block w-[40px] lg:mr-4"
1317
/>
1418
{SITE_NAME}
1519
</h1>

0 commit comments

Comments
 (0)