Skip to content

Commit bfd90a4

Browse files
kfly8kfly8
authored
Merge pull request #38 from perl-users-jp/redesign
サイトデザインの調整
2 parents 927783c + e2d8bc3 commit bfd90a4

File tree

9 files changed

+283
-43
lines changed

9 files changed

+283
-43
lines changed

‎content/css/main.css

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
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+
line-height: 1.7;
10+
}
11+
12+
/* HEADER */
13+
.site-header {
14+
padding: 20px 10px;
15+
border-bottom: 1px solid;
16+
border-bottom-color: var(--border);
17+
18+
}
19+
.site-header .logo {
20+
padding: 8px 16px;
21+
font-weight: 600;
22+
color: #fff;
23+
background: #202b38;
24+
border-radius: 2px;
25+
}
26+
27+
.site-header .logo:hover {
28+
text-decoration: none;
29+
}
30+
31+
32+
33+
@media (prefers-color-scheme: dark) {
34+
.site-header {
35+
border-bottom-color: var(--border);
36+
}
37+
38+
.site-header .logo {
39+
color: #000;
40+
background: #fff;
41+
}
42+
}
43+
44+
45+
/* MAIN */
46+
main {
47+
width: 800px;
48+
margin: 0 auto;
49+
flex: 1;
50+
}
51+
52+
@media (max-width: 800px) {
53+
main {
54+
width: 100%;
55+
}
56+
}
57+
58+
.category-title {
59+
margin: 10px;
60+
font-size: 1.1em;
61+
color: var(--text-main);
62+
}
63+
64+
.card {
65+
border: 1px solid;
66+
margin: 10px;
67+
border-radius: 2px;
68+
border-color: var(--border);
69+
}
70+
71+
.card:hover {
72+
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
73+
}
74+
75+
.card a:hover {
76+
text-decoration: none;
77+
}
78+
79+
.card-title {
80+
padding: 10px;
81+
font-size: 1em;
82+
font-weight: 600;
83+
color: var(--text-main);
84+
}
85+
86+
.card-title:hover {
87+
color: var(--links);
88+
}
89+
90+
.card-date {
91+
text-align: right;
92+
padding: 10px 10px 0;
93+
margin-bottom: -10px;
94+
font-size: 0.8em;
95+
font-weight: 600;
96+
color: var(--text-muted);
97+
}
98+
99+
.card-author {
100+
text-align: right;
101+
padding: 0 10px 10px;
102+
margin-top: -10px;
103+
font-weight: 600;
104+
color: var(--text-main);
105+
}
106+
107+
.entry {
108+
}
109+
110+
.entry-title {
111+
font-size: 1.4em;
112+
padding: 20px 10px;
113+
color: var(--text-bright);
114+
line-height: 1.4;
115+
background: var(--background-alt);
116+
margin: 0 0 5px;
117+
}
118+
119+
.entry-tags {
120+
margin: 0 10px;
121+
}
122+
123+
.entry-tag {
124+
display: inline-block;
125+
background: #9e9e9e;
126+
padding: 2px 5px;
127+
color: #fff;
128+
border-radius: 5px;
129+
margin-right: 2px;
130+
font-size: 0.8em;
131+
}
132+
133+
.entry-author {
134+
margin-right: 10px;
135+
text-align: right;
136+
font-weight: 700;
137+
line-height: 1.3;
138+
color: var(--text-main);
139+
}
140+
141+
.entry-date {
142+
margin-right: 10px;
143+
text-align: right;
144+
font-size: 0.8em;
145+
font-weight: 700;
146+
line-height: 1.3;
147+
color: var(--text-muted);
148+
}
149+
150+
.entry-text {
151+
margin: 10px;
152+
}
153+
154+
.tag-title {
155+
margin: 10px;
156+
padding: 2px 10px;
157+
color: #fff;
158+
background: #9e9e9e;
159+
border-radius: 5px;
160+
display: inline-block;
161+
font-size: 1em;
162+
}
163+
164+
165+
/* FOOTER */
166+
.site-footer {
167+
max-width: 100%;
168+
padding: 20px;
169+
font-size: 0.8em;
170+
border-top: 1px solid;
171+
border-top-color: var(--border);
172+
background-color: var(--background);
173+
}
174+
175+
.site-footer nav {
176+
text-align: center;
177+
}
178+
179+
.site-footer .octicon {
180+
fill: #000;
181+
}
182+
183+
@media (prefers-color-scheme: dark) {
184+
.site-footer {
185+
background-color: var(--background);
186+
}
187+
188+
.site-footer .octicon {
189+
fill: #fff;
190+
}
191+
}
192+
193+
/* override prettyprint */
194+
pre.prettyprint {
195+
width: auto !important;
196+
}

‎layouts/category.html

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,27 @@
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+
<?= $include->('./include/header.html') ?>
15+
<main>
16+
<h1 class="category-title"><?= $vars->{category} ?></h1>
1517
? 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>
18+
<div class="card">
19+
? if ($_->{matter}->exists && $_->{matter}->date ) {
20+
<div class="card-date"><?= $_->{matter}->date ?></div>
21+
? }
22+
<a href="<?= $_->{href} ?>">
23+
<div class="card-title"><?= $_->{title} ?></div>
24+
</a>
25+
? if ($_->{matter}->exists && $_->{matter}->author) {
26+
<div class="card-author"><?= $_->{matter}->author ?></div>
27+
? }
28+
</div>
2129
? }
22-
</ul>
23-
24-
<a href="/">HOME</a>
25-
30+
</main>
31+
<?= $include->('./include/footer.html') ?>
2632
</body>
2733
</html>

