resp-website

removed <noscript> from sidebar

26 files changed, 523 insertions, 69 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 39761390..e05de582 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -364,3 +364,18 @@ var AboutContent = {
     });
   }
 }
+
+// Scroll to Top
+$('#scrollToTop').removeClass('no-js');
+$(window).scroll(function() {
+  $(this).scrollTop() > 150 
+    ? $('#scrollToTop').fadeIn() 
+    : $('#scrollToTop').fadeOut();
+});
+$('#scrollToTop').click(function(e) {
+  e.preventDefault();
+  $("html, body").animate({
+      scrollTop: 0
+  }, "slow");
+  return false;
+});
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 243760ac..55aaf27c 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -30,6 +30,7 @@
 code {
   display: inline;
   padding: 0 5px;
+  word-break: break-all;
 }
 
 pre {
@@ -44,3 +45,7 @@ pre {
   overflow: auto;
   padding: 10px 15px 13px;
 }
+
+.d-flex{
+  display: flex;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/book.scss b/app/assets/stylesheets/book.scss
index 19edb140..456a6f4e 100644
--- a/app/assets/stylesheets/book.scss
+++ b/app/assets/stylesheets/book.scss
@@ -150,3 +150,18 @@ ol.book-toc {
 .switch a {
   color: #aaa;
 }
+
+.book-wrapper {
+  float:right;
+  margin: -20px 40px 0 40px;
+}
+
+@media (min-width: $mobile-m) {
+  .book-toc {
+    width: 60%
+  }
+  .book-wrapper {
+    position: sticky;
+    top: 2rem;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index aa696681..267bf81a 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -48,8 +48,8 @@ form#search {
     @include border-radius(20px);
     width: 100%;
     height: 20px;
-    margin-top: 5px;
-    margin-bottom: 1px;
+    margin-top: 4px;
+    margin-bottom: 2px;
     line-height: 1em;
     color: $font-color;
     background-color: transparent;
@@ -61,3 +61,23 @@ form#search {
     background-color: #fff;
   }
 }
+
+// Breakpoint ----------------
+@media (max-width: $default) {
+  form#search{
+    @include center-transformX;
+    margin-top: 7px;
+    top: unset;
+    width: 92%;
+  }
+}
+
+// Mobile
+@media (max-width: $mobile-m) {
+  form#search{
+    width: 84%;
+    #search-text {
+      padding: 0.3rem 0.1rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/front-page.scss b/app/assets/stylesheets/front-page.scss
index de4b7cdc..11d951fd 100644
--- a/app/assets/stylesheets/front-page.scss
+++ b/app/assets/stylesheets/front-page.scss
@@ -331,3 +331,87 @@ a.icon {
     @include background-image-2x("/images/icons/source-code", 25px, 20px, 0 6px);
   }
 }
+
+
+
+// Breakpoint ----------------
+@media (max-width: $default) {
+  #front-content {
+    display: flex;
+    #front-navigation {
+      width: 50%;
+      #front-nav {
+        ul {
+          padding: 0 1rem 0 0;
+          li {
+            margin-bottom: 1rem !important;
+            margin-right: 0 !important;
+          }
+        }
+      }
+      #front-book {
+        width: unset;
+      }
+    }
+    #front-downloads {
+      width: 50%;
+      .monitor {
+        @include center-transformX;
+      }
+      table{
+        @include center-transformX;
+        tbody, tr {
+          display: flex;
+          flex-direction: column;
+        }
+        td {
+          margin-bottom: 1rem;
+          a { padding-left: 2.3rem; }
+        }
+      }
+    }
+  }
+  #companies-projects {
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    li {
+      margin: 0.7rem 0.4rem;
+    }
+  }
+}
+
+// Mobile
+@media (max-width: $mobile-m) {
+  #front-content{
+    flex-direction: column-reverse;
+    #front-navigation, #front-downloads {
+      width: 100%;
+      border-right: none;
+    }
+    #front-navigation {
+      #front-nav  {
+        ul {
+          padding: 0 1rem;
+        }
+      }
+      #front-book {
+        @include flex-center;
+        align-items: center;
+      }
+    }
+    #front-downloads {
+      border-bottom: 1px solid $base-border-color;
+      margin-bottom: 2rem;
+      padding-bottom: 1rem;
+      .monitor, table {
+        position: relative;
+      }
+      table {
+        top: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 6ec0819c..e637847f 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -95,6 +95,7 @@ aside {
 
   img {
     max-width: 100%;
+    height: auto;
   }
 }
 
@@ -403,3 +404,181 @@ table.benchmarks {
     }
   }
 }
