Adjust width to be at 80% (#171)

* Adjust width to be at 80% * Tweak margin
pyladies · Nov 25, 2024 · d25897a · d25897a
1 parent 372c480
commit d25897a
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 31 deletions.
diff --git a/content/_index.md b/content/_index.md
@@ -10,29 +10,28 @@ imagealt = "Website banner of PyLadiesCon 2024 Online. 6th-8th December | Multi-
 {{< rawhtml >}}
 <!-- TODO: Update banner -->
 <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;color: white;">
-          6th-8th December<br>
-          Multi-language | Multi-timezone
-        </p>
-        <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://bsky.app/profile/pyladiescon.bsky.social"><i class="fab fa-bluesky 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>
-          <a href="https://twitter.com/pyladiescon"><i class="fab fa-twitter fa-2x px-2" aria-hidden="true"></i></a>
-        </div>
-        <div class="w-100 mt-2 text-start" style=color:#fff>Check the <a class=text-white href=/schedule>Schedule!</a></div>
-        <div class="w-100 mt-2 text-start">
-          <a href="https://pretix.eu/pyladiescon/2024">
-            <button type="button" class="btn btn-pink btn-block mb-2 rainbow rainbow-1" data-toggle="collapse">REGISTER</button>
-          </a>
-        </div>
+  <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;color: white;">
+        6th-8th December<br>
+        Multi-language | Multi-timezone
+      </p>
+      <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://bsky.app/profile/pyladiescon.bsky.social"><i class="fab fa-bluesky 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>
+        <a href="https://twitter.com/pyladiescon"><i class="fab fa-twitter fa-2x px-2" aria-hidden="true"></i></a>
       </div>
-
+      <div class="w-100 mt-2 text-start" style=color:#fff>Check the <a class=text-white href=/schedule>Schedule!</a></div>
+      <div class="w-100 mt-2 text-start">
+        <a href="https://pretix.eu/pyladiescon/2024">
+          <button type="button" class="btn btn-pink btn-block mb-2 rainbow rainbow-1" data-toggle="collapse">REGISTER</button>
+        </a>
+      </div>
+    </div>
   </div>
 </div>
 {{< /rawhtml >}}
@@ -129,13 +128,13 @@ Know the sponsors of our conference.
   "https://numberly.com"
   "booster_numberly.png"
   >}}
-{{% /logosrow %}}
 
 {{< sponsorlogo
   "Auth0"
   "https://auth0.com/"
   "booster_auth0.png"
   >}}
+
 {{% /logosrow %}}
 
 ##  Partner Sponsor
@@ -180,6 +179,8 @@ Know the sponsors of our conference.
 
 {{% /logosrow %}}
 
+{{% /mainrectangle %}}
+
 
 {{% pinkrectangle %}}
 

diff --git a/content/about/_index.md b/content/about/_index.md
@@ -85,7 +85,7 @@ more details on how to volunteer!
 {{< pink >}}
 <!-- Organisers carousel -->
 <div class="d-md-flex flex-md-equal w-100 ps-md-3 bg-pink px-5">
-  <div class="bg-pink mr-md-3 pt-3 px-3 mx-5 py-md-5 px-md-5">
+  <div class="bg-pink mr-md-3 pt-3 px-3 py-md-5 px-md-5">
     <div class="row">
       {{< organizer
         "Mariatta"
@@ -147,7 +147,7 @@ more details on how to volunteer!
 {{< rawhtml >}}
 <div class="d-md-flex flex-md-equal w-100">
     <img class="w-100" src="/img/about-photo-3.png" alt="A black woman sitting in front of a server room while working on a laptop.">
-  </div>
+</div>
 {{< /rawhtml >}}
 
 

diff --git a/themes/pyladies/assets/css/main.css b/themes/pyladies/assets/css/main.css
@@ -527,6 +527,10 @@ h2 a {
   width: 60%;
 }
 
+.w-80 {
+  width: 80%;
+}
+
 /* For columns shortcodes */
 .md-columns {
   display: flex;

diff --git a/themes/pyladies/layouts/_default/list.html b/themes/pyladies/layouts/_default/list.html
@@ -3,7 +3,7 @@
   {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
   {{ $dateHuman := .Date | time.Format ":date_long" }}
   <!--<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>-->
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+  <div class="d-md-flex flex-md-equal w-80 my-md-3 ps-md-3">
     <div class="bg-light me-md-3 py-3 px-3 py-md-5 px-md-5 overflow-hidden">
       {{ .Content }}
   {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}

diff --git a/themes/pyladies/layouts/_default/single.html b/themes/pyladies/layouts/_default/single.html
@@ -3,7 +3,7 @@
   {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
   {{ $dateHuman := .Date | time.Format ":date_long" }}
   <!--<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>-->
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+  <div class="d-md-flex flex-md-equal w-80 my-md-3 ps-md-3">
     <div class="bg-light me-md-3 py-3 px-3 py-md-5 px-md-5 overflow-hidden">
       {{ .Content }}
     </div>

diff --git a/themes/pyladies/layouts/news/single.html b/themes/pyladies/layouts/news/single.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+  <div class="d-md-flex flex-md-equal w-80 my-md-3 ps-md-3">
     <div class="bg-light me-md-3 py-3 px-3 py-md-5 px-md-5 overflow-hidden">
       <h1>
       {{ .Title }}

diff --git a/themes/pyladies/layouts/shortcodes/mainrectangle.html b/themes/pyladies/layouts/shortcodes/mainrectangle.html
@@ -1,6 +1,6 @@
-<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+<div class="d-md-flex flex-md-equal w-80 my-md-3 ps-md-3 w-100">
   <div class="bg-light me-md-3 py-3 px-3 py-md-5 px-md-5 overflow-hidden">
-  <div class="my-3 py-3 px-5">
+  <div class="my-3 py-3 px-5 w-80">
       {{ .Inner }}
   </div>
   </div>

diff --git a/themes/pyladies/layouts/shortcodes/pinkcolumns.html b/themes/pyladies/layouts/shortcodes/pinkcolumns.html
@@ -1,6 +1,6 @@
 <div class="rowcolumn">
 {{ range split .Inner "<--->" }}
-<div class="pinkcolumn">
+<div class="pinkcolumn mx-5">
 {{ printf "<div class=\"markdown-inner\">" | htmlUnescape | safeHTML }}
 {{ . | safeHTML }}
 {{ printf "</div>" | htmlUnescape | safeHTML }}