Skip to content

Commit

Permalink
カテゴリページのデザイン調整 #4
Browse files Browse the repository at this point in the history 
- water.css利用
- perl-users.jp 専用のcssは、content/css/main.cssを直で修正
- 記事の日付をFrontMatterに追加し、表示
  • Loading branch information
kfly8 committed Feb 12, 2021
1 parent 927783c commit d25fe42
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 12 deletions.
138 changes: 138 additions & 0 deletions content/css/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
/* BODY */
body {
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
max-width: 100%;
min-height: 100vh;
}

/* HEADER */
.site-header {
padding: 20px;
border-bottom: 1px solid;
border-bottom-color: var(--border);

}
.site-header .logo {
padding: 8px 16px;
font-weight: 600;
color: #fff;
background: #202b38;
border-radius: 2px;
}

.site-header .logo:hover {
text-decoration: none;
}



@media (prefers-color-scheme: dark) {
.site-header {
border-bottom-color: var(--border);
}

.site-header .logo {
color: #000;
background: #fff;
}
}


/* MAIN */
main {
width: 800px;
margin: 0 auto;
flex: 1;
}

@media (max-width: 800px) {
main {
width: 96%;
}
}

.page-title {
margin: 10px;
font-size: 1.5em;
color: var(--text-main);
}

@media (prefers-color-scheme: dark) {
.page-title {
color: var(--text-main);
}
}

.card {
border: 1px solid;
margin: 10px;
border-radius: 2px;
border-color: var(--border);
}

.card:hover {
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
}

.card a:hover {
text-decoration: none;
}

.card-title {
padding: 10px 30px;
font-size: 1.3em;
font-weight: 900;
color: var(--text-main);
}

.card-title:hover {
color: var(--links);
}

.card-date {
text-align: right;
padding: 10px 10px 0;
margin-bottom: -10px;
font-size: 0.8em;
font-weight: 700;
color: var(--text-muted);
}

.card-author {
text-align: right;
padding: 0 10px 10px;
margin-top: -10px;
font-weight: 700;
color: var(--text-main);
}

/* FOOTER */
.site-footer {
max-width: 100%;
padding: 20px;
font-size: 0.8em;
border-top: 1px solid;
border-top-color: var(--border);
background-color: var(--background);
}

.site-footer nav {
text-align: center;
}

.site-footer .octicon {
fill: #000;
}

@media (prefers-color-scheme: dark) {
.site-footer {
background-color: var(--background);
}

.site-footer .octicon {
fill: #fff;
}
}
44 changes: 32 additions & 12 deletions layouts/category.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,41 @@
<title><?= $vars->{title} ?></title>
<link rel="icon" href="/img/favicon.ico">
<link rel="canonical" href="<?= $vars->{url} ?>">
<link href="TODO" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<h1><?= $vars->{category} ?></h1>
<ul>
<header class="site-header">
<a href="/" class="logo">Perl-users.jp</a>
</header>
<main>
<h1 class="page-title"><?= $vars->{category} ?></h1>
? for (@{$vars->{files}}) {
<li>
<a href="<?= $_->{href} ?>">
<?= $_->{matter}->exists && $_->{href} =~ m!advent! && $_->{name} =~ m!\d\d*! ? sprintf("%d日目 - %s by %sさん", $_->{name}, $_->{title}, ($_->{matter}->author ? $_->{matter}->author : "名無し") ) : $_->{title} ?>
</a>
</li>
<div class="card">
? if ($_->{matter}->exists && $_->{matter}->date ) {
<div class="card-date"><?= $_->{matter}->date ?></div>
? }
<a href="<?= $_->{href} ?>">
<div class="card-title"><?= $_->{title} ?></div>
</a>
? if ($_->{matter}->exists && $_->{matter}->author) {
<div class="card-author"><?= $_->{matter}->author ?></div>
? }
</div>
? }
</ul>

<a href="/">HOME</a>

</main>
<footer class="site-footer">
<nav>
<a href="https://github.com/perl-users-jp/perl-users-jp.github.io" target="_blank" rel="noopener">
<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>
</a>
</nav>
<p>
<a href="/">Perl-users.jp</a> - 日本のPerlユーザーのためのハブサイトです。日本の Perl ユーザーに最新の情報を届けることを目的にしています。
</p>
<p>
文章のライセンスは、特に明記が無い限りすべて <a href="http://creativecommons.org/licenses/by/2.0/">CC-by</a>でおねがいします。
</p>
</footer>
</body>
</html>
2 changes: 2 additions & 0 deletions lib/PerlUsersJP/FrontMatter.pm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ use Class::Tiny qw(
description
author
email
date
tags
og_image
Expand Down Expand Up @@ -50,6 +51,7 @@ sub BUILDARGS {
body => $data->{body},
title => $data->{title} // '',
description => $data->{description} // '',
date => $data->{date} // '',
author => $author // '',
email => $email // '',
tags => $tags,
Expand Down

0 comments on commit d25fe42

Please sign in to comment.