fix エントリーユニットの余白を修正・unit.htmlを編集しないよう修正

Author: flour621

src/develop/include/topicpath.html

@@ -1,6 +1,6 @@
 <!-- BEGIN_MODULE Topicpath id="{{module_id}}" -->
 <nav aria-label="現在のページ">
-  <ol class="flex items-center flex-wrap text-sm text-gray-500 [&_a]:text-gray-900 [&_a:hover]:opacity-70 [&_li:last-child_a]:text-gray-500">
+  <ol class="flex items-center flex-wrap text-sm text-gray-500 [&_a]:text-gray-900 [&_a:hover]:opacity-70">
     <!-- BEGIN blog:loop -->
     <li class="flex items-center h-full"><!-- BEGIN blog:glue --><span class="mx-2 text-gray-400">/</span><!-- END blog:glue --><a href="{url}" class="py-1">{name}</a></li>
     <!-- END blog:loop --><!-- BEGIN category:loop -->

src/develop/include/unit.html

@@ -477,51 +477,57 @@
 }
 
 /* メディアユニット */
-[class*='column-media-'] {
-  margin-block: 2rem;
-}
-
 [class*='column-media-'] .columnIcon { /* stylelint-disable-line */
   margin: 0 auto;
 }
 
-/* 引用ユニット */
-[class*='column-quote'] blockquote:not([class]) {
-  padding: 20px 10px 20px 20px;
-  border-inline-start-color: var(--tw-prose-quote-borders);
-  border-inline-start-width: 0.25rem;
+[class*='column-media-'] .caption {
+  @apply mt-1 text-gray-500 text-sm text-center;
 }
 
-.quoteImageContainer { /* stylelint-disable-line */
-  position: relative;
-  float: left;
-  max-width: 154px;
-  margin-right: 25px;
-}
+/* 引用ユニット */
+[class*='column-quote'] {
+  blockquote:not([class]) {
+    padding: 20px 10px 20px 20px;
+    border-inline-start-color: var(--tw-prose-quote-borders);
+    border-inline-start-width: 0.25rem;
+  }
 
-.quoteImage { /* stylelint-disable-line */
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
+  blockquote.js-biggerlink {
+    @apply overflow-hidden block md:flex p-0 border border-gray-200 rounded-md font-normal md:transition-opacity hover:opacity-70;
+  }
 
-.quoteTitle { /* stylelint-disable-line */
-  padding: 0;
-  margin: 0 0 5px;
-  line-height: 1.4;
-}
+  .quoteImageContainer { /* stylelint-disable-line */
+    @apply md:w-1/3 flex-none mr-0;
+  }
 
-.quoteSiteName { /* stylelint-disable-line */
-  padding: 0;
-  margin: 0 0 10px;
-  font-size: .75rem;
-}
+  .quoteImage { /* stylelint-disable-line */
+    @apply block w-full m-0 md:h-full md:object-cover;
+  }
 
-.quoteDescription { /* stylelint-disable-line */
-  padding: 0;
-  margin: 0;
-  font-size: .75rem;
-  line-height: 1.6;
+  div:not(.quoteImageContainer) { /* stylelint-disable-line */
+    @apply flex flex-col max-w-none p-4 md:w-2/3;
+  }
+
+  .quoteTitle { /* stylelint-disable-line */
+    @apply mb-1.5 text-base leading-6 line-clamp-2;
+  }
+
+  .quoteTitleLink { /* stylelint-disable-line */
+    @apply font-normal text-gray-700 no-underline;
+  }
+
+  .quoteSiteName { /* stylelint-disable-line */
+    @apply -order-1 p-0 mb-1 text-gray-700 text-sm line-clamp-1;
+  }
+
+  .quoteDescription { /* stylelint-disable-line */
+    @apply p-0 m-0 text-xs text-gray-500 leading-relaxed line-clamp-2;
+  }
+
+  .clearHidden { /* stylelint-disable-line */
+    @apply hidden;
+  }
 }
 
 /* 地図ユニット */
@@ -581,22 +587,16 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
-    padding-right: 0;
-    padding-left: 0;
+    border-bottom: 1px solid var(--tw-prose-td-borders);
   }
 
   [class*=column-table-] table:not([class]) th {
-    padding-bottom: 0;
     text-align: left;
   }
-
-  [class*=column-table-] table:not([class]) td {
-    padding-top: 3px;
-  }
 }
 
 [class*=column-table-] .entry-container {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
   overflow-x: auto;
   overflow-y: visible !important;
 }

src/develop/src/style/main.css

@@ -56,6 +56,7 @@ module.exports = {
               'font-size': '1.125rem',
             },
             p: {
+              'margin-bottom': '1.5rem',
               'line-height': '1.7',
             },
             a: {
@@ -67,12 +68,19 @@ module.exports = {
             blockquote: {
               'font-style': 'normal',
             },
+            ul: {
+              'margin-top': '0',
+              'margin-bottom': '1.5rem',
+            },
             'ul > li::marker': {
               'color': '#9CA3AF',
             },
             'ol > li::marker': {
               'font-weight': 'bold',
             },
+            li: {
+              margin: '.375rem 0'
+            },
             dd: {
               'margin-top': '0',
               'padding-inline-start': '1em',
@@ -104,9 +112,29 @@ module.exports = {
             'tr:last-child th, tr:last-child td': {
               'border-bottom': '0',
             },
+            '[class*="column-media-"]': {
+              'margin-bottom': '1.5rem',
+            },
             '[class*="column-media-"] img': {
-              "margin-bottom": ".75em",
-            }
+              'margin-bottom': '.75em',
+              'border-radius': '0.375rem',
+            },
+            '[class*=column-map]': {
+              'margin-bottom': '1.5rem',
+              'border-radius': '0.375rem',
+            },
+            '[class*=column-quote]': {
+              'margin-bottom': '1.5rem',
+            },
+            '[class*=column-quote] blockquote': {
+              'font-style': 'normal',
+              'padding-left': '0',
+              'color': 'inherit',
+              'quotes': 'none',
+              '&::before, &::after': {
+                content: 'none',
+              }
+            },
           },
         },
       },