Made printer version, and finishing touches

production/css/styles.css

@@ -1 +1 @@
-.row,.side-bar,body,header,html{height:100%}.side-bar{padding:0!important}.side-bar header{overflow-x:hidden;overflow-y:auto;width:inherit}@media (min-width:601px){.side-bar header{position:fixed}}.side-bar header .card{background:inherit;margin:0}.side-bar header .card .card-image .profile-pic{width:100%}.side-bar header .contact-container .row,.side-bar header .links-container .row{margin:15px 0}.side-bar header .contact-container .row .col img,.side-bar header .links-container .row .col img{width:25px}.side-bar header .bio-container{padding:20px 0;background:rgba(255,255,255,.4)}.side-bar header .skills-container{padding:20px 0;margin-bottom:20px;background:rgba(255,255,255,.25)}.inline{display:inline!important}h1{background:rgba(0,0,0,.6)}h2{font-size:1.8em;font-weight:200;color:#FFF;text-shadow:1px 1px 1px rgba(0,0,0,.3);margin:.5em 0 0 1em}h4{font-weight:400;color:#9e9e9e}
+.hide-on-computer{display:none}.row,.side-bar,body,header,html{height:100%}.side-bar{padding:0!important}.side-bar header{overflow-x:hidden;overflow-y:auto;width:inherit}@media (min-width:601px){.side-bar header{position:fixed}}.side-bar header .card{background:inherit;margin:0}.side-bar header .card .card-image .profile-pic{width:100%}.side-bar header .contact-container .row,.side-bar header .links-container .row{margin:15px 0}.side-bar header .contact-container .row .col img,.side-bar header .links-container .row .col img{width:25px}.side-bar header .bio-container{padding:20px 0;background:rgba(255,255,255,.4)}.side-bar header .skills-container{padding:20px 0;margin-bottom:20px;background:rgba(255,255,255,.25)}.main-content{margin:20px auto;width:90%}.main-content p:not(:last-child){padding-bottom:15px;border-bottom:1px solid #e2e2e2}h1{background:rgba(0,0,0,.6)}h2{font-size:1.8em;font-weight:200;color:#FFF;text-shadow:1px 1px 1px rgba(0,0,0,.3);margin:.5em 0 0 1em}h4{font-weight:400;color:#9e9e9e}h5{margin-bottom:0}@media print{.hide-on-computer{display:block}.main-content{width:100%;margin:0}.col{border-bottom:1px solid grey}.side-bar,i{display:none!important}a,b,div,h1,h2,h3,h4,h5,h6,p,span{color:#000!important}b,span{display:inline}div{box-shadow:none!important}p,span{font-size:.8em}h1{background:0 0;text-align:center;font-size:2em}h4{font-size:1.8em;margin:0}h5{font-size:1.3em;font-weight:400}}

src/locals.json

@@ -109,7 +109,9 @@
         "Gained a first-class honours in computer science, and won the",
         "British Computer Society (BCS) award for best computing project.\n",
         "Course representative and student ambassador, I was fully involved",
-        "in all aspects of my course"
+        "in all aspects of my course.\n",
+        "Founded and initially ran the computing society, which holds regular",
+        "computer-science related, and social events."
       ]
     },
     {

src/styles/basic.sass

@@ -1,7 +1,11 @@
 
+.hide-on-computer
+  display: none
+
 html, body, .row, .side-bar, header
   height: 100%
 
+/* SIDEBAR */
 .side-bar
   padding: 0 !important
   header
@@ -28,15 +32,16 @@ html, body, .row, .side-bar, header
       margin-bottom: 20px
       background: rgba(255,255,255,0.25)
 
+/* MAIN CONTENT */
+.main-content
+  margin: 20px auto
+  width: 90%
+  p:not(:last-child)
+    padding-bottom: 15px
+    border-bottom: 1px solid #e2e2e2
 
 
-
-
-
-
-.inline
-  display: inline !important
-
+/* TEXT */
 h1
   background: rgba(0,0,0,0.6)
 h2
@@ -49,3 +54,47 @@ h2
 h4
   font-weight: 400
   color: #9e9e9e
+
+h5
+  margin-bottom: 0
+
+
+/* OVERIDING STYLES FOR THE PRINTER VERSION*/
+@media print
+  .hide-on-computer
+    display: block
+
+  .main-content
+    width: 100%
+    margin: 0
+
+  .col
+    border-bottom: 1px solid grey
+
+  .side-bar, i
+    display: none !important
+
+  p, b, span, a, div, h1, h2, h3, h4, h5, h6
+    color: #000000 !important
+
+  b, span
+    display: inline
+
+  div
+    box-shadow: none !important
+
+  p, span
+    font-size: 0.8em
+
+  h1
+    background: none
+    text-align: center
+    font-size: 2em
+
+  h4
+    font-size: 1.8em
+    margin: 0
+
+  h5
+    font-size: 1.3em
+    font-weight: normal

src/views/fragments/middle.jade

@@ -1,6 +1,13 @@
 
-div(style='margin: 20px auto; width: 90%')
+.main-content
   .row
+    .hide-on-computer
+      h1 Alicia Sykes CV
+
+      h4 <i class="material-icons">perm_identity</i> About
+      .col.s12.card-panel
+          p!= bio.join(" ").replace(/\n/g, "<br>")
+
     h4 <i class="material-icons">assignment</i> Employment
     .col.s12.card-panel
       for job in employment
@@ -31,3 +38,29 @@ div(style='margin: 20px auto; width: 90%')
         span(style='font-size:#{(skill.level / 6)+0.6}em; cursor: default', title='#{skill.type}: #{skill.name}. Competency: #{skill.level}/5') #{skill.name} &thinsp;
 
 
+  .row.hide-on-computer
+    br
+
+    .col.s6
+      h4 Contact
+      .card-panel
+          b Email:
+          span!= '&thinsp;'+contact.email
+          br
+          b Phone:
+          span!= '&thinsp;'+contact.phone
+          br
+          b Address:
+          span!= '&thinsp;'+contact.address
+
+    .col.s6.hide-on-computer
+      h4 Links
+      .card-panel
+        b Website:
+        span!= '&thinsp;' + contact.website
+        br
+        b GitHub:
+        span!= '&thinsp;' + social.github
+        br
+        b LinkedIn:
+        span!= '&thinsp;' + social.linkedin

src/views/fragments/side.jade

@@ -37,6 +37,3 @@ header.light-blue
     .row
       .col.s2: img(src='assets/linkedin.png')
       a(href='https://#{social.linkedin}').col.s10.white-text= social.linkedin
-
-
-