タグ、タグ一覧のデザイン調整 #4

kfly8 · kfly8 · commit 6318a97d5cea · 2021-02-12T23:45:44.000+09:00
diff --git a/content/css/main.css b/content/css/main.css
@@ -151,6 +151,16 @@ main {
     margin: 10px;
 }
 
+.tag-title {
+    margin: 10px;
+    padding: 2px 10px;
+    color: #fff;
+    background: #9e9e9e;
+    border-radius: 5px;
+    display: inline-block;
+}
+
+
 /* FOOTER */
 .site-footer {
     max-width: 100%;
diff --git a/layouts/tag.html b/layouts/tag.html
@@ -7,22 +7,27 @@
         <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->{tag} ?></h1>
-        <ul>
+        <?= $include->('./include/header.html') ?>
+        <main>
+            <h1 class="tag-title">#<?= $vars->{tag} ?></h1>
 ?           for (@{$vars->{files}}) {
-            <li>
-                <a href="<?= $_->{href} ?>">
-                    <?= $_->{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="/tag">タグ一覧</a>
-        <a href="/">HOME</a>
-
+        </main>
+        <?= $include->('./include/footer.html') ?>
     </body>
 </html>
diff --git a/layouts/tag_index.html b/layouts/tag_index.html
@@ -7,21 +7,21 @@
         <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>タグ一覧</h1>
-        <ul>
+        <?= $include->('./include/header.html') ?>
+        <main>
+            <h1 class="category-title">タグ一覧</h1>
 ?           for my $tag (@{$vars->{tags}}) {
-            <li>
-                <a href=<?= $vars->{tag_url_path}->($tag) ?>>
-                    <?= $tag ?>
-                </a>
-            </li>
+                <div class="card">
+                    <a href="<?= $vars->{tag_url_path}->($tag) ?>">
+                        <div class="card-title"><?= $tag ?></div>
+                    </a>
+                </div>
 ?           }
-        </ul>
-
-        <a href="/">HOME</a>
-
+        </main>
+        <?= $include->('./include/footer.html') ?>
     </body>
 </html>
