From e1702f277c53c8b3bcfe073873eb617733c8f5d4 Mon Sep 17 00:00:00 2001
From: Eli Gladman <eli.gladman@gmail.com>
Date: Sat, 23 Jan 2016 21:56:46 -0500
Subject: [PATCH] scalled back ui while preserving text size

---
 _assets/css/_media-queries.sass | 166 ++++++++------------------------
 _assets/css/_scroll.sass        |   8 +-
 _assets/css/main.sass           |  29 +++---
 3 files changed, 59 insertions(+), 144 deletions(-)

diff --git a/_assets/css/_media-queries.sass b/_assets/css/_media-queries.sass
index 791cedef5..a41d668a8 100644
--- a/_assets/css/_media-queries.sass
+++ b/_assets/css/_media-queries.sass
@@ -31,23 +31,14 @@
       &::before
         display: none
 
-@media (min-width: 550px) and (max-width: 749px) and (orientation: landscape)
-  // .landing
-  //   height: 100%
-  //   #heading-wrapper
-  //     top: 25%
 
 @media (min-width: 550px) and (max-width: 749px)
   #heading
     font-size: 135%
   .landing
-    // height: 31em
 
-    //fixme
     #heading-wrapper
-      // top: 50%
     .landing-heading
-      // font-size: 2.4rem
       h4
         font-family: inherit
     img
@@ -74,8 +65,6 @@
 @media (min-width: 750px)
   .landing-heading
     font-size: 2.6rem
-  // .section
-    // padding: 5rem 0 15rem
   .section-description
     margin-left: auto
     margin-right: auto
@@ -113,59 +102,37 @@
     width: 100%
     width: calc(100% - #{$sidebarWidth})
     height: 100%
-    height: calc(100% - 9rem)
+    height: calc(100% - 8rem)
     transition: all 0.25s linear
     z-index: 9
-    margin-top: 9rem
+    margin-top: 8rem
     &.index
       left: $sidebarWidth
     >*
       transition: 0s
   .layout-desktop
     display: inherit
-  // .section
-    // padding: 20rem 0 19rem
-  // .about
-  //   h5
-  //     font-size: 185%
+
   #social-media
     width: 15%
   .sidebar + #page-content-wrapper
     &:not(.index)
       width: 100%
-      left: 35rem
+      left: 30rem
     > .section.posts:only-child > .container
       width: 50%
 
 @media (min-width: 550px) and (max-width: 749px) and (orientation: landscape)
   .landing
-    // height: 100%!important
     #heading-wrapper
-      // top: 50%
       #heading
         font-size: 85%
 
-// @media (max-width: 749px) and (min-height: 500px)
-//   // .landing
-//     // height: 20em
-//     // fixme
-//
-// @media (max-width: 749px) and (min-height: 500px) and (orientation: portrait)
-//   // .landing
-//     // height: 30em
-//     //fixme
-//     // #heading-wrapper
-//       // top: 37.5%
-
 @media (min-width: 750px) and (max-width: 1199px) and (orientation: landscape)
   input#mce-EMAIL
     min-width: 10em
     ul li:not(:last-of-type)
       margin-right: 3em
-  // .landing
-    // height: 100%
-    // #heading-wrapper
-      // top: 50%
 
 @media (min-width: 1200px) and (orientation: landscape)
   .landing
@@ -173,15 +140,8 @@
     #heading
       font-size: 125%
 
-// @media (min-width: 1200px) and (orientation: landscape) and (max-height: 799px)
-//   // .landing
-//   //   height: 100%
-//   //   #heading-wrapper
-//   //     top: 50%
-
 @media (max-width: 1199px) and (min-width: 550px)
   .landing
-    // height: 45em
     img
       height: 12em
     h4
@@ -206,8 +166,6 @@
         margin: 0 1.5em 1.5em 1.5em
       &:first-of-type .info-wrapper
         margin-top: 1.5em
-  // .github-ribbon
-    // top: 8rem
   #scroll-indicator
     display: none
   .layout-mobile
@@ -215,7 +173,7 @@
   .layout-desktop
     display: none
   .navbar
-    height: 8rem
+    height: 6rem
     position: fixed
     transition: all 0.25s linear
     z-index: 9
@@ -230,11 +188,11 @@
     right: 0
     transition: all 0.25s linear
   .search-bar
-    height: 8rem
+    height: 6rem
     transition: all 0.25s linear
   #search-posts
-    height: 8rem
-    font-size: 3rem
+    height: 6rem
+    font-size: 2.5rem
     width: 25em
     border: none
     transition: all 0.25s linear
@@ -245,31 +203,31 @@
     cursor: pointer
     position: absolute
     top: 0
-    width: 8rem
-    height: 8rem
+    width: 6rem
+    height: 6rem
     right: 0
     transition: all 0.25s linear
     &::before
       position: absolute
       top: 0
-      width: 8rem
-      height: 8rem
-      line-height: 8rem
-      font-size: 4rem
+      width: 6rem
+      height: 6rem
+      line-height: 6rem
+      font-size: 3rem
       right: 0
       -webkit-box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.35)
       -moz-box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.35)
       box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.35)
   #search-results
