Merge pull request #2356 from insectengine/CommonhausFoundation_footer

add CF band to homepage and CF footer

Author: Sanne

_data/projectfooter.yaml

@@ -1,4 +1,4 @@
-footer_text: "Quarkus is open. All dependencies of this project are available under the <a href='https://www.apache.org/licenses/LICENSE-2.0' target='_blank'>Apache Software License 2.0</a> or compatible license.<br /><br />This website was built with <a href='https://jekyllrb.com/' target='_blank'>Jekyll</a>, is hosted on <a href='https://pages.github.com/' target='_blank'>GitHub Pages</a> and is completely open source. If you want to make it better, <a href='https://github.com/quarkusio/quarkusio.github.io' target='_blank'>fork the website</a> and show us what you’ve got."
+footer_text: "Quarkus is open. All dependencies of this project are available under the <a href='https://www.apache.org/licenses/LICENSE-2.0' target='_blank'>Apache Software License 2.0</a> or compatible license. <i class='fab fa-creative-commons'></i><i class='fab fa-creative-commons-by'></i> <a href='https://creativecommons.org/licenses/by/3.0/' target='_blank'>CC by 3.0</a><br /><br />This website was built with <a href='https://jekyllrb.com/' target='_blank'>Jekyll</a>, is hosted on <a href='https://pages.github.com/' target='_blank'>GitHub Pages</a> and is completely open source. If you want to make it better, <a href='https://github.com/quarkusio/quarkusio.github.io' target='_blank'>fork the website</a> and show us what you’ve got."
 
 links:
   - title: Navigation
@@ -28,6 +28,8 @@ links:
         url: /brand
       - page: Wallpapers
         url: /desktopwallpapers
+      - page: Privacy Policy
+        url: https://www.redhat.com/en/about/privacy-policy
 
   - title: Follow Us
     width: 1
@@ -39,6 +41,8 @@ links:
       - page: Mastodon
         url: https://fosstodon.org/@quarkusio
         rel: me
+      - page: Threads
+        url: https://www.threads.com/@quarkusio
       - page: Facebook
         url: https://www.facebook.com/quarkusio
       - page: Linkedin

_includes/CF-footerband.html

@@ -0,0 +1,16 @@
+<div class="content cf-footer">
+  <div class="grid-wrapper">
+    <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>
+  </div>
+</div>

_includes/homepage-commonhaus-band.html

@@ -0,0 +1,12 @@
+<div class="full-width-bg component">
+  <div class="grid-wrapper">
+    <div class="width-5-12 width-12-12-m block-image">
+      <a href="https://www.commonhaus.org/"><img src="https://raw.githubusercontent.com/commonhaus/artwork/main/foundation/brand/project/svg/CF_logo_quarkus_default.svg" alt="Quarkus is part of the Commonhaus Foundation." class="img-md light-only"><img src="https://raw.githubusercontent.com/commonhaus/artwork/main/foundation/brand/project/svg/CF_logo_quarkus_reverse.svg" alt="Quarkus is part of the Commonhaus Foundation." class="img-md dark-only"></a>
+    </div>
+    <div class="grid__item width-7-12 width-12-12-m">
+      <h2>Quarkus is part of the Commonhaus Foundation</h2>
+      <p>In order to fulfill our goal of being a more inclusive and fostering a more collaborative environment, we have moved to the Commonhaus Foundation. This is a step to further solidify our commitment to open-source development and enterprise adoption, addressing the perception that it was overly dependent on a single vendor (Red Hat). This move aims to provide a neutral ground where other organizations and contributors can feel equally valued and involved, ensuring Quarkus continues to thrive, supported by a broad base of contributors from multiple organizations.</p>
+      <p><a href="https://www.commonhaus.org/">Learn more about Commonhaus Foundation.</a></p>
+    </div>
+  </div>
+</div>

_layouts/base.html

@@ -91,7 +91,7 @@
   </div>
 
   {% include project-footer.html %}
-  {% include redhat-footer.html %}
+  {% include CF-footerband.html %}
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
   <script type="text/javascript" src="{{ '/assets/javascript/mobile-nav.js' | relative_url }}"></script>

