New Blockish theme

* Adding a new blockish theme with a blue header and an adaptive
design.
* Printable PDF version still needs some work, but overall, this is a
nice layout.

README.md

@@ -6,6 +6,7 @@ at the [blog post for the project][blog].
 
 ## Features
 
+* Three styles to choose from: modern, blockish, unstyled
 * PDF generation via `wkhtmltopdf`
 * Responsive design for multiple device viewport sizes
 * Simple Markdown formatting
@@ -19,6 +20,10 @@ at the [blog post for the project][blog].
 
 ## Options
 
+Choose a template with the -t option.
+
+    php ./bin/resume.php --source resume/sample.md -t blockish
+
 If you want to edit your markdown resume in your editor while watching it
 update in your browser, run this command:
 
@@ -40,9 +45,7 @@ on descendant and adjacent selectors.
 
 ## TODO
 
-* Additional styles
 * Google Analytics include
-* Command line documentation
 
 ## Acknowledgments
 

bin/resume.php

@@ -15,23 +15,25 @@ use Assetic\Filter;
 
 // Application defaults
 $config = (object) array(
-    "source" => "",
+    "source"   => "",
     "template" => "modern",
-    "refresh" => false,
+    "refresh"  => false,
-    "pdf" => false
+    "pdf"      => false
 );
 
 // Command line arguments to populate the config
 $opts  = array(
     "s:" => "source:",   // source
     "t:" => "template:", // template
-    "r" => "refresh",    // refresh
+    "r"  => "refresh",    // refresh
-    "p" => "pdf"         // pdf output
+    "p"  => "pdf"         // pdf output
 );
 
 // Fetch the options from the command line arguments
 $options = getopt(implode("", array_keys($opts)), array_values($opts));
 
+// Consolidate the short and long options into the config array
+// Make sure that boolean options are set appropriately.
 foreach ($opts as $short => $long) {
     $isBool = (substr($short, -1, 1) !== ":");
     $short = trim($short, ":");

resume/sample.md

@@ -42,12 +42,12 @@ Progressively evolve cross-platform ideas before impactful infomediaries. Energi
 
 ### Experience {#experience}
 
-Microsoft
+Initrode Conglomerated
 : *Principal and Creative Lead*
   __2004-2005__
   Intrinsicly transform flexible manufactured products without excellent intellectual capital. Energistically evisculate orthogonal architectures through covalent action items. Assertively incentivize sticky platforms without synergistic materials.
 
-International Business Machines (IBM)
+Gizmonic Institute Company (GIM)
 : *Lead Web Designer*
   __2001-2004__
   Globally re-engineer cross-media schemas through viral methods of empowerment. Proactively grow long-term high-impact human capital and highly efficient innovation. Intrinsicly iterate excellent e-tailers with timely e-markets.

templates/blockish/css/pdf.css

@@ -1,5 +1,6 @@
 body.pdf {
     color: black;
+    background: none;
     
     a {
         text-decoration: none;
@@ -18,6 +19,9 @@ body.pdf {
     .resume {
         position:relative;
         padding: 40px 80px;
+        
+        -webkit-box-shadow: none;
+        box-shadow: none;
     }
 
     a[href$='.pdf'] {
@@ -48,10 +52,13 @@ body.pdf {
     }
 
     blockquote {
-        top: 40px;
+        top: 45px;
         right: 50px;
         position: absolute;
     }
+    blockquote a {
+        color: #F7F2C7;
+    }
     
     ul li {
         width: 28%;

templates/blockish/css/screen.css

@@ -7,6 +7,21 @@
 */
 
 @media screen and (min-width: 15em) {
+    h1 {
+        padding: 40px 0 0 40px;
+    }
+    h2 {
+        padding: 0 30px 0 43px;
+    }
+    blockquote {
+        margin: -20px -20px 10px;
+        padding: 10px 20px 10px;
+    }
+    #profile+p {
+        width: 100%;
+        margin: 0 -10px;
+        padding: 10px;
+    }
 }
 
 
@@ -17,6 +32,30 @@
 */
 
 @media screen and (min-width: 30em) {
+
+    h1 {
+        margin: -40px -50px 0;
+        padding: 40px 0 0 40px;
+        font-size: 36px;
+        letter-spacing: -1px;
+        font-weight: 900;
+        text-transform: uppercase;
+        background: @headerBackground;
+        border-top: 5px solid #333333;
+        color: #FFFFFF;
+    }
+    h2 {
+        background: @headerBackground;
+        margin: -10px -50px 0;
+        padding: 0 0 40px 43px;
+        font-size: 18px;
+        letter-spacing: -1px;
+        font-weight: normal;
+        color: #F7F2C7;
+    }
+    blockquote {
+      margin-top: -50px;
+    }
 }
 
 
@@ -28,15 +67,21 @@
 
 @media screen and (min-width: 37.5em) {
     body {
-        padding: 2em 0;
+        padding: 20px 0;
     }
     blockquote {
         top: 10px;
         right: 50px;
         position: absolute;
+        padding-bottom: 0;
     }
     h1 { /* Open up the top section height so we don't collapse on the blockquote */
-        margin-top: .5em;
+        margin-top: -30px;
+        padding-left: 40px;
+    }
+    h2 {
+        padding-bottom: 55px;
+        padding-left: 43px;
     }
     ol {
         margin: 0 0 0 1em;
@@ -48,6 +93,10 @@
     ol li:nth-child(1), ol li:nth-child(2) {
         border-top: none;
     }
+
+    blockquote {
+      margin-top: -10px;
+    }
 }
 
 
@@ -71,16 +120,12 @@
         position: absolute;
     }
     h1 {
-        margin-top: 0;
         font-size: 48px;
-        text-transform: uppercase;
+        margin-top: -45px;
-        letter-spacing: 3px;
-        font-weight: normal;
     }
     h2 {
         text-transform: uppercase;
-        font-style: italic;
+        letter-spacing: 1px;
-        letter-spacing: 2px;
         font-weight: normal;
     }
     
@@ -94,6 +139,8 @@
         width: 84%;
     }
     
+    
+    
     ul li {
         width: 28%;
         float: left;
@@ -144,6 +191,21 @@
     }
 
 
+    #profile {
+        display: none;
+    }
+    
+    #profile+p {
+        padding: 5px 300px 20px 33px;
+        margin: -30px -50px 20px;
+        width: (912px - 300px - 33px);
+        float: none;
+        background: #2D6FC7;
+        color: #F7F2C7;
+        font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+        font-weight: 100;
+    }
+
 }
 
 

templates/blockish/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 {{#reload}}
 <meta http-equiv="refresh" content="2">
 {{/reload}}

templates/modern/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 {{#reload}}
 <meta http-equiv="refresh" content="2">
 {{/reload}}

templates/unstyled/css/pdf.css

@@ -13,4 +13,8 @@ body.pdf {
         border: none;
         text-align: left;
     }
+
+    a[href$='.pdf'] {
+        display: none;
+    }
 }

templates/unstyled/css/resume.css

@@ -11,4 +11,14 @@
 
 body {
     color: #222;
+    margin: 1em;
+}
+
+#footer {
+  display: none;
+}
+#footer + p {
+  font-size: 13px;
+  font-style: italic;
+  color: #444;
 }

templates/unstyled/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 {{#reload}}
 <meta http-equiv="refresh" content="2">
 {{/reload}}