-    right: 8rem
+    right: 6rem
   .menu-toggle
     position: absolute
     background: lighten(#848484, 10%)
     cursor: pointer
     margin:  0
-    line-height: 8rem
-    width: 8rem
-    height: 8rem
+    line-height: 6rem
+    width: 6rem
+    height: 6rem
     z-index: 9
     transition: all 0.25s linear
     top: 0
@@ -280,7 +238,7 @@
       top: 0
       left: 0
       font-family: 'FontAwesome'
-      font-size: 4rem
+      font-size: 3rem
       color: $white
       line-height: inherit
       text-align: center
@@ -331,8 +289,8 @@
     left: 0
     right: 0
     height: 100%
-    height: calc(100% - 8rem)
-    margin-top: 8rem
+    height: calc(100% - 6rem)
+    margin-top: 6rem
     overflow-x: hidden
     transition: all 0.25s linear
     -webkit-overflow-scrolling: touch
@@ -348,7 +306,7 @@
       width: auto
       z-index: 8
       &.single
-        left: 35rem
+        left: 30rem
         transition: all 0.25s linear
 
   *:not(#page-content-wrapper):not(.sidebar):not(.navbar):not(.menu-toggle):not(#search-posts):not(.search-submit):not(.search-results):not(.scrollToTop)
@@ -369,11 +327,11 @@
   #page-content-wrapper
     width: 100%
   #main-nav
-    padding-top: 8rem
+    padding-top: 6rem
   .navbar
     width: 100%
   #search-posts
-    padding: 0px 8rem+2rem
+    padding: 0px 6rem+2rem
     width: 100%
     min-width: inherit
     border: none
@@ -385,17 +343,10 @@
   .search
     padding: 0
     width: 100%
-  // .github-ribbon
-    // font-size: 1.25em
-    // line-height: 2.25em
-    // height: 2.25em
-    // transform: translate(50%, -50%) rotate(45deg) translateY(5em)
-    // -webkit-transform: translate(50%, -50%) rotate(45deg) translateY(5.5em)
-    // -moz-transform: translate(50%, -50%) rotate(45deg) translateY(5.5em)
 
 @media (min-width: 750px) and (max-width: 1199px)
   #main-nav
-    padding-top: 8rem
+    padding-top: 6rem
   .landing
     height: 65em
   .mc-field-group
@@ -429,45 +380,31 @@
   .search
     transition: all 0.25s linear
   .navbar
-    height: 8rem
+    height: 6rem
     width: inherit
   .search-bar
-    height: 8rem
+    height: 6rem
   #search-posts
-    height: 8rem
-    font-size: 3rem
+    height: 6rem
     width: 25em
   .search-submit
-    width: 8rem
-    height: 8rem
+    width: 6rem
+    height: 6rem
     transition: all 0.25s linear
     &::before
       position: absolute
-      width: 8rem
-      height: 8rem
-      line-height: 8rem
-      font-size: 4rem
+      width: 6rem
+      height: 6rem
+      line-height: 6rem
+      font-size: 3rem
   #search-results
-    right: 8rem
+    right: 6rem
   .menu-toggle
-    line-height: 8rem
-    width: 8rem
-    height: 8rem
+    line-height: 6rem
+    width: 6rem
+    height: 6rem
     &::before
-      font-size: 4rem
-
-
-@media (min-width: 750px) and (max-width: 1199px) and (max-height: 1099px)
-  // .landing
-  //   height: 75%
-  //   #heading-wrapper
-  //     top: 37.5%
-
-@media (min-width: 750px) and (max-width: 1199px) and (max-height: 699px)
-  // .landing
-  //   height: 100%
-  //   #heading-wrapper
-  //     top: 50%
+      font-size: 3rem
 
 @media (min-width: 550px) and (max-width: 749px)
   .landing
@@ -480,7 +417,6 @@
       width: 100%
   .subscribe-wrapper
     padding-top: 6em
-    // height: 28em
 
 @media (min-width: 350px) and (max-width: 749px)
   .sidebar
@@ -504,14 +440,6 @@
       width: 100%
 
 @media (max-width: 349px)
-  // .github-ribbon
-  //   display: none
-  // .landing
-  //   height: 85%
-  //   #heading-wrapper
-  //     top: 42.5%
-      #heading
-        font-size: 65%
   .contact-info-email-container, .contact-info-office-container, .contact-info-meeting-container
     font-size: 85%
   .menu-toggle
@@ -558,12 +486,6 @@
   input#mc-embedded-subscribe
     width: 100%
 
-@media (max-width: 349px) and (max-height: 499px)
-  // .landing
-  //   height: 100%
-  //   #heading-wrapper
-  //     top: 50%
-
 @media (max-width: 549px)
   .landing
     img
@@ -590,16 +512,6 @@
   h5
     font-size: 2.4rem
 
-@media (min-width: 2000px) and (orientation: landscape)
-  // .landing
-  //   height: 100%
-  //   #heading-wrapper
-  //     top: 50%
-    #scroll-indicator
-      bottom: 0
-    #heading
-      font-size: 150%!important
-
 #sidebar-secondary-wrapper
   top: 0
   width: 100%
diff --git a/_assets/css/_scroll.sass b/_assets/css/_scroll.sass
index c2a7d9ad9..3cc3f453d 100644
--- a/_assets/css/_scroll.sass
+++ b/_assets/css/_scroll.sass
@@ -1,6 +1,6 @@
 .scrollToTop
-  width: 5em
-  height: 5em
+  width: 4em
+  height: 4em
   text-align: center
   background: rgba(75,75,75,0.35)
   font-weight: bold
@@ -13,7 +13,7 @@
   z-index: 10
   right: 3em
   vertical-align: middle
-  line-height: 5em
+  line-height: 4em
   -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.45)
   -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.45)
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.45)
@@ -31,6 +31,6 @@
     color: $white
     font-family: 'FontAwesome'
     content: '\f0d8'
