Merge pull request #1892 from insectengine/brandkit

Adding a brand page with basic instructions on how to use the logo an…

_data/projectfooter.yaml

@@ -22,6 +22,8 @@ links:
         url: /security
       - page: Usage
         url: /usage
+      - page: Brand
+        url: /brand
 
   - title: Follow Us
     width: 1

_includes/brand-band.html

@@ -0,0 +1,149 @@
+<div class="component-wrapper">
+  <div class="width-12-12 width-12-12-m">
+  <h2>Quarkus Trademark Usage</h2>
+  <p>The Quarkus project is protected under the Red Hat upstream project <a href="https://www.jboss.org/trademarks.html">trademark guidelines</a>.</p>
+  </div>
+  <div class="width-12-12 width-12-12-m">
+  <h2>Quarkus Logo Assets</h2>
+  <p>There are several versions of the logo. Choose either the vertical or the horizontal version depending on your space requirements.</p>
+  <h4>Background Color</h4>
+  <p>Notice we have several versions of logo coloring for use on different background colors (light and dark options). The "default" logo is for use on a light background while the "reverse" logo is for use on dark backgrounds (notice the color of the interior cube element). The one color versions are designed for use when you have to present it monochromatically (notice extra space in interior cube element).</p>
+  </div>
+</div>
+
+<div class="component-wrapper brand-band">
+  <div class="width-4-12 width-12-12-m brand-block">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_default.png" alt="Quarkus vertical logo file default">
+    <h4>Vertical Logo Default</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_default.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_1280px_default.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_default.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block-black">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_reverse.png" alt="Quarkus vertical logo file reverse">
+    <h4>Vertical Logo Reversed</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_reverse.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_1280px_reverse.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_default.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_black.png" alt="Quarkus vertical logo file black">
+    <h4>Vertical Logo Black</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_black.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_1280px_black.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_black.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block-black">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_white.png" alt="Quarkus vertical logo file white">
+    <h4>Vertical Logo White</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_white.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_1280px_white.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_white.svg">SVG</a></p>
+  </div>
+
+  <div class="width-4-12 width-12-12-m brand-block">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_default.png" alt="Quarkus horizontal logo file default">
+    <h4>Horizontal Logo Default</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_default.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_1280px_default.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_default.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block-black">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_reverse.png" alt="Quarkus horizontal logo file reverse">
+    <h4>Horizontal Logo Reversed</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_reverse.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_1280px_reverse.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_reverse.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_black.png" alt="Quarkus horizontal logo file black">
+    <h4>Horizontal Logo Black</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_black.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_1280px_black.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_black.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block-black">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_white.png" alt="Quarkus horizontal logo file white">
+    <h4>Horizontal Logo Black</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_white.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_1280px_white.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_white.svg">SVG</a></p>
+  </div>
+
+  <div class="width-12-12 width-12-12-m">
+    <h2>Quarkus Icon Assets</h2>
+  </div>
+
+  <div class="width-4-12 width-12-12-m brand-block">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_default.png" alt="Quarkus icon file default">
+    <h4>Icon Default</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_512px_default.png">512px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_1024px_default.png">1024px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_default.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block-black">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_reverse.png" alt="Quarkus icon file reverse">
+    <h4>Icon Reversed</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_reverse.png">256px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_512px_reverse.png">512px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_1024px_reverse.png">1024px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_reverse.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_black.png" alt="Quarkus icon file black">
+    <h4>Icon black</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_512px_black.png">512px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_1024px_black.png">1024px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_black.svg">SVG</a></p>
+  </div>
+  <div class="width-4-12 width-12-12-m brand-block-black">
+    <img src="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_white.png" alt="Quarkus icon file white">
+    <h4>Icon White</h4>
+    <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_white.png">256px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_512px_white.png">512px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_1024px_white.png">1024px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_white.svg">SVG</a></p>
+  </div>
+</div>
+
+<div class="component-wrapper brand-band">
+  <div class="width-12-12 width-12-12-m">
+    <h2>Logo Do's and Don't</h2>
+    <p>The key to keeping the Quarkus brand strong is consistency. We do this by maintaining a uniform way of presenting the logo across all mediums over time. This means we need to respect the spacing requirements and supplied color options.</p>
+
+    <h3>Logo Spacing</h3>
+    <p>The logo needs space to breath so make sure you leave at least an icon's height and width around it. </p>
+  </div>
+  <div class="width-6-12 width-12-12-m ">
+    <img src="{{site.baseurl}}/assets/images/brand/logo_spacing_vert.png" alt="Vertical Logo spacing">
+  </div>
+  <div class="width-6-12 width-12-12-m ">
+    <img src="{{site.baseurl}}/assets/images/brand/logo_spacing_hori.png" alt="Horizontal Logo spacing">
+  </div>
+  <div class="width-12-12 width-12-12-m">
+    <h3>What NOT to do</h3>
+    <p>Make sure you use the logo correctly. Do do silly stuff like...</p>
+  </div>
+  <div class="width-4-12 width-12-12-m ">
+    <img src="{{site.baseurl}}/assets/images/brand/logo_recolor.png" alt="Don't recolor the logo">
+    <p>Don't use other colors in the logo.</p>
+  </div>
+  <div class="width-4-12 width-12-12-m ">
+    <img src="{{site.baseurl}}/assets/images/brand/logo_resize.png" alt="Don't resize the elements of the logo">
+    <p>Don't resize individual elements of the logo.</p>
+  </div>
+  <div class="width-4-12 width-12-12-m ">
+    <img src="{{site.baseurl}}/assets/images/brand/logo_skew.png" alt="Don't stretch or squish the logo">
+    <p>Don't squish or strech the logo to change it's proportions.</p>
+  </div>
+  <div class="width-4-12 width-12-12-m ">
+    <img src="{{site.baseurl}}/assets/images/brand/logo_dropshadow.png" alt="Don't add any dropshadow to the logo">
+    <p>Don't add a dropshadow effect on the logo on a white background.</p>
+  </div>
+  <div class="width-4-12 width-12-12-m ">
+    <img src="{{site.baseurl}}/assets/images/brand/logo_gradient.png" alt="Don't add gradient effects to the logo">
+    <p>Don't add gradient effects to interior of the logo.</p>
+  </div>
+  <div class="width-4-12 width-12-12-m ">
+    <img src="{{site.baseurl}}/assets/images/brand/logo_logotype.png" alt="Don't use the logo type element by itself">
+    <p>Don't use us the logotype by itself.</p>
+  </div>  
+</div>
+
+
+<div class="component-wrapper brand-band">
+  <div class="width-12-12 width-12-12-m">
+    <h2>Quarkus Colors</h2>
+    <p>The Triad of Quarkus brand colors: Quarkus Blue, Dark Blue and Red.</p>
+  </div>
+  <div class="width-4-12 width-12-12-m color-block-blue">
+    <h4>Quarkus Blue</h4>
+    <p>#4695EB</br>
+    Pantone Process Blue U</p>
+  </div>
+  <div class="width-4-12 width-12-12-m color-block-darkblue">
+    <h4>Quarkus Dark Blue</h4>
+    <p>#0D1C2C</br>
+    Pantone 3035 U</p>
+  </div>
+  <div class="width-4-12 width-12-12-m color-block-red">
+    <h4>Quarkus Red</h4>
+    <p>#4695EB</br>
+    Pantone 032 U</p>
+  </div>
+</div>
+

