front page remodel (#150)

Author: georgically

.DS_Store

@@ -0,0 +1,2 @@
+[tools]
+hugo = "latest"

.mise.toml

@@ -9,27 +9,26 @@ imagealt = "Website banner of PyLadiesCon 2024 Online. 6th-8th December | Multi-
 
 {{< rawhtml >}}
 <!-- TODO: Update banner -->
-<div style="background: #dedfe2;" class="position-relative overflow-hidden p-1 p-md-3 m-md-1 text-center">
-    <div class="d-md-flex flex-md-equal w-75 my-md-3 mx-auto align-items-center">
+<div style="background-image: url('/img/pyladies-wallpaper.png'); background-size: cover; background-position: center;" class="position-relative overflow-hidden p-1 p-md-3 m-md-1 text-start">
+    <div class="d-md-flex flex-md-equal w-75 my-md-3 mx-auto align-items-center justify-content-start">
       <div class="col-md-5 p-lg-3 mx-auto my-5">
         <h1 class="display-4 fw-normal pink">PyLadiesCon</h1>
         <h4 class="special-font pink">2024 Online</h4>
-        <p class="lead" style="font-weight: bolder;">
-          6th-8th December | Multi-language | Multi-timezone
+        <p class="lead" style="font-weight: bolder;color: white;">
+          6th-8th December<br>
+          Multi-language | Multi-timezone
         </p>
-        <div class="social w-50 mx-auto pt-3">
+        <div class="social w-100 mx-auto pt-3 text-start">
           <a href="https://fosstodon.org/@pyladiescon"><i class="fab fa-mastodon fa-2x px-2" aria-hidden="true"></i></a>
           <a href="https://twitter.com/pyladiescon"><i class="fab fa-twitter fa-2x px-2" aria-hidden="true"></i></a>
           <a href="https://instagram.com/pyladiescon"><i class="fab fa-instagram fa-2x px-2" aria-hidden="true"></i></a>
           <a href="https://www.linkedin.com/company/pyladiescon"><i class="fab fa-linkedin fa-2x px-2" aria-hidden="true"></i></a>
         </div>
-        <div class="w-50 mx-auto mt-2">
+        <div class="w-100 mt-2 text-start" style="color: white;">
           The Call for Proposal (CfP) is <span style="font-weight: 900; text-decoration-line: underline;">closed</span> thank you for the submissions.
         </div>
       </div>
-      <div class="col-md-5 p-lg-1 mx-auto my-5">
-        <img style="width: 60%;" src="img/banner.png">
-      </div>
+      
   </div>
 </div>
 {{< /rawhtml >}}

content/_index.md

@@ -586,3 +586,7 @@ h2 a {
 .pink-div a {
   color: white;
 }
+
+.social a i:hover {
+  color: white !important;
+}