Skip to content

Commit dcacf43

Browse files
nedewnedew
committed
ダークモード実装を見越したCSSの変更・アイコン等を追加
1 parent 6a51258 commit dcacf43

12 files changed

+120
-43
lines changed

‎components/Article.tsx

+20-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { formatDate } from '../lib/format'
22
import ArticlePageTag from './ArticlePageTag'
3+
import Image from 'next/image'
4+
import Link from 'next/link'
35
import styles from './styles/article.module.scss'
6+
import blogConfig from '../config/blog.config.json'
47

58
export default function Article(props: {
69
children: React.ReactNode
@@ -11,8 +14,24 @@ export default function Article(props: {
1114
}) {
1215
return (
1316
<>
14-
<div className={styles.date}>{formatDate(props.date)}</div>
1517
<h1 className={styles.title}>{props.title}</h1>
18+
<div className={styles.info}>
19+
<Link href={blogConfig.twitterUrl}>
20+
<a className={styles.authorIcon}>
21+
<Image
22+
src='/img/icon.png'
23+
alt={blogConfig.name}
24+
width={38}
25+
height={38}
26+
className={styles.authorIconImg}
27+
/>
28+
</a>
29+
</Link>
30+
<Link href={blogConfig.twitterUrl}>
31+
<a className={styles.authorName}>@{blogConfig.name}</a>
32+
</Link>
33+
<div className={styles.date}>{formatDate(props.date)}</div>
34+
</div>
1635
<ArticlePageTag tags={props.tags} />
1736
<article className={styles.article}>
1837
{props.children}

‎components/styles/article.module.scss

+41-9
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,62 @@
22

33
.title {
44
font-family: 'Montserrat', sans-serif;
5-
color: #262626;
65
font-size: 38px;
76
word-break: break-word;
8-
margin-top: 0.8rem;
9-
margin-bottom: 1.4rem;
7+
// margin-top: 0.8rem;
8+
margin-top: 0;
9+
// margin-bottom: 3.4rem;
10+
margin-bottom: 1.1rem;
1011
letter-spacing: 0.04em;
1112
font-weight: 700px;
1213
@media screen and (max-width: $breakPoint) {
1314
font-size: 32px;
15+
margin-bottom: 1.5rem;
1416
}
1517
}
1618

19+
.info {
20+
display: flex;
21+
// justify-content: center;
22+
align-items: flex-end;
23+
margin-bottom: 1.4rem;
24+
font-family: "Segoe UI", "Montserrat", sans-serif;
25+
}
26+
27+
.authorIcon {
28+
display: inherit;
29+
}
30+
.authorIconImg {
31+
border-radius: 50%;
32+
}
33+
34+
.authorName {
35+
font-family: -apple-system, "Segoe UI", sans-serif;
36+
font-size: 20px;
37+
// color: $textColor;
38+
color: inherit;
39+
margin-right: 1rem;
40+
margin-left: .6rem;
41+
text-decoration: none;
42+
}
43+
.authorName:hover {
44+
text-decoration: underline;
45+
}
46+
1747
.date {
18-
font-size: 16px;
48+
vertical-align: bottom;
49+
font-size: 15px;
1950
color: #727272;
20-
font-family: -apple-system, BlinkMacSystemFont, sans-serif, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo;
21-
font-weight: 600;
51+
font-family: sans-serif, apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo;
52+
// font-weight: 600;
53+
letter-spacing: 0.1rem;
54+
2255
}
2356

2457
.article {
58+
margin-top: 3rem;
2559
font-size: 16px;
2660
line-height: 2rem;
27-
color: #262626;
2861

2962
> p > code {
3063
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
@@ -40,8 +73,7 @@
4073
font-size: 17px;
4174
border-radius: 10px;
4275
width: 100%;
43-
// margin: 0 calc(50% - 100%);
44-
// width: 100%;
76+
// background-color: #34362e;
4577
overflow-x: auto;
4678
padding: 1rem $widePaddingRight;
4779
margin-right: $wideCodeMarginRight;

‎components/styles/articleList.module.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
}
88

99
.item {
10+
margin-top: 1.8rem;
1011
margin-bottom: 2.5rem;
1112
width: 100%;
1213
}
@@ -16,7 +17,8 @@
1617
// color: #4285F4;
1718
// color: #1171ac;
1819
color: $defaultLinkColor;
19-
font-size: 22px;
20+
// font-size: 22px;
21+
font-size: 25px;
2022
font-weight: bold;
2123
text-decoration: none;
2224
font-family: 'Montserrat', sans-serif;

‎components/styles/footer.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.footer {
44
width: 100%;
5-
background-color: #fafafa;
5+
// background-color: #fafafa;
66
color: #bbbbbb;
77
padding: 1.5rem 0;
88
border-top: 1px solid #ededed;

‎components/styles/header.module.scss

+20-11
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,25 @@
44
position: relative;
55
z-index: 0;
66
width: 100%;
7-
background-color: #fcfcfc;
8-
background-color: #AA4444;
9-
padding: 0.7rem 0;
7+
// background-color: #fcfcfc;
8+
// background-color: #ffffff;
9+
// background-color: #AA4444;
10+
padding: 1.7rem 0;
11+
// padding-top: 2.7rem;
12+
// padding-bottom: 2rem;
13+
border-bottom: solid 1px #ededed;
1014
// box-shadow: 0 2.2px 4px 0 rgba(0,0,0,0.1);
1115
@media screen and (max-width: $breakPoint) {
12-
padding: 0.5rem 0;
16+
// padding-top: 1.5rem;
17+
// padding-bottom: 1.4rem;
18+
padding: 1rem 0;
1319
}
1420
}
1521

1622
.headerContainer {
1723
max-width: $maxWidth;
1824
width: 100%;
19-
box-sizing: border-box;;
25+
box-sizing: border-box;
2026
margin-right: auto;
2127
margin-left: auto;
2228

@@ -37,18 +43,21 @@
3743
// font-family: 'Montserrat Alternates';
3844
// font-family: 'Righteous';
3945
// font-family: 'Bungee';
40-
// color: #262626;
4146
line-height: 1.5;
42-
color: #fcfcfc;
47+
letter-spacing: 1px;
48+
// color: #fcfcfc;
49+
color: #262626;
50+
color: #AA4444;
4351
text-decoration: none;
4452
font-size: 30px;
53+
font-size: 35px;
4554
font-weight: 700;
4655
user-select: none;
4756
@media screen and (max-width: $breakPoint) {
4857
font-size: 25px;
4958
}
5059
}
51-
.siteTitle:first-letter {
52-
color: #f45842;
53-
color: #fcfcfc;
54-
}
60+
// .siteTitle:first-letter {
61+
// color: #f45842;
62+
// color: #fcfcfc;
63+
// }

‎components/styles/tag.module.scss

+13-9
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
@import '../../styles/config';
22

33
.articleTags {
4-
margin-top: 1rem;
5-
margin-bottom: 3rem;
4+
margin: 0 0 1rem 0;
5+
// margin-top: 1rem;
6+
// margin-bottom: 3rem;
67
}
78

89
.tag {
910
display: inline-block;
10-
background-color: #f1f1f1;
11+
// background-color: #f1f1f1;
1112
color: #0774b5;
12-
padding: 0.3rem 0.8rem;
13+
// padding: 0.3rem 0.8rem;
1314
// margin: 0 0.7rem;
14-
margin-right: 1rem;
15-
margin-bottom: 1rem;
15+
margin-right: 2rem;
16+
margin-bottom: .5rem;
1617
border-radius: 4px;
1718
text-decoration: none;
1819
font-weight: 600;
19-
font-size: 17px;
20+
font-size: 20px;
2021
font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo UI', Helvetica, sans-serif;
22+
@media screen and (max-width: $breakPoint) {
23+
margin-right: 1.2rem;
24+
}
2125
}
2226
.tag:hover {
2327
// background-color: #f6f6f6;
24-
background-color: #e9e9e9;
25-
text-decoration: none;
28+
// background-color: #e9e9e9;
29+
// text-decoration: none;
2630
}

‎components/styles/util.module.scss

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1+
@import "../../styles/_config.scss";
2+
13
.pageTitle {
24
font-size: 23px;
5+
font-size: 35px;
36
margin-top: 0px;
4-
margin-bottom: 2rem;
5-
color: #262626;
7+
margin-bottom: 2.3rem;
8+
// color: #262626;
69
padding-bottom: 0.2rem;
7-
border-bottom: solid 3px #eff1f6;
10+
// border-bottom: solid 3px #eff1f6;
11+
@media screen and (max-width: $breakPoint) {
12+
font-size: 30px;
13+
}
814
}

‎config/blog.config.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"name": "nedew",
44
"profUrl": "https://www.nedew.net",
55
"siteUrl": "https://nedew.dev/",
6+
"twitterUrl": "https://twitter.com/nedew",
67
"getLatestNumber": 10
78
}

‎lib/format.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ import { parse, format } from 'date-fns'
33
export function formatDate(date: string) {
44
const fmt = parse(date, 'yyyy-MM-dd-HH-mm', new Date())
55
// return format(fmt, 'yyyy/MM/dd HH:mm')
6-
return format(fmt, 'yyyy/MM/dd')
6+
return format(fmt, 'yyyy-MM-dd')
77
}

‎public/img/icon.png

36.9 KB
Loading

‎styles/_config.scss

+7-5
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ $maxWidth: 800px;
33

44
$breakPoint: 500px;
55

6-
$wideMarginTop: .5rem;
7-
$wideMarginButtom: .5rem;
6+
$wideMarginTop: 1.3rem;
7+
$wideMarginButtom: 1.3rem;
88
$widePaddingTop: 2.5rem;
99
// $widePaddingRight: 40px;
1010
// $widePaddingLeft: 40px;
@@ -15,8 +15,8 @@ $widePaddingBottom: 3rem;
1515
$narrowPaddingTop: 1.8rem;
1616
// $narrowPaddingRight: 1.3rem;
1717
// $narrowPaddingLeft: 1.3rem;
18-
$narrowPaddingRight: 20px;
19-
$narrowPaddingLeft: 20px;
18+
$narrowPaddingRight: 25px;
19+
$narrowPaddingLeft: 25px;
2020
$narrowPaddingBottom: 2.5rem;
2121

2222
$wideCodeMarginRight: - $widePaddingRight;
@@ -26,6 +26,8 @@ $narrowCodeMarginLeft: - $narrowPaddingLeft;
2626

2727
// Colors
2828
$defaultLinkColor: #0774b5;
29-
// $bgColorBody: #f3f3f3;
29+
$textColor: #333333;
30+
// $textColor: #ebebeb;
3031
$bgColorBody: #fff;
32+
// $bgColorBody: #222222;
3133
$bgColorMain: #fff;

‎styles/global.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ body {
55
padding: 0;
66
margin: 0;
77
// font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo UI', Helvetica, Arial, sans-serif;
8-
font-family: sans-serif, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Segoe UI', 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo UI', Helvetica, sans-serif;
8+
// font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'Segoe UI', 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo UI', Helvetica, sans-serif;
9+
font-family: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Arial", "メイリオ", "Meiryo", "sans-serif";
910
// font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
1011
}
1112

@@ -18,9 +19,10 @@ body {
1819
letter-spacing: 0.03rem;
1920
-webkit-font-smoothing: antialiased;
2021
// background-color: #f8f8f8;
21-
// background-color: $bgColorBody;
22+
background-color: $bgColorBody;
2223
// background-color: #eff1f6;
2324
// background-color: #f6f1ef;
25+
color: $textColor;
2426

2527
@media screen and (max-width: $maxWidth) {
2628
// background-color: #fff;

0 commit comments

Comments
 (0)