dockeruser
/
almalinux.org
mirror of https://github.com/AlmaLinux/almalinux.org.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #618 from sboldyreva/branding 

Draft of the Branding page
staging
benny Vasquez 3 months ago
committed by GitHub
parent
6f0dba2fcc 59e4595627
commit
e917f45314
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
8 changed files with 567 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 92
      assets/css/bundle.css
  2. 6
      content/branding.md
  3. 462
      layouts/branding/single.html
  4. 1
      layouts/partials/common/footer.html
  5. 5
      layouts/partials/common/nav.html
  6. BIN
      static/branding/Almalinux-logo-v2-4.png
  7. BIN
      static/branding/Almalinux-logo-white-v2.png
  8. BIN
      static/branding/almalinux_logo_square.png

92
assets/css/bundle.css
View File

@ -1079,3 +1079,95 @@ a {
margin:0 0 0 1rem;
list-style-type: none;
}
.al-body-container {
padding: 40px 20px;
}
.branding {
padding: 40px 20px;
}
.al-index-backed-by {
display: flex;
flex-direction: column;
padding: 40px 20px;
}
.text-center {
text-align: center;
}
.pb-2 {
padding-bottom: 2rem;
}
.border-bottom {
border-bottom: 1px solid #14598a !important;
}
.al-article-content {
padding: 0 !important;
}
.group-logo {
display: flex;
margin-top: 20px;
}
.branding-logo {
display: flex;
flex-direction: column;
width: 50%;
}
.almalinux-logo {
width: 45%;
height: 100%;
}
.group-icon {
display: flex;
justify-content: space-between;
}
.branding-icon {
display: flex;
flex-direction: column;
}
.color-palette-container {
display: flex;
justify-content: space-between;
}
.color-palette-column {
display: flex;
flex-direction: column;
width: 17%;
margin-right: 20px;
}
.color-palette-item {
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 5px;
}
.font-branding {
display: flex;
justify-content: center;
}
.font-item {
display: flex;
flex-direction: column;
align-items: center;
}
.font-line {
height: 80px;
border-right: 2px solid #ffffff;
padding-left: 15px;
}

6
content/branding.md
View File

@ -0,0 +1,6 @@
---
title: "branding"
type: branding
---
branding content

462
layouts/branding/single.html
View File

