Merge pull request #2358 from insectengine/CommonhausFoundation_footer

refactored CF bar to use flexbox instead of columns. This should clea…

Author: holly-cummins

_includes/CF-footerband.html

@@ -1,16 +1,18 @@
 <div class="content cf-footer">
-  <div class="grid-wrapper">
+  <div class="flexcontainer">
     <span class="cf-logo">
       <img src="https://raw.githubusercontent.com/commonhaus/artwork/main/foundation/brand/svg/CF_logo_horizontal_single_reverse.svg"/>
     </span>
     <span class="license">
       Copyright © Quarkus. All rights reserved. For details on our trademarks, please visit our <a href="https://www.commonhaus.org/policies/trademark-policy/">Trademark Policy</a> and <a href="https://www.commonhaus.org/trademarks/">Trademark List</a>. Trademarks of third parties are owned by their respective holders and their mention here does not suggest any endorsement or association.
     </span>
-    <span class="sponsor">
-      Sponsored by
-    </span>
-    <span class="sponsor-logo">
-      <a href="https://www.redhat.com/" target="_blank"><img src="{{site.baseurl}}/assets/images/redhat_reversed.svg"></a>
+    <span class="sponsorcontainer">
+      <span class="sponsor">
+        Sponsored by
+      </span>
+      <span class="sponsor-logo">
+        <a href="https://www.redhat.com/" target="_blank"><img src="{{site.baseurl}}/assets/images/redhat_reversed.svg"></a>
+      </span>
     </span>
   </div>
 </div>

_sass/includes/cf-footer.scss

@@ -3,90 +3,69 @@
   font-size: .75rem;
   font-weight: 200;
 
-  .grid-wrapper { padding: 1rem 0; 
+  .flexcontainer {
+  display: flex;
+  padding: 1rem 0;
+  align-items: center;
 
   @media screen and (max-width: 1024px) {
-      padding: 1.25rem 0;
-    }
-    
-    @media screen and (max-width: 480px) {
-      padding: 1.5rem 0;
-    }
+  flex-direction: column;
+  align-items: start;
+  padding: 1.5rem 0;
   }
 
-  .cf-logo {
-    grid-column: 1/4;
-    align-self: center;
+    .cf-logo {
     padding-right: 2rem;
+    align-items: center;
+    img {min-width: 350px;
 
-    img {min-width: 200px;}
-
-    @media screen and (max-width: 1024px) {
-      grid-column: 1/6;
-    }
-    
-    @media screen and (max-width: 480px) {
-      grid-column: 1/13;
-      justify-self: normal;
-      order: 1;
+        @media screen and (max-width: 1024px) {
+        min-width: 300px;
+        }
+      }
     }
-  }
 
+    .license {
+    color: $grey-1;
 
+      i {
+      color: $grey-1;
+      }
 
-  .license {
-    grid-column: 4/11;
-    align-self: center;
-    color: $grey-1;
+      a {
+       color: $grey-1;
+        font-size: .75rem;
+       font-weight: 200;
+      }
 
-    i {
-    color: $grey-1;
+      @media screen and (max-width: 1024px) {
+        justify-self: left;
+        padding: 1rem 0;
+      }
     }
 
-    a {
-      color: $grey-1;
-      font-size: .75rem;
-      font-weight: 200;
-    }
+    .sponsorcontainer {
+    display: flex;
+    flex-direction: row;
+    padding-left: 2rem;
+
 
     @media screen and (max-width: 1024px) {
-      grid-column: 1/13;
-      justify-self: left;
-    }
-    
-    @media screen and (max-width: 480px) {
-      grid-column: 1/13;
-      justify-self: center;
-      order: 2;
+    padding-left: 0;
     }
-  }
 
-  .sponsor {
-    grid-column: 11/12;
-    align-self: center;
-    justify-self: end;
-    color: $grey-1;
+      .sponsor {
+      justify-self: end;
+      color: $grey-1;
+      white-space: nowrap;
+      padding-right: .75rem;
+      }
 
-    
-    @media screen and (max-width: 1024px) {
-      grid-column: 5/12;
-      justify-self: right;
-    }
-    @media screen and (max-width: 480px) {
-      grid-column: 1/6;
-      justify-self: right;
-      order: 3;
-    }
-  }
-  .sponsor-logo {
-    grid-column: 12/13;
-    justify-self: end;
-    align-self: center;
-    img { width: 6rem; max-width: none !important;}
-    @media screen and (max-width: 480px) {
-      grid-column: 6/13;
-      justify-self: left;
-      order: 4;
+      .sponsor-logo {
+      justify-self: end;
+        img { width: 6rem; max-width: none !important;
+        }
+      }
     }
   }
 }