_layouts/brand.html

@@ -0,0 +1,7 @@
+---
+layout: base
+---
+
+{% include title-band.html %}
+
+{% include brand-band.html %}

_sass/includes/brand.css

@@ -0,0 +1,56 @@
+/* Styles for Brand Page */
+
+.brand-band {
+  .brand-block {
+    padding: 4rem;
+    text-align: center;
+
+    img {
+      max-width: 12rem;
+      @media screen and (max-width: $breakpoint-m) {
+        max-width: 100%;
+      }
+    }
+  }
+
+  .brand-block-black {
+    padding: 4rem;
+    background-color: $black;
+    text-align: center;
+
+    h4, a { 
+    color: $white;
+    }
+
+    img {
+      max-width: 12rem;
+      @media screen and (max-width: $breakpoint-m) {
+        max-width: 100%;
+      }
+    }
+  }
+
+  .color-block-blue {
+    background-color: $quarkus-blue;
+    h4, p {
+      color: $white;
+      text-align: center;
+    }
+  }
+
+  .color-block-darkblue {
+    background-color: $dark-blue-alt;
+
+    h4, p {
+      color: $white;
+      text-align: center;
+    }
+  }
+    .color-block-red {
+    background-color: $red;
+    h4, p {
+      color: $white;
+      text-align: center;
+    }
+  }
+}

assets/css/main.scss

@@ -63,4 +63,5 @@ $baseurl: "{{ site.baseurl }}";
 @import "includes/tooltip";
 @import "includes/language-band.scss";
 @import "includes/homepage-userstory-callout";
+@import "includes/brand";