stylin' the blog, editing layout classes

Author: lrlna

_layouts/blog.html

@@ -8,10 +8,11 @@
     {% include header.html %}
     <div class="page">
       <div class="wrapper">
-        <div id="blog-header"></div>
-        <div class="page-content">
-          <div class="page-box">
-            {{ content }}
+        <div class="blog-wrapper">
+          <div class="page-content">
+            <div class="page-box">
+              {{ content }}
+            </div>
           </div>
         </div>
       </div>

_sass/_blog.scss

@@ -1,7 +1,17 @@
-#blog-header {
-  padding-top: 80px;
-}
+.blog-wrapper {
+  padding: 7em 0;
 
-.page-box {
-  width: 60%;
-}
+  h1 {
+    @extend .page-title;
+    @extend .pink-highlight;
+  }
+
+  h2 {
+    @extend .page-heading;
+  }
+
+  p, ol, ul {
+    @extend .description;
+  }
+
+}

_sass/_contributing.scss

@@ -1,6 +1,12 @@
 .contributing-wrapper {
   padding: 7em 0;
   .description {
-    padding: 1em 0;
+    padding: 0.5em 0;
   }
-}
+  #description--main {
+    @extend .description;
+    font-weight: 600;
+    font-size: 1.2em;
+    padding: 1em 0 0;
+  }
+}

_sass/_landing.scss

@@ -44,17 +44,6 @@
 
 }
 
-.pink-highlight {
-  background-color: $pink-color;
-  display: inline;
-}
-
-.description {
-  font-family: $sans-font-family; 
-  color: $blue-color;
-  font-size: $base-font-size;
-}
-
 .instructions {
   @extend .description;
   display: inline;

_sass/_layout.scss

@@ -130,10 +130,20 @@
   justify-content: space-between;
 }
 
+.pink-highlight {
+  background-color: $pink-color;
+  display: inline;
+}
+
+.description {
+  font-family: $sans-font-family; 
+  color: $blue-color;
+  font-size: $base-font-size;
+}
 
 /**
  * Site footer
- */
+ *
 
 .footer-items {
   font-family: $base-font-family;

contributing/index.html

@@ -11,63 +11,60 @@
       Contributing to Yargs
     </div>
 
-    <div class="description">
+    <p id="description--main">
       Me hearties, we would love to have you contribute to yargs!
-    </div>
+    </p>
 
-    <div class="page-heading pink-highlight">
+    <div class="page-heading">
       Contributing
     </div>
 
-    <div class="description">
+    <ol class="description">
 
-      <ol>
+      <li> Look through the existing issues and see if your idea is something new. </li>
+      <li> Create a <a href="https://github.com/bcoe/yargs/issues"> new issue </a>, or comment on an existing issue that you would like to help solve: </li>
 
-        <li> Look through the existing issues and see if your idea is something new. </li>
-        <li> Create a <a href="https://github.com/bcoe/yargs/issues"> new issue </a>, or comment on an existing issue that you would like to help solve: </li>
-        
-        <ul>
-          <li> it's usually best to get some feedback before proceeding to write code. ,</li>
-        </ul>
+      <ul>
+        <li> it's usually best to get some feedback before proceeding to write code. ,</li>
+      </ul>
 
-        <li> fork the yargs repo, and clone it to your computer: </li>
+      <li> fork the yargs repo, and clone it to your computer: </li>
 
-        <ul>
-          <li> GitHub has <a href="https://help.github.com/articles/using-pull-requests/"> great documentation </a> regarding writing your first pull request. </li>
-        </ul>
+      <ul>
+        <li> GitHub has <a href="https://help.github.com/articles/using-pull-requests/"> great documentation </a> regarding writing your first pull request. </li>
+      </ul>
 
-        <li> make sure that you write unit-test for any code that you write for yargs: </li>
+      <li> make sure that you write unit-test for any code that you write for yargs: </li>
 
-        <ul>
-          <li> we use <a href="https://github.com/feross/standard"> standard </a> coding style, which will validate your style when you run tests </li>
+      <ul>
+        <li> we use <a href="https://github.com/feross/standard"> standard </a> coding style, which will validate your style when you run tests </li>
 
-          <li> look through our extensive test suite in <a href="https://github.com/bcoe/yargs/issues"> /test </a> to get an idea for how to write unit-tests for this codebase. </li>
-        </ul>
-        <li> make sure you are comfortable with the Code of Conduct outlined below. </li>
-      </ol>
-    </div>
+        <li> look through our extensive test suite in <a href="https://github.com/bcoe/yargs/issues"> /test </a> to get an idea for how to write unit-tests for this codebase. </li>
+      </ul>
+      <li> make sure you are comfortable with the Code of Conduct outlined below. </li>
+    </ol>
 
-    <div class="page-heading pink-highlight">
+    <div class="page-heading">
       Contributor Code of Conduct
     </div>
 
-    <div class="description">
+    <p class="description">
       As contributors and maintainers of this project, and in the interest of
       fostering an open and welcoming community, we pledge to respect all people who
       contribute through reporting issues, posting feature requests, updating
       documentation, submitting pull requests or patches, and other activities.
 
-    </div>
-    <div class="description">
+    </p>
+    <p class="description">
       We are committed to making participation in this project a harassment-free
       experience for everyone, regardless of level of experience, gender, gender
       identity and expression, sexual orientation, disability, personal appearance,
       body size, race, ethnicity, age, religion, or nationality.
-    </div>
+    </p>
 
-    <div class="description">
+    <p class="description">
       Examples of unacceptable behavior by participants include:
-    </div>
+    </p >
 
     <ol class="description">
       <li> The use of sexualized language or imagery </li>
@@ -78,40 +75,40 @@
       <li> Other unethical or unprofessional conduct </li>
     </ol>
 
-    <div class="description">
+    <p class="description">
       Project maintainers have the right and responsibility to remove, edit, or
       reject comments, commits, code, wiki edits, issues, and other contributions
       that are not aligned to this Code of Conduct, or to ban temporarily or
       permanently any contributor for other behaviors that they deem inappropriate,
       threatening, offensive, or harmful.
-    </div>
+    </p>
 
-    <div class="description">
+    <p class="description">
       By adopting this Code of Conduct, project maintainers commit themselves to
       fairly and consistently applying these principles to every aspect of managing
       this project. Project maintainers who do not follow or enforce the Code of
       Conduct may be permanently removed from the project team.
-    </div>
+    </p>
 
-    <div class="description">
+    <p class="description">
       This Code of Conduct applies both within project spaces and in public spaces
       when an individual is representing the project or its community.
-    </div>
+    </p>
 
-    <div class="description">
+    <p class="description">
       Instances of abusive, harassing, or otherwise unacceptable behavior may be
       reported by contacting a project maintainer at [email protected]. All
       complaints will be reviewed and investigated and will result in a response that
       is deemed necessary and appropriate to the circumstances. Maintainers are
       obligated to maintain confidentiality with regard to the reporter of an
       incident.
-    </div>
+    </p>
 
-    <div class="description">
+    <p class="description">
       This Code of Conduct is adapted from the <a href="http://contributor-covenant.org">Contributor Covenant</a>, version 1.3.0, available at <a href="http://contributor-covenant.org/version/1/3/0/">http://contributor-covenant.org/version/1/3/0/</a>
 
 
-    </div>
+    </p>
 
   </div>
 

css/main.scss

@@ -7,7 +7,7 @@
 
 // Our variables
 $base-font-family: "PT Serif", serif;
-$base-font-size:   1em;
+$base-font-size:   1.1em;
 $small-font-size:  $base-font-size * 0.875;
 $base-line-height: 1.5;