From 841fe7deb99f05c633fad150b8989bb067caa69f Mon Sep 17 00:00:00 2001
From: Maria Rushkova <maryrushkova@gmail.com>
Date: Wed, 4 Aug 2021 15:16:29 +0200
Subject: [PATCH] Add mobile lists

---
 _includes/media-preview.html |  7 ++++++
 _includes/post-preview.html  |  8 +++++++
 index.html                   | 42 ++++++++++++------------------------
 3 files changed, 29 insertions(+), 28 deletions(-)
 create mode 100644 _includes/media-preview.html
 create mode 100644 _includes/post-preview.html

diff --git a/_includes/media-preview.html b/_includes/media-preview.html
new file mode 100644
index 0000000..2a7abc6
--- /dev/null
+++ b/_includes/media-preview.html
@@ -0,0 +1,7 @@
+<li class="flex flex-col w-full sm:w-1/2 lm:max-w-screen-xs mb-5 lg:mb-8">
+  <time class="text-xxs opacity-75"
+    >{{ mediapost.date | date: '%B %d, %Y' }}</time
+  ><a href="{{ mediapost.link }}" class="text-xs lg:text-base font-semibold"
+    >{{ mediapost.title }}</a
+  >
+</li>
diff --git a/_includes/post-preview.html b/_includes/post-preview.html
new file mode 100644
index 0000000..b5a452d
--- /dev/null
+++ b/_includes/post-preview.html
@@ -0,0 +1,8 @@
+<li class="flex flex-col w-full sm:w-1/2 lm:max-w-screen-xs mb-5 lg:mb-8">
+  <time class="text-xxs opacity-75">{{ post.date | date: '%B %d, %Y' }}</time
+  ><a
+    href="{{ site.baseurl }}{{ post.url }}"
+    class="text-xs lg:text-base font-semibold"
+    >{{ post.title }}</a
+  >
+</li>
diff --git a/index.html b/index.html
index ab2fdb0..77790d6 100644
--- a/index.html
+++ b/index.html
@@ -480,20 +480,13 @@ layout: default
 
   <div class="info-block w-full sm:w-10/12 lg:w-9/12">
     <div class="flex flex-col">
-      <ul class="mb-5 container s:mx-auto flex flex-col flex-wrap sm:flex-row">
-        {% for post in site.posts limit:8 %}
-        <li
-          class="flex flex-col w-full sm:w-1/2 lm:max-w-screen-xs mb-5 lg:mb-8"
-        >
-          <time class="text-xxs opacity-75"
-            >{{ post.date | date: '%B %d, %Y' }}</time
-          ><a
-            href="{{ site.baseurl }}{{ post.url }}"
-            class="text-xs lg:text-base font-semibold"
-            >{{ post.title }}</a
-          >
-        </li>
-        {% endfor %}
+      <ul class="mb-5 container s:mx-auto flex-row hidden flex-wrap sm:flex">
+        {% for post in site.posts limit:8 %} {% include post-preview.html %} {%
+        endfor %}
+      </ul>
+      <ul class="mb-5 container s:mx-auto flex flex-col sm:hidden">
+        {% for post in site.posts limit:4 %} {% include post-preview.html %} {%
+        endfor %}
       </ul>
 
       <div class="log__link container flex justify-start">
@@ -527,20 +520,13 @@ layout: default
 
   <div class="info-block w-full sm:w-10/12 lg:w-9/12">
     <div class="flex flex-col">
-      <ul class="mb-5 container s:mx-auto flex flex-col flex-wrap sm:flex-row">
-        {% for mediapost in site.data.media limit:8 %}
-        <li
-          class="flex flex-col w-full sm:w-1/2 lm:max-w-screen-xs mb-5 lg:mb-8"
-        >
-          <time class="text-xxs opacity-75"
-            >{{ mediapost.date | date: '%B %d, %Y' }}</time
-          ><a
-            href="{{ mediapost.link }}"
-            class="text-xs lg:text-base font-semibold"
-            >{{ mediapost.title }}</a
-          >
-        </li>
-        {% endfor %}
+      <ul class="mb-5 container s:mx-auto flex-row hidden flex-wrap sm:flex">
+        {% for mediapost in site.data.media limit:8 %} {% include
+        media-preview.html %} {% endfor %}
+      </ul>
+      <ul class="mb-5 container s:mx-auto flex flex-col sm:hidden">
+        {% for mediapost in site.data.media limit:4 %} {% include
+        media-preview.html %} {% endfor %}
       </ul>
 
       <div class="media__link container flex justify-start">