Clean up markup & styles

2 files changed, 331 insertions, 0 deletions

diff --git a/assets/stylesheets/site.scss b/assets/stylesheets/site.scss
new file mode 100644
index 0000000..a2ae002
--- /dev/null
+++ b/assets/stylesheets/site.scss
@@ -0,0 +1,224 @@
+---
+---
+
+@import "normalize";
+@import "global";
+@import "960-responsive";
+// @import "syntax";
+
+body {
+    font-family: $serif;
+    font-size: 20px;
+    color: $black;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: $sans;
+    font-weight: 200;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    text-align: center;
+    padding-left: 10%;
+    padding-right: 10%;
+}
+
+a {
+    color: $red;
+    text-decoration: none;
+    @include transition(color, $link-fade-time, ease);
+
+    &:hover {
+        color: darken($red, $link-darken-amount);
+    }
+
+    &.project {
+        color: $blue;
+        &:hover {
+            color: darken($blue, $link-darken-amount);
+        }
+    }
+
+    &.post {
+        color: $magenta;
+        &:hover {
+            color: darken($magenta, $link-darken-amount);
+        }
+    }
+}
+
+p {
+    line-height: 2em;
+    margin-bottom: 2em;
+    margin-top: 2em;
+}
+
+pre {
+    margin-bottom: 2em;
+    margin-top: 2em;
+}
+
+blockquote {
+    width: 80%;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    position: relative;
+
+    quotes: "\201C""\201D""\2018""\2019";
+
+    &:before {
+        content: open-quote;
+        color: $base1;
+        font-size: 4em;
+        margin: 0;
+        padding: 0;
+        line-height: 0;
+        position: absolute;
+        left: -0.7em;
+        top: 0.5em;
+        font-family: $monospace;
+    }
+}
+
+table {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+td {
+    font-size: 0.8em;
+    padding: 0.5em;
+    vertical-align: top;
+}
+
+ul {
+    list-style-type: square;
+}
+
+ul, ol {
+    margin-left: 2em;
+    margin-bottom: 1em;
+}
+
+li {
+    margin-bottom: 1em;
+}
+
+code {
+    font-family: $monospace;
+    font-size: 0.8em;
+    // color: $base1;
+}
+
+footer {
+    font-family: $monospace;
+    text-align: center;
+    border-top: 2px solid $base1;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    font-size: 0.8em;
+    @include transition(color, $link-fade-time, ease);
+    color: $base1;
+
+    a {
+        color: $base1;
+    }
+
+    &:hover {
+        color: $black;
+
+        a {
+            color: $red;
+            &:hover {
+                color: darken($red, $link-darken-amount);
+            }
+        }
+    }
+}
+
+header {
+    a {
+        font-family: $sans;
+        font-weight: 200;
+        color: $white;
+        display: block;
+        border: none;
+        text-align: center;
+        padding: 0.5em;
+        @include transition(all, $link-fade-time, ease);
+
+        &:hover {
+            color: $white;
+        }
+    }
+
+    .projects {
+        @include nav_button($blue);
+    }
+
+    .posts {
+        @include nav_button($magenta);
+    }
+
+    .github {
+        @include nav_button($green);
+    }
+
+    .resume {
+        @include nav_button($orange);
+    }
+}
+
+.about {    
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.portrait {
+    width: 200px;
+    height: 200px;
+    margin-top: 2em;
+    margin-left: auto;
+    margin-right: auto;
+    background-image: url('/assets/images/ben_circle.png');
+    background-repeat: no-repeat;
+}
+
+.center {
+    text-align: center;
+}
+
+.right {
+    text-align: right;
+}
+
+.date {
+    // margin-bottom: 1em;
+    font-family: $monospace;
+    // font-weight: 200;
+    color: $base1;
+    text-align: center;
+}
+
+article {
+    img {
+        max-width: 100%;
+    }
+}
+
+@media print {
+    body {
+        color: #000;
+    }
+
+    a {
+        color: #000;
+    }
+
+    header, footer {
+        display: none;
+        visibility: hidden;
+    }
+}
diff --git a/assets/stylesheets/viewtime.css b/assets/stylesheets/viewtime.css
new file mode 100644
index 0000000..b37bebc
--- /dev/null
+++ b/assets/stylesheets/viewtime.css
@@ -0,0 +1,107 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    font-family: 'Helvetica', sans-serif;
+    font-size: 24px;
+    text-align: center;
+    background-color: #2A2A2A;
+    color: #2A2A2A;
+}
+
+.container {
+    background-color: #FFFFFF;
+    -webkit-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75);
+    width: 960px;
+    max-width: 100%;
+    min-width: 240px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 1em;
+}
+
+a {
+    text-decoration: none;
+}
+
+p {
+    padding-top: 40px;
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+h1 {
+    width: 960px;
+    max-width: 100%;
+    min-width: 240px;
+    height: 250px;
+    background-image: -o-linear-gradient(-89deg, #C02126 0%, #4A1112 100%);
+    background-image: -moz-linear-gradient(-89deg, #C02126 0%, #4A1112 100%);
+    background-image: -ms-linear-gradient(-89deg, #C02126 0%, #4A1112 100%);
+    background-image: linear-gradient(-179deg, #C02126 0%, #4A1112 100%);
+    font-size: 72px;
+    line-height: 250px;
+    color: #FFFFFF;
+    text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
+}
+
+a#install_button {
+    border-radius: 10px;
+    font-size: 48px;
+    padding: 10px 120px;
+}
+
+.inactive {
+    background-color: #AAAAAA;
+    color: #cccccc;
+}
+
+.active {
+    color: #FFFFFF;
+    text-shadow: 0px -2px 0px rgba(0,0,0,0.50);
+    background-image: -o-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%);
+    background-image: -moz-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%);
+    background-image: -ms-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%);
+    background-image: linear-gradient(-179deg, #86C01E 0%, #2F6F15 100%);
+}
+
+.active:hover {
+    background-image: -o-linear-gradient(-89deg, #6DA705 0%, #165600 100%);
+    background-image: -moz-linear-gradient(-89deg, #6DA705 0%, #165600 100%);
+    background-image: -ms-linear-gradient(-89deg, #6DA705 0%, #165600 100%);
+    background-image: linear-gradient(-179deg, #6DA705 0%, #165600 100%);
+    text-shadow: 0px -2px 0px rgba(0,0,0,0.50);
+}
+
+.active:active {
+    background-image: -o-linear-gradient(-89deg, #165600 0%, #6DA705 100%);
+    background-image: -moz-linear-gradient(-89deg, #165600 0%, #6DA705 100%);
+    background-image: -ms-linear-gradient(-89deg, #165600 0%, #6DA705 100%);
+    background-image: linear-gradient(-179deg, #165600 0%, #6DA705 100%);
+    text-shadow: 0px 2px 0px rgba(0,0,0,0.50);
+}
+
+p img {
+    padding: 10px;
+}
+
+.install_tagline {
+    font-size: 14px;
+    padding-top: 10px;
+}
+
+#safari_text, #chrome_text {
+    display: none;
+}
+
+.home_link {
+    font-size: 18px;
+    color: #dc322f;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}