Responsiveness with Wraps and No-Wraps

techbarrack · Apr 11, 2024 · ab7da29 · ab7da29
1 parent 395eb74
commit ab7da29
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 41 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -1184,6 +1184,14 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1318,6 +1326,11 @@ video {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -1436,10 +1449,6 @@ video {
 }
 
 @media not all and (min-width: 768px) {
-  .max-md\:flex-col {
-    flex-direction: column;
-  }
-
   .max-md\:gap-4 {
     gap: 1rem;
   }
@@ -1449,6 +1458,21 @@ video {
   .max-sm\:hidden {
     display: none;
   }
+
+  .max-sm\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .max-sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .max-sm\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 640px) {

diff --git a/content/about.md b/content/about.md
@@ -1,5 +1,5 @@
 ---
-title: "About Me"
+title: "🙋‍♂️ About Me"
 date: 2024-03-28T15:00:00+00:00
 draft: false
 layout: "terms"

diff --git a/layouts/_default/home.html b/layouts/_default/home.html
@@ -5,7 +5,7 @@
         <div class="flex flex-col justify-center items-center gap-4">
           <!-- Name of Website -->
           <div class="flex flex-col gap-4 items-center justify-center">
-            <h1 class="font-bold text-5xl hover:text-sky-400">
+            <h1 class="font-bold text-5xl hover:text-sky-400 max-sm:text-4xl">
               <a href="{{ .Site.BaseURL }}" class="whitespace-nowrap">
                 Nayan Seth
               </a>

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -5,8 +5,8 @@
     <!-- Main Content-->
     <div class="flex flex-col w-full gap-4">
       <div class="flex flex-row gap-4">
-        <p class="text-4xl">📝</p>
-        <h1 class="text-4xl font-bold">Blog Archive</h1>
+        <p class="text-3xl max-sm:text-2xl">📝</p>
+        <h1 class="text-3xl max-sm:text-2xl font-bold">Blog Archive</h1>
       </div>
       <hr/>
       {{ $blogPages := where .Site.RegularPages "Section" "blog" }}

diff --git a/layouts/_default/post.html b/layouts/_default/post.html
@@ -4,9 +4,9 @@
   <div class="flex flex-col pt-8 gap-10">
     <!-- Main Content-->
     <div class="flex flex-col w-full gap-4">
-      <h2 class="text-4xl font-bold">{{ .Title }}</h2>
+      <h2 class="text-3xl max-sm:text-2xl font-bold">{{ .Title }}</h2>
       <!-- Blog Post Metadata -->
-      <div class="flex flex-row max-md:flex-col max-md:gap-4 gap-10">
+      <div class="flex flex-row flex-wrap max-md:gap-4 gap-10">
         <p>📅 {{ .Date.Format "Monday, Jan 2, 2006" }}</p>
         <!-- Timestamp -->
         {{ $timestamp := "2024-03-31T23:33:10+05:30" }}
@@ -16,11 +16,11 @@ <h2 class="text-4xl font-bold">{{ .Title }}</h2>
         <!-- <p>Reading time: {{ .ReadingTime }}</p> -->
       </div>
       <!-- Authors -->
-      <div class="flex flex-row gap-2">
+      <div class="flex flex-row gap-2 flex-nowrap">
         {{ partial "authors.html" . }}
       </div>
       <!-- Tags -->
-      <div class="flex flex-row gap-2">
+      <div class="flex flex-row gap-2 flex-nowrap">
         {{ partial "tags.html" . }}
       </div>
       <hr />

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -3,7 +3,7 @@
   <div class="flex flex-col pt-8 gap-10 w-full">
     <!-- Main Content-->
     <div class="flex flex-col w-full gap-4">
-      <h2 class="text-4xl font-bold">{{ .Title }}</h2>
+      <h2 class="text-3xl font-bold">{{ .Title }}</h2>
       <div class="flex flex-col gap-4 w-full">
         <hr />
         {{ partial "markdown.html" . }}

diff --git a/layouts/authors/list.html b/layouts/authors/list.html
@@ -6,8 +6,6 @@
   {{ .Scratch.Set "taxonomy" $taxonomy }}
 
   {{ partial "taxonomy.html" . }}
-
-  {{ partial "footer_regular.html" .}}
 
 {{ end }}
 
diff --git a/layouts/authors/term.html b/layouts/authors/term.html
@@ -3,8 +3,8 @@
 
 <div class="flex flex-col gap-5 pt-8">
   <div class="flex flex-row gap-4">
-    <p class="text-4xl">👩‍💻</p>
-    <h1 class="text-4xl font-bold">{{ .Title }}</h1>
+    <p class="text-3xl max-sm:text-2xl">👩‍💻</p>
+    <h1 class="text-3xl max-sm:text-2xl font-bold">{{ .Title }}</h1>
   </div>
   <hr />
   <div class="flex flex-row justify-between">

diff --git a/layouts/partials/authors.html b/layouts/partials/authors.html
@@ -1,5 +1,9 @@
 <div class="py-1">📝</div>
-{{ range .Params.authors }}
-<a href='{{ "/authors/" | relLangURL }}{{ . | urlize }}'
-    class="border border-orange-400 p-1 hover:bg-orange-400 focus:bg-orange-400 text-center focus:text-color-white">{{ . }}</a>
-{{ end }}
+<div class="flex flex-wrap gap-2">
+  {{ range .Params.authors }}
+    <a href='{{ "/authors/" | relLangURL }}{{ . | urlize }}'
+      class="border border-orange-400 p-1 hover:bg-orange-400 focus:bg-orange-400 text-center focus:text-color-white">
+      {{ . }}
+    </a>
+  {{ end }}
+</div>
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
@@ -2,10 +2,10 @@
 {{ $paginator := .Paginate ($blogPages) }}
 {{ range $paginator.Pages.GroupByDate "January 2006" }}
   <div class="flex flex-col gap-4">
-    <h2 class="text-2xl font-bold">📅 {{ .Key }}</h2>
+    <h2 class="text-2xl max-sm:text-xl font-bold">📅 {{ .Key }}</h2>
     <ul class="flex flex-col">
       {{ range .Pages.ByDate.Reverse }}
-        <div class="flex flex-row justify-between border-l px-4 py-1 hover:text-sky-400">
+        <div class="flex flex-row justify-between border-l px-4 py-2 hover:text-sky-400">
           <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
           <p class="max-lg:hidden">{{ .Date | time.Format ":date_medium" }}</p>
         </div>

diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html
@@ -1,5 +1,7 @@
 <p class="py-1">🏷️</p>
-{{ range .Params.tags }}
-  <a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}'
-  class="border border-sky-400 p-1 hover:bg-sky-400 focus:bg-sky-400 text-center">{{ . }}</a>
-{{ end }}
+<div class="flex flex-wrap gap-2">
+  {{ range .Params.tags }}
+    <a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}'
+    class="border border-sky-400 p-1 hover:bg-sky-400 focus:bg-sky-400 text-center">{{ . }}</a>
+  {{ end }}
+</div>
diff --git a/layouts/partials/taxonomy.html b/layouts/partials/taxonomy.html
@@ -1,23 +1,26 @@
-<div class="flex flex-col gap-8 pt-8">
+<div class="flex flex-col gap-4 pt-8">
   <div class="flex flex-row gap-4">
     {{ if eq .Title "Tags" }}
-      <p class="text-4xl">🏷️</p>
+      <p class="text-3xl max-sm:text-2xl">🏷️</p>
     {{ else if eq .Title "Authors" }}
-      <p class="text-4xl">👩‍💻</p>
+      <p class="text-3xl max-sm:text-2xl">👩‍💻</p>
     {{ else }}
       <!-- Default behavior if the title is neither "tags" nor "authors" -->
     {{ end }}
-    <h1 class="text-4xl font-bold">{{ .Title }}</h1>
+    <h1 class="text-3xl max-sm:text-2xl font-bold">{{ .Title }}</h1>
   </div>
-  <hr />
-  <div class="flex flex-row gap-4">
-    {{ range .Scratch.Get "taxonomy" }}
-    <div>
-      <a href="{{ .Page.Permalink }}" title="All pages with tag <i>{{ .Page.Title | lower }}</i>"
-        class="border border-sky-400 p-1 hover:bg-sky-400 focus:bg-sky-400 text-center whitespace-nowrap">{{ .Page.Title | lower }} x
-        {{
-        .Count }}</a>
+  <div class="flex flex-col gap-8">
+    <hr />
+    <div class="flex flex-row gap-4 flex-wrap">
+      {{ range .Scratch.Get "taxonomy" }}
+      <div>
+        <a href="{{ .Page.Permalink }}" title="All pages with tag <i>{{ .Page.Title | lower }}</i>"
+          class="border border-sky-400 p-1 hover:bg-sky-400 focus:bg-sky-400 text-center whitespace-nowrap">{{ .Page.Title | lower }} x
+          {{
+          .Count }}</a>
+      </div>
+      {{ end }}
     </div>
-    {{ end }}
   </div>
+  {{ partial "footer_regular.html" .}}
 </div>
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
@@ -6,6 +6,5 @@
 
   {{ partial "taxonomy.html" . }}
 
-  {{ partial "footer_regular.html" .}}
 {{ end }}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,6 +6,5 @@

		{{ partial "taxonomy.html" . }}

		{{ partial "footer_regular.html" .}}
		{{ end }}