Merge pull request #20 from CodeWithGroup/feature/branding-page

feat: adds branding page

Author: dangerworm

.gitignore

@@ -2,4 +2,6 @@
 _site/
 .sass-cache/
 .jekyll-cache/
-.jekyll-metadata
+.jekyll-metadata
+.bundle/
+vendor/

_includes/sidebar.html

@@ -45,6 +45,12 @@
                         <span>Resources</span>
                     </a>
                 </li>
+                <li class="sidebar-dropdown">
+                    <a href="branding.html">
+                        <i class="fas fa-palette"></i>
+                        <span>Branding</span>
+                    </a>
+                </li>
                 <li class="sidebar-dropdown">
                     <a href="people.html">
                         <i class="fa fa-users"></i>

branding.html

@@ -0,0 +1,148 @@
+---
+title: Branding
+layout: default
+---
+
+<h1>{{page.title}} Guidelines</h1>
+
+<p>When creating resources and communications for CodeWith, please adhere to these guidelines.</p>
+
+<h2>Fonts</h2>
+<p>CodeWith’s display typeface, to be used for titles, headings, and generally large text, is Boogaloo, which is
+    available to view and download at Google fonts: <a href="https://fonts.google.com/specimen/Boogaloo" target="_blank"
+        rel="noopener">Boogaloo</a></p>
+
+<p>CodeWith’s body typeface, to be used for the main textual content of web pages and documents, is Roboto, which is
+    available to view and download at Google fonts:<a href="https://fonts.google.com/specimen/Roboto" target="_blank"
+        rel="noopener">Roboto</a></p>
+
+<h2>Colours</h2>
+<div class="row">
+    <div class="col-4 col-md-2 text-center">
+        <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="25" cy="25" r="25" fill="#1f5237" />
+        </svg>
+        <h3 class="colour-label">#1f5237</h3>
+    </div>
+    <div class="col-4 col-md-2 text-center">
+        <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="25" cy="25" r="25" fill="#00793c" />
+        </svg>
+        <h3 class="colour-label">#00793c</h3>
+    </div>
+    <div class="col-4 col-md-2 text-center">
+        <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="25" cy="25" r="25" fill="#009545" />
+        </svg>
+        <h3 class="colour-label">#009545</h3>
+    </div>
+    <div class="col-4 col-md-2 text-center">
+        <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="25" cy="25" r="25" fill="#00b050" />
+        </svg>
+        <h3 class="colour-label">#00b050</h3>
+    </div>
+    <div class="w-100 d-none d-md-block"></div>
+    <div class="col-4 col-md-2 text-center">
+        <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="25" cy="25" r="25" fill="#a52a2a" />
+        </svg>
+        <h3 class="colour-label">#a52a2a</h3>
+    </div>
+    <div class="col-4 col-md-2 text-center">
+        <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="25" cy="25" r="25" fill="#000000" />
+        </svg>
+        <h3 class="colour-label">#000000</h3>
+    </div>
+    <div class="col-4 col-md-2 text-center">
+        <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="25" cy="25" r="24" fill="#f8f8f8" stroke="#000" stroke-width="0.5" />
+        </svg>
+        <h3 class="colour-label">#f8f8f8</h3>
+    </div>
+</div>
+
+<p>CodeWith’s colour palette can also be found on Coolors: <a
+        href="https://coolors.co/1f5237-00793c-009545-00b050-a52a2a-000000-f8f8f8" target="_blank"
+        rel="noopener">CodeWith's Colour Palette</a></p>
+
+<p>Please ensure that text-background pairings have sufficient colour contrast for everyone to read. See information
+    from the WCAG on colour contrast <a
+        href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" target="_blank"
+        rel="noopener">here</a> and a useful contrast checking tool <a href="https://contrastchecker.com/"
+        target="_blank" rel="noopener">here</a>.</p>
+
+<h2>Logo</h2>
+
+<p>Variations of CodeWith's logo are provided below in SVG and PNG format, along with guidelines for their usage.</p>
+
+<div class="row">
+    <div class="col-5 col-md-3 card text-center">
+        <img class="img-fluid" src="images/logo/logo.svg" aria-labelledby="logo-label-full-svg">
+        <br />
+        <h4 id="logo-label-full-svg">CodeWith logo (SVG)</h4>
+    </div>
+    <div class="col-5 col-md-3 card text-center">
+        <img class="img-fluid" src="images/logo/logo.png" aria-labelledby="logo-label-full-png">
+        <br />
+        <h4 id="logo-label-full-png">CodeWith logo (PNG)</h4>
+    </div>
+    <div class="col-12 col-md-5">
+        <h4 class="mt-3">Full CodeWith logo</h4>
+        <p>Use in graphics with light backgrounds. Ensure that the logo is large enough for the tagline to be
+            legible. If it is not, omit the tagline.</p>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-5 col-md-3 card text-center white-asset">
+        <img class="img-fluid" src="images/logo/logo-white.svg" aria-labelledby="logo-label-full-white-svg">
+        <br />
+        <h4 id="logo-label-full-white-svg">CodeWith logo (white) (SVG)</h4>
+    </div>
+    <div class="col-5 col-md-3 card text-center white-asset">
+        <img class="img-fluid" src="images/logo/logo-white.png" aria-labelledby="logo-label-full-white-png">
+        <br />
+        <h4 id="logo-label-full-white-png">CodeWith logo (white) (PNG)</h4>
+    </div>
+    <div class="col-12 col-md-5">
+        <h4 class="mt-3">Full CodeWith logo (white)</h4>
+        <p>Use in graphics with dark backgrounds. Ensure that the logo is large enough for the tagline to be
+            legible. If it is not, omit the tagline.</p>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-5 col-md-3 card text-center">
+        <img class="img-fluid my-4" src="images/keyboard-green.svg" aria-labelledby="logo-keyboard-green-svg">
+        <br />
+        <h4 id="logo-keyboard-green-svg">CodeWith keyboard icon (SVG)</h4>
+    </div>
+    <div class="col-5 col-md-3 card text-center">
+        <img class="img-fluid my-4" src="images/keyboard-green.png" aria-labelledby="logo-keyboard-green-png">
+        <br />
+        <h4 id="logo-keyboard-green-png">CodeWith keyboard icon (PNG)</h4>
+    </div>
+    <div class="col-12 col-md-5">
+        <h4 class="mt-3">CodeWith keyboard icon</h4>
+        <p>Use with light backgrounds. If accompanying with text, follow the font guidelines.</p>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-5 col-md-3 card text-center white-asset">
+        <img class="img-fluid" src="images/noun-keyboard-licensed-white.svg" aria-labelledby="logo-keyboard-white-svg">
+        <br />
+        <h4 id="logo-keyboard-white-svg">CodeWith keyboard icon (white) (SVG)</h4>
+    </div>
+    <div class="col-5 col-md-3 card text-center white-asset">
+        <img class="img-fluid" src="images/noun-keyboard-licensed-white.png" aria-labelledby="logo-keyboard-white-png">
+        <br />
+        <h4 id="logo-keyboard-white-png">CodeWith keyboard icon (white) (PNG)</h4>
+    </div>
+    <div class="col-12 col-md-5">
+        <h4 class="mt-3">CodeWith keyboard icon (white)</h4>
+        <p>Use with dark backgrounds. If accompanying with text, follow the font guidelines.</p>
+    </div>
+</div>

css/style.css

@@ -385,6 +385,12 @@ div.event-book-button {
     font-size: 1.2em;
 }
 
+/* Branding */
+.white-asset {
+    background-color: var(--colour-dark-primary);
+    color: var(--colour-white);
+}
+
 /* RESIZING (min-width) */
 
 @media (min-width: 526px) {