more stylie stuff and config options

_config.yml

@@ -13,9 +13,24 @@ resume_name:                    "Homer J. Simpson"
 resume_title:                   "Nuclear Safety Inspector"
 resume_contact_email:
   "homerjsimpson@youremailaddress.com"
+# use "yes" to display the email contact button,
+# "no" to display an "I'm not looking for work" message,
+# or remove the resume_looking_for_work option entirely
+# to leave blank
+resume_looking_for_work:        "yes"
 
 # Resume social links
-
+# delete any of these you don't intend to use
+resume_options:
+  resume_pdf_URL:               "insert URL here"
+  resume_github_url:            "https://github.com/jglovier/resume-template"
+  resume_twitter_url:           "http://twitter.com/jglovier"
+  resume_print_url:             "insert print URL here"
+  resume_dribbble_url:          "insert Dribbble URL here"
+  resume_linkedin_url:          "insert LinkedIn URL here"
+  resume_facebook_url:          "insert Facebook URL here"
+  resume_website_url:           "insert your website URL here"
+  resume_instagram_url:         "insert your Instagram URL here"
 
 # Design settings
 resume_theme:                   default

_layouts/resume.html

@@ -31,13 +31,18 @@
           <p>This is the executive summary. You should write a few brief, concise, and meaningful sentences about yourself from a professional context, and your immediate career goals. Make the length appropriate for your needs, but K.I.S.S.</p>
         </div>
 
-        <a href="mailto:{{ site.resume_contact_email }}" class="contact-button"></a>
+        {% if site.resume_looking_for_work == 'yes' %}
+        <a href="mailto:{{ site.resume_contact_email }}" class="contact-button">Contact me</a>
+        {% elsif site.resume_looking_for_work == 'no' %}
+        <a class="contact-button not-looking">I'm not looking for work right now.</a>
+        {% else %}
+        {% endif %}
 
       </header>
 
       <!-- begin Experience -->
 
-      <section class="primary-section">
+      <section class="content-section">
 
         <header class="section-header">
           <h2>Experience</h2>
@@ -78,7 +83,7 @@
 
       <!-- begin Education -->
 
-      <section class="primary-section">
+      <section class="content-section">
 
         <header class="section-header">
           <h2>Education</h2>
@@ -95,8 +100,8 @@
       <!-- end Education -->
 
       <footer class="page-footer">
-        <p>Made by <a href="http://twitter.com/jglovier">@jglovier</a>. Fork me on <a href="https://github.com/jglovier/resume-template">GitHub</a>.</p>
+        <p class="footer-line">Made by <a href="http://twitter.com/jglovier">@jglovier</a>. Fork me on <a href="https://github.com/jglovier/resume-template">GitHub</a>.</p>
-        <p>If this is your live resume, you can remove or modify this part. ;-)</p>
+        <p class="footer-line">If this is your live resume, you can modify or remove this part. ;-)</p>
       </footer>
 
     </div>

_sass/_base.scss

@@ -21,8 +21,8 @@ body{
 .wrapper:after { content:""; display:table; }
 .wrapper:after { clear: both; }
 .wrapper {
-  max-width: 680px;
+  max-width: 728px;
-  padding: 0 30px;
+  padding: 0 24px;
   margin: 0 auto;
   zoom: 1;
 }

_sass/_mixins.scss

@@ -13,6 +13,12 @@
   border-radius: $radius;
 }
 
+@mixin transition($value) {
+  -webkit-transition: $value;
+  -moz-transition: $value;
+  transition: $value;
+}
+
 // Clearfix
 //
 // Clears floats via mixin (avoid using as a class).
@@ -96,3 +102,11 @@
   @include serif;
   font-weight: 700;
 }
+
+// layout
+
+@mixin section_border {
+  border-top: 4px solid #c7c7c7;
+  border-bottom: 2px solid #c7c7c7;
+  padding: .5rem 0;
+}

_sass/_resume.scss

@@ -4,9 +4,8 @@
 // util
 
 .section-header {
-  border-top: 4px solid #c7c7c7;
+  @include section_border;
-  border-bottom: 2px solid #c7c7c7;
+  margin-bottom: 1.5rem;
-  padding: .5rem 0;
 
   h2 {
     @include sans;
@@ -15,7 +14,6 @@
     letter-spacing: -.05rem;
     margin: 0;
   }
-
 }
 
 // page header styles
@@ -43,9 +41,7 @@
   }
 
   .title-bar {
-    border-top: 4px solid #c7c7c7;
+    @include section_border;
-    border-bottom: 2px solid #c7c7c7;
-    padding: .5rem 0;
 
     .header-title {
       @include sans;
@@ -57,5 +53,65 @@
   }
 }
 
+.contact-button {
+  @include border-radius(3px);
+  background-color: #efefef;
+  text-decoration: none;
+  text-align: center;
+  display: block;
+  margin: 1.5rem auto;
+  width: 220px;
+  font-size: 1.375rem;
+  @include sans_light;
+  color: #333;
+  line-height: 55px;
+  @include transition(all .2s ease);
 
+  &:hover {
+    background-color: #333;
+    color: #fff;
+  }
 
+  &.not-looking {
+    width: 400px;
+  }
+}
+
+// resume content styles
+
+.content-section {
+  margin: 0 0 3rem;
+
+  .resume-item { margin-bottom: 2rem; }
+
+  .resume-item-title {
+    @include sans_bold;
+    margin: 0 0 0;
+    font-size: 1.5rem;
+  }
+
+  .resume-item-details {
+    font-size: 1.25rem;
+    margin: 0 0 1rem;
+  }
+}
+
+// footer styles
+
+.page-footer {
+  border-top: 4px solid #c7c7c7;
+  padding-top: 1.5rem;
+  text-align: center;
+  margin-bottom: 3rem;
+
+  .footer-line {
+    margin: 0;
+    font-size: .875rem;
+    color: #999;
+
+    > a {
+      font-weight: 700;
+      color: #333;
+    }
+  }
+}