From f71ee7cf1e631dde411847234e90d9dcb72453d6 Mon Sep 17 00:00:00 2001
From: Meha Bhalodiya <mehabhalodiya@gmail.com>
Date: Tue, 7 Dec 2021 11:53:11 +0530
Subject: [PATCH] Fix bug: responsive home page for litmus exp docs (#3378)

* Fix bug: responsive home page for litmus exp docs Signed-off-by: mehabhalodiya <mehabhalodiya@gmail.com>

* fix: icon alignment and bottom margin
---
 mkdocs/overrides/exp-docs-icons/Youtube.svg |   8 +-
 mkdocs/overrides/home.html                  | 114 ++++++++++++++++----
 2 files changed, 96 insertions(+), 26 deletions(-)

diff --git a/mkdocs/overrides/exp-docs-icons/Youtube.svg b/mkdocs/overrides/exp-docs-icons/Youtube.svg
index 2688e6d8b2e..22b2f0a52fc 100644
--- a/mkdocs/overrides/exp-docs-icons/Youtube.svg
+++ b/mkdocs/overrides/exp-docs-icons/Youtube.svg
@@ -1,7 +1,9 @@
-<svg width="23" height="17" viewBox="0 0 23 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.9027 4.00331C21.9027 4.00331 21.6879 2.4381 21.0265 1.74443C20.1932 0.837318 19.2569 0.837318 18.8187 0.783958C15.7521 0.552734 11.1389 0.552734 11.1389 0.552734H11.1303C11.1303 0.552734 6.51731 0.552734 3.43335 0.783958C3.00384 0.837318 2.06746 0.837318 1.22562 1.74443C0.572753 2.4381 0.357995 4.00331 0.357995 4.00331C0.357995 4.00331 0.134644 5.8531 0.134644 7.694V9.41928C0.134644 11.2602 0.357995 13.1011 0.357995 13.1011C0.357995 13.1011 0.572753 14.6663 1.23421 15.36C2.06746 16.2671 3.16703 16.2404 3.65671 16.3293C5.41774 16.5072 11.1303 16.5605 11.1303 16.5605C11.1303 16.5605 15.752 16.5517 18.8273 16.3204C19.2569 16.2671 20.1932 16.2671 21.0351 15.36C21.6965 14.6663 21.9113 13.1011 21.9113 13.1011C21.9113 13.1011 22.1346 11.2602 22.1346 9.41928V7.694C22.126 5.8531 21.9027 4.00331 21.9027 4.00331ZM8.86254 11.5092V5.11496L14.807 8.32542L8.86254 11.5092Z" fill="url(#paint0_linear)"/>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.73108 13.957L14.678 10.7731L8.73108 7.5625V13.957V13.957Z" fill="#FAFDFF"/>
+<path opacity="0.12" d="M8.73108 7.5625L13.9475 11.1646L14.678 10.7732L8.73108 7.5625V7.5625Z" fill="white"/>
+<path d="M21.7681 6.45057C21.7681 6.45057 21.5533 4.88536 20.8918 4.19169C20.0586 3.28458 19.1222 3.28458 18.6841 3.23122C15.6174 3 11.0043 3 11.0043 3H10.9957C10.9957 3 6.38266 3 3.29871 3.23122C2.8692 3.28458 1.93282 3.28458 1.09098 4.19169C0.438109 4.88536 0.223352 6.45057 0.223352 6.45057C0.223352 6.45057 0 8.30036 0 10.1413V11.8665C0 13.7074 0.223352 15.5483 0.223352 15.5483C0.223352 15.5483 0.438109 17.1136 1.09957 17.8072C1.93282 18.7143 3.03239 18.6877 3.52206 18.7766C5.28309 18.9545 10.9957 19.0078 10.9957 19.0078C10.9957 19.0078 15.6173 18.9989 18.6927 18.7677C19.1222 18.7143 20.0586 18.7143 20.9004 17.8072C21.5619 17.1136 21.7766 15.5483 21.7766 15.5483C21.7766 15.5483 22 13.7074 22 11.8665V10.1413C21.9914 8.30036 21.7681 6.45057 21.7681 6.45057ZM8.7279 13.9565V7.56223L14.6724 10.7727L8.7279 13.9565Z" fill="url(#paint0_linear_1603_669)"/>
 <defs>
-<linearGradient id="paint0_linear" x1="11.1302" y1="0.552734" x2="11.1302" y2="16.5653" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_1603_669" x1="10.9956" y1="3" x2="10.9956" y2="19.0126" gradientUnits="userSpaceOnUse">
 <stop stop-color="#E52D27"/>
 <stop offset="1" stop-color="#BF171D"/>
 </linearGradient>
diff --git a/mkdocs/overrides/home.html b/mkdocs/overrides/home.html
index e006e077021..44f33337d72 100644
--- a/mkdocs/overrides/home.html
+++ b/mkdocs/overrides/home.html
@@ -5,6 +5,28 @@
 
 <!-- Additional styles for landing page -->
 <style>
+   .more-box{
+    margin-left: 20px;
+   }
+   .ex-h1{
+        font-size: 40px;width: 400px;
+    }
+    .ex-p{
+        font-size: 20px; color: #777288;width: 480px;
+    }
+    .more-h1{ font-size: 20px;font-weight:900}
+    .more-p{
+        width: 320px; color: #777288; font-size: 18px;
+    }
+    .lit-p{
+        font-size: 16px; color: #777288; width: 400px;
+    }
+    .ch-div{
+        margin-left: 40px;
+    }
+    .fol{
+        margin: auto;
+    }
     /* Application header should be static for the landing page */
     .md-header {
       position: initial;
@@ -33,6 +55,51 @@
         display: none;
       }
     }
