From f05ea4ae3da870502c499d836ee1f154b4c75072 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Wed, 1 Nov 2017 23:00:09 -0700
Subject: [PATCH] Fix iphone style lol

---
 css/style.css   | 173 +++++++++++-----------
 index.html      |   4 +-
 sass/style.scss | 382 ++++++++++++++++++++++++------------------------
 3 files changed, 283 insertions(+), 276 deletions(-)

diff --git a/css/style.css b/css/style.css
index 96835a0..360ff93 100644
--- a/css/style.css
+++ b/css/style.css
@@ -114,12 +114,12 @@
     -o-transform: none;
     transform: none; } }
 
-.reset, body, .slide, .slide div .project .details h2, .slide div .project .details p, .slide div .project .details .award div p {
+.reset, body, .slide, .slide .project .details h2, .slide .project .details p, .slide .project .details .award div p {
   padding: 0;
   margin: 0;
   text-indent: 0; }
 
-.widthCenter, .slide div, .slide p,
+.widthCenter, .slide > div, .slide p,
 .slide h1,
 .slide h2,
 .slide h3,
@@ -145,7 +145,6 @@
  */
 body {
   font-family: 'Playfair Display', serif;
-  font-size: 1.1em;
   line-height: 1.6; }
 
 #top {
@@ -160,7 +159,6 @@ body {
     font-weight: normal; }
 
 #mast {
-  font-size: 1.1em;
   margin-top: 10px;
   background: none;
   line-height: 1.2;
@@ -173,12 +171,19 @@ body {
   #mast .sub {
     font-style: italic;
     color: #ccc; }
-  #mast img {
-    transition-duration: .2s; }
+  #mast h1 {
+    font-size: 2.5em;
+    font-style: italic;
+    font-weight: normal;
+    color: #ed1a76;
+    transition-property: size;
+    transition-duration: .2s;
+    margin: -18px 0 0 0; }
   #mast h2 {
     transition-property: size;
     transition-duration: .2s;
-    color: #91EFFF; }
+    color: #91EFFF;
+    margin: 0; }
 
 #spaceTakerUpper {
   height: 100vh;
