Merge pull request #30 from OpenTechSchool/23-set-typography

Set typography
OpenTechSchool · May 17, 2017 · ad25a27 · ad25a27
2 parents 1c6b579 + 41406ff
commit ad25a27
Show file tree

Hide file tree

Showing 37 changed files with 339 additions and 64 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,6 @@ _site
 .sass-cache
 .bundle
 vendor
+
+.DS_Store
+.ruby-version
diff --git a/_config.yml b/_config.yml
@@ -2,13 +2,21 @@
 title: OpenTechSchool
 email: [email protected]
 description: > # this means to ignore newlines until "baseurl:"
-  Write an awesome description for your new site here. You can edit this
-  line in _config.yml. It will appear in your document head meta (for
-  Google search results) and in your feed.xml site description.
+  OpenTechSchool is a community initiative to
+    provide programming and other tech-related workshops to women and their
+    friends of all genders. We take care of the organizational side of things
+    (venues, press, finding participants) and let our volunteer coaches to create
+    the curriculum according to their vision. Our main goal is to create a
+    friendly and safe learning environment where no one feels shy about asking any
+    question. Everyone, no matter what their gender, skill level or experience, is
+    invited to participate, whether as a coach or a learner
 baseurl: "" # the subpath of your site, e.g. /blog/
 url: "http://opentechschool.org" # the base hostname & protocol for your site
 twitter_username: OpenTechSchool
+twitter_url: twitter.com/OpenTechSchool
 github_username:  OpenTechSchool
+github_url: github.com/OpenTechSchool
+forum_url: discourse.opentechschool.org
 
 # Build settings
 markdown: kramdown

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,7 +1,7 @@
   <footer>
-    <div class="container">
+    <div class="container-fluid">
       <ul class="row">
-        
+
         <li class="col-xs-3">
           <h3>Get involved</h3>
           <ul>
@@ -41,7 +41,7 @@ <h3>Connect</h3>
             <li>
               <a href="#">Forum</a>
             </li>
-           
+
               <li>
               <a href="http://www.meetup.com/find/?allMeetups=true&amp;keywords=opentechschool&amp;radius=Infinity&amp;sort=default">Meetup</a>
             </li>
@@ -51,7 +51,7 @@ <h3>Connect</h3>
              <li>
               <a href="https://github.com/OpenTechSchool/">How to contact us</a>
             </li>
-           
+
 
           </ul>
         </li>
@@ -69,7 +69,7 @@ <h3>Our Values</h3>
             </li>
              <li>
               <a href="#">Code of conduct</a>
-            
+
 
           </ul>
         </li>
@@ -92,11 +92,11 @@ <h3>About us</h3>
             <li>
               <a href="{{site.baseurl}}sponsors.html">Privacy policy</a>
             </li>
-            
+
           </ul>
         </li>
 
-        
+
       </ul>
 
       <div class="disclaimer">
@@ -110,7 +110,7 @@ <h3>About us</h3>
             <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">
              Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.
           </small>
-        </p> 
+        </p>
 
         <p>
           © 2016 by
@@ -130,4 +130,4 @@ <h3>About us</h3>
 <!-- our external javascript scripts -->
 <script type="text/javascript" src="/assets/statics/polyfills/fetch.js"></script>
 <script type="text/javascript" src="/assets/statics/polyfills/template.js"></script>
-<script type="text/javascript" src="/assets/statics/polyfills/jsonp.js"></script>
+<script type="text/javascript" src="/assets/statics/polyfills/jsonp.js"></script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -4,7 +4,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}{% if page.tagline %} || {{page.tagline}}{%endif%} || OpenTechSchool.org</title>
-    <meta name="description" content="{{ site.description }}">
+    <meta name="description" content="{{ site.description }}" />
+	  <meta name="author" content="OpenTechSchool">
+	  <meta property="og:title" content="OpenTechSchool" />
+	  <meta property="og:type" content="school" />
+	  <meta property="og:url" content="http://{{ site.url }}" />
+	  <meta property="og:image" content="http://{{ site.url }}/images/ots_logo_fb.png" />
+	  <meta property="og:site_name" content="{{ site.url }}" />
+	  <meta property="og:description" content="{{ site.description }}" />
 
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,8 +1,8 @@
 <header>