+    @media (max-width:400px) {
+    .more_resource{
+        flex-direction: column;
+        text-align: center;
+    }
+    .more_resource_reverse{
+        flex-direction: column-reverse;
+        text-align: center;
+    }
+    .ex-h1 {
+        font-size:20px;text-align: center;width:fit-content;
+    }
+    .ex-p{
+        font-size: 14px; color: #777288;text-align: center;width:fit-content;
+    }
+    .more_resource .imgimg{
+        width: 50px;
+        height: 50px;
+    }
+.more-box{ margin-left:0;}
+    .mo-img{
+        width: 250px;
+        height: 250px;
+    }
+    .more-h1{ font-size:25px;
+    }
+    .more-p{
+        width:fit-content;
+    }
+    .lit-p{
+        font-size: 14px; color: #777288; width: fit-content;margin:20px;
+    }
+    .chakli{
+        width:275px;
+        height: 275px;
+        margin-top: 10%;
+    }
+    .ch-div{
+        margin-left: 0;
+    }
+    .fol{
+        margin: auto;
+        margin-top:5%;
+    }
+}
 </style>
 <head>
     <meta charset="UTF-8">
@@ -52,12 +119,12 @@
 
 <!-- Header Section -->
 <div style="margin: 0%;">
-    <div style="display: flex;">
-        <div style="margin: auto;">
-            <h1 style="width:400px;font-size: 40px">
+    <div class="more_resource_reverse" style="display: flex;">
+        <div style="margin: auto;justify-content:start;">
+            <h1 class="ex-h1">
                 Experiments in LitmusChaos
             </h1>
-            <p style="font-size: 20px; color: #777288; width: 480px">
+            <p class="ex-p">
                 Litmus experiments for chaos injection
             </p>
             <button