@@ -219,82 +224,84 @@ body {
 .slide {
   padding: 0px;
   width: 100%;
-  /* width wrapping */ }
-  .slide div {
-    /* Project bits */ }
-    .slide div .project {
-      width: 390px;
-      padding: 0 0 1em 0;
-      border: 1px solid #eee;
-      border-radius: 5px;
-      overflow: hidden;
-      box-shadow: 1px 1px 3px #ddd;
-      background: white;
-      margin-bottom: 20px; }
-      .slide div .project .cover {
-        height: 15em;
-        background-position: center center;
-        background-size: cover;
-        background-repeat: no-repeat;
-        margin: 0px;
-        padding: 1em; }
-        .slide div .project .cover video {
-          height: 100%;
-          width: 100%; }
-      .slide div .project .details {
-        padding: 1em 1em 0 1em; }
-        .slide div .project .details h2 {
-          line-height: 1;
-          margin: 0 0 .5em 0; }
-        .slide div .project .details p {
-          margin: 0 0 .5em 0; }
-        .slide div .project .details .tag {
-          float: left;
-          padding: 0 .3em 0 .3em;
-          background: #f3f3f3;
-          border: 1px solid #ddd;
-          margin: .2em;
-          border-radius: 5px; }
-        .slide div .project .details .cat {
-          background: #B7EEFF;
-          border: 1px solid #8AC9DD; }
-        .slide div .project .details .award {
-          float: right;
-          background: none;
-          border: none;
-          margin: 0 0 .5em .5em; }
-          .slide div .project .details .award div {
-            display: inline-block;
-            text-align: center;
-            vertical-align: middle;
-            padding: 0; }
-            .slide div .project .details .award div h3 {
-              margin: 0;
-              padding: 0;
-              font-size: 1.4em;
-              line-height: 1;
-              font-weight: normal;
-              font-style: italic; }
-            .slide div .project .details .award div p {
-              font-size: .8em; }
-        .slide div .project .details .award::before,
-        .slide div .project .details .award::after {
-          vertical-align: middle;
-          background-image: url(../images/laurelleft.png);
-          background-size: contain;
-          background-repeat: no-repeat;
-          background-position: center center;
+  /* width wrapping */
+  /* Project bits */ }
+  .slide .project {
+    width: 390px;
+    padding: 0 0 1em 0;
+    border: 1px solid #eee;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 1px 1px 3px #ddd;
+    background: white;
+    margin-bottom: 20px; }
+    .slide .project .cover {
+      height: 14em;
+      background-position: center center;
+      background-size: cover;
+      background-repeat: no-repeat;
+      margin: 0px;
+      padding: 1em; }
+      .slide .project .cover video {
+        height: 100%;
+        width: 100%; }
+      @media (max-width: 800px) {
+        .slide .project .cover {
+          height: 45vw; } }
+    .slide .project .details {
+      padding: 1em 1em 0 1em; }
+      .slide .project .details h2 {
+        line-height: 1;
+        margin: 0 0 .5em 0; }
+      .slide .project .details p {
+        margin: 0 0 .5em 0; }
+      .slide .project .details .tag {
+        float: left;
+        padding: 0 .3em 0 .3em;
+        background: #f3f3f3;
+        border: 1px solid #ddd;
+        margin: .2em;
+        border-radius: 5px; }
+      .slide .project .details .cat {
+        background: #B7EEFF;
+        border: 1px solid #8AC9DD; }
+      .slide .project .details .award {
+        float: right;
+        background: none;
+        border: none;
+        margin: 0 0 .5em .5em; }
+        .slide .project .details .award div {
           display: inline-block;
-          content: "";
-          width: 1.6em;
-          height: 3em;
-          position: relative; }
-        .slide div .project .details .award::before {
-          background-image: url(../images/laurelleft.png);
-          left: .09em; }
-        .slide div .project .details .award::after {
-          background-image: url(../images/laurelright.png);
-          right: .11em; }
+          text-align: center;
+          vertical-align: middle;
+          padding: 0; }
+          .slide .project .details .award div h3 {
+            margin: 0;
+            padding: 0;
+            font-size: 1.4em;
+            line-height: 1;
+            font-weight: normal;
+            font-style: italic; }
+          .slide .project .details .award div p {
+            font-size: .8em; }
+      .slide .project .details .award::before,
+      .slide .project .details .award::after {
+        vertical-align: middle;
+        background-image: url(../images/laurelleft.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        display: inline-block;
+        content: "";
+        width: 1.6em;
+        height: 3em;
+        position: relative; }
+      .slide .project .details .award::before {
+        background-image: url(../images/laurelleft.png);
+        left: .09em; }
+      .slide .project .details .award::after {
+        background-image: url(../images/laurelright.png);
+        right: .11em; }
   .slide table {
     line-height: 1.3;
     margin: 0;
@@ -311,7 +318,7 @@ body {
     font-style: italic;
     margin-top: 1.7em; }
   @media (max-width: 800px) {
-    .slide .widthCenter, .slide div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
+    .slide .widthCenter, .slide > div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
       margin-left: 12px;
       margin-right: 12px; }
     .slide div .project {
diff --git a/index.html b/index.html
index 4dff7d4..eb37632 100644
--- a/index.html
+++ b/index.html
@@ -25,8 +25,8 @@
         <div style="display:table;width:100%;height: 100%">
             <div style="display:table-cell;vertical-align:middle;">
                 <div id="mast">
-                    <h1 style="display:none;">Chuck Dries</h1>
-                    <img src="images/cd.png" alt="Chuck Dries">
+                    <h1>Chuck Dries</h1>
+                    <!-- <img src="images/cd.png" alt="Chuck Dries"> -->
                     <h2 class="tagline">Programmer
                         <span style="font-style: normal">/</span> Student
                         <span style="font-style: normal">/</span> Friendly dude
diff --git a/sass/style.scss b/sass/style.scss
index bbdc525..98d0669 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,141 +1,139 @@
-//setup
-@import 'responsive';
-@import 'animations';
-$width: 800px;
-$grey: #ccc;
-$pink: #ed1a76;
-$blue: #91EFFF;
-$greybg: #202020;
-.reset {
-    padding: 0;
-    margin: 0;
-    text-indent: 0;
-}
+    //setup
+    @import 'responsive';
+    @import 'animations';
+    $width: 800px;
+    $grey: #ccc;
+    $pink: #ed1a76;
+    $blue: #91EFFF;
+    $greybg: #202020;
+    .reset {
+        padding: 0;
+        margin: 0;
+        text-indent: 0;
+    }
 
-.widthCenter {
-    max-width: $width;
-    margin: auto;
-}
-
-
-/*
+    .widthCenter {
+        max-width: $width;
+        margin: auto;
+    }
+    /*
  * Covers for projects section
  */
 
-@import 'covers';
-
-/*
+    @import 'covers';
+    /*
  * sections
  */
 
-body {
-    @extend .reset; // font-family: 'Nota-serif', serif;
-    font-family: 'Playfair Display', serif;
-    font-size: 1.1em;
-    line-height: 1.6; // margin-bottom: 700px;
-}
-
-#top {
-    padding-top: 10px;
-    width: 100%;
-    position: fixed; // background: black;
-    z-index: 999;
-    div {
-        margin: auto;
-        max-width: $width;
-    }
-    h2 {
-        font-weight: normal;
-    }
-}
-
-#mast {
-    font-size: 1.1em;
-    margin-top: 10px;
-    background: none;
-    line-height: 1.2;
-    color: white;
-    a {
-        color: white;
-        font-style: inherit; // text-decoration: none;
-    }
-    a:hover {
-        color: $pink;
-    }
-    .sub {
-        font-style: italic;
-        color: $grey;
-    }
-    img {
-        transition-duration: .2s;
-    }
-    h2 {
-        transition-property: size;
-        transition-duration: .2s;
-        color: #91EFFF;
-    }
-}
-
-#spaceTakerUpper {
-    height: 100vh;
-    background: $greybg;
-}
-
-//small and large classes are applied to #top
-.small {
-    background: $greybg;
-    .hideable {
-        display: none;
-        opacity: 0;
-    }
-    img {
-        max-width: 200px;
-    }
-    h2 {
-        font-size: 1.2em;
-        margin: 5px;
-    }
-    p {
-        margin: 5px;
-    }
-}
-
-.large {
-    img {
-        width: 100%;
-        max-width: 380px;
-    }
-    .hideable {
-        opacity: 1;
-    }
-    h2 {
-        font-size: 1.3em;
-    }
-}
-
-//TODO: fix
-.nojs {
     body {
-        background: white;
+        @extend .reset; // font-family: 'Nota-serif', serif;
+        font-family: 'Playfair Display', serif;
+        line-height: 1.6; // margin-bottom: 700px;
     }
+
+    #top {
+        padding-top: 10px;
+        width: 100%;
+        position: fixed; // background: black;
+        z-index: 999;
+        div {
+            margin: auto;
+            max-width: $width;
+        }
+        h2 {
+            font-weight: normal;
+        }
+    }
+
     #mast {
-        background: $greybg;
+        margin-top: 10px;
+        // margin-top:0;
+        background: none;
+        line-height: 1.2;
+        color: white;
+        a {
+            color: white;
+            font-style: inherit; // text-decoration: none;
+        }
+        a:hover {
+            color: $pink;
+        }
+        .sub {
+            font-style: italic;
+            color: $grey;
+        }
+        h1{
+            font-size: 2.5em;
+            font-style: italic;
+            font-weight: normal;
+            color: $pink;
+            transition-property: size;
+            transition-duration: .2s;
+            margin: -18px 0 0 0;
+        }
+        h2 {
+            transition-property: size;
+            transition-duration: .2s;
+            color: #91EFFF;
+            margin: 0;
+        }
     }
-}
 
