fix small mobile issues with layout

Author: denten

_config.yml

@@ -41,6 +41,6 @@ collections:
 defaults:
   - scope:
       path: "collections/_notes"
-      type: "notes"
+      type: "archive"
     values:
       layout: note

_data/navbar.yaml

@@ -1,4 +1,4 @@
-- name: Notes
-  path: /notes/
+- name: Archive
+  path: /archive/
 - name: About
   path: /about/

_includes/footer.html

@@ -1,4 +1,5 @@
-<footer class="flex items-start justify-between gap-4 px-4 py-4 md:px-6">
+<footer class="flex items-start justify-between gap-4 px-4 py-4 md:px-6 border-t
+    border-black/10">
     <div class="font-sans text-xs font-black bold uppercase tracking-wide">
         Support free &amp; open scholarship.
     </div>

_includes/header.html

@@ -1,6 +1,6 @@
 <header class="bg-stone-50 px-6 py-2">
 
-    <div class="flex gap-1 md:items-baseline md:justify-between">
+    <div class="flex items-end gap-1 md:items-baseline md:justify-between">
         <div>
             <a href="{{ '/' | relative_url }}" class="text-3xl font-semibold tracking-tight shrink-0">
                 Lab<span class="text-red-500">/</span>Notes

_layouts/notes.html _layouts/archive.html_layouts/notes.html renamed to _layouts/archive.html

@@ -4,24 +4,26 @@
 
 {{ content }}
 
-<section class="">
+<section class="pr-12">
 
     {% assign items = site.notes | sort: "date" | reverse %}
     {% if items and items.size > 0 %}
 
         <div class="w-full">
             {% for post in items %}
             <article class="grid grid-cols-1 md:grid-cols-[170px_1fr]">
-              <div class="px-4 py-4 font-mono text-[0.7rem] uppercase tracking-[0.08em] text-gray-500 md:px-6">
-                {{ post.date | date: "%Y-%m-%d" }}
-
-                  {% if post.tags %}
-                      {% include tags.html items=post.tags %}
-                  {% endif %}
+              <div class="text-right md:text-left px-4 md:px-6 pt-4 md:pt-12 font-mono text-[0.7rem] uppercase tracking-[0.08em] text-gray-500 ">
+                  {{ post.date | date: "%Y-%m-%d" }}
 
+                {% if post.tags %}
+                <div class="hidden md:block">
+                    {% include tags.html items=post.tags %}
+                {% endif %}
+                </div>
               </div>
 
-              <div class="px-4 py-4 md:px-6 md:pb-[1.15rem]">
+
+              <div class="px-4 md:py-4 md:px-6 md:pb-[1.15rem]">
                 <h2 class="mb-1.5 font-sans text-[1.4rem] font-serif leading-[1] tracking-[-0.025em]">
                   <a href="{{ post.url | relative_url }}" class="hover:text-red-600">
                     {{ post.title }}
@@ -40,12 +42,18 @@ <h2 class="mb-1.5 font-sans text-[1.4rem] font-serif leading-[1] tracking-[-0.02
                   </p>
                 {% endif %}
 
+                  {% if post.tags %}
+                    <div class="mt-3 md:hidden">
+                      {% include tags.html items=post.tags %}
+                    </div>
+                  {% endif %}
+
               </div>
             </article>
           {% endfor %}
         </div>
 
-        <footer class="px-4 py-4 md:px-6 md:pb-5">
+        <footer class="text-right px-4 py-4 md:px-6 md:pb-5">
           <span class="font-mono text-[0.68rem] uppercase tracking-[0.12em] text-gray-500">
               Count <span class="text-red-600">{{ items | size }}</span> notes
           </span>

_layouts/home.html

@@ -18,9 +18,9 @@
   <div class="grid grid-cols-1 md:grid-cols-2">
 
     {% for post in items limit:6 %}
-      <article class="min-h-72 px-4 py-5 md:px-6 md:border-r md:border-black/10 md:[&:nth-child(2n)]:border-r-0">
+      <article class="min-h-72 px-4 py-5 md:px-6 border-t md:border-r border-black/10 md:[&:nth-child(2n)]:border-r-0">
         <!-- meta -->
-        <div class="mb-3 flex flex-wrap gap-x-3 gap-y-1 font-mono text-sm leading-[1.65] text-gray-500">
+        <div class="md:mb-2 flex flex-wrap gap-x-3 gap-y-1 font-mono text-sm justify-end leading-[1.65] text-gray-500">
           <span>{{ post.date | date: "%Y-%m-%d" }}</span>
         </div>
 

_pages/archive.md

@@ -0,0 +1,7 @@
+---
+layout: archive
+title: Archive
+permalink: /archive/
+overtitle: "archive"
+---
+