+// scrollToTop 
+.scrollToTop {
+  @include border-radius(50px);
+  display: none;
+  position: fixed;
+  background-color: rgba(223, 221, 213, 0.33);
+  right: 20px;
+  bottom: 6.25rem;
+  padding: 0.8rem;
+  height: 20px;
+  transition: background-color 0.2s;
+  width: 20px;
+  &:hover{
+    background-color: rgba(250, 250, 250, 0.9);
+    @include box-shadow(2px);
+    &::before {
+      @include center-transformX;
+      width: 0;
+      height: 0;
+      color: var(--color-neutral-emphasis-plus);
+      content: "";
+      border: 6px solid transparent;
+      border-color:$black-3 transparent transparent;
+      top: -0.55rem;
+      position: absolute;
+    }
+    &::after {
+      @include center-transformX;
+      top: -2rem;
+      border-radius: 4px;
+      position: absolute;
+      content: attr(data-label);
+      word-wrap: break-word;
+      white-space: pre;
+      padding: .5em .75em;
+      color:$callout-color;
+      background-color:$black-3;
+      font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+    }
+  }
+}
+.no-js{ 
+  &.scrollToTop {
+    display: block;
+  }
+}
+
+// Breakpoint ----------------
+@media (max-width: $default) {
+  .responsive-table { overflow-x: auto; }
+  .center img { height: 100%; }
+  header{
+      padding-bottom: 2.5rem;
+    a, span {
+      padding-left: 1rem;
+      margin-bottom: 10px ;
+    }
+  }
+  #home { .inner { > header { padding-bottom: 2rem; } } }
+  #content { width: 100%; }
+  .inner { width: 100%; }
+  #content-wrapper { padding: 0.8rem; }
+  
+  #masthead {
+    height: unset;
+    .inner {
+      display: flex;
+      margin-top: 1.8rem;
+      div:first-of-type {
+        padding:1rem;
+      }
+      .illustration-wrapper {
+        display: flex;
+        align-items: center;
+      }
+      p { width: unset; }
+      img.illustration {
+        position: unset;
+        right: unset;
+        top: unset;
+        max-height: 100%;
+      }
+    }
+  }
+  footer {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+// Mobile
+@media (max-width: $mobile-m) {
+  header {
+    padding-bottom: 3rem;
+    #tagline {
+      font-size: 0.8rem;
+      top: 0;
+      padding-right: 1rem;
+    }
+  }
+  #home { .inner { > header { padding-bottom: 2.5rem; } } }
+  #masthead {
+    .inner { flex-direction: column-reverse; }
+    .illustration-wrapper {
+      @include flex-center;
+      overflow: hidden;
+      .illustration {
+        width: 80%;
+        height: 100%;
+      }
+    }
+  }
+  #main {
+    >.two-column {
+      .column-right {
+        position: relative;
+        @include flex-center;
+      }
+    }
+    .two-column {
+      @include flex-column;
+      .column-left, .column-right {
+        width: 100%;
+      }
+    }
+  }
+  // Topics dropdown
+  #book-chapters,
+  #reference-version {
+    .dropdown-panel {
+      width: unset;
+      .three-column {
+        @include flex-column;
+        height: 70vh;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        .column-left,
+        .column-middle,
+        .column-right {
+          width: 100%;
+          max-width: 300px;
+        }
+        .unstyled { 
+          a {
+          padding: 0.15rem 0;
+          display: block;
+          }
+        }  
+        .chapter{
+          h2 {
+            display: flex;
+            align-items: center; 
+            a { padding-left: 5px; }
+          }
+          ol { 
+            li {
+              display: flex;
+              align-items: center;
+              margin-bottom: 6px;
+              padding: 0.45rem 0;
+               a { padding-left: 5px;}
+            }
+          }
+        }
+      }
+    }
+  }
+  footer {
+    @include flex-center;
+    flex-direction: column;
+    align-items: center;
+    .site-source {
+      margin-bottom: 1rem;
+    }
+  }
+  .scrollToTop {
+    bottom: 6rem;
+  }
+}
diff --git a/app/assets/stylesheets/lists.scss b/app/assets/stylesheets/lists.scss
index 49d9ac6b..d734602c 100644
--- a/app/assets/stylesheets/lists.scss
+++ b/app/assets/stylesheets/lists.scss
@@ -169,3 +169,23 @@ table.binaries {
     border: solid 1px transparent;
   }
 }
