🎨 mobile layout for list

static/css/styles.css

@@ -1287,6 +1287,22 @@ input[type=file] {
   margin-left: 1rem;
 }
 
+.-mt-16 {
+  margin-top: -4rem;
+}
+
+.-mt-8 {
+  margin-top: -2rem;
+}
+
+.-mt-3 {
+  margin-top: -0.75rem;
+}
+
+.-mb-3 {
+  margin-bottom: -0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -1455,10 +1471,6 @@ input[type=file] {
   width: 200px;
 }
 
-.w-\[25px\] {
-  width: 25px;
-}
-
 .w-\[150px\] {
   width: 150px;
 }
@@ -1848,10 +1860,6 @@ input[type=file] {
   border-bottom-width: 2px;
 }
 
-.border-l-2 {
-  border-left-width: 2px;
-}
-
 .border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1895,20 +1903,16 @@ input[type=file] {
   border-color: rgb(90 213 153 / 0.6);
 }
 
-.border-white {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
-.border-slate\/50 {
-  border-color: rgb(49 74 87 / 0.5);
-}
-
 .border-gray-400 {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -2250,14 +2254,6 @@ input[type=file] {
   padding-bottom: 1rem;
 }
 
-.pr-5 {
-  padding-right: 1.25rem;
-}
-
-.pb-5 {
-  padding-bottom: 1.25rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -3010,6 +3006,18 @@ input[type=file] {
     margin-bottom: 1.5rem;
   }
 
+  .md\:-ml-\[213px\] {
+    margin-left: -213px;
+  }
+
+  .md\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .md\:ml-\[200px\] {
+    margin-left: 200px;
+  }
+
   .md\:block {
     display: block;
   }
@@ -3082,10 +3090,31 @@ input[type=file] {
     width: 70%;
   }
 
+  .md\:w-\[90\%\] {
+    width: 90%;
+  }
+
+  .md\:w-\[200px\] {
+    width: 200px;
+  }
+
+  .md\:w-\[150px\] {
+    width: 150px;
+  }
+
   .md\:min-w-\[150px\] {
     min-width: 150px;
   }
 
+  .md\:min-w-fit {
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+
+  .md\:min-w-full {
+    min-width: 100%;
+  }
+
   .md\:max-w-7xl {
     max-width: 80rem;
   }
@@ -3198,6 +3227,10 @@ input[type=file] {
     border-bottom-width: 1px;
   }
 
+  .md\:border-l-2 {
+    border-left-width: 2px;
+  }
+
   .md\:border-b-0 {
     border-bottom-width: 0px;
   }
@@ -3307,6 +3340,10 @@ input[type=file] {
     padding-left: 2.75rem;
   }
 
+  .md\:text-center {
+    text-align: center;
+  }
+
   .md\:text-right {
     text-align: right;
   }

templates/news/list.html

@@ -60,14 +60,14 @@
       </div>
 
     <div class="mt-5">
-      <ol class="border-l-2 border-white dark:border-slate space-y-3 w-[90%] mx-auto ml-[200px]">
+      <ol class="md:border-l-2 border-white dark:border-slate space-y-3 md:w-[90%] mx-auto md:ml-[200px]">
         {% for entry in entry_list %}
         <li>
           <div class="md:flex flex-start">
-            <div class="mt-6 text-sm text-center uppercase w-[200px] -ml-[213px]">
+            <div class="mt-6 text-sm text-right uppercase md:text-center md:w-[200px] md:-ml-[213px]">
               <a href="{{ entry.get_absolute_url }}">{{ entry.display_publish_at }}</a>
             </div>
-            <div class="flex justify-center items-center p-2 mt-5 bg-white rounded-full h-[30px] w-[30px] dark:bg-slate">
+            <div class="flex justify-center items-center p-2 mb-3 -mt-8 bg-white rounded-full md:mt-5 md:mb-0 h-[30px] w-[30px] dark:bg-slate">
               {% if entry.tag == "link" %}
                 {% url 'news-link-list' as target_url %}
                 <a href="{{ target_url }}" title="Link">
@@ -97,7 +97,7 @@
                 <i class="text-gray-400 fas fa-calendar-alt dark:text-white/60"></i>
               {% endif %}
             </div>
-            <div class="mt-4 text-xs text-center w-[150px]">
+            <div class="hidden pt-2 mt-4 text-xs text-center md:block md:w-[150px]">
               {% if entry.author.image %}
                 <img src="{{ entry.author.image.url }}" alt="user" class="inline rounded-sm w-[30px]" />
               {% else %}
@@ -106,7 +106,7 @@
                 </span>
               {% endif %}
             </div>
-            <div class="block p-6 mb-10 ml-6 w-3/4 bg-white rounded-lg dark:bg-charcoal">
+            <div class="block p-6 mb-10 w-full bg-white rounded-lg md:ml-6 md:w-3/4 dark:bg-charcoal">
               <div class="flex justify-between">
                 <a class="text-lg font-semibold transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700" {% if entry.tag == "link" %}target="_blank"{% endif %} href="{% if entry.tag == "link" %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
                   {{ entry.title }}