OSGeo web style guide

marketing/branding/styleguide/cartography.md

@@ -0,0 +1,18 @@
+# Cartography
+
+## Cartographic style
+
+Cartographic style varies considerably depending on zoom level, available data or location. The OSGeo style, as applied to cartography, will vary for the same reasons. The main solution to providing a consistent look and feel within that framework is to ensure that all OSGeo styled maps use the OSGeo  [color palette](colors.md#Primary_palette).
+
+<div class="row"><div class="col-md-6"><img src="img/osgeo-map-style_01.png" class="img-responsive mb-10" /></div><div class="col-md-6"><p> Features with the most visibility, area, and/ or quantity, should most often be styled with the two main colors where possible. All else being equal, #4CB05B should be the dominant color for area features, #00393F should be the second most dominant color for area features. White and the colors from the secondary palette (see Principles of colours) should be assigned for other features as shown</p></div></div><div class="row"><div class="col-md-6"><img src="img/osgeo-map-style_02.png" class="img-responsive mb-20" /></div><div class="col-md-6"><img src="img/osgeo-photo-palette_02.png" class="img-responsive" /></div></div>
+
+
+## Map examples
+
+## Branding elements
+<div class="row"><div class="col-md-6"><p>Branding elements can be combined with your own photos, using the following rules:</p> 
+<ul><li>50% Multiply Opacity with the Dark Green colour to fade out the photo (White text can be place on top)</li><li>OSGeo Green always on top</li><li>Points touching the side of the canvas</li><li>Draw compass shapes</li></ul></div><div class="col-md-6"><img src="img/osgeo-branding-element_01.png" class="img-responsive mb-10" /></div></div>
+<div class="row"><div class="col-md-6"><img src="img/osgeo-branding-element_02.png" class="img-responsive" /></div><div class="col-md-6"><img src="img/osgeo-branding-element_03.png" class="img-responsive" /></div></div>
+
+<hr class="mb-30">
+

marketing/branding/styleguide/colors.md

@@ -0,0 +1,18 @@
+# Colors
+
+## Primary palette
+
+Color is the other fundamental aspect of the OSGeo Foundation brand. The new branding uses a fresh and vibrant color palette, yet still recognizable from the former OSGeo green colors. Please use the following color codes for any OSGeo brand related design work. 
+
+<div class="row mb-20"><div class="col-md-6"><h3 class="green">Green</h3><hr><div class="card-green"></div><hr><div class="col-md-6 npl"><h4 class="inpage">For Print/Press</h4><table><tr><td class="tbld">C</td><td>70</td></tr><tr><td class="tbld">M</td><td>0</td></tr><tr><td class="tbld">Y</td><td>80</td></tr><tr><td class="tbld">K</td><td>0</td></tr></table><h4 class="inpage">Pantone</h4><table><tr><td class="tbld">Pantone 361 U</td></tr></table></div><div class="col-md-6 npl"><h4 class="inpage">For Digital</h4><table><tr><td class="tbld">R</td><td>77</td></tr><tr><td class="tbld">G</td><td>176</td></tr><tr><td class="tbld">B</td><td>91</td></tr><tr><td>&#160;</td></tr></table><h4 class="inpage">Hexadecimal</h4><table><tr><td class="tbld">#4CB05B</td></tr></table></div></div><div class="col-md-6"><h3 class="darkblue">Dark blue</h3><hr><div class="card-dblue"></div><hr><div class="col-md-6 npl"><h4 class="inpage">For Print/Press</h4><table><tr><td class="tbld">C</td><td>95</td></tr><tr><td class="tbld">M</td><td>55</td></tr><tr><td class="tbld">Y</td><td>55</td></tr><tr><td class="tbld">K</td><td>55</td></tr></table><h4 class="inpage">Pantone</h4><table><tr><td class="tbld">Pantone 330 U</td></tr></table></div><div class="col-md-6 npl"><h4 class="inpage">For Digital</h4><table><tr><td class="tbld">R</td><td>0</td></tr><tr><td class="tbld">G</td><td>58</td></tr><tr><td class="tbld">B</td><td>64</td></tr><tr><td>&#160;</td></tr></table><h4 class="inpage">Hexadecimal</h4><table><tr><td class="tbld">#00393F</td></tr></table></div></div></div>
+
+## Secondary palette
+
+<div class="row mb-20"><div class="col-md-6"><h3>Green variations</h3><hr><div class="card-greenv1"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>58</td></tr><tr><td class="tbld">M</td><td>0</td></tr><tr><td class="tbld">Y</td><td>66</td></tr><tr><td class="tbld">K</td><td>0</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>110</td></tr><tr><td class="tbld">G</td><td>208</td></tr><tr><td class="tbld">B</td><td>122</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#6ED079</td></tr></table></div></div><hr><div class="card-greenv2"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>49</td></tr><tr><td class="tbld">M</td><td>0</td></tr><tr><td class="tbld">Y</td><td>58</td></tr><tr><td class="tbld">K</td><td>0</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>136</td></tr><tr><td class="tbld">G</td><td>234</td></tr><tr><td class="tbld">B</td><td>145</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#87E991</td></tr></table></div></div><hr></div><div class="col-md-6"><h3>Dark blue variations</h3><hr><div class="card-dbluev1"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>82</td></tr><tr><td class="tbld">M</td><td>43</td></tr><tr><td class="tbld">Y</td><td>48</td></tr><tr><td class="tbld">K</td><td>38</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>39</td></tr><tr><td class="tbld">G</td><td>87</td></tr><tr><td class="tbld">B</td><td>93</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#27575C</td></tr></table></div></div><hr><div class="card-dbluev2"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>71</td></tr><tr><td class="tbld">M</td><td>35</td></tr><tr><td class="tbld">Y</td><td>41</td></tr><tr><td class="tbld">K</td><td>18</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>75</td></tr><tr><td class="tbld">G</td><td>122</td></tr><tr><td class="tbld">B</td><td>128</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#4A797F</td></tr></table></div></div><hr></div></div>
+
+## Greyscaled palette
+
+<div class="row mb-20"><div class="col-md-6"><h3>Light grey variations</h3><hr><div class="card-lgreyv1"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>44</td></tr><tr><td class="tbld">M</td><td>35</td></tr><tr><td class="tbld">Y</td><td>35</td></tr><tr><td class="tbld">K</td><td>14</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>146</td></tr><tr><td class="tbld">G</td><td>144</td></tr><tr><td class="tbld">B</td><td>144</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#91908F</td></tr></table></div></div><hr><div class="card-lgreyv2"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>18</td></tr><tr><td class="tbld">M</td><td>13</td></tr><tr><td class="tbld">Y</td><td>14</td></tr><tr><td class="tbld">K</td><td>0</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>217</td></tr><tr><td class="tbld">G</td><td>217</td></tr><tr><td class="tbld">B</td><td>216</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#D8D8D8</td></tr></table></div></div><hr><div class="card-lgreyv3"><div class="col-md-4"><table class="intableb"><tr><td class="tbld">C</td><td>7</td></tr><tr><td class="tbld">M</td><td>5</td></tr><tr><td class="tbld">Y</td><td>5</td></tr><tr><td class="tbld">K</td><td>0</td></tr></table></div><div class="col-md-4"><table class="intableb"><tr><td class="tbld">R</td><td>240</td></tr><tr><td class="tbld">G</td><td>240</td></tr><tr><td class="tbld">B</td><td>241</td></tr></table></div><div class="col-md-4"><table class="intableb"><tr><td class="tbld">#F0F0F1</td></tr></table></div></div><hr></div><div class="col-md-6"><h3>Dark grey variations</h3><hr><div class="card-dgreyv1"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>52</td></tr><tr><td class="tbld">M</td><td>42</td></tr><tr><td class="tbld">Y</td><td>42</td></tr><tr><td class="tbld">K</td><td>26</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>118</td></tr><tr><td class="tbld">G</td><td>116</td></tr><tr><td class="tbld">B</td><td>116</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#757473</td></tr></table></div></div><hr><div class="card-dgreyv2"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>58</td></tr><tr><td class="tbld">M</td><td>49</td></tr><tr><td class="tbld">Y</td><td>48</td></tr><tr><td class="tbld">K</td><td>40</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>91</td></tr><tr><td class="tbld">G</td><td>91</td></tr><tr><td class="tbld">B</td><td>49</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#5A5958</td></tr></table></div></div><hr><div class="card-dgreyv3"><div class="col-md-4"><table class="intable"><tr><td class="tbld">C</td><td>61</td></tr><tr><td class="tbld">M</td><td>52</td></tr><tr><td class="tbld">Y</td><td>51</td></tr><tr><td class="tbld">K</td><td>48</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">R</td><td>79</td></tr><tr><td class="tbld">G</td><td>77</td></tr><tr><td class="tbld">B</td><td>77</td></tr></table></div><div class="col-md-4"><table class="intable"><tr><td class="tbld">#4E4D4C</td></tr></table></div></div><hr></div></div>
+
+
+

marketing/branding/styleguide/css/OSGeo-webfont.css

@@ -0,0 +1,57 @@
+/*! Open Source Geospatial Foundation (OSGeo) Web Fonts
+    Open Font License (OFL 1.1)
+    Sintony - By Eduardo Rodriguez Tunni (https://github.com/etunni/sintony)
+    MiriamLibre - By Michal Sahar (https://github.com/MichalSahar/Miriam-Libre)
+*/
+
+@font-face {
+    font-family: 'sintonybold';
+    src: url('../fonts/sintony-bold-webfont.eot');
+    src: url('../fonts/sintony-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/sintony-bold-webfont.woff2') format('woff2'),
+         url('../fonts/sintony-bold-webfont.woff') format('woff'),
+         url('../fonts/sintony-bold-webfont.ttf') format('truetype'),
+         url('../fonts/sintony-bold-webfont.svg#sintonybold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'sintonyregular';
+    src: url('../fonts/sintony-regular-webfont.eot');
+    src: url('../fonts/sintony-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/sintony-regular-webfont.woff2') format('woff2'),
+         url('../fonts/sintony-regular-webfont.woff') format('woff'),
+         url('../fonts/sintony-regular-webfont.ttf') format('truetype'),
+         url('../fonts/sintony-regular-webfont.svg#sintonyregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'miriam_librebold';
+    src: url('../fonts/miriamlibre-bold-webfont.eot');
+    src: url('../fonts/miriamlibre-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/miriamlibre-bold-webfont.woff2') format('woff2'),
+         url('../fonts/miriamlibre-bold-webfont.woff') format('woff'),
+         url('../fonts/miriamlibre-bold-webfont.ttf') format('truetype'),
+         url('../fonts/miriamlibre-bold-webfont.svg#miriam_librebold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'miriam_libreregular';
+    src: url('../fonts/miriamlibre-regular-webfont.eot');
+    src: url('../fonts/miriamlibre-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/miriamlibre-regular-webfont.woff2') format('woff2'),
+         url('../fonts/miriamlibre-regular-webfont.woff') format('woff'),
+         url('../fonts/miriamlibre-regular-webfont.ttf') format('truetype'),
+         url('../fonts/miriamlibre-regular-webfont.svg#miriam_libreregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}

marketing/branding/styleguide/css/intro.css

@@ -0,0 +1,24 @@
+html {
+  height: 100%;
+}
+body {
+  min-height: 100%;
+}
+body{background:url(../img/bg-intro.jpg); -webkit-background-size: cover;   background-size: cover;}
+#md-all > hr{border:0;}
+h1{font-family: miriam_librebold !important;font-size:5em !important;color:#FFFFFF !important;left:.5em !important;max-width:40%;margin:1em 0 0 0 !important;}
+h2{font-family: miriam_librebold !important;font-size:2em !important;color:#4CAF5B !important;left:.5em !important;z-index:10;}
+h2 > span > a{display:none !important;}
+
+#md-all > div.scontainer {
+position:absolute !important;
+bottom:0 !important;
+left:0;
+width:100%;
+margin-top:0 !important;
+}
+
+
+#md-all .md-copyright-footer p {
+    color:#FFFFFF !important;
+}