Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Feb 15, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6eb7054
Adding a brand page with basic instructions on how to use the logo an…
insectengine Feb 12, 2024
8961d22
text edits and add brand link to footer navigation
insectengine Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions _data/projectfooter.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ links:
url: /security
- page: Usage
url: /usage
- page: Brand
url: /brand

- title: Follow Us
width: 1
Expand Down
149 changes: 149 additions & 0 deletions _includes/brand-band.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

7 changes: 7 additions & 0 deletions _layouts/brand.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
layout: base
---

{% include title-band.html %}

{% include brand-band.html %}
56 changes: 56 additions & 0 deletions _sass/includes/brand.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
1 change: 1 addition & 0 deletions assets/css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,5 @@ $baseurl: "{{ site.baseurl }}";
@import "includes/tooltip";
@import "includes/language-band.scss";
@import "includes/homepage-userstory-callout";
@import "includes/brand";

Binary file added assets/images/brand/logo_dropshadow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/logo_gradient.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/logo_logotype.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/logo_recolor.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/logo_resize.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/logo_skew.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/logo_spacing_hori.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/logo_spacing_vert.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_1024px_black.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_1024px_default.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_1024px_reverse.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_1024px_white.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_256px_black.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_256px_default.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_256px_reverse.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_256px_white.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_512px_black.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_512px_default.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_512px_reverse.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_icon_512px_white.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions assets/images/brand/quarkus_icon_black.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/brand/quarkus_icon_default.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/brand/quarkus_icon_reverse.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/brand/quarkus_icon_white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_logo_horizontal_1280px_black.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/brand/quarkus_logo_horizontal_1280px_default.png
View file
Open in desktop
Binary file added assets/images/brand/quarkus_logo_horizontal_1280px_reverse.png
View file
Open in desktop
Binary file added assets/images/brand/quarkus_logo_horizontal_1280px_white.png
View file
Open in desktop
Binary file added assets/images/brand/quarkus_logo_horizontal_450px_black.png
View file
Open in desktop
Binary file added assets/images/brand/quarkus_logo_horizontal_450px_default.png
View file
Open in desktop
Binary file added assets/images/brand/quarkus_logo_horizontal_450px_reverse.png
View file
Open in desktop
Binary file added assets/images/brand/quarkus_logo_horizontal_450px_white.png
View file
Open in desktop
Loading
Loading