エントリーページのデザイン調整 #4

perl-users-jp · Feb 12, 2021 · 609fed9 · 609fed9
1 parent cb64d46
commit 609fed9
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 17 deletions.
diff --git a/content/css/main.css b/content/css/main.css
@@ -6,11 +6,12 @@ body {
     flex-flow: column;
     max-width: 100%;
     min-height: 100vh;
+    line-height: 1.7;
 }
 
 /* HEADER */
 .site-header {
-    padding: 20px;
+    padding: 20px 10px;
     border-bottom: 1px solid;
     border-bottom-color: var(--border);
 
@@ -50,22 +51,16 @@ main {
 
 @media (max-width: 800px) {
 main {
-    width: 96%;
+    width: 100%;
 }
 }
 
-.page-title {
+.category-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;
@@ -82,9 +77,9 @@ main {
 }
 
 .card-title {
-    padding: 10px 30px;
+    padding: 10px;
     font-size: 1.3em;
-    font-weight: 900;
+    font-weight: 600;
     color: var(--text-main);
 }
 
@@ -109,6 +104,53 @@ main {
     color: var(--text-main);
 }
 
+.entry {
+}
+
+.entry-title {
+    font-size: 1.4em;
+    padding: 20px 10px;
+    color: var(--text-bright);
+    line-height: 1.4;
+    background: var(--background-alt);
+    margin: 0 0 5px;
+}
+
+.entry-tags {
+    margin: 0 10px;
+}
+
+.entry-tag {
+    display: inline-block;
+    background: #9e9e9e;
+    padding: 2px 5px;
+    color: #fff;
+    border-radius: 5px;
+    margin-right: 2px;
+    font-size: 0.8em;
+}
+
+.entry-author {
+    margin-right: 10px;
+    text-align: right;
+    font-weight: 700;
+    line-height: 1.3;
+    color: var(--text-main);
+}
+
+.entry-date {
+    margin-right: 10px;
+    text-align: right;
+    font-size: 0.8em;
+    font-weight: 700;
+    line-height: 1.3;
+    color: var(--text-muted);
+}
+
+.entry-text {
+    margin: 10px;
+}
+
 /* FOOTER */
 .site-footer {
     max-width: 100%;

diff --git a/layouts/category.html b/layouts/category.html
@@ -13,7 +13,7 @@
     <body>
         <?= $include->('./include/header.html') ?>
         <main>
-            <h1 class="page-title"><?= $vars->{category} ?></h1>
+            <h1 class="category-title"><?= $vars->{category} ?></h1>
 ?           for (@{$vars->{files}}) {
                 <div class="card">
 ?                   if ($_->{matter}->exists && $_->{matter}->date ) {

diff --git a/layouts/entry.html b/layouts/entry.html
@@ -23,16 +23,30 @@
 
         <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->{title} ?></h1>
-        tag
+        <?= $include->('./include/header.html') ?>
+        <main class="entry">
+        <h1 class="entry-title"><?= $vars->{title} ?></h1>
+        <div class="entry-tags">
 ?       for my $tag ($vars->{matter}->tags->@*) {
-            <a href='<?= "/tag/$tag" ?>'><?= $tag ?></a>
+            <a class="entry-tag" href='<?= "/tag/$tag" ?>'>#<?= $tag ?></a>
+?       }
+        </div>
+?       if ($vars->{matter}->author) {
+            <div class="entry-author"><?= $vars->{matter}->author ?></div>
+?       }
+?       if ($vars->{matter}->date ) {
+            <div class="entry-date"><?= $vars->{matter}->date ?></div>
 ?       }
 
-        <?= $vars->{text} ?>
+        <div class="entry-text">
+            <?= $vars->{text} ?>
+        </div>
+        </main>
+        <?= $include->('./include/footer.html') ?>
         <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>
     </body>
 </html>