+    #spaceTakerUpper {
+        height: 100vh;
+        background: $greybg;
+    } //small and large classes are applied to #top
+    .small {
+        background: $greybg;
+        .hideable {
+            display: none;
+            opacity: 0;
+        }
+        img {
+            max-width: 200px;
+        }
+        h2 {
+            font-size: 1.2em;
+            margin: 5px;
+        }
+        p {
+            margin: 5px;
+        }
+    }
 
-/*
+    .large {
+        img {
+            width: 100%;
+            max-width: 380px;
+        }
+        .hideable {
+            opacity: 1;
+        }
+        h2 {
+            font-size: 1.3em;
+        }
+    } //TODO: fix
+    .nojs {
+        body {
+            background: white;
+        }
+        #mast {
+            background: $greybg;
+        }
+    }
+    /*
  * standalone elements
  */
 
-// the standard section element
-.slide {
-    @extend .reset;
-    padding: 0px;
-    width: 100%;
-    /* width wrapping */
-    div {
-        @extend .widthCenter;
+    // the standard section element
+    .slide {
+        @extend .reset;
+        padding: 0px;
+        width: 100%;
+        /* width wrapping */
+        &>div {
+            @extend .widthCenter;
+        }
         /* Project bits */
         //TODO: un-nest this stuff
         .project {
@@ -148,7 +146,7 @@ body {
             background: white;
             margin-bottom: 20px;
             .cover {
-                height: 15em;
+                height: 14em;
                 background-position: center center;
                 background-size: cover;
                 background-repeat: no-repeat;
@@ -158,6 +156,9 @@ body {
                     height: 100%;
                     width: 100%;
                 }
+                @include respond-to($width) {
+                    height: 45vw;
+                }
             }
             .details {
                 padding: 1em 1em 0 1em;
@@ -229,81 +230,80 @@ body {
                 }
             }
         }
-    }
-    table {
-        line-height: 1.3;
-        margin: 0;
-        padding: 2px;
-        border-spacing: 0;
-        border-collapse: collapse;
-        vertical-align: text-top;
-    }
-    ul {
-        margin: 5px;
-    }
-    p {
-        text-indent: 2em;
-    }
-    h1 {
-        font-size: 2em;
-        font-style: italic; // font-weight: 700;
-        margin-top: 1.7em;
-    }
-    .grid {
-        // columns: 2 auto;
-    }
-    @include textElements() {
-        @extend .widthCenter;
-    }
-    @include respond-to($width) {
-        .widthCenter {
-            margin-left: 12px;
-            margin-right: 12px;
+        table {
+            line-height: 1.3;
+            margin: 0;
+            padding: 2px;
+            border-spacing: 0;
+            border-collapse: collapse;
+            vertical-align: text-top;
         }
-        div {
-            // margin: auto;
-            // padding: 0;
-            .project {
-                width: 90%;
-                float: none;
-                display: block;
-                margin: 0 0 .5em 5%;
-                ;
-            }
+        ul {
+            margin: 5px;
         }
-        @include textElements() {
-            // margin-right: .8em;
-            // margin-left: .8em;
+        p {
+            text-indent: 2em;
+        }
+        h1 {
+            font-size: 2em;
+            font-style: italic; // font-weight: 700;
+            margin-top: 1.7em;
         }
         .grid {
-            // columns: 1 auto;
+            // columns: 2 auto;
+        }
+        @include textElements() {
+            @extend .widthCenter;
+        }
+        @include respond-to($width) {
+            .widthCenter {
+                margin-left: 12px;
+                margin-right: 12px;
+            }
+            div {
+                // margin: auto;
+                // padding: 0;
+                .project {
+                    width: 90%;
+                    float: none;
+                    display: block;
+                    margin: 0 0 .5em 5%;
+                    ;
+                }
+            }
+            @include textElements() {
+                // margin-right: .8em;
+                // margin-left: .8em;
+            }
+            .grid {
+                // columns: 1 auto;
+            }
         }
     }
-}
 
-#skilltablebutton {
-    text-decoration: underline;
-    font-size: 1.1em;
-    font-style: italic;
-    font-weight: normal;
-}
-
-#scrollprompt {
-    // @include prefix(animation, 1s 1.1s 1 prompt)
-    @include prefix(animation, 2s ease fadeIn)
-}
-
-@include respond-to($width) {
-    #mast {
-        padding-left: 1em;
+    #skilltablebutton {
+        text-decoration: underline;
+        font-size: 1.1em;
+        font-style: italic;
+        font-weight: normal;
     }
-}
 
-h2 {
-    // font-weight: normal;
-    font-style: italic;
-}
+    #scrollprompt {
+        // @include prefix(animation, 1s 1.1s 1 prompt)
+        @include prefix(animation, 2s ease fadeIn)
+    }
 
-a {
-    transition-duration: .2s;
-}
\ No newline at end of file
+    @include respond-to($width) {
+        #mast {
+            padding-left: 1em;
+        }
+    }
+
+    h2 {
+        // font-weight: normal;
+        font-style: italic;
+    }
+
+    a {
+        transition-duration: .2s;
+    }
\ No newline at end of file