From 255536c681a304d7518478d20c9aa6d9ab8237ca Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Thu, 12 Sep 2024 15:00:20 +0200
Subject: [PATCH] Responsive design for index page

---
 axum_server/styles/output.css                 | 133 ++++++++++-
 axum_server/tailwind.config.js                |   4 +-
 .../components/blog_post_preview.html         |   4 +-
 .../components/project_preview_card.html      |  10 +-
 .../templates/components/talent_card.html     |   6 +-
 axum_server/templates/index.html              | 216 +++++++++---------
 6 files changed, 255 insertions(+), 118 deletions(-)

diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css
index e7d924d..538f479 100644
--- a/axum_server/styles/output.css
+++ b/axum_server/styles/output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -554,6 +554,10 @@ video {
   --tw-contain-style:  ;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .row-span-3 {
   grid-row: span 3 / span 3;
 }
@@ -629,6 +633,11 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -721,6 +730,10 @@ video {
   width: 100%;
 }
 
+.max-w-maxindex {
+  max-width: 100rem;
+}
+
 .max-w-read {
   max-width: 64rem;
 }
@@ -773,6 +786,24 @@ video {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
+.gap-x-64 {
+  -moz-column-gap: 16rem;
+       column-gap: 16rem;
+}
+
+.gap-y-8 {
+  row-gap: 2rem;
+}
+
+.gap-x-32 {
+  -moz-column-gap: 8rem;
+       column-gap: 8rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -982,6 +1013,11 @@ video {
   color: rgb(80 7 36 / var(--tw-text-opacity));
 }
 
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
 .no-underline {
   text-decoration-line: none;
 }
@@ -1456,24 +1492,119 @@ a {
 }
 
 @media (min-width: 768px) {
+  .md\:grid {
+    display: grid;
+  }
+
+  .md\:h-16 {
+    height: 4rem;
+  }
+
+  .md\:w-16 {
+    width: 4rem;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:items-stretch {
+    align-items: stretch;
+  }
+
+  .md\:justify-stretch {
+    justify-content: stretch;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
   .md\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
 
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
   .md\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1024px) {
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .lg\:row-start-2 {
+    grid-row-start: 2;
+  }
+
   .lg\:mt-20 {
     margin-top: 5rem;
   }
 
+  .lg\:grid {
+    display: grid;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:gap-x-32 {
+    -moz-column-gap: 8rem;
+         column-gap: 8rem;
+  }
+
+  .lg\:gap-y-8 {
+    row-gap: 2rem;
+  }
+
   .lg\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;
   }
 }
+
+@media (min-width: 1280px) {
+  .xl\:col-auto {
+    grid-column: auto;
+  }
+
+  .xl\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
+  .xl\:row-start-auto {
+    grid-row-start: auto;
+  }
+
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .xl\:grid-cols-\[1fr_2fr\] {
+    grid-template-columns: 1fr 2fr;
+  }
+}
diff --git a/axum_server/tailwind.config.js b/axum_server/tailwind.config.js
index 7c0c74b..4965b34 100644
--- a/axum_server/tailwind.config.js
+++ b/axum_server/tailwind.config.js
@@ -1,17 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ["./templates/**/*.html"],
+	content: ["./templates/**/**.html"],
 	theme: {
 		extend: {
 			spacing: {
 				note: "60rem",
 				read: "64rem",
 				image: "70rem",
+				maxindex: "100rem",
 			},
 			width: {
 				note: "60rem",
 				read: "64rem",
 				image: "70rem",
+				maxindex: "100rem",
 			},
 		},
 	},
diff --git a/axum_server/templates/components/blog_post_preview.html b/axum_server/templates/components/blog_post_preview.html
index 21e0807..9a4e11a 100644
--- a/axum_server/templates/components/blog_post_preview.html
+++ b/axum_server/templates/components/blog_post_preview.html
@@ -8,9 +8,9 @@
 		{% endmatch %}
 	</aside>
 	<header>
-		<h3 class="text-lg font-bold mb-1">{{post.metadata.title}}</h3>
+		<h3 class="text-lg font-bold mb-1 md:text-3xl">{{post.metadata.title}}</h3>
 	</header>
-	<section class="text-base leading-5 text-gray-800">{{post.body|description_filter|safe}}</section>
+	<section class="text-base leading-5 text-gray-800 md:text-xl">{{post.body|description_filter|safe}}</section>
 	<footer class="text-sm">
     <ul class="inline-block">
      {% for tag in post.metadata.tags %}
diff --git a/axum_server/templates/components/project_preview_card.html b/axum_server/templates/components/project_preview_card.html
index b8cda5b..43a2b5a 100644
--- a/axum_server/templates/components/project_preview_card.html
+++ b/axum_server/templates/components/project_preview_card.html
@@ -1,6 +1,6 @@
 <article class="border rounded-md bg-white m-4 p-4">
   <header class="px-4 mb-3"> 
-    <h2 class="text-xl font-semibold text-blue-900">
+    <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
       {% match project.metadata.link %}
       {% when Some with (href) %}
       <a href="{{href}}" class="text-blue-900 no-underline">
@@ -10,9 +10,9 @@
       {{project.metadata.title}}
       {% endmatch %}
     </h2>
-    <p class="text-gray-800 text-lg my-2">
+    <section class="description text-slate-800 my-2 md:text-xl">
       {{project.metadata.description|safe}}
-    </p>
+    </section>
   </header>
   <!-- <hr class="border-blue-950 my-5"> -->
 
@@ -33,8 +33,8 @@
   {% endmatch %}
 
 
-	<footer class="text-sm px-4">
-    <h3 class="text-xl font-semibold text-blue-900 my-2">
+	<footer class="text-sm px-4 md:text-base">
+    <h3 class="text-xl font-semibold text-blue-900 my-2 md:text-2xl">
       {{crate::projects::project_model::translate_classification(project.metadata.classification)}}
     </h3>
     <ul class="inline-block">
diff --git a/axum_server/templates/components/talent_card.html b/axum_server/templates/components/talent_card.html
index 8a9df82..c5d2a70 100644
--- a/axum_server/templates/components/talent_card.html
+++ b/axum_server/templates/components/talent_card.html
@@ -2,15 +2,15 @@
 
 <section class="flex border rounded bg-white m-4 p-3">
 	<aside class="flex justify-center items-center pr-3">
-	  <svg aria-hidden="true" class="h-12 w-12 fill-blue-950">
+	  <svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
 	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
 	  </svg>
 	</aside>
 	<section>
 		<header>
-			<h3 class="text-lg font-medium mb-1">{{heading}}</h3>
+			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
 		</header>
-		<p class="text-sm leading-5 text-gray-800">{{description|safe}}</p>
+		<p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p>
 	</section>
 </section>
 
diff --git a/axum_server/templates/index.html b/axum_server/templates/index.html
index 02df395..05889c0 100644
--- a/axum_server/templates/index.html
+++ b/axum_server/templates/index.html
@@ -5,131 +5,135 @@
 {% block title %}Introduction{% endblock %}
 
 {% block content %}
-<header class="index-header hidden">
-  <figure class="profile-pic">
-    <picture>
-      <img
-        alt="Portrait"
-        {# TODO generate `srcset` for optimal image #}
-        {# TODO Take a new photo #}
-        src="/images/profile-portugal-landscape.jpg"
-      />
-    </picture>
-  </figure>
+<section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
+  <section id="about-me">
+    <header class="index-header hidden">
+      <figure class="profile-pic">
+        <picture>
+          <img
+            alt="Portrait"
+            {# TODO generate `srcset` for optimal image #}
+            {# TODO Take a new photo #}
+            src="/images/profile-portugal-landscape.jpg"
+          />
+        </picture>
+      </figure>
 
-  <p class="motto">
-    <cite>“Let your ambition carry you.”</cite>
-    <span class="cite-owner">- La Flame</span>
-  </p>
-</header>
+      <p class="motto">
+        <cite>“Let your ambition carry you.”</cite>
+        <span class="cite-owner">- La Flame</span>
+      </p>
+    </header>
 
-<h2 class="text-blue-950 font-semibold text-2xl m-5">About me</h2>
+    <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">About me</h2>
 
-<p class="mx-5">
-  Welcome to my personal website. My name is
-  <strong>Michal&nbsp;Vanko</strong>
-  and I'm a
-  <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
-  . I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
+    <p class="mx-5 md:text-xl">
+      Welcome to my personal website. My name is
+      <strong>Michal&nbsp;Vanko</strong>
+      and I'm a
+      <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
+      . I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
 
-<section id="talent-cards">
-  {% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
-  {% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
-  {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"TODO callendly\">Schedule a session with me</a> and elevate your projects together.") %}
-</section
+    <section id="talent-cards">
+      {% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
+      {% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
+      {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"TODO callendly\">Schedule a session with me</a> and elevate your projects together.") %}
+    </section>
+  </section>
+
+  <section id="blog" class="lg:col-span-2 lg:row-start-2 xl:col-auto xl:row-start-auto xl:row-span-2">
+    <h2 class="text-blue-950 font-semibold text-2xl md:text-4xl m-5">Blog</h2>
+    <section id="blog-tags">
+      <ul class="mx-5">
+       {% for tag in blog_tags %}
+        <li class="inline-block mx-0.5 p-0.5 md:text-xl">
+          <a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+    <hr class="border-blue-950 m-5">
 
-<section id="blog">
-<h2 class="text-blue-950 font-semibold text-2xl m-5">Blog</h2>
-  <section id="blog-tags">
     <ul class="mx-5">
-     {% for tag in blog_tags %}
-      <li class="inline-block mx-0.5 p-0.5">
-        <a href="/blog/tags/{{tag}}" class="text-pink-950">#{{tag|capitalize}}</a>
+     {% for post in featured_blog_posts %}
+      <li>
+        {% include "components/blog_post_preview.html" %}
+        <hr class="border-blue-950 my-5">
       </li>
-      {% endfor %}
+     {% endfor %}
     </ul>
   </section>
-  <hr class="border-blue-950 m-5">
 
-  <ul class="mx-5">
-   {% for post in featured_blog_posts %}
-    <li>
-      {% include "components/blog_post_preview.html" %}
-      <hr class="border-blue-950 my-5">
-    </li>
-   {% endfor %}
-  </ul>
-</section>
+  <section id="socials">
+    <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Socials</h2>
+    {% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
+      <!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
+      <!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
+      <!-- <script type="text/javascript"> -->
+        <!-- var options = { -->
+          <!-- width: "100%", -->
+          <!-- height: "100%", -->
+          <!-- channel: "michalvankodev", -->
+          <!-- parent: ["localhost"] -->
+        <!-- }; -->
+        <!-- var player = new Twitch.Player("twitch-player", options); -->
+        <!-- player.setVolume(0.5); -->
+      </script>
+    {% call sc::social_card_end() %}
 
-<section id="socials">
-  <h2 class="text-blue-950 font-semibold text-2xl m-5">Socials</h2>
-  {% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
-    <!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
-    <!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
-    <!-- <script type="text/javascript"> -->
-      <!-- var options = { -->
-        <!-- width: "100%", -->
-        <!-- height: "100%", -->
-        <!-- channel: "michalvankodev", -->
-        <!-- parent: ["localhost"] -->
-      <!-- }; -->
-      <!-- var player = new Twitch.Player("twitch-player", options); -->
-      <!-- player.setVolume(0.5); -->
-    </script>
-  {% call sc::social_card_end() %}
+    {% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
+    <!-- STYLES needed to overwrite tiktok embed css -->
+    <!-- <blockquote -->
+      <!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
+      <!-- cite="https://www.tiktok.com/@michalvankodev" -->
+      <!-- data-unique-id="michalvankodev" -->
+      <!-- data-embed-from="embed_page" -->
+      <!-- data-embed-type="creator" -->
+      <!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
+    <!-- > -->
+      <!-- <section> -->
+         <!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
+      <!-- </section> -->
+    <!-- </blockquote> -->
+    <!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
+    {% call sc::social_card_end() %}
 
-  {% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
-  <!-- STYLES needed to overwrite tiktok embed css -->
-  <!-- <blockquote -->
-    <!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
-    <!-- cite="https://www.tiktok.com/@michalvankodev" -->
-    <!-- data-unique-id="michalvankodev" -->
-    <!-- data-embed-from="embed_page" -->
-    <!-- data-embed-type="creator" -->
-    <!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
-  <!-- > -->
-    <!-- <section> -->
-       <!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
-    <!-- </section> -->
-  <!-- </blockquote> -->
-  <!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
-  {% call sc::social_card_end() %}
-
-  {% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
-  <!-- TODO create our own youtube widget which will populate this window on build -->
-  <!-- <iframe -->
-    <!-- class="h-64 aspect-video" -->
-    <!-- id="ytplayer" -->
-    <!-- type="text/html" -->
-    <!-- width="100%" -->
-    <!-- height="100%" -->
-    <!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
-    <!-- frameborder="0" -->
-    <!-- allowfullscreen -->
-  <!-- ></iframe> -->
-  {% call sc::social_card_end() %}
+    {% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
+    <!-- TODO create our own youtube widget which will populate this window on build -->
+    <!-- <iframe -->
+      <!-- class="h-64 aspect-video" -->
+      <!-- id="ytplayer" -->
+      <!-- type="text/html" -->
+      <!-- width="100%" -->
+      <!-- height="100%" -->
+      <!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
+      <!-- frameborder="0" -->
+      <!-- allowfullscreen -->
+    <!-- ></iframe> -->
+    {% call sc::social_card_end() %}
 
 
-  {% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
-  <!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
-  {% call sc::social_card_end() %}
+    {% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
+    <!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
+    {% call sc::social_card_end() %}
 
-</section>
+  </section>
 
-<hr class="border-blue-950 m-5">
+  <hr class="border-blue-950 m-5 lg:hidden">
 
-<section id="showcase">
-  <h2 class="text-blue-950 font-semibold text-2xl m-5">Showcase</h2>
+  <section id="showcase" class="col-span-2">
+    <h2 class="text-blue-950 font-semibold text-2xl m-5 md:text-4xl">Showcase</h2>
 
-  <ul class="mx-5">
-   {% for project in featured_projects %}
-    <li class="my-2">
-      {% include "components/project_preview_card.html" %}
-    </li>
-   {% endfor %}
-  </ul>
+    <ul class="mx-5 md:grid md:grid-cols-2 md:justify-stretch md:items-stretch xl:grid-cols-3">
+     {% for project in featured_projects %}
+      <li class="my-2">
+        {% include "components/project_preview_card.html" %}
+      </li>
+     {% endfor %}
+    </ul>
 
-</section>
+  </section>
+</section> <!-- /.index-container -->
 
 
 {% endblock %}