@@ -67,34 +134,35 @@ <h1 style="width:400px;font-size: 40px">
                 background: linear-gradient(133.06deg, #7C6AC8 1.78%, #5B44BA 64.41%); 
                 color: #FFFFFF; border-radius: 4px; 
                 border:1px solid;
+                margin-bottom: 30px;
                 cursor: pointer;
                 font-size: 15px;">
                 Start Learning
             </button>
         </div>
         <div style="margin: auto;">
-            <img src="exp-docs-icons/cloud-provider.svg" style="height:400px;" alt="cloud provider" />
+            <img class="mo-img" src="exp-docs-icons/cloud-provider.svg" style="height:400px;" alt="cloud provider" />
         </div>
     </div>
 
     <!-- More Resource Section -->
     <div style="background-color: #F9FAFC;">
         <div style="padding: 40px; margin: auto;">
-            <div style="display: flex; justify-content: space-between;">
-                <div style="display: flex; margin: auto;">
-                    <img src="exp-docs-icons/faqs.svg" alt="faqs"/>
-                    <div style="margin-left: 20px;">
-                        <a href="experiments/faq/install"><h1 style="color: blue; text-decoration: underline; cursor: pointer;">FAQs</h1></a>
-                        <p style="width: 280px; color: #777288; font-size: 18px;">
+            <div class="more_resource" style="display: flex; justify-content: space-between;">
+                <div class="more_resource" style="display: flex; margin: auto;">
+                    <img style="margin:auto;" class="imgimg" src="exp-docs-icons/faqs.svg" alt="faqs"/>
+                    <div class="more-box">
+                        <a href="experiments/faq/install"><h1 class="more-h1" style="color: blue; text-decoration: underline; cursor: pointer;">FAQs</h1></a>
+                        <p class="more-p">
                             All common Frequently Asked Questions curated in one place
                         </p>
                     </div>
                 </div>
-                <div style="display: flex; margin: auto;">
-                    <img src="exp-docs-icons/troubleshooting.svg" alt="troubleshooting"/>
-                    <div style="margin-left: 20px;">
-                        <a href="experiments/troubleshooting/install"><h1 style="color: blue; text-decoration: underline; cursor: pointer;">Troubleshooting</h1></a>
-                        <p style="width: 320px; color: #777288; font-size: 18px;">
+                <div class="more_resource" style="display: flex; margin: auto;">
+                    <img style="margin:auto;"  class="imgimg" src="exp-docs-icons/troubleshooting.svg" alt="troubleshooting"/>
+                    <div class="more-box">
+                        <a href="experiments/troubleshooting/install"><h1 class="more-h1" style="color: blue; text-decoration: underline; cursor: pointer;">Troubleshooting</h1></a>
+                        <p class="more-p">
                             Know more about troubleshooting of common issues
                         </p>
                     </div>
@@ -103,12 +171,12 @@ <h1 style="width:400px;font-size: 40px">
         </div>
     </div>
     <div style="margin: 0%;">
-        <div style="display: flex; padding:20px 0px">
+        <div class="more_resource" style="display: flex; padding:20px 0px">
             <div style="margin: auto;">
                 <h3 style="font-size: 22px;">
                     Do you like our Litmus Docs?
                 </h3>
-                <p style="font-size: 16px; color: #777288; width: 400px">
+                <p class="lit-p">
                     We are always trying to improve our docs. If you like the documentation we would want you to become our stargazer.
                 </p>
                 <button
@@ -126,9 +194,9 @@ <h3 style="font-size: 22px;">
                     </div> 
                 </button>
             </div>
-            <div style=" display: inline-flex; margin: auto;">
-                <img src="exp-docs-icons/chaos-bird.svg" alt="chaos-bird"  />
-                <div style="margin-left: 40px;">
+            <div class="more_resource"  style=" display: inline-flex; margin: auto;">
+                <img class="chakli" src="exp-docs-icons/chaos-bird.svg" alt="chaos-bird"  />
+                <div class="ch-div">
                     <img src="exp-docs-icons/cncf.svg" alt="cncf" />
                     <p style="text-align: center;font-size: 16px;">
                         We are a <a href="https://www.cncf.io/" target="_", style="color: blue; text-decoration: underline; cursor: pointer;">CNCF</a> Sandbox project.</p>
@@ -138,12 +206,12 @@ <h3 style="font-size: 22px;">
         </div>
         <hr style="height: 1px; border: 2; border-top: 2px solid #E6E8F0;"/>
         <br>
-        <div style="display: flex;padding:15px 0px">
+        <div class="more_resource"  style="display: flex;padding:15px 0px">
             <div style="display: flex;margin: auto">
                 <img src="exp-docs-icons/litmus.svg" alt="litmus"/>
                 <p style="font-size: 14px; margin-top: 15px; margin-left: 10px; color: #777288;"> © 2021 LitmusChaos Authors</p>
             </div>
-            <div style="display: inline-flex;margin: auto">
+            <div class="fol" style="display: inline-flex;">
                 <p style="font-size: 14px;margin-top:0.5px; color: #777288;"> Follow us on:</p>
                 <a target="_" href="https://slack.litmuschaos.io/"><img src="exp-docs-icons/Slack.svg" alt="slack" style="margin-left: 10px;"/></a>
                 <a target="_" href="https://github.com/litmuschaos/litmus"><img src="exp-docs-icons/Github.svg" alt="github" style="margin-left: 10px;"/></a>