feat: responsiveness

Arcath · May 20, 2024 · c03b0bf · c03b0bf
1 parent b5fd8ca
commit c03b0bf
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{{ page.title }}</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="{{ site.title }}" class="m-auto" />
         <h2 class="font-light text-2xl">{{ site.title }}</h2>
 
         <a href="/">Home</a>
@@ -18,11 +19,11 @@ <h2 class="font-light text-2xl">{{ site.title }}</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           {{ content }}
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; {{ site.title }} {{ site.time | date: '%Y' }}
         </footer>
       </div>

diff --git a/_layouts/tags.html b/_layouts/tags.html
@@ -5,7 +5,7 @@
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">{{ page.title }}</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   {% for post in page.tagged_posts %}
     {% include post.html post=post %}
   {% endfor %}

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 title: Adam Laycock
 ---
 
-<div class="grid grid-cols-4 gap-4 mb-4">
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
   {% for link in site.data.links %}
     <a 
       href="{{ link.target }}"
@@ -14,11 +14,11 @@
   {% endfor %}
 </div>
 
-<div class="grid grid-cols-2 gap-4 mb-2">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-2">
   {% for post in site.posts limit:4 %}
     {% include post.html post=post %}
   {% endfor %}
-  <div class="bg-white border border-gray-300 shadow p-2 row-span-2 row-start-2 col-start-2">
+  <div class="bg-white border border-gray-300 shadow p-2 lg:row-span-2 lg:row-start-2 lg:col-start-2">
     <h2 class="font-light text-2xl border-b border-gray-200 mb-2">More Posts</h2>
     <a href="/blog/">All Posts</a><br /><br />
     {% capture tagString %}{% for tag in site.tags %}{{ tag[0] }}{% unless forloop.last %}|{% endunless %}{% endfor %}{% endcapture %}