Skip to content

Commit d25fe42

Browse files
author
kfly8
committed
カテゴリページのデザイン調整 #4
- water.css利用 - perl-users.jp 専用のcssは、content/css/main.cssを直で修正 - 記事の日付をFrontMatterに追加し、表示
1 parent 927783c commit d25fe42

File tree

3 files changed

+172
-12
lines changed

3 files changed

+172
-12
lines changed

‎content/css/main.css

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/* BODY */
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
display: flex;
6+
flex-flow: column;
7+
max-width: 100%;
8+
min-height: 100vh;
9+
}
10+
11+
/* HEADER */
12+
.site-header {
13+
padding: 20px;
14+
border-bottom: 1px solid;
15+
border-bottom-color: var(--border);
16+
17+
}
18+
.site-header .logo {
19+
padding: 8px 16px;
20+
font-weight: 600;
21+
color: #fff;
22+
background: #202b38;
23+
border-radius: 2px;
24+
}
25+
26+
.site-header .logo:hover {
27+
text-decoration: none;
28+
}
29+
30+
31+
32+
@media (prefers-color-scheme: dark) {
33+
.site-header {
34+
border-bottom-color: var(--border);
35+
}
36+
37+
.site-header .logo {
38+
color: #000;
39+
background: #fff;
40+
}
41+
}
42+
43+
44+
/* MAIN */
45+
main {
46+
width: 800px;
47+
margin: 0 auto;
48+
flex: 1;
49+
}
50+
51+
@media (max-width: 800px) {
52+
main {
53+
width: 96%;
54+
}
55+
}
56+
57+
.page-title {
58+
margin: 10px;
59+
font-size: 1.5em;
60+
color: var(--text-main);
61+
}
62+
63+
@media (prefers-color-scheme: dark) {
64+
.page-title {
65+
color: var(--text-main);
66+
}
67+
}
68+
69+
.card {
70+
border: 1px solid;
71+
margin: 10px;
72+
border-radius: 2px;
73+
border-color: var(--border);
74+
}
75+
76+
.card:hover {
77+
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
78+
}
79+
80+
.card a:hover {
81+
text-decoration: none;
82+
}
83+
84+
.card-title {
85+
padding: 10px 30px;
86+
font-size: 1.3em;
87+
font-weight: 900;
88+
color: var(--text-main);
89+
}
90+
91+
.card-title:hover {
92+
color: var(--links);
93+
}
94+
95+
.card-date {
96+
text-align: right;
97+
padding: 10px 10px 0;
98+
margin-bottom: -10px;
99+
font-size: 0.8em;
100+
font-weight: 700;
101+
color: var(--text-muted);
102+
}
103+
104+
.card-author {
105+
text-align: right;
106+
padding: 0 10px 10px;
107+
margin-top: -10px;
108+
font-weight: 700;
109+
color: var(--text-main);
110+
}
111+
112+
/* FOOTER */
113+
.site-footer {
114+
max-width: 100%;
115+
padding: 20px;
116+
font-size: 0.8em;
117+
border-top: 1px solid;
118+
border-top-color: var(--border);
119+
background-color: var(--background);
120+
}
121+
122+
.site-footer nav {
123+
text-align: center;
124+
}
125+
126+
.site-footer .octicon {
127+
fill: #000;
128+
}
129+
130+
@media (prefers-color-scheme: dark) {
131+
.site-footer {
132+
background-color: var(--background);
133+
}
134+
135+
.site-footer .octicon {
136+
fill: #fff;
137+
}
138+
}

‎layouts/category.html

+32-12
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,41 @@
77
<title><?= $vars->{title} ?></title>
88
<link rel="icon" href="/img/favicon.ico">
99
<link rel="canonical" href="<?= $vars->{url} ?>">
10-
<link href="TODO" rel="stylesheet">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
11+
<link rel="stylesheet" href="/css/main.css">
1112
</head>
1213
<body>
13-
<h1><?= $vars->{category} ?></h1>
14-
<ul>
14+
<header class="site-header">
15+
<a href="/" class="logo">Perl-users.jp</a>
16+
</header>
17+
<main>
18+
<h1 class="page-title"><?= $vars->{category} ?></h1>
1519
? for (@{$vars->{files}}) {
16-
<li>
17-
<a href="<?= $_->{href} ?>">
18-
<?= $_->{matter}->exists && $_->{href} =~ m!advent! && $_->{name} =~ m!\d\d*! ? sprintf("%d日目 - %s by %sさん", $_->{name}, $_->{title}, ($_->{matter}->author ? $_->{matter}->author : "名無し") ) : $_->{title} ?>
19-
</a>
20-
</li>
20+
<div class="card">
21+
? if ($_->{matter}->exists && $_->{matter}->date ) {
22+
<div class="card-date"><?= $_->{matter}->date ?></div>
23+
? }
24+
<a href="<?= $_->{href} ?>">
25+
<div class="card-title"><?= $_->{title} ?></div>
26+
</a>
27+
? if ($_->{matter}->exists && $_->{matter}->author) {
28+
<div class="card-author"><?= $_->{matter}->author ?></div>
29+
? }
30+
</div>
2131
? }
22-
</ul>
23-
24-
<a href="/">HOME</a>
25-
32+
</main>
33+
<footer class="site-footer">
34+
<nav>
35+
<a href="https://github.com/perl-users-jp/perl-users-jp.github.io" target="_blank" rel="noopener">
36+
<svg class="octicon" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
37+
</a>
38+
</nav>
39+
<p>
40+
<a href="/">Perl-users.jp</a> - 日本のPerlユーザーのためのハブサイトです。日本の Perl ユーザーに最新の情報を届けることを目的にしています。
41+
</p>
42+
<p>
43+
文章のライセンスは、特に明記が無い限りすべて <a href="http://creativecommons.org/licenses/by/2.0/">CC-by</a>でおねがいします。
44+
</p>
45+
</footer>
2646
</body>
2747
</html>

‎lib/PerlUsersJP/FrontMatter.pm

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ use Class::Tiny qw(
1010
description
1111
author
1212
email
13+
date
1314
tags
1415
og_image
1516
@@ -50,6 +51,7 @@ sub BUILDARGS {
5051
body => $data->{body},
5152
title => $data->{title} // '',
5253
description => $data->{description} // '',
54+
date => $data->{date} // '',
5355
author => $author // '',
5456
email => $email // '',
5557
tags => $tags,

0 commit comments

Comments
 (0)