From 6cd6c8cc3eb03bfd361d8dc0d7b81725e75b7351 Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Wed, 28 Jun 2023 12:04:22 +0000
Subject: [PATCH] feat(12): desktop styling

---
 .../src/main/resources/templates/index.html   | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
index b636ae9..4026ae2 100644
--- a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
+++ b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
@@ -38,32 +38,39 @@
     <!-- main container -->
     <div class="bg-pale-blue w-screen h-screen grid place-content-center">
       <div
-        class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px]"
+        class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px] md:w-[450px] md:h-[700px]"
       >
-        <img src="public/images/illustration-hero.svg" class="rounded-t-xl w-full" />
-        <h1 class="text-xl font-extrabold my-7">Order Summary</h1>
+        <img
+          src="public/images/illustration-hero.svg"
+          class="rounded-t-xl w-full"
+        />
+        <h1 class="text-xl font-extrabold my-7 md:text-3xl md:mt-10">Order Summary</h1>
 
-        <p class="text-center text-desaturated-blue px-8 mb-5">
+        <p class="text-center text-desaturated-blue px-8 mb-5 md:px-12">
           You can now listen to millions of songs, audiobooks, and podcasts on
           any device anywhere you like!
         </p>
 
         <div
-          class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row"
+          class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row md:w-[calc(100%-6rem)] md:h-24 md:items-center md:p-6"
         >
-          <img src="public/images/icon-music.svg">
-          <div class="flex flex-col grow pl-3 justify-center">
-            <p class="font-bold text-sm text-dark-blue">Annual Plan</p>
-            <p class="text-desaturated-blue text-sm">$59.99/year</p>
+          <img src="public/images/icon-music.svg"
+               class="md:w-12 md:h-12"
+          />
+          <div class="flex flex-col grow pl-3 md:pl-6 justify-center">
+            <p class="font-bold text-sm text-dark-blue md:text-base">Annual Plan</p>
+            <p class="text-desaturated-blue text-sm md:text-base">$59.99/year</p>
           </div>
-          <button
-            class="underline text-xs text-bright-blue font-bold"
-          >Change</button>
+          <button class="underline text-xs text-bright-blue font-bold">
+            Change
+          </button>
         </div>
 
         <button
-          class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)]"
-        >Proceed to Payment</button>
+          class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8"
+        >
+          Proceed to Payment
+        </button>
         <button class="text-desaturated-blue font-bold">Cancel Order</button>
       </div>
     </div>