Skip to content

Commit 609fed9

Browse files
author
kfly8
committed
エントリーページのデザイン調整 #4 
1 parent cb64d46 commit 609fed9

File tree

3 files changed

+73
-17
lines changed

3 files changed

+73
-17
lines changed

‎content/css/main.css

+53-11
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ body {
66
flex-flow: column;
77
max-width: 100%;
88
min-height: 100vh;
9+
line-height: 1.7;
910
}
1011

1112
/* HEADER */
1213
.site-header {
13-
padding: 20px;
14+
padding: 20px 10px;
1415
border-bottom: 1px solid;
1516
border-bottom-color: var(--border);
1617

@@ -50,22 +51,16 @@ main {
5051

5152
@media (max-width: 800px) {
5253
main {
53-
width: 96%;
54+
width: 100%;
5455
}
5556
}
5657

57-
.page-title {
58+
.category-title {
5859
margin: 10px;
5960
font-size: 1.5em;
6061
color: var(--text-main);
6162
}
6263

63-
@media (prefers-color-scheme: dark) {
64-
.page-title {
65-
color: var(--text-main);
66-
}
67-
}
68-
6964
.card {
7065
border: 1px solid;
7166
margin: 10px;
@@ -82,9 +77,9 @@ main {
8277
}
8378

8479
.card-title {
85-
padding: 10px 30px;
80+
padding: 10px;
8681
font-size: 1.3em;
87-
font-weight: 900;
82+
font-weight: 600;
8883
color: var(--text-main);
8984
}
9085

@@ -109,6 +104,53 @@ main {
109104
color: var(--text-main);
110105
}
111106

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+
112154
/* FOOTER */
113155
.site-footer {
114156
max-width: 100%;

‎layouts/category.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<body>
1414
<?= $include->('./include/header.html') ?>
1515
<main>
16-
<h1 class="page-title"><?= $vars->{category} ?></h1>
16+
<h1 class="category-title"><?= $vars->{category} ?></h1>
1717
? for (@{$vars->{files}}) {
1818
<div class="card">
1919
? if ($_->{matter}->exists && $_->{matter}->date ) {

‎layouts/entry.html

+19-5
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>

0 commit comments

Comments
 (0)