Merge pull request #84 from poofichu/css-content

Add class names to Content types

Author: scottnath

src/sass/partials/base/_content.scss

@@ -8,7 +8,7 @@ body {
   margin: 0;
 }
 
-.wrapper {
+._content {
 
   margin: 0 auto;
   margin-bottom: -50px;
@@ -22,20 +22,13 @@ body {
     height: 75px;
   }
 
-  .punchcard-logomark {
-    display: block;
-    margin: 0 auto;
-    margin-top: 75px;
-    width: 250px;
-  }
-
 }
 
-.base--a {
-  color: color('teal', 60);
-  text-decoration: none;
 
-  &:hover {
-    text-decoration: underline;
-  }
+.content--logomark {
+  display: block;
+  margin: 0 auto;
+  margin-top: 75px;
+  width: 250px;
 }
+

src/sass/partials/global/_extends.scss

@@ -0,0 +1,13 @@
+.base--a {
+  color: color('teal', 60);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.base--ul {
+  list-style-type: none;
+  padding: 1em;
+}

views/_donut.html

@@ -11,7 +11,7 @@
     {% include "_header.html" %}
   {% endblock %}
 
-  <main class="wrapper">
+  <main class="_content">
     {% block main %}
     <div><h1>Original MAIN</h1></div>
     {% endblock %}

views/content.html

@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block main %}
-<h1>{{title}}</h1>
-<div>{{description}}</div>
+<h1 class="base--h1">{{title}}</h1>
+<div class="content--description">{{description}}</div>
 {% endblock %}
 

views/content/add.html

@@ -9,8 +9,8 @@
 {% endblock %}
 
 {% block main %}
-  <h1>{{type.name}}</h1>
-  <p>{{type.description}}</p>
+  <h1 class="base--h1">{{type.name}}</h1>
+  <p class="base--p">{{type.description}}</p>
   {% include "content/form.html" %}
 {% endblock %}
 

views/content/form.html

@@ -2,14 +2,14 @@
 
   {{form.html | safe}}
 
-  <fieldset id="sunrise-sunset">
-    <legend>Select Sunrise and Sunset</legend>
-    <label for="sunrise-date"><input type="date" name="sunrise-date" id="sunrise-date" value="{{data['sunrise-date'].value}}"></label>
-    <label for="sunrise-time"><input type="time" name="sunrise-time" id="sunrise-time" value="{{data['sunrise-time'].value}}"></label>
-    <label for="sunset-date"><input type="date" name="sunset-date" id="sunset-date" value="{{data['sunset-date'].value}}"></label>
-    <label for="sunset-time"><input type="time" name="sunset-time" id="sunset-time" value="{{data['sunset-time'].value}}"></label>
+  <fieldset id="sunrise-sunset" class="base--FORM">
+    <legend class="base--legend">Select Sunrise and Sunset</legend>
+    <label for="sunrise-date" class="base--label"><input type="date" name="sunrise-date" id="sunrise-date" value="{{data['sunrise-date'].value}}" class="base--date-input"></label>
+    <label for="sunrise-time" class="base--label"><input type="time" name="sunrise-time" id="sunrise-time" value="{{data['sunrise-time'].value}}" class="base--time-input"></label>
+    <label for="sunset-date" class="base--label"><input type="date" name="sunset-date" id="sunset-date" value="{{data['sunset-date'].value}}" class="base--date-input"></label>
+    <label for="sunset-time" class="base--label"><input type="time" name="sunset-time" id="sunset-time" value="{{data['sunset-time'].value}}" class="base--time-input"></label>
   </fieldset>
 
-  <button type="submit">Submit</button>
-  <button type="cancel">Cancel</button>
+  <button type="submit" class="base--button">Submit</button>
+  <button type="cancel" class="base--button">Cancel</button>
 </form>

views/content/home.html

@@ -10,10 +10,10 @@
 {% endblock %}
 
 {% block main %}
-<h1 class="sub-title">{{content.home.title}}</h1>
-<ul class="base--STYLED">
+<h1 class="base--h1">{{content.home.title}}</h1>
+<ul class="base--ul">
   {% for type in content.types %}
-    <li><a href="/{{content.base}}/{{type.id}}" class="base--a">{{type.name}}</a></li>
+    <li class="base--li"><a href="/{{content.base}}/{{type.id}}" class="base--a">{{type.name}}</a></li>
   {% endfor %}
 </ul>
 {% endblock %}

views/index.html

@@ -5,8 +5,8 @@
 {% endblock %}
 
 {% block main %}
-<h1>{{siteName}}</h1>
-<img src="/images/punchcard-image.svg" alt="punchcard-logomark" class="punchcard-logomark">
+<h1 class="content--title">{{siteName}}</h1>
+<img src="/images/punchcard-image.svg" alt="punchcard-logomark" class="content--logomark">
 {% endblock %}
 
 {% block footer %}