@ -0,0 +1,462 @@
{{ define "main" }}
<style>
</style>
<div class="al-body-container">
<section class="al-page-index">
<div class="al-index-branding-container">
<div class="container al-py-lg">
<div class="branding" >
<h1 class="pb-2 text-center">AlmaLinux Branding</h1>
<p class="al-wysiwyg p">
These are the official brand guidelines of the AlmaLinux OS brand and assets. We want to make it easy for anyone to integrate AlmaLinux OS in all media formats while respecting our brand and legal/licensing restrictions.
<br><br>You can find and download full brandbook and more logo & icon options in the AlmaLinux OS <a href="https://github.com/AlmaLinux/almalinux.org/tree/master/static/branding">GitHub repository</a>.
</p>
<small class="al-wysiwyg p"><b>
Note that by using these resources, you accept our Terms of Service.
Usage of these resources may also be covered by the AlmaLinux OS End User Agreement and our Privacy Policy.
</b>
</small>
</div>
<div class="al-index-backed-by al-py-lg" >
<h2 class="pb-2 text-center border-bottom" class="border-bottom">AlmaLinux OS Logo</h2>
<div class="al-article-content pb-3 al-wysiwyg" class="al-article-content">
<section>
<p>
We are very proud of our logo, and we require that you follow these guidelines to ensure it always looks its
best.
<ul>
<li>The AlmaLinux OS Logo should be used mostly with the Science Blue and Atlantis colors.</li>
<li>The negative AlmaLinux OS Logo can be used on dark image backgrounds with high contrast between them.</li>
<li>The AlmaLinux OS Logo has a neat proportion of 1:5.2 Ratio width. These proportions were chosen carefully and
they are not to be changed.</li>
<li>The AlmaLinux OS Logo should never be smaller than 160px in digital or 45mm in print.</li>
<li>It is important that the appearance of the logo remains consistent. The logo should not be misiterpreted, modified, or added to. No attemp should be made to alter the logo in any way. Its orientation, color and composition should remain as indicated and there are no execptions.</li>
</ul>
</p>
<div class="group-logo" class="group-logo">
<div class="branding-logo" class="branding-logo">
<img loading="lazy" src="/branding/Almalinux-logo-v2.svg" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/Almalinux-logo-v2.svg" style="margin-top: 10px;">Download SVG</a>
</div>
<div div class="branding-logo" class="branding-logo">
<img loading="lazy" src="/branding/Almalinux-logo-white-v2.png" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/Almalinux-logo-white-v2.png" style="margin-top: 10px;">Download SVG</a>
</div>
</div>
<div class="group-logo" class="group-logo">
<div class="branding-logo" class="branding-logo">
<img loading="lazy" src="/branding/almalinux_logo_square.png" alt="AlmaLinux logo" class="almalinux-logo" style="width: 45%; height: 100%;">
<a href="" style="margin-top: 10px;">Download SVG</a>
</div>
<div class="branding-logo" class="branding-logo">
<img loading="lazy" src="/branding/Almalinux-logo-v2-4.png" alt="AlmaLinux logo" class="almalinux-logo" style="width: 45%; height: 100%;">
<a href="" style="margin-top: 10px;">Download SVG</a>
</div>
</div>
</section>
</div>
</div>
<div class="al-index-backed-by al-py-lg" >
<h2 class="pb-2 text-center border-bottom" class="border-bottom">AlmaLinux OS Icon</h2>
<div class="al-article-content pb-3 al-wysiwyg" class="al-article-content">
<section>
<ul>
<li>The AlmaLinux OS icon should be used as the official Favicon only in Science Blue.</li>
<li>The negative icon should be used for social as user/company image such as Whatsapp, Facebook, Linkendln, etc.</li>
<li>Monochrome version icon should be used on documents that are printed in black & white.</li>
<li>The AlmaLinux OS icon should never be smaller than 22px in digital or 6.3mm in print.</li>
</ul>
<div class="group-icon" class="group-icon">
<div class="branding-icon" class="branding-icon">
<img loading="lazy" src="/branding/AlmaLinux Icon.svg" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/AlmaLinux%20Icon.svg" style="margin-top: 10px;">Download SVG</a>
</div>
<div class="branding-icon" class="branding-icon">
<img loading="lazy" src="/branding/AlmaLinux Icon Circle.svg" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/AlmaLinux%20Icon%20Circle.svg" style="margin-top: 10px;">Download SVG</a>
</div>
<div class="branding-icon" class="branding-icon">
<img loading="lazy" src="/branding/icon-bw.svg" alt="AlmaLinux logo" class="almalinux-logo" class="almalinux-logo">
<a href="https://github.com/AlmaLinux/almalinux.org/blob/master/static/branding/icon-bw.svg" style="margin-top: 10px;">Download SVG</a>
</div>
</div>
</section>
</div>
</div>
<div class="almalinux-color-container" >
<h2 class="pb-2 text-center border-bottom" class="border-bottom">AlmaLinux OS Color Palette
</h2>
<div class="al-article-content pb-3 al-wysiwyg" class="al-article-content">
<section>
<p>
The colors selected for the AlmaLinux OS signature reflect the company's values. The colors have been
specifically chosen to represent the brand and should not be altered under any circumstance.
</p>
<div class="color-palette-container" class="group-icon">
<div class="color-palette-column" class="color-palette-column">
<h4 style="margin-top: -5px;">Science Blue</h4>
<div class="science-blue-container"
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
<div class="science-blue-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #004bbc; margin-bottom: 5px; height: 15%">
<div class="science-blue-text" style="padding: 10px; text-align: center;">
<span>
#004BBC
</span>
</div>
</div>
<div class="science-blue-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #0069DA; margin-bottom: 5px; height: 55%;">
<div class="science-blue-text" style="padding: 10px; text-align: center;">
<span>
#0069DA
</span>
</div>
</div>
<div class="science-blue-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #1e87f8; margin-bottom: 5px; height: 15%">
<div class="science-blue-text" style="padding: 10px; text-align: center;">
<span>
#1E87F8
</span>
</div>
</div>
<div class="science-blue-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #2891ff; margin-bottom: 5px; height: 15%">
<div class="science-blue-text" style="padding: 10px; text-align: center;">
<span>
#2891FF
</span>
</div>
</div>
</div>
<div class="color-palette-text">
<p>
<b>Hex</b> #0069DA<br>
<b>RGB</b> 0 105 218<br>
<b>CMYK</b> 100 52 0 15<br>
<b>Pantone</b> 2725<br>
</p>
</div>
</div>
<div class="color-palette-column" class="color-palette-column">
<h4 style="margin-top: -5px;">Atlantis</h4>
<div class="atlantis-container"
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
<div class="atlantis-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #68bc11; margin-bottom: 5px; height: 15%">
<div class="atlantis-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#68BC11
</span>
</div>
</div>
<div class="atlantis-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #86da2f; margin-bottom: 5px; height: 55%;">
<div class="atlantis-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#86DA2F
</span>
</div>
</div>
<div class="atlantis-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #a4f84d; margin-bottom: 5px; height: 15%">
<div class="atlantis-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#A4F84D
</span>
</div>
</div>
<div class="atlantis-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #aeff57; margin-bottom: 5px; height: 15%">
<div class="atlantis-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#AEFF57
</span>
</div>
</div>
</div>
<div class="color-palette-text">
<p>
<b>Hex</b> #86DA2F<br>
<b>RGB</b> 134 218 47<br>
<b>CMYK</b> 39 0 78 15<br>
<b>Pantone</b> 802<br>
</p>
</div>
</div>
<div class="color-palette-column" class="color-palette-column">
<h4 style="margin-top: -5px;">Candelight</h4>
<div class="candlelight-container"
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
<div class="candlelight-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #e1ad00; margin-bottom: 5px; height: 15%">
<div class="candlelight-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#E1AD00
</span>
</div>
</div>
<div class="candlelight-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #ffcb11; margin-bottom: 5px; height: 55%;">
<div class="candlelight-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#FFCB11
</span>
</div>
</div>
<div class="candlelight-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #ffe930; margin-bottom: 5px; height: 15%">
<div class="candlelight-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#FFE930
</span>
</div>
</div>
<div class="candlelight-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #fff33a; margin-bottom: 5px; height: 15%">
<div class="candlelight-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#FFF33A
</span>
</div>
</div>
</div>
<div class="color-palette-text">
<p>
<b>Hex</b> #FFCB12<br>
<b>RGB</b> 255 203 18<br>
<b>CMYK</b> 0 20 93 0<br>
<b>Pantone</b> 803<br>
</p>
</div>
</div>
<div class="color-palette-column" class="color-palette-column">
<h4 style="margin-top: -5px;">Black Pearl</h4>
<div class="black-pearl-container"
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
<div class="black-pearl-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #000518; margin-bottom: 5px; height: 15%">
<div class="black-pearl-text" style="padding: 10px; text-align: center;">
<span>
#000518
</span>
</div>
</div>
<div class="black-pearl-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #082336; margin-bottom: 5px; height: 55%;">
<div class="black-pearl-text" style="padding: 10px; text-align: center;">
<span>
#082336
</span>
</div>
</div>
<div class="black-pearl-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #264154; margin-bottom: 5px; height: 15%">
<div class="black-pearl-text" style="padding: 10px; text-align: center;">
<span>
#264154
</span>
</div>
</div>
<div class="black-pearl-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #304B5E; margin-bottom: 5px; height: 15%">
<div class="black-pearl-text" style="padding: 10px; text-align: center;">
<span>
#304B5E
</span>
</div>
</div>
</div>
<div class="color-palette-text">
<p>
<b>Hex</b> #082336<br>
<b>RGB</b> 8 35 54<br>
<b>CMYK</b> 85 35 0 79<br>
<b>Pantone</b> Neutral Black<br>
</p>
</div>
</div>
<div class="color-palette-column" class="color-palette-column">
<h4 style="margin-top: -5px;">Soft Peach</h4>
<div class="soft-peach-container"
style="display: flex; flex-direction: column; padding: 5px; background-color: white;;">
<div class="soft-peach-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #dcd7d7; margin-bottom: 5px; height: 15%">
<div class="soft-peach-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#DCD7D7
</span>
</div>
</div>
<div class="soft-peach-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #faf5f5; margin-bottom: 5px; height: 55%;">
<div class="soft-peach-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#FAF5F5
</span>
</div>
</div>
<div class="soft-peach-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #ffffff; margin-bottom: 5px; height: 15%">
<div class="soft-peach-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#FFFFFF
</span>
</div>
</div>
<div class="soft-peach-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #ffffff; margin-bottom: 5px; height: 15%">
<div class="soft-peach-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#FFFFFF
</span>
</div>
</div>
</div>
<div class="color-palette-text">
<p>
<b>Hex</b> #FAF5F5<br>
<b>RGB</b> 250 245 245<br>
<b>CMYK</b> 0 2 2 2<br>
<b>Pantone</b> 7604<br>
</p>
</div>
</div>
<div class="color-palette-column" class="color-palette-column">
<h4 style="margin-top: -5px;">Sunburnt Cyclops</h4>
<div class="sunburnt-cyclops-container"
style="display: flex; flex-direction: column; padding: 5px; background-color: white;">
<div class="sunburnt-cyclops-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #e1282b; margin-bottom: 5px; height: 15%">
<div class="sunburnt-cyclops-text" style="padding: 10px; text-align: center;">
<span>
#E1282B
</span>
</div>
</div>
<div class="sunburnt-cyclops-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #FF4649; margin-bottom: 5px; height: 55%;">
<div class="sunburnt-cyclops-text" style="padding: 10px; text-align: center;">
<span>
#FF4649
</span>
</div>
</div>
<div class="sunburnt-cyclops-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #FF6467; margin-bottom: 5px; height: 15%">
<div class="sunburnt-cyclops-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#FF6467
</span>
</div>
</div>
<div class="sunburnt-cyclops-item"
style="display: flex; align-items: center; justify-content: space-around; background-color: #ff6e71; margin-bottom: 5px; height: 15%">
<div class="sunburnt-cyclops-text" style="padding: 10px; text-align: center; color: #082336;">
<span>
#FF6E71
</span>
</div>
</div>
</div>
<div class="color-palette-text">
<p>
<b>Hex</b> #FF4649<br>
<b>RGB</b> 255 70 73<br>
<b>CMYK</b> 0 73 71 0<br>
<b>Pantone</b> Warm Red<br>
</p>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="almalinux-font-container" >
<h2 class="pb-2 text-center border-bottom" class="border-bottom">AlmaLinux OS Fonts</h2>
<div class="al-article-content pb-3 al-wysiwyg" class="al-article-content">
<section>
<p>
The primary font is <a href="https://fonts.google.com/specimen/Montserrat">Montserrat</a> and it has weight: Light, Medium, and SemiBold.
</p>
<div class="group-font" class="group-icon">
<div class="font-branding" class="font-branding">
<div class="font-item" class="font-item">
<span style="letter-spacing: 0.80px; font-size: xxx-large; font-weight: 300;">
Aa
</span>
<span style="letter-spacing: 0.80px; font-weight: 300;">
AlmaLinux OS
</span>
</div>
<div class="font-line" class="font-line"></div>
<div class="font-item" style="display: flex; flex-direction: column; padding-left: 15px;">
<span style="letter-spacing: 0.80px; font-weight: 300;">
<i>Light</i><br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghiklmnopqrstuvwxyz<br>
1234567890
</span>
</div>
</div>
<div class="font-branding" class="font-branding">
<div class="font-item" class="font-item">
<span style="letter-spacing: 0.80px; font-size: xxx-large;">
Aa
</span>
<span style="letter-spacing: 0.80px;">
AlmaLinux OS
</span>
</div>
<div class="font-line" class="font-line"></div>
<div class="font-item" style="display: flex; flex-direction: column; padding-left: 15px;">
<span style="letter-spacing: 0.80px;">
<i>Medium</i><br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghiklmnopqrstuvwxyz<br>
1234567890
</span>
</div>
</div>
<div class="font-branding" class="font-branding">
<div class="font-item" class="font-item">
<span style="letter-spacing: 0.80px; font-size: xxx-large; font-weight: 600;">
Aa
</span>
<span style="letter-spacing: 0.80px; font-weight: 600;">
AlmaLinux OS
</span>
</div>
<div class="font-line" class="font-line"></div>
<div class="font-item" style="display: flex; flex-direction: column; padding-left: 15px;">
<span style="letter-spacing: 0.80px; font-weight: 600;">
<i>SemiBold</i><br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghiklmnopqrstuvwxyz<br>
1234567890
</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
{{ end }}

1
layouts/partials/common/footer.html
View File

@ -24,6 +24,7 @@
<li><a href="https://openqa.almalinux.org/">{{ i18n "openQA" }}</a></li>
<li><a href="https://build.almalinux.org/">{{ i18n "Build System" }}</a></li>
<li><a href="{{ "/security" | relLangURL }}">{{ i18n "Security" }}</a></li>
<li><a href="{{ "/branding" | relLangURL }}">Branding</a></li>
</ul>
</div>
<div class="col-6 col-md">

5
layouts/partials/common/nav.html
View File

@ -104,6 +104,11 @@
{{ i18n "Security" }}
</a>
</li>
<li>
<a class="dropdown-item" href="{{ "/branding" | relLangURL }}" style="color:aliceblue">
Branding
</a>
</li>
</ul>
</li>
<li class="nav-item">

BIN
static/branding/Almalinux-logo-v2-4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
static/branding/Almalinux-logo-white-v2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
static/branding/almalinux_logo_square.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

Write Preview
Loading…
Cancel
Save