Fix layout and styling issues

_layouts/default.html

@@ -11,7 +11,7 @@
       {% if page.title == 'Home' %}
         <h1>{{ site.title }}</h1>
       {% else %}
-        <a href="{{ site.baseurl }}">
+        <a href="{{ site.baseurl }}/">
           <h1>{{ site.title }}</h1>
         </a>
       {% endif %}
@@ -23,6 +23,7 @@ <h1>{{ site.title }}</h1>
         </div>
       {% else %}
         <h2>{{ page.title }}</h2>
+        <div class="text-center mb-10">{{ page.date | date: '%Y年%m月%d日' }}</div>
         {{ content }}
       {% endif %}
     </main>

_posts/2023-12-22-aria-live.md

@@ -157,7 +157,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
 
 <style>
 #advertisement {
-   position: fixed;
+   position: sticky;
    bottom: 0;
    z-index: 50;
    background-color: yellow;

assets/css/main.scss

@@ -18,11 +18,11 @@ h3 {
 }
 
 ul {
-    @apply list-disc ml-5 mt-4 mb-2 text-sm mb-2;
+    @apply list-disc ml-5 mt-4 mb-2 text-base mb-2;
 }
 
 li {
-    @apply text-lg py-2 mb-2;
+    @apply text-base py-2 mb-2;
 }
 
 li:not(:first-child) {
@@ -41,6 +41,10 @@ p {
     @apply leading-loose;
 }
 
+p + p {
+    @apply mt-4;
+}
+
 img {
     @apply mt-4 max-w-full md:max-w-md;
 }
@@ -50,5 +54,5 @@ img {
 }
 
 .language-html.highlighter-rouge {
-    @apply bg-pink-100 p-4 mt-12;
+    @apply bg-pink-100 p-4 mt-12 overflow-x-auto;
 }

index.md

@@ -7,7 +7,7 @@ title: Home
 
 <img src="{{ site.baseurl }}/assets/images/a11ydarkpatterns.png" alt="アクセシビリティのダークパターンのイメージ" style="display: block; margin-left: auto; margin-right: auto;">
 
-<ul style="list-style-type: none;">
+<ul style="list-style-type: none;" class="ml-0">
   {% for post in site.posts %}
     <li>
       <a href="{{ site.baseurl }}{{ post.url }}">{{ post.date | date: "%Y年%m月%d日"}} : {{ post.title }}</a>