litteredwitherrors · litteredwitherrors · May 1, 2017 · May 1, 2017
diff --git a/src/default.hbs b/src/default.hbs
@@ -11,6 +11,8 @@
     <meta name="HandheldFriendly" content="True">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,400,700" rel="stylesheet">
+
     {{!-- Stylesheet --}}
     <link rel="stylesheet" href="{{asset "css/app.css"}}">
   </head>

diff --git a/src/fonts/fira-sans/FiraSans-Bold.otf b/src/fonts/fira-sans/FiraSans-Bold.otf
diff --git a/src/fonts/fira-sans/FiraSans-BoldItalic.otf b/src/fonts/fira-sans/FiraSans-BoldItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Book.otf b/src/fonts/fira-sans/FiraSans-Book.otf
diff --git a/src/fonts/fira-sans/FiraSans-BookItalic.otf b/src/fonts/fira-sans/FiraSans-BookItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Eight.otf b/src/fonts/fira-sans/FiraSans-Eight.otf
diff --git a/src/fonts/fira-sans/FiraSans-EightItalic.otf b/src/fonts/fira-sans/FiraSans-EightItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-ExtraBold.otf b/src/fonts/fira-sans/FiraSans-ExtraBold.otf
diff --git a/src/fonts/fira-sans/FiraSans-ExtraBoldItalic.otf b/src/fonts/fira-sans/FiraSans-ExtraBoldItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-ExtraLight.otf b/src/fonts/fira-sans/FiraSans-ExtraLight.otf
diff --git a/src/fonts/fira-sans/FiraSans-ExtraLightItalic.otf b/src/fonts/fira-sans/FiraSans-ExtraLightItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Four.otf b/src/fonts/fira-sans/FiraSans-Four.otf
diff --git a/src/fonts/fira-sans/FiraSans-FourItalic.otf b/src/fonts/fira-sans/FiraSans-FourItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Hair.otf b/src/fonts/fira-sans/FiraSans-Hair.otf
diff --git a/src/fonts/fira-sans/FiraSans-HairItalic.otf b/src/fonts/fira-sans/FiraSans-HairItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Heavy.otf b/src/fonts/fira-sans/FiraSans-Heavy.otf
diff --git a/src/fonts/fira-sans/FiraSans-HeavyItalic.otf b/src/fonts/fira-sans/FiraSans-HeavyItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Italic.otf b/src/fonts/fira-sans/FiraSans-Italic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Light.otf b/src/fonts/fira-sans/FiraSans-Light.otf
diff --git a/src/fonts/fira-sans/FiraSans-LightItalic.otf b/src/fonts/fira-sans/FiraSans-LightItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Medium.otf b/src/fonts/fira-sans/FiraSans-Medium.otf
diff --git a/src/fonts/fira-sans/FiraSans-MediumItalic.otf b/src/fonts/fira-sans/FiraSans-MediumItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Regular.otf b/src/fonts/fira-sans/FiraSans-Regular.otf
diff --git a/src/fonts/fira-sans/FiraSans-SemiBold.otf b/src/fonts/fira-sans/FiraSans-SemiBold.otf
diff --git a/src/fonts/fira-sans/FiraSans-SemiBoldItalic.otf b/src/fonts/fira-sans/FiraSans-SemiBoldItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Thin.otf b/src/fonts/fira-sans/FiraSans-Thin.otf
diff --git a/src/fonts/fira-sans/FiraSans-ThinItalic.otf b/src/fonts/fira-sans/FiraSans-ThinItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Two.otf b/src/fonts/fira-sans/FiraSans-Two.otf
diff --git a/src/fonts/fira-sans/FiraSans-TwoItalic.otf b/src/fonts/fira-sans/FiraSans-TwoItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-Ultra.otf b/src/fonts/fira-sans/FiraSans-Ultra.otf
diff --git a/src/fonts/fira-sans/FiraSans-UltraItalic.otf b/src/fonts/fira-sans/FiraSans-UltraItalic.otf
diff --git a/src/fonts/fira-sans/FiraSans-UltraLight.otf b/src/fonts/fira-sans/FiraSans-UltraLight.otf
diff --git a/src/fonts/fira-sans/FiraSans-UltraLightItalic.otf b/src/fonts/fira-sans/FiraSans-UltraLightItalic.otf
diff --git a/src/fonts/fira-sans/SIL Open Font License.txt b/src/fonts/fira-sans/SIL Open Font License.txt
diff --git a/src/index.hbs b/src/index.hbs
@@ -1,5 +1,12 @@
 {{!< default}}
-<header>
-  <h1>{{@blog.title}}</h1>
-  <h2>{{@blog.description}}</h2>
+<header class="site-header">
+  <div class="site-header__logo">
+    <a href="/">
+      <img src="assets/images/lesaca-logo.svg" alt="Lesaca Logo">
+    </a>
+  </div>
+  <h1>Lesaca</h1>
 </header>
+<section class="site-block l-half">
+
+</section>
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
@@ -0,0 +1,34 @@
+$site-padding: 1em;
+
+body {
+  background-color: $color-site-plum;
+  background-image: url('../images/face_bg.jpg');
+  background-repeat: no-repeat;
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 200;
+  color: $color-site-white;
+  @include line-height('body');
+}
+
+h1, h2, h3 {
+  @include line-height('heading');
+}
+
+h1 {
+  @include font-size('51');
+}
+
+h2 {
+  @include font-size('38');
+}
+
+h3 {
+  @include font-size('51');
+}
+
+
+
+a,
+a:active {
+  color: $color-site-pink;
+}
diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss
@@ -0,0 +1,20 @@
+$color-site-plum: #2a0926;
+$color-site-plum-10: lighten($color-site-plum, 10%);
+$color-site-plum-20: lighten($color-site-plum, 20%);
+
+$color-site-navy: #010326;
+$color-site-navy-10: lighten($color-site-navy, 10%);
+$color-site-navy-20: lighten($color-site-navy, 20%);
+
+$color-site-blue: #012840;
+$color-site-blue-10: lighten($color-site-blue, 10%);
+$color-site-blue-20: lighten($color-site-blue, 20%);
+
+$color-site-pink: #f30b55;
+$color-site-pink-10: lighten($color-site-pink, 10%);
+$color-site-pink-20: lighten($color-site-pink, 20%);
+
+$color-site-gray: #54717f;
+
+$color-site-white: #ffffff;
+$color-site-black: #000000;
diff --git a/src/scss/_font-face.scss b/src/scss/_font-face.scss
@@ -71,14 +71,3 @@
   font-weight: 800;
   src: url('../fonts/Majesti-Banner/Majesti-Banner-HeavyItalic.otf') format('otf');
 }
-
-//--------------
-//Fira Sans
-//--------------
-
-@font-face {
-  font-family: 'Fira Sans';
-  font-style: normal;
-  font-weight: 200;
-  src: url('../fonts/fira-sans/FiraSans-ExtraLight.otf') format('otf');
-}
diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -4,4 +4,14 @@
 
 @import 'reset';
 @import 'font-face';
+@import 'colors';
 @import 'typography';
+@import 'base';
+
+
+//-------------------
+// Components
+//-------------------
+
+@import 'components/header';
+@import 'components/block';
diff --git a/src/scss/components/_block.scss b/src/scss/components/_block.scss
@@ -0,0 +1,3 @@
+.site-block {
+  display: flex;
+}
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
@@ -0,0 +1,6 @@
+.site-header {
+  padding: 3em;
+  &__logo {
+    width: 20em;
+  }
+}