‎layouts/entry.html

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,30 @@
2323

2424
<link rel="icon" href="/img/favicon.ico">
2525
<link rel="canonical" href="<?= $vars->{url} ?>">
26-
<link href="TODO" rel="stylesheet">
26+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
27+
<link rel="stylesheet" href="/css/main.css">
2728
</head>
2829
<body>
29-
<h1><?= $vars->{title} ?></h1>
30-
tag
30+
<?= $include->('./include/header.html') ?>
31+
<main class="entry">
32+
<h1 class="entry-title"><?= $vars->{title} ?></h1>
33+
<div class="entry-tags">
3134
? for my $tag ($vars->{matter}->tags->@*) {
32-
<a href='<?= "/tag/$tag" ?>'><?= $tag ?></a>
35+
<a class="entry-tag" href='<?= "/tag/$tag" ?>'>#<?= $tag ?></a>
36+
? }
37+
</div>
38+
? if ($vars->{matter}->author) {
39+
<div class="entry-author"><?= $vars->{matter}->author ?></div>
40+
? }
41+
? if ($vars->{matter}->date ) {
42+
<div class="entry-date"><?= $vars->{matter}->date ?></div>
3343
? }
3444

35-
<?= $vars->{text} ?>
45+
<div class="entry-text">
46+
<?= $vars->{text} ?>
47+
</div>
48+
</main>
49+
<?= $include->('./include/footer.html') ?>
3650
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>
3751
</body>
3852
</html>

‎layouts/include/footer.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<footer class="site-footer">
2+
<nav>
3+
<a href="https://github.com/perl-users-jp/perl-users-jp.github.io" target="_blank" rel="noopener">
4+
<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>
5+
</a>
6+
</nav>
7+
<p>
8+
<a href="/">Perl-users.jp</a> - 日本のPerlユーザーのためのハブサイトです。日本の Perl ユーザーに最新の情報を届けることを目的にしています。
9+
</p>
10+
<p>
11+
文章のライセンスは、特に明記が無い限りすべて <a href="http://creativecommons.org/licenses/by/2.0/">CC-by</a>でおねがいします。
12+
</p>
13+
</footer>

‎layouts/include/header.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<header class="site-header">
2+
<a href="/" class="logo">Perl-users.jp</a>
3+
</header>

‎layouts/tag.html

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,27 @@
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->{tag} ?></h1>
14-
<ul>
14+
<?= $include->('./include/header.html') ?>
15+
<main>
16+
<h1 class="tag-title">#<?= $vars->{tag} ?></h1>
1517
? for (@{$vars->{files}}) {
16-
<li>
17-
<a href="<?= $_->{href} ?>">
18-
<?= $_->{title} ?>
19-
</a>
20-
</li>
18+
<div class="card">
19+
? if ($_->{matter}->exists && $_->{matter}->date ) {
20+
<div class="card-date"><?= $_->{matter}->date ?></div>
21+
? }
22+
<a href="<?= $_->{href} ?>">
23+
<div class="card-title"><?= $_->{title} ?></div>
24+
</a>
25+
? if ($_->{matter}->exists && $_->{matter}->author) {
26+
<div class="card-author"><?= $_->{matter}->author ?></div>
27+
? }
28+
</div>
2129
? }
22-
</ul>
23-
24-
<a href="/tag">タグ一覧</a>
25-
<a href="/">HOME</a>
26-
30+
</main>
31+
<?= $include->('./include/footer.html') ?>
2732
</body>
2833
</html>

‎layouts/tag_index.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@
77
<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>タグ一覧</h1>
14-
<ul>
14+
<?= $include->('./include/header.html') ?>
15+
<main>
16+
<h1 class="category-title">タグ一覧</h1>
1517
? for my $tag (@{$vars->{tags}}) {
16-
<li>
17-
<a href=<?= $vars->{tag_url_path}->($tag) ?>>
18-
<?= $tag ?>
19-
</a>
20-
</li>
18+
<div class="card">
19+
<a href="<?= $vars->{tag_url_path}->($tag) ?>">
20+
<div class="card-title"><?= $tag ?></div>
21+
</a>
22+
</div>
2123
? }
22-
</ul>
23-
24-
<a href="/">HOME</a>
25-
24+
</main>
25+
<?= $include->('./include/footer.html') ?>
2626
</body>
2727
</html>

‎lib/PerlUsersJP/Builder.pm

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -623,11 +623,12 @@ sub _render_string {
623623
my $renderer = eval <<~ "..." or die $@;
624624
sub {
625625
my \$vars = shift;
626+
my \$include = shift;
626627
$code->();
627628
}
628629
...
629630

630-
return $renderer->($vars);
631+
return $renderer->($vars, sub { $self->_render_string(@_) });
631632
}
632633

633634
sub _normalize_name {

‎lib/PerlUsersJP/FrontMatter.pm

Lines changed: 2 additions & 0 deletions
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)