Merge pull request #341 from sjrd/visual-identity

Add visual identity page.

Author: darjutak

_includes/footer.html

@@ -21,6 +21,7 @@ <h5>Scala Center</h5>
           <li><a href="{{ site.baseurl }}/records.html">Records</a></li>
           <li><a href="{{ site.baseurl }}/contact.html">Contact</a></li>
           <li><a href="{{ site.baseurl }}/donate.html">Donate</a></li>
+          <li><a href="{{ site.baseurl }}/visual-identity.html">Visual Identity</a></li>
         </ul>
 
       </div>

resources/css/main.scss

@@ -1640,3 +1640,14 @@ ul.nav {
 .project-logo-inverted {
   filter: invert(100%);
 }
+
+.generic-block table {
+  border-collapse: separate;
+  /*border-spacing: 10px;*/
+}
+
+.generic-block th, .generic-block td {
+  border-width: 1px;
+  border-style: solid;
+  padding: 10px;
+}

resources/img/scala-center-logo-black.png

@@ -0,0 +1,71 @@
+---
+layout: contact
+---
+
+## Scala Center Visual Identity Guidelines
+
+### Logo
+
+There are two acceptable versions of the Scala Center logo.
+The first one consists of:
+
+* the "swirl" graphic
+* the Scala Center name
+
+The second one includes the above and also contains:
+
+* the mission statement: "For open source. For education."
+
+It is possible to use different combinations of the default color palette, depending on the use case and on background.
+
+### Default color palette
+
+<table>
+  <thead>
+    <tr><th>&nbsp;</th><th>Hex</th><th>RGB</th><th>CMYK</th></tr>
+  </thead>
+  <tbody>
+    <tr><th>Orange</th><td>#f1592a</td><td>241, 89, 42</td><td>0, 63, 100, 5</td></tr>
+    <tr><th>Petrol</th><td>#002b36</td><td>0, 43, 54</td><td>100, 20, 0, 79</td></tr>
+  </tbody>
+</table>
+
+### Logo versions
+
+We recommend to use one of the two following versions as the first choice on a clear background (white, light grey, etc.).
+
+<img src="/resources/img/scala-center-logo-black.png">
+
+<img src="/resources/img/scala-center-main-logo-black.png">
+
+#### Alternative
+
+On dark backgrounds, use the orange swirl and white text:
+
+<img style="background-color: darkgrey" src="/resources/img/scala-center-logo.png">
+
+<img style="background-color: darkgrey" src="/resources/img/scala-center-main-logo.png">
+
+On colored backgrounds, you may use the white swirl and white text:
+
+<img style="background-color: brown" src="/resources/img/scala-center-logo-white.png">
+
+<img style="background-color: brown" src="/resources/img/scala-center-main-logo-white.png">
+
+### Swirl only
+
+The swirl only, without the text, should only be used in its colored version:
+
+<img src="/resources/img/scala-center-swirl.png">
+
+### Resources
+
+PNG files:
+
+* [Logo with black text, no mission statement](/resources/img/scala-center-logo-black.png)
+* [Logo with black text, with mission statement](/resources/img/scala-center-main-logo-black.png)
+* [Logo with white text, no mission statement](/resources/img/scala-center-logo.png)
+* [Logo with white text, with mission statement](/resources/img/scala-center-main-logo.png)
+* [White logo with white text, no mission statement](/resources/img/scala-center-logo-white.png)
+* [White logo with white text, with mission statement](/resources/img/scala-center-main-logo-white.png)
+* [Swirl logo only](/resources/img/scala-center-swirl.png)