_layouts/index.html

@@ -7,6 +7,7 @@
   {% include homepage-userstory-callout.html %}
   {% include homepage-performance-band.html %}
   {% include recent-posts-band.html %}
+  {% include homepage-commonhaus-band.html %}
   {% include homepage-newsletter-band.html %}
   {% include feedback-community-band.html %}
 </div>

_sass/includes/cf-footer.scss

@@ -0,0 +1,92 @@
+.cf-footer {
+  background-color: $black;
+  font-size: .75rem;
+  font-weight: 200;
+
+  .grid-wrapper { padding: 1rem 0; 
+
+  @media screen and (max-width: 1024px) {
+      padding: 1.25rem 0;
+    }
+    
+    @media screen and (max-width: 480px) {
+      padding: 1.5rem 0;
+    }
+  }
+
+  .cf-logo {
+    grid-column: 1/4;
+    align-self: center;
+    padding-right: 2rem;
+
+    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;
+    }
+  }
+
+
+
+  .license {
+    grid-column: 4/11;
+    align-self: center;
+    color: $grey-1;
+
+    i {
+    color: $grey-1;
+    }
+
+    a {
+      color: $grey-1;
+      font-size: .75rem;
+      font-weight: 200;
+    }
+
+    @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;
+    }
+  }
+
+  .sponsor {
+    grid-column: 11/12;
+    align-self: center;
+    justify-self: end;
+    color: $grey-1;
+
+    
+    @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;
+    }
+  }
+}

_sass/includes/project-footer.scss

@@ -7,20 +7,21 @@
   @media screen and (min-width: 1024px) {
     background-image: url($baseurl + '/assets/images/bg-footer.png');
     background-repeat: no-repeat;
-    background-size: 100%;
+    background-size: cover;
     }
 }
 
 .project-footer,
 .content.project-footer {
   color: $white;
   background-color: $dark-blue-alt;
-  padding-top: 4rem;
-  padding-bottom: 6rem;
+  padding-top: 2rem;
+  padding-bottom: 3rem;
 
   .logo-wrapper {
     text-align: center;
     display: block;
+
     .project-logo {
       max-width: 18rem;
       @media screen and (max-width: 768px) {
@@ -35,7 +36,7 @@
     font-size: .875rem;
 
     @media screen and (max-width: 1024px) {
-      grid-column: 1/6;
+      grid-column: span 12;
     }
     @media screen and (max-width: 480px) {
       order: 2;
@@ -45,10 +46,12 @@
 
   .project-links {
     font-size: .875rem;
+
     @media screen and (max-width: 1024px) {
-      grid-column: span 2;
+      grid-column: span 3;
     }
-    @media screen and (max-width: 480px) {
+
+    @media screen and (max-width: 768px) {
       order: 1;
       grid-column: span 6;
     }
@@ -66,20 +69,25 @@
     font-size: .875rem;
     padding-left: 2rem;
     margin-left: 2rem;
-    border-left: 2px solid $white;
+    border-left: 1px solid $white;
 
     ul {
       a { font-size: .875rem; }
     }
     @media screen and (max-width: 1024px) {
+    grid-column: span 6;
+    padding-left: 0rem;
+    margin-left: 0rem;
+    border-left: none;
+    }
+
+    @media screen and (max-width: 768px) {
       grid-column: span 12;
-      border-top: 4px solid $white;
+      border-top: 1px solid $white;
       border-left: none;
-      padding: 3rem 0 2rem 0;
-      margin-bottom: 1rem;
+      padding: 2rem 0 0 0;
+      margin-top: 1rem;
       margin-left: 0;
-    }
-    @media screen and (max-width: 480px) {
       order: 3;
     }
   }

assets/css/main.scss

@@ -54,7 +54,7 @@ $baseurl: "{{ site.baseurl }}";
 @import "includes/homepage-features-band";
 @import "includes/recent-posts-band";
 @import "includes/project-footer";
-@import "includes/redhat-footer";
+@import "includes/cf-footer";
 @import "includes/tabs";
 @import "includes/share-page";
 @import "includes/awards-band";