-    font-size: 2.5em
+    font-size: 2em
     vertical-align: middle
     line-height: 2.15em
diff --git a/_assets/css/main.sass b/_assets/css/main.sass
index 72c39d2a1..a7c3f5dca 100644
--- a/_assets/css/main.sass
+++ b/_assets/css/main.sass
@@ -1,6 +1,6 @@
 @import "normalize"
 
-$sidebarWidth: 35rem
+$sidebarWidth: 30rem
 $maxContentWidth: 120em
 $bodyfont: "Open Sans", sans-serif
 $textColor: #5D5D5D
@@ -709,7 +709,7 @@ input
   margin: 0
   text-align: right
   width: 100%
-  height: 9rem
+  height: 8rem
   transition: all 0.25s linear
   z-index: 9
   -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15)
@@ -734,6 +734,7 @@ input
   transition: all 0.25s linear
   z-index: 10
   list-style: outside none none
+  font-size: 0.75em
   a
     color: white
     transition: all 0.25s linear
@@ -858,12 +859,14 @@ input
     margin-bottom: 2.5em
 
 #main-nav
-  padding-top: 6em
+  // fixme
+  // yeah yeah "magic numbers" are bad . . . .
+  padding-top: 7.15em
 .pagination
   display: block
-  font-size: 200%
+  font-size: 175%
   text-align: center
-  margin-top: 3em
+  margin-top: 4em
   .fa-caret-right
     &:hover:not(.disabled)
       background: rgba(75,75,75,0.5)
@@ -1059,13 +1062,13 @@ span.fa-angle-down
   height: 1em
 
 .contact-info-email, .contact-info-office, .contact-info-meeting
-  height: 12rem
+  height: 10rem
 
 .contact-info-email-container, .contact-info-office-container, .contact-info-meeting-container
   display: inline-block
   font-size: 3em
   padding: 0 2rem
-  margin: 0 0 0 12rem
+  margin: 0 0 0 10rem
   line-height: 0
   text-shadow: none
   vertical-align: middle
@@ -1073,13 +1076,13 @@ span.fa-angle-down
 .contact-info-email::before, .contact-info-office::before, .contact-info-meeting::before
   position: absolute
   font-family: 'FontAwesome'
-  font-size: 3em
+  font-size: 2.75em
   color: $white
   margin: 0
   overflow: hidden
   text-align: center
-  width: 12rem
-  height: 12rem
+  width: 10rem
+  height: 10rem
   vertical-align: middle
   -webkit-box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.35)
   -moz-box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.35)
@@ -1101,10 +1104,10 @@ span.fa-angle-down
   background-color: $white
   box-shadow: 0 1px 12px -2px rgba(0, 0, 0, 0.25)
   margin: 1.5em
-  line-height: 12rem
+  line-height: 10rem
   overflow: hidden
   text-align: left
-  height: 12rem
+  height: 10rem
   -webkit-box-shadow: 0 1px 12px -2px rgba(0, 0, 0, 0.25)
   -moz-box-shadow: 0 1px 12px -2px rgba(0, 0, 0, 0.25)
 
@@ -1180,7 +1183,7 @@ footer
         margin: 0 1ch
 
 #page-content-wrapper.single
-  left: 35rem
+  left: 30rem
   transition: 0s
   footer
     bottom: 0