+// Breakpoint ----
+@media (max-width: $default){
+  ol#about-nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+
+@media (max-width: $mobile-m){
+  ol#about-nav {
+    justify-content: unset;
+    li {
+      padding-right: 0;
+      margin-right: 0.6rem;
+      flex-basis: 29%;
+      margin-bottom: 1rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 9107bde9..154ca82d 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -59,3 +59,33 @@
       background-size: $w $h;
     }
 }
+
+@mixin center-transformX {
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin flex-column-r {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+@mixin responsive-sidebar-ui {
+  background-color: #efefe7;
+  z-index: 305;
+  left: 0;
+  box-shadow: 6px 2px 8px 0px rgba(28,28,28,0.10%);
+  border: thin solid #ddd;
+  border-radius: 0 5px 5px 0;
+  transform: translateX(0%);
+}
diff --git a/app/assets/stylesheets/reference.scss b/app/assets/stylesheets/reference.scss
index 173fbbc9..0d4d8302 100644
--- a/app/assets/stylesheets/reference.scss
+++ b/app/assets/stylesheets/reference.scss
@@ -314,6 +314,9 @@ ol.reference-previous-versions {
   @include background-image-2x("/images/icons/book", 54px, 72px, 24px 20px);
   padding: 20px 30px 20px 100px !important;
   background-color: $callout-color;
+  iframe {
+    max-width: 100%;
+  }
 
   h3 {
     font-size: 18px;
@@ -360,3 +363,18 @@ code.command {
     font-weight: bold;
   }
 }
+// Breakpoint ---
+@media (max-width: $default){
+  #video-container {
+    iframe {
+      width: 100%;
+    }
+  }
+}
+@media (max-width: $mobile-m){
+  #video-container {
+    iframe {
+      height: auto;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/search.scss
index 9cca6d8d..9d61128d 100644
--- a/app/assets/stylesheets/search.scss
+++ b/app/assets/stylesheets/search.scss
@@ -128,3 +128,18 @@ ol.full-search-results {
   padding-top: 1em !important;
   margin-bottom: 2em !important;
 }
+
+// Breakpoint ---
+@media (max-width: $default) {
+  #search-results{
+    @include center-transformX;
+    top: unset;
+    width: 98%;
+  }
+}
+// Mobile
+@media (max-width: $mobile-m) {
+  #search-results{
+    margin-top: 4px;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
index 3566b866..1c47033e 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/sidebar.scss
@@ -13,7 +13,6 @@ hr.sidebar {
 aside.sidebar {
   font-size: 13px !important;
   line-height: $base-line-height * 0.75;
-
   p {
     font-size: 13px !important;
     line-height: $base-line-height * 0.75;
@@ -31,3 +30,40 @@ aside.sidebar {
     }
   }
 }
+// Floating sidebar button for tablet and smaller screens
+aside.sidebar.active {
+    @include responsive-sidebar-ui;
+}
+.sidebar-btn {
+  display: none;
+}
+
+// Breakpoint ----------------
+@media (max-width: $default) {
+  .sidebar-btn {
+    @include background-image-2x("/images/icons/sidebar", 24px, 24px, left center);
+    @include border-top-right-radius(5px);
+    @include border-bottom-right-radius(5px);
+    background-color: $black-3 !important;
+    display: block;
+    position: fixed;
+    padding: 2rem 0.4rem;
+    z-index: 1;
+    border: none;
+    left: 0;
+    width: 1.6rem;
+    &:focus + .sidebar {  
+      @include responsive-sidebar-ui;
+    }
+  }
+  aside{
+    &.sidebar {
+      position: absolute;
+      transform: translateX(-105.5%);
+      transition: transform 0.3s, background-color 0.3s;
+      padding: 20px;
+      height: 100%;
+      z-index: 10;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/typography.scss b/app/assets/stylesheets/typography.scss
index 16c45b59..fe0ec03a 100644
--- a/app/assets/stylesheets/typography.scss
+++ b/app/assets/stylesheets/typography.scss
@@ -365,3 +365,7 @@ div.more {
 .fixed {
   font-family: $fixed-width-font-family;
 }
+
+.text-center {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index 31e673f1..1b63f3ec 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -2,7 +2,13 @@
 $orange:             #f14e32;
 $blue:               #009099;
 
-$page-width:         940px;
+// breakpoints
+$mobile-xs: 480px;
+$mobile-s: 576px;
+$mobile-m: 640px;
+$tablet: 768px;
+$default:  940px;
+$page-width: $default;
 
 $font-color:  		   #4e443c;
 $light-font-color:   #9a9994;
@@ -24,3 +30,5 @@ $fixed-width-line-height: 18px;
 
 $base-border-color:  #d8d7cf;
 $callout-color:      #e9e8e0;
+
+$black-3 : #333333;
\ No newline at end of file
diff --git a/app/views/about/_small_and_fast.html.erb b/app/views/about/_small_and_fast.html.erb
index 7e8775e4..657d88c0 100644
--- a/app/views/about/_small_and_fast.html.erb
+++ b/app/views/about/_small_and_fast.html.erb
@@ -80,28 +80,28 @@
     <p>
       All of these times are in seconds.
     </p>
-
-    <table class="benchmarks">
-      <tbody>
-        <tr>
-          <th>Operation</th>
-          <th></th>
-          <th class="right">Git</th>
-          <th class="right">SVN</th>
-        </tr>
-        <tr><td nowrap="">Commit Files (A)</td><td class="desc">Add, commit and push 113 modified files (2164+, 2259-)</td><td class="number">0.64</td><td class="number">2.60</td><td class="number">4x</td></tr>
-        <tr><td nowrap="">Commit Images (B)</td><td class="desc">Add, commit and push a thousand 1&nbsp;kB images</td><td class="number">1.53</td><td class="number">24.70</td><td class="number">16x</td></tr>
-        <tr><td nowrap="">Diff Current</td><td class="desc">Diff 187 changed files (1664+, 4859-) against last commit</td><td class="number">0.25</td><td class="number">1.09</td><td class="number">4x</td></tr>
-        <tr><td nowrap="">Diff Recent</td><td class="desc">Diff against 4 commits back (269 changed/3609+,6898-)</td><td class="number">0.25</td><td class="number">3.99</td><td class="number">16x</td></tr>
-        <tr><td nowrap="">Diff Tags</td><td class="desc">Diff two tags against each other (v1.9.1.0/v1.9.3.0)</td><td class="number">1.17</td><td class="number">83.57</td><td class="number">71x</td></tr>
-        <tr><td nowrap="">Log (50)</td><td class="desc">Log of the last 50 commits (19&nbsp;kB of output)</td><td class="number">0.01</td><td class="number">0.38</td><td class="number">31x</td></tr>
-        <tr><td nowrap="">Log (All)</td><td class="desc">Log of all commits (26,056 commits &ndash; 9.4&nbsp;MB of output)</td><td class="number">0.52</td><td class="number">169.20</td><td class="number">325x</td></tr>
-        <tr><td nowrap="">Log (File)</td><td class="desc">Log of the history of a single file (array.c &ndash; 483 revs)</td><td class="number">0.60</td><td class="number">82.84</td><td class="number">138x</td></tr>
-        <tr><td nowrap="">Update</td><td class="desc">Pull of Commit A scenario (113 files changed, 2164+, 2259-)</td><td class="number">0.90</td><td class="number">2.82</td><td class="number">3x</td></tr>
-        <tr><td nowrap="">Blame</td><td class="desc">Line annotation of a single file (array.c)</td><td class="number">1.91</td><td class="number">3.04</td><td class="number">1x</td></tr>
-      </tbody>
-    </table>
-
+    <div class="responsive-table">
+      <table class="benchmarks">
+        <tbody>
+          <tr>
+            <th>Operation</th>
+            <th></th>
+            <th class="right">Git</th>
+            <th class="right">SVN</th>
+          </tr>
+          <tr><td nowrap="">Commit Files (A)</td><td class="desc">Add, commit and push 113 modified files (2164+, 2259-)</td><td class="number">0.64</td><td class="number">2.60</td><td class="number">4x</td></tr>
+          <tr><td nowrap="">Commit Images (B)</td><td class="desc">Add, commit and push a thousand 1&nbsp;kB images</td><td class="number">1.53</td><td class="number">24.70</td><td class="number">16x</td></tr>
+          <tr><td nowrap="">Diff Current</td><td class="desc">Diff 187 changed files (1664+, 4859-) against last commit</td><td class="number">0.25</td><td class="number">1.09</td><td class="number">4x</td></tr>
+          <tr><td nowrap="">Diff Recent</td><td class="desc">Diff against 4 commits back (269 changed/3609+,6898-)</td><td class="number">0.25</td><td class="number">3.99</td><td class="number">16x</td></tr>
+          <tr><td nowrap="">Diff Tags</td><td class="desc">Diff two tags against each other (v1.9.1.0/v1.9.3.0)</td><td class="number">1.17</td><td class="number">83.57</td><td class="number">71x</td></tr>
+          <tr><td nowrap="">Log (50)</td><td class="desc">Log of the last 50 commits (19&nbsp;kB of output)</td><td class="number">0.01</td><td class="number">0.38</td><td class="number">31x</td></tr>
+          <tr><td nowrap="">Log (All)</td><td class="desc">Log of all commits (26,056 commits &ndash; 9.4&nbsp;MB of output)</td><td class="number">0.52</td><td class="number">169.20</td><td class="number">325x</td></tr>
+          <tr><td nowrap="">Log (File)</td><td class="desc">Log of the history of a single file (array.c &ndash; 483 revs)</td><td class="number">0.60</td><td class="number">82.84</td><td class="number">138x</td></tr>
+          <tr><td nowrap="">Update</td><td class="desc">Pull of Commit A scenario (113 files changed, 2164+, 2259-)</td><td class="number">0.90</td><td class="number">2.82</td><td class="number">3x</td></tr>
+          <tr><td nowrap="">Blame</td><td class="desc">Line annotation of a single file (array.c)</td><td class="number">1.91</td><td class="number">3.04</td><td class="number">1x</td></tr>
+        </tbody>
+      </table>
+    </div>
     <p>
       Note that this is the best case scenario for SVN&mdash;a server with no load with a
       gigabit connection to the client machine. Nearly all of these
@@ -122,20 +122,22 @@
       that is only performed once.
     </p>
 
-    <table class="benchmarks">
-      <tbody>
-        <tr>
-          <th>Operation</th>
-          <th></th>
-          <th class="right">Git*</th>
-          <th class="right">Git</th>
-          <th class="right">SVN</th>
-        </tr>
-        <tr><td nowrap="">Clone</td><td class="desc">Clone and shallow clone(*) in Git vs checkout in SVN</td><td class="number">21.0</td><td class="number">107.5</td><td class="number">14.0</td></tr>
-        <tr><td nowrap="">Size (MB)</td><td class="desc">Size of total client side data and files after clone/checkout (in MB)</td><td></td><td class="number">181.0</td><td class="number">132.0</td></tr>
-      </tbody>
-    </table>
-
+    <div class="responsive-table">
+      <table class="benchmarks">
+        <tbody>
+          <tr>
+            <th>Operation</th>
+            <th></th>
+            <th class="right">Git*</th>
+            <th class="right">Git</th>
+            <th class="right">SVN</th>
+          </tr>
+          <tr><td nowrap="">Clone</td><td class="desc">Clone and shallow clone(*) in Git vs checkout in SVN</td><td class="number">21.0</td><td class="number">107.5</td><td class="number">14.0</td></tr>
+          <tr><td nowrap="">Size (MB)</td><td class="desc">Size of total client side data and files after clone/checkout (in MB)</td><td></td><td class="number">181.0</td><td class="number">132.0</td></tr>
+        </tbody>
+      </table>
+    </div>
+    
     <p>
       It's also interesting to note that the size of the data on the client side
       is very similar even though Git also has every version of every file for the
@@ -149,4 +151,3 @@
     </div>
 
   </section>
-
diff --git a/app/views/books/show.html.erb b/app/views/books/show.html.erb
index ec1137b4..cdaec5ca 100644
--- a/app/views/books/show.html.erb
+++ b/app/views/books/show.html.erb
@@ -9,7 +9,7 @@
 <div id='main'>
   <h1>Book</h1>
   <% if @book.edition == 2 %>
-    <div style="float:right;margin: -20px 40px 0 40px;">
+   <div class="book-wrapper">
       <img  src="/images/progit2.png" width="118" height="157"/>
       <div style="light">2nd Edition (2014)</div>
       <% if (@book.ebook_pdf || @book.ebook_epub || @book.ebook_mobi) %>
@@ -32,7 +32,7 @@
       <% end %>
      </div>
   <% else %>
-    <div style="float:right;margin: -20px 40px 0 40px;">
+    <div class="book-wrapper">
       <img  src="/images/books/pro-git@2x.jpg" width="118" height="157"/>
       <div>1st Edition (2009)</div>
       <% if @book.has_edition(2) %>
diff --git a/app/views/doc/_versions.html.erb b/app/views/doc/_versions.html.erb
index a58a1641..a758417c 100644
--- a/app/views/doc/_versions.html.erb
+++ b/app/views/doc/_versions.html.erb
@@ -4,7 +4,7 @@
      <% else %>
       Latest version
       <% end %> ▾ </a>
-<span class="light"><%= @doc_file.name %> last updated in <%= @last.version.name %></span>
+<span class="light d-flex"><%= @doc_file.name %> last updated in <%= @last.version.name %></span>
 <div class='dropdown-panel left' id='previous-versions-dropdown'>
   <header>Changes in the <strong><%= @doc_file.name %></strong> manual</header>
   <ol class='reference-previous-versions'>
diff --git a/app/views/doc/watch.html.erb b/app/views/doc/watch.html.erb
index 74b9ea1d..2c05d935 100644
--- a/app/views/doc/watch.html.erb
+++ b/app/views/doc/watch.html.erb
@@ -12,5 +12,4 @@
   <div id="video-container">
     <%= raw "<iframe src=\"https://player.vimeo.com/video/#{@video[1]}?title=0&amp;byline=0&amp;portrait=0&amp;color=f14e32\" width=\"635\" height=\"360\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>" %>
   </div>
-</div>
-
+</div>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8c6fb595..99264e20 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,7 +14,7 @@
 
   <meta charset='utf-8'>
   <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
-
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title><%= @page_title.present? ? @page_title : "Git" %></title>
 
   <link href='/favicon.ico' rel='shortcut icon' type='image/x-icon'>
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
index 24b08954..a467c75e 100644
--- a/app/views/shared/_footer.html.erb
+++ b/app/views/shared/_footer.html.erb
@@ -7,5 +7,7 @@
     Git is a member of <a href="/sfc">Software Freedom Conservancy</a>
   </div>
 </footer>
-
-<%= javascript_include_tag "application" %>
+<a href="#top" class="no-js scrollToTop" id="scrollToTop" data-label="Scroll to top">
+  <img src="/images/icons/chevron-up@2x.png" width="20" height="20" alt="scroll-to-top"/>
+</a>
+<%= javascript_include_tag "application" %>
\ No newline at end of file
diff --git a/app/views/shared/_masthead.html.erb b/app/views/shared/_masthead.html.erb
index 3ef3bdeb..8d983c68 100644
--- a/app/views/shared/_masthead.html.erb
+++ b/app/views/shared/_masthead.html.erb
@@ -1,20 +1,22 @@
 <div id="masthead">
   <div class="inner">
-    <p>
-      Git is a <%= link_to "free and open source", "/about/free-and-open-source" %>
-      distributed version control system designed to handle everything from small to
-      very large projects with speed and efficiency.
-    </p>
-
-    <p>
-      Git is <%= link_to "easy to learn", "/doc" %> and has a
-      <%= link_to "tiny footprint with lightning fast performance", "/about/small-and-fast" %>.
-      It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase
-      with features like <%= link_to "cheap local branching", "/about/branching-and-merging" %>,
-      convenient <%= link_to "staging areas", "/about/staging-area" %>, and
-      <%= link_to "multiple workflows", "/about/distributed" %>.
-    </p>
-
-    <img class="illustration" src="/images/branching-illustration@2x.png" width="389" height="251" />
+    <div>
+      <p>
+        Git is a <%= link_to "free and open source", "/about/free-and-open-source" %>
+        distributed version control system designed to handle everything from small to
+        very large projects with speed and efficiency.
+      </p>
+      <p>
+        Git is <%= link_to "easy to learn", "/doc" %> and has a
+        <%= link_to "tiny footprint with lightning fast performance", "/about/small-and-fast" %>.
+        It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase
+        with features like <%= link_to "cheap local branching", "/about/branching-and-merging" %>,
+        convenient <%= link_to "staging areas", "/about/staging-area" %>, and
+        <%= link_to "multiple workflows", "/about/distributed" %>.
+      </p>
+    </div>
+    <div class="illustration-wrapper">
+      <img class="illustration" src="/images/branching-illustration@2x.png" width="389" height="251" />
+    </div>
   </div> <!-- .inner -->
-</div> <!-- #masthead -->
+</div> <!-- #masthead -->
\ No newline at end of file
diff --git a/app/views/shared/_sidebar.html.erb b/app/views/shared/_sidebar.html.erb
index 268f85c7..561e8928 100644
--- a/app/views/shared/_sidebar.html.erb
+++ b/app/views/shared/_sidebar.html.erb
@@ -1,4 +1,5 @@
-<aside class="sidebar">
+<button class="sidebar-btn"></button>
+<aside class="sidebar" id="sidebar">  
   <nav>
     <ul>
       <li>
@@ -64,4 +65,4 @@
       <%= yield :sidebar %>
     <% end %>
   </nav>
-</aside>
+</aside>
\ No newline at end of file
diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb
index 3d84eb30..68353ff1 100644
--- a/app/views/site/index.html.erb
+++ b/app/views/site/index.html.erb
@@ -58,7 +58,7 @@
 </div>
 
 <section id="companies-projects">
-  <h3> Companies &amp; Projects Using Git </h3>
+  <h3 class="text-center"> Companies &amp; Projects Using Git </h3>
   <ul>
     <li><%= link_to "Google", "https://github.com/google", class: 'google' %></li>
     <li><%= link_to "Facebook", "https://github.com/facebook", class: 'facebook' %></li>
diff --git a/public/images/icons/chevron-up.png b/public/images/icons/chevron-up.png
new file mode 100644
index 00000000..220309fa
--- /dev/null
+++ b/public/images/icons/chevron-up.png
diff --git a/public/images/icons/chevron-up@2x.png b/public/images/icons/chevron-up@2x.png
new file mode 100644
index 00000000..53033933
--- /dev/null
+++ b/public/images/icons/chevron-up@2x.png
diff --git a/public/images/icons/sidebar.png b/public/images/icons/sidebar.png
new file mode 100644
index 00000000..6e5f324d
--- /dev/null
+++ b/public/images/icons/sidebar.png
diff --git a/public/images/icons/sidebar@2x.png b/public/images/icons/sidebar@2x.png
new file mode 100644
index 00000000..db3b282a
--- /dev/null
+++ b/public/images/icons/sidebar@2x.png