-  <div class="container">
+  <div class="container-fluid">
     <nav class="row middle-xs between-xs">
       <a class="mainlogo" href="{{site.baseurl}}/" >OpenTechSchool</a>
-      <div class="col-xs-6 row end-xs">
+      <div class="col-xs-12 col-sm-6 row end-xs">
         <ul class="social-links row col-xs-5 between-xs">
           {% include _render_nav.html nav=site.data.nav.social %}
         </ul>

diff --git a/_layouts/landing.html b/_layouts/landing.html
@@ -12,7 +12,7 @@
 	  <div class="jumbo" {% if page.background %}style="background-image: url(/assets/statics/backgrounds/{{page.background}})"{% endif %}>
 	    <div class="container">
 	      <h1>{{ page.title }}</h1>
-	      <h2>{{page.tagline}}<h2>
+	      <h2>{{page.tagline}}</h2>
 	    </div>
 	  </div>
 

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -1,44 +1,44 @@
 
 header {
+	font-family: $heading-font-family;
 	padding-top: 0.25em;
+	margin-top: 10px;
+  padding: 0px 10px;
+
 	.mainlogo {
 		background-color: $brand-color;
-		font-size: 1.2em;
+		font-size: $logo-size;
 		line-height: 2em;
 		color: white;
-		font-weight: bold;
+		font-weight: 400;
 		padding: 0 0.5em;
 	}
 
 	.social-links {
+		font-size: $p-font-small;
 		text-transform: lowercase;
-		font-size: 0.8em;
-		line-height: 1.75em;
 	}
 
 	.main {
 		margin-top: 0.25em;
 		text-transform: uppercase;
-		font-size: 1.25em;
-		line-height: 1.1em;
 	}
 }
 
 
 footer {
 	padding: 2em 3em 0.5em 3em;
-	font-size: 0.8em;
 	background-color: $brand-color;
 	color: white;
 	text-align: left;
+	font-size: $p-font-small;
 
 	a, a:hover, a:visited {
 		color: white;
 	}
 
 	.disclaimer {
 		padding: 4em 3em 0.5em 3em;
-		font-size: 0.8em;
 		text-align: center;
 		background-color: $brand-color;
 
@@ -48,8 +48,8 @@ footer {
 
 
 
-@import 
+@import
 	"layouts/page.scss",
 	"layouts/landing.scss",
 	"layouts/chapter.scss"
-;
+;
diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss
@@ -1,3 +1,7 @@
+html {
+  font-size: 62.5%; // =10px
+}
+
 body {
   color: $base-font-color;
   font-family: $base-font-family;
@@ -19,10 +23,39 @@ h6 {
   margin: 0 0 $small-spacing;
 }
 
+h1 {
+  font-size: 28px;
+  font-size: 2.8rem;
+}
+
+h2 {
+  font-size: 24px;
+  font-size: 2.4rem;
+}
+
+h3 {
+  font-size: 18px;
+  font-size: 1.8rem;
+}
+
+h1, h2 {
+  padding: 20px 0;
+}
+
+h3, h4 {
+  padding: 10px 0;
+}
+
 p {
+  text-align: justify;
   margin: 0 0 $small-spacing;
 }
 
+.small-p {
+  font-size: $p-font-small;
+}
+
+
 a {
   color: $action-color;
   text-decoration: none;
@@ -42,3 +75,4 @@ hr {
   border-top: 0;
   margin: $base-spacing 0;
 }
+
diff --git a/_sass/base/_variables.scss b/_sass/base/_variables.scss
@@ -1,52 +1,93 @@
-// brand
+// Fonts
 
-$brand-color: #085987;
-$brand-color-lighter: #1F8AB6;
-$brand-color-lightest: #2FB0D5;
+// Esteban
+@include font-face('Esteban', '/fonts/Esteban/Esteban-Regular', 400, $file-formats: ttf);
 
-$brand-color-black: #222222;
-$brand-color-red: #E04C3E;
-$brand-color-red-strong: #FD4B22; 
+// Montserrat
+@include font-face('Montserrat', '/fonts/Montserrat/Montserrat-Regular', 400, $file-formats: ttf);
+@include font-face('Montserrat', '/fonts/Montserrat/Montserrat-Light', 300, $file-formats: ttf);
+@include font-face('Montserrat', '/fonts/Montserrat/Montserrat-Italic', 400, italic, $file-formats: ttf);
+@include font-face('Montserrat', '/fonts/Montserrat/Montserrat-LightItalic', 300, italic, $file-formats: ttf);
+@include font-face('Montserrat', '/fonts/Montserrat/Montserrat-Bold', 700, $file-formats: ttf);
+@include font-face('Montserrat', '/fonts/Montserrat/Montserrat-ExtraLight', 100, $file-formats: ttf);
 
 
+$font-stack-esteban: (
+  "Esteban",
+  serif,
+);
+
+$font-stack-mountserrat: (
+  "Montserrat",
+  sans-serif,
+);
+
+
+// OTS colors
+$ots_blue: #085987; /* main blue, logo */
+$ots_blue_l: #1F8AB6; /* Blue links */
+$ots_blue_h: #2FB0D5; /* Blue hover states */
+$ots_text: #222222; /* Default text color*/
+
+$ots_text_i: #84ACC3; /* (Inverted) Text color on dark blue backgrounds */
+$ots_text_i_l: #C1D5E1; /* (Inverted) Link color on dark blue backgrounds */
+
+$ots_red_l: #E04C3E; /* Highlighted, red links, buttons, other highlights */
+$ots_red_h: #FD4B22; /* Red hover states */
+
+
+// brand - use bitters vars name
+$brand-color: $ots_blue;
+$brand-color-lighter: $ots_blue_l;
+$brand-color-lightest: $ots_blue_h;
+
+$brand-color-black: $ots_text;
+$brand-color-red: $ots_red_l;
+$brand-color-red-strong: $ots_red_h;
+
+
+// Colors
+$blue: $brand-color;
+$dark-gray: $brand-color-black;
+$medium-gray: #999;
+$light-gray: #ddd;
+$white: #fff;
+
+// Font Colors
+$base-font-color: $brand-color-black;
+$action-color: $brand-color-lighter;
+
 
 // Breakpoints
 $medium-screen: 600px;
 $large-screen: 900px;
 
 // Typography
-$base-font-family: $font-stack-system;
-$heading-font-family: $base-font-family;
+$base-font-family: $font-stack-esteban;
+$heading-font-family: $font-stack-mountserrat;
 
 // Font Sizes
-$base-font-size: 1em;
+$base-font-size: 1.6rem; //16px
+$p-font-small: 1.2rem;
+$logo-size: 2rem;
+
 
 // Line height
 $base-line-height: 1.5;
 $heading-line-height: 1.2;
 
 // Other Sizes
 $base-border-radius: 3px;
-$base-spacing: $base-line-height * 1em;
+$base-spacing: $base-line-height * 1.6em;
 $small-spacing: $base-spacing / 2;
 $base-z-index: 0;
 
-// Colors
-$blue: $brand-color;
-$dark-gray: $brand-color-black;
-$medium-gray: #999;
-$light-gray: #ddd;
-
-// Font Colors
-$base-font-color: $brand-color-black;
-$action-color: $brand-color-lighter;
-
 // Border
 $base-border-color: $light-gray;
 $base-border: 1px solid $base-border-color;
 
 // Background Colors
-$base-background-color: #fff;
+$base-background-color: $white;
 $secondary-background-color: tint($base-border-color, 75%);
 
 // Forms

diff --git a/_sass/bourbon/bourbon/library/_font-face.scss b/_sass/bourbon/bourbon/library/_font-face.scss
@@ -49,12 +49,16 @@
 @mixin font-face(
     $font-family,
     $file-path,
+    $weight: normal,
+    $style: normal,
     $file-formats: _retrieve-bourbon-setting("global-font-file-formats"),
     $asset-pipeline: _retrieve-bourbon-setting("rails-asset-pipeline")
   ) {
 
   @font-face {
     font-family: $font-family;
+    font-style: $style;
+    font-weight: $weight;
     src: _font-source-declaration(
       $font-family,
       $file-path,

diff --git a/_sass/layouts/chapter.scss b/_sass/layouts/chapter.scss
@@ -5,10 +5,9 @@
 		background-repeat: no-repeat;
 		background-size: 100% auto;
 		color: $brand-color-lighter;
-		font-size: 2em;
 		padding-top: 2.5em;
 		padding-bottom: 0.125em;
 		margin: 0.25em 0;
 		text-align: center;
 	}
-}
+}