Responsive design for index page

2024-09-12 15:00:20 +02:00 · 2024-09-12 15:00:20 +02:00 · 255536c681
commit 255536c681
parent 4305da1d0c
6 changed files with 255 additions and 118 deletions
--- 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;
+  }
+}
--- 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",
 			},
 		},
 	},
--- 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 %}
--- 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">
--- 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>

--- a/axum_server/templates/index.html
+++ b/axum_server/templates/index.html
@ -5,6 +5,8 @@
 {% block title %}Introduction{% endblock %}

 {% block content %}
+<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>
@ -23,9 +25,9 @@
      </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">
+    <p class="mx-5 md:text-xl">
      Welcome to my personal website. My name is
      <strong>Michal&nbsp;Vanko</strong>
      and I'm a
@ -36,14 +38,15 @@
      {% 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>

-<section id="blog">
-<h2 class="text-blue-950 font-semibold text-2xl m-5">Blog</h2>
+  <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">
+        <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 %}
@ -62,7 +65,7 @@
  </section>

  <section id="socials">
-  <h2 class="text-blue-950 font-semibold text-2xl m-5">Socials</h2>
+    <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> -->
@ -116,12 +119,12 @@

  </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">
+    <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" %}
@ -130,6 +133,7 @@
    </ul>

  </section>
+</section> <!-- /.index-container -->


 {% endblock %}