Updates CSS to use flex layout for downloads section

freedomofpress · Dec 12, 2023 · 4dfe836 · 4dfe836
1 parent 887844b
commit 4dfe836
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -86,7 +86,7 @@ a {
 }
 
 .wrapper {
-    width: 960px;
+    max-width: 1280px;
     margin: 0 auto;
     padding: 3rem;
 }
@@ -169,17 +169,25 @@ header ul li {
     margin-bottom: 2rem;
 }
 
+.os-download-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
 .osPrimary {
     width: 50%;
-    float: left;
-    padding: 3rem 3rem 2rem 3rem;
+    min-width: 360px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 3rem;
+    padding-bottom: 2rem;
 }
 
 .osSecondary {
-    width: 33.3%;
-    float: left;
-    padding: 3rem 3rem 0 3rem;
+    width: 25%;
+    min-width: 250px;
+    padding-top: 3rem;
+    padding-bottom: 2rem;
 }
 
 #downloads p {
@@ -273,6 +281,7 @@ header ul li {
 
 #features.wrapper {
     width: auto;
+    max-width: none;
 }
 
 #features .feature .title {

diff --git a/index.html b/index.html
@@ -73,7 +73,7 @@ <h1>Dangerzone</h1>
   <section id="downloads" class="wrapper clearfix">
     <h2>Download Dangerzone 0.5.1</h2>
     <a href="checksums.txt">Checksums (SHA-256)</a>
-    <div class="clearfix">
+    <div class="os-download-container">
       <div class="osPrimary">
         <img src="assets/img/apple-logo.png" alt="Apple Logo">
         <p class="title">MacOS</p>
@@ -96,7 +96,7 @@ <h2>Download Dangerzone 0.5.1</h2>
           </p>
       </div>
     </div>
-    <div class="clearfix">
+    <div class="os-download-container">
       <div class="osSecondary">
         <img src="assets/img/ubuntu-logo.png" alt="Ubuntu Logo">
         <p class="title">Ubuntu / Debian / Linux Mint</p>
@@ -109,16 +109,16 @@ <h2>Download Dangerzone 0.5.1</h2>
         <a class="button"
           href="https://github.com/freedomofpress/dangerzone/blob/v0.5.1/INSTALL.md#fedora">Install</a>
       </div>
-      <div class="osSecondary">
-        <img src="assets/img/linux-logo.png" alt="Linux Logo">
-        <p class="title">Other Linux</p>
-        <a class="button" href="https://github.com/freedomofpress/dangerzone/blob/main/BUILD.md">Build from Source</a>
-      </div>
       <div class="osSecondary">
         <img src="assets/img/qubes-os-logo.png" alt="Linux Logo">
         <p class="title">Qubes OS (Beta)</p>
         <a class="button" href="https://github.com/freedomofpress/dangerzone/blob/v0.5.0/INSTALL.md#qubes-os">Install</a>
       </div>
+      <div class="osSecondary">
+        <img src="assets/img/linux-logo.png" alt="Linux Logo">
+        <p class="title">Other Linux</p>
+        <a class="button" href="https://github.com/freedomofpress/dangerzone/blob/main/BUILD.md">Build from Source</a>
+      </div>
     </div>
   </section>
   <section class="wrapper" id="news">