css: starting quiz styles

app/assets/stylesheets/application.scss

@@ -14,6 +14,7 @@
 
 @import 'settings/variables';
 @import 'settings/fonts';
+@import 'settings/mixins';
 
 /*= require normalize-css/normalize */
 @import 'settings/reset';
@@ -23,5 +24,6 @@
 @import 'elements/body';
 @import 'elements/progressbar';
 @import 'elements/header';
+@import 'elements/form-question';
 
 // @import 'objects/';

app/assets/stylesheets/elements/_form-question.scss

@@ -0,0 +1,18 @@
+.form-question {
+
+  textarea {
+    display: block;
+    margin-top: 1em;
+    border: 0;
+    border-bottom: 1px solid;
+    padding: 1em 0.5em;
+    width: 100%;
+    line-height: 1.5;
+    font-size: 1em;
+    box-sizing: border-box;
+  }
+
+  div {
+    margin: $gutter 0;
+  }
+}

app/assets/stylesheets/generic/_typography.scss

@@ -1,5 +1,5 @@
 body {
-  font-family: $primary-font-face;
+  @include primary-font;
   font-size: 1em;
 }
 
@@ -9,7 +9,6 @@ h3,
 h4,
 h5,
 h6 {
+  @include heading-font;
   margin: 0 0 $gutter;
-  font-family: $heading-font-face;
-  font-weight: 100;
 }

app/assets/stylesheets/settings/_mixins.scss

@@ -0,0 +1,9 @@
+@mixin primary-font {
+  font-family: $primary-font-face;
+  font-weight: 300;
+}
+
+@mixin heading-font {
+  font-family: $heading-font-face;
+  font-weight: 100;
+}

app/views/quiz/question.html.erb

@@ -5,14 +5,11 @@
   content_for :progress, @status.progress.to_s
 %>
 
-<%= form_for(@answer, url: post_answer_path(@answer.id), html:{method: :post, id: 'answer-form', data: {qid: @question.question_id}}) do |form| %>
+<%= form_for(@answer, url: post_answer_path(@answer.id), html:{method: :post, class: 'form-question', data: {qid: @question.question_id}}) do |form| %>
-
   <h1><%= @question.question %></h1>
 
   <% if @question.attachment.present? %>
-    <figure>
+    <figure><%= image_tag @question.attachment%></figure>
-      <%= image_tag @question.attachment%>
-    </figure>
   <% end %>
 
   <%= render partial: @question.input_type, locals: {question: @question, form: form, answer: @answer } %>

app/views/styleguide.html.erb

@@ -23,37 +23,6 @@
 
   <hr>
 
-  <h1>Font Families</h1>
-
-  <h2>HalisR</h2>
-  <div id="halisr">
-    <p id="primary-100">HalisR-100</p>
-    <p id="primary-200">HalisR-200</p>
-    <p id="primary-300">HalisR-300</p>
-    <p id="primary-400">HalisR-400</p>
-    <p id="primary-500">HalisR-500</p>
-    <p id="primary-600">HalisR-600</p>
-    <p id="primary-700">HalisR-700</p>
-    <p id="primary-800">HalisR-800</p>
-    <p id="primary-900">HalisR-900</p>
-  </div>
-
-  <h2>Lato</h2>
-  <div id="lato">
-    <p id="secondary-100">Lato-100</p>
-    <p id="secondary-300">Lato-300</p>
-    <p id="secondary-500">Lato-500</p>
-    <p id="secondary-700">Lato-700</p>
-    <p id="secondary-900">Lato-900</p>
-    <p id="secondary-100-i">Lato-Italic-100</p>
-    <p id="secondary-300-i">Lato-Italic-300</p>
-    <p id="secondary-500-i">Lato-Italic-500</p>
-    <p id="secondary-700-i">Lato-Italic-700</p>
-    <p id="secondary-900-i">Lato-Italic-900</p>
-  </div>
-
-  <hr>
-
   <h1>Paragraph</h1>
 
   <p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>