From 65f3ef9efaa7ed82dd3bcf28242044fd55f63485 Mon Sep 17 00:00:00 2001
From: shreyashap <107754587+shreyashap@users.noreply.github.com>
Date: Fri, 3 Jan 2025 17:20:01 +0530
Subject: [PATCH] Fix mobile screen footer center

---
 public/css/landing/style.css | 40 ++++++++++++++++++-
 src/includes/footer.ejs      | 76 ++++++++++++++++++------------------
 2 files changed, 77 insertions(+), 39 deletions(-)

diff --git a/public/css/landing/style.css b/public/css/landing/style.css
index c740aba6..2b6ae42e 100644
--- a/public/css/landing/style.css
+++ b/public/css/landing/style.css
@@ -3303,7 +3303,12 @@
 }
 
 .footer__wrapper-inner-social-subscribe {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
   padding-top: 32px;
+  margin-bottom: 0;
 }
 
 .footer__wrapper-inner-social-subscribe-title {
@@ -3403,11 +3408,23 @@
   will-change: background, color, border, box-shadow;
 }
 
+
+
 .footer__wrapper-inner-social-links {
+  width: 100%;
   display: flex;
-  gap: 37px;
+  align-items: center;
+  justify-content: center;
+} 
+
+.footer__wrapper-inner-social-links-container{
+  display: flex;
+  justify-content: space-around;
+  gap : 60px;
+  margin-right : 15px;
 }
 
+
 .footer__wrapper-inner-social-links a {
   height: 28px;
   width: 28px;
@@ -3459,10 +3476,22 @@
     margin: unset;
   }
 
+
   .footer__wrapper-inner-social {
     display: flex;
     flex-wrap: wrap;
-    width: 80vw;
+    width: 100%;
+  }
+
+  .footer__wrapper-inner-social-subscribe{
+    margin-bottom: 32px;
+  }
+  .footer__wrapper-inner-social-subscribe-title{
+    align-self: center;
+  }
+
+  iframe[title="nightwatch-substack"]{
+    width: 100%;
   }
 
   .footer__wrapper-inner-social-links {
@@ -3531,4 +3560,11 @@
   }
 }
 
+
+@media (min-width : 1070px) {
+  .footer__wrapper-inner-social-links-container{
+    gap : 40px;
+  }
+}
+
 /* Footer section end */
diff --git a/src/includes/footer.ejs b/src/includes/footer.ejs
index 5535d023..6ba8e583 100644
--- a/src/includes/footer.ejs
+++ b/src/includes/footer.ejs
@@ -161,45 +161,47 @@
                   style="position: relative;left: -11px;top: -20px;"></iframe>
         </div>
         <div class="footer__wrapper-inner-social-links">
-          <a href="https://github.com/nightwatchjs/nightwatch" target="_blank">
-            <svg role="img" viewBox="0 0 16 16" version="1.1"
-              shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
-              <title>GitHub</title>
-              <path
-                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
-              </path>
-            </svg>
-          </a>
-          <a href="https://www.youtube.com/@nightwatch_js" target="_blank">
-            <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 1.5 16 13"
-              shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
-              <title>Youtube</title>
-              <path
-                d="M15.841 4.8c0 0-0.156-1.103-0.637-1.587-0.609-0.637-1.291-0.641-1.603-0.678-2.237-0.163-5.597-0.163-5.597-0.163h-0.006c0 0-3.359 0-5.597 0.163-0.313 0.038-0.994 0.041-1.603 0.678-0.481 0.484-0.634 1.587-0.634 1.587s-0.159 1.294-0.159 2.591v1.213c0 1.294 0.159 2.591 0.159 2.591s0.156 1.103 0.634 1.588c0.609 0.637 1.409 0.616 1.766 0.684 1.281 0.122 5.441 0.159 5.441 0.159s3.363-0.006 5.6-0.166c0.313-0.037 0.994-0.041 1.603-0.678 0.481-0.484 0.637-1.588 0.637-1.588s0.159-1.294 0.159-2.591v-1.213c-0.003-1.294-0.162-2.591-0.162-2.591zM6.347 10.075v-4.497l4.322 2.256-4.322 2.241z">
-              </path>
-            </svg>
-          </a>
-          <a href="https://twitter.com/nightwatchjs" target="_blank">
-            <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" shape-rendering="geometricPrecision"
-              text-rendering="geometricPrecision">
-              <title>Twitter</title>
-              <path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/>
-            </svg>
-          </a>
-          <a href="https://discord.com/invite/SN8Da2X" target="_blank">
-            <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 127.14 116"
-              shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
-              <title>Discord</title>
-              <g id="图层_2" data-name="图层 2">
-                <g id="Discord_Logos" data-name="Discord Logos">
-                  <g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White">
-                    <path
-                      d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
+          <div class="footer__wrapper-inner-social-links-container">
+            <a href="https://github.com/nightwatchjs/nightwatch" target="_blank">
+              <svg role="img" viewBox="0 0 16 16" version="1.1"
+                shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+                <title>GitHub</title>
+                <path
+                  d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
+                </path>
+              </svg>
+            </a>
+            <a href="https://www.youtube.com/@nightwatch_js" target="_blank">
+              <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 1.5 16 13"
+                shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+                <title>Youtube</title>
+                <path
+                  d="M15.841 4.8c0 0-0.156-1.103-0.637-1.587-0.609-0.637-1.291-0.641-1.603-0.678-2.237-0.163-5.597-0.163-5.597-0.163h-0.006c0 0-3.359 0-5.597 0.163-0.313 0.038-0.994 0.041-1.603 0.678-0.481 0.484-0.634 1.587-0.634 1.587s-0.159 1.294-0.159 2.591v1.213c0 1.294 0.159 2.591 0.159 2.591s0.156 1.103 0.634 1.588c0.609 0.637 1.409 0.616 1.766 0.684 1.281 0.122 5.441 0.159 5.441 0.159s3.363-0.006 5.6-0.166c0.313-0.037 0.994-0.041 1.603-0.678 0.481-0.484 0.637-1.588 0.637-1.588s0.159-1.294 0.159-2.591v-1.213c-0.003-1.294-0.162-2.591-0.162-2.591zM6.347 10.075v-4.497l4.322 2.256-4.322 2.241z">
+                </path>
+              </svg>
+            </a>
+            <a href="https://twitter.com/nightwatchjs" target="_blank">
+              <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" shape-rendering="geometricPrecision"
+                text-rendering="geometricPrecision">
+                <title>Twitter</title>
+                <path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/>
+              </svg>
+            </a>
+            <a href="https://discord.com/invite/SN8Da2X" target="_blank">
+              <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 127.14 116"
+                shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+                <title>Discord</title>
+                <g id="图层_2" data-name="图层 2">
+                  <g id="Discord_Logos" data-name="Discord Logos">
+                    <g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White">
+                      <path
+                        d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
+                    </g>
                   </g>
                 </g>
-              </g>
-            </svg>
-          </a>
+              </svg>
+            </a>
+          </div>
         </div>
       </div>
     </div>