feat: desktop styling of country page

16-countries-page-from-api/src/main/resources/public/output.css

@@ -556,6 +556,10 @@ video {
   display: grid;
 }
 
+.contents {
+  display: contents;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -592,15 +596,19 @@ video {
   height: 350px;
 }
 
-.h-max {
-  height: -moz-max-content;
-  height: max-content;
-}
-
 .h-full {
   height: 100%;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -633,21 +641,8 @@ video {
   width: 100vw;
 }
 
-.w-max {
+.w-full {
-  width: -moz-max-content;
+  width: 100%;
-  width: max-content;
-}
-
-.max-w-screen-sm {
-  max-width: 640px;
-}
-
-.max-w-screen-md {
-  max-width: 768px;
-}
-
-.max-w-screen-lg {
-  max-width: 1024px;
 }
 
 .max-w-screen-xl {
@@ -658,6 +653,10 @@ video {
   flex: 1 1 0%;
 }
 
+.flex-none {
+  flex: none;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -688,6 +687,10 @@ video {
   place-content: center;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-center {
   align-items: center;
 }
@@ -744,6 +747,10 @@ video {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
+.place-self-center {
+  place-self: center;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -775,6 +782,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -918,6 +930,26 @@ html {
 }
 
 @media (min-width: 768px) {
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
+  .md\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
+  .md\:row-end-\[-1\] {
+    grid-row-end: -1;
+  }
+
+  .md\:row-end-3 {
+    grid-row-end: 3;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:grid {
     display: grid;
   }
@@ -926,86 +958,114 @@ html {
     height: 8rem;
   }
 
-  .md\:w-96 {
+  .md\:h-full {
-    width: 24rem;
+    height: 100%;
   }
 
-  .md\:w-60 {
+  .md\:h-screen {
-    width: 15rem;
+    height: 100vh;
+  }
+
+  .md\:h-max {
+    height: -moz-max-content;
+    height: max-content;
+  }
+
+  .md\:h-3\/5 {
+    height: 60%;
+  }
+
+  .md\:h-\[375px\] {
+    height: 375px;
+  }
+
+  .md\:h-60 {
+    height: 15rem;
+  }
+
+  .md\:h-48 {
+    height: 12rem;
+  }
+
+  .md\:h-\[400px\] {
+    height: 400px;
   }
 
   .md\:w-1\/4 {
     width: 25%;
   }
 
-  .md\:w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .md\:w-1\/2 {
-    width: 50%;
-  }
-
   .md\:w-full {
     width: 100%;
   }
 
+  .md\:w-\[375px\] {
+    width: 375px;
+  }
+
+  .md\:w-\[450px\] {
+    width: 450px;
+  }
+
+  .md\:w-\[455px\] {
+    width: 455px;
+  }
+
+  .md\:w-9\/12 {
+    width: 75%;
+  }
+
   .md\:w-10\/12 {
     width: 83.333333%;
   }
 
-  .md\:grid-flow-col {
+  .md\:w-11\/12 {
-    grid-auto-flow: column;
+    width: 91.666667%;
   }
 
-  .md\:grid-cols-2 {
+  .md\:w-32 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    width: 8rem;
-  }
-
-  .md\:grid-cols-\[auto-fill\] {
-    grid-template-columns: auto-fill;
-  }
-
-  .md\:grid-cols-\[repeat\(autofill\2c _250px\)\] {
-    grid-template-columns: repeat(autofill, 250px);
-  }
-
-  .md\:grid-cols-\[repeat\(auto-fill\2c _250px\)\] {
-    grid-template-columns: repeat(auto-fill, 250px);
   }
 
   .md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
     grid-template-columns: repeat(auto-fill, 275px);
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
 
-  .md\:place-content-center {
+  .md\:flex-col {
-    place-content: center;
+    flex-direction: column;
   }
 
   .md\:items-center {
     align-items: center;
   }
 
-  .md\:justify-between {
+  .md\:justify-center {
-    justify-content: space-between;
+    justify-content: center;
   }
 
   .md\:justify-around {
     justify-content: space-around;
   }
 
-  .md\:px-10 {
+  .md\:gap-y-10 {
-    padding-left: 2.5rem;
+    row-gap: 2.5rem;
-    padding-right: 2.5rem;
   }
 
-  .md\:px-12 {
+  .md\:gap-x-2 {
-    padding-left: 3rem;
+    -moz-column-gap: 0.5rem;
-    padding-right: 3rem;
+         column-gap: 0.5rem;
+  }
+
+  .md\:place-self-center {
+    place-self: center;
   }
 
   .md\:px-20 {
@@ -1013,18 +1073,31 @@ html {
     padding-right: 5rem;
   }
 
-  .md\:px-24 {
+  .md\:py-10 {
-    padding-left: 6rem;
+    padding-top: 2.5rem;
-    padding-right: 6rem;
+    padding-bottom: 2.5rem;
   }
 
-  .md\:text-xl {
+  .md\:py-1 {
-    font-size: 1.25rem;
+    padding-top: 0.25rem;
-    line-height: 1.75rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .md\:pr-1 {
+    padding-right: 0.25rem;
+  }
+
+  .md\:pr-2 {
+    padding-right: 0.5rem;
   }
 
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
 }

16-countries-page-from-api/src/main/resources/templates/country.html

@@ -13,7 +13,7 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!-- Place favicon.ico in the root directory -->
   </head>
-  <body class="bg-very-light-gray">
+  <body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true">
     <!--[if lt IE 8]>
       <p class="browserupgrade">
         You are using an <strong>outdated</strong> browser. Please
@@ -22,38 +22,61 @@
       </p>
     <![endif]-->
     <header
-      class="h-20 flex flex-row justify-between items-center px-4 shadow-md"
+      class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center"
+      th:replace="~{index :: header}"
     >
-      <h1 class="font-bold">Where in the world?</h1>
+      <div
+        class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
+      >
+        <a th:href="@{~/}" href="index.html"
+          ><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
+        </a>
+        <div class="flex flex-row gap-x-2">
+          <img
+            src="../public/icons/half-moon-shape-svgrepo-com.svg"
+            class="w-4"
+            alt=""
+          />
           <p>Dark Mode</p>
+        </div>
+      </div>
     </header>
-    <nav class="h-32 px-8 py-10">
+    <nav
-      <a
+      class="flex flex-none h-32 px-8 py-10 max-w-screen-xl place-self-center w-full md:h-48 items-center"
-        href="/"
     >
+      <a href="index.html" th:href="@{~/}" class="h-fit">
         <div
           class="h-9 w-28 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2 flex flex-row gap-x-3 place-content-center"
         >
-              <img src="../public/icons/back-svgrepo-com.svg"
+          <img
+            src="../public/icons/back-svgrepo-com.svg"
             class="w-4 h-5"
-                   alt="" />
+            alt=""
+          />
           <p>Back</p>
         </div>
-      </a
+      </a>
-      >
     </nav>
 
-    <main class="px-8 pb-10 flex flex-col gap-y-10">
+    <main
+      class="px-8 pb-10 flex flex-col gap-y-10 md:grid md:grid-cols-2 md:h-max md:place-self-center w-full max-w-screen-xl"
+    >
       <img
         src="https://flagcdn.com/de.svg"
         th:src="${country.flag}"
         th:alt="|flag of ${country.name}|"
-        class="h-60"
+        class="w-full md:w-10/12"
       />
-      <h1 class="text-2xl font-bold pt-2 -mb-4" th:text="${country.name}">
+      <section
+        id="stat-block"
+        class="contents md:grid md:grid-cols-2 md:gap-y-10 md:py-10"
+      >
+        <h1
+          class="text-2xl font-bold pt-2 -mb-4 md:col-span-full md:text-3xl"
+          th:text="${country.name}"
+        >
           Germany
         </h1>
-
         <dl class="space-y-2" id="main-stats">
           <div class="flex">
             <dt class="font-bold mr-2">Native name:</dt>
@@ -100,14 +123,15 @@
             </dd>
           </div>
         </dl>
-      <section id="neighboring-countries">
+        <section
-        <h2 class="font-bold text-lg">Border Countries:</h2>
+          id="neighboring-countries"
-        <div
+          class="md:col-span-full md:flex md:flex-row md:items-center md:gap-x-2"
-            class="grid grid-cols-3 gap-2"
         >
+          <h2 class="font-bold text-lg md:pr-2">Border Countries:</h2>
+          <div class="grid grid-cols-3 gap-2">
             <a
               href="/"
-                class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2"
+              class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1"
               th:each="border : ${borderCountries}"
               th:text="${border}"
               th:href="@{~/country(countryName=${border})}"
@@ -115,6 +139,7 @@
             >
           </div>
         </section>
+      </section>
     </main>
   </body>
 </html>

16-countries-page-from-api/src/main/resources/templates/index.html

@@ -12,7 +12,7 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!-- Place favicon.ico in the root directory -->
   </head>
-  <body class="bg-very-light-gray" hx-boost="true">
+  <body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true">
     <!--[if lt IE 8]>
       <p class="browserupgrade">
         You are using an <strong>outdated</strong> browser. Please
@@ -21,12 +21,14 @@
       </p>
     <![endif]-->
     <header
-      class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center"
+      class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none"
     >
       <div
         class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
       >
-        <h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
+        <a th:href="@{~/}" href="index.html"
+          ><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
+        </a>
         <div class="flex flex-row gap-x-2">
           <img
             src="../public/icons/half-moon-shape-svgrepo-com.svg"
@@ -38,7 +40,7 @@
       </div>
     </header>
     <nav
-      class="flex flex-col md:flex-row px-6 my-4 justify-around h-48 md:h-32 md:items-center"
+      class="flex flex-col flex-none md:flex-row px-6 my-4 justify-around h-48 md:h-32 md:items-center"
     >
       <form
         method="get"
@@ -116,7 +118,10 @@
         th:id="${country.alpha3Code}"
         class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
       >
-        <a href="" th:href="@{~/country(countryName=${country.name})}">
+        <a
+          href="country.html"
+          th:href="@{~/country(countryName=${country.name})}"
+        >
           <img
             src="https://flagcdn.com/de.svg"
             th:src="${country.flag}"