diff options
author | Jeff King <peff@peff.net> | 2021-11-11 19:36:14 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-11 19:36:14 +0300 |
commit | f27ee823317ae6d4eaf68348d55c8fb9b9fc6338 (patch) | |
tree | 6fa96faacf0683474e5f546cd9dd34bedfb4d52b | |
parent | 46241b6f9c743ab4af372f16a32beb44f2ee9d34 (diff) | |
parent | 0677be312083e77fa64a5f85b009e8863b147345 (diff) |
Merge pull request #1644 from adsingh14/resp-view
Resp view
26 files changed, 518 insertions, 64 deletions
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 39761390..83efe38a 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; +}); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 243760ac..499c953f 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; +} diff --git a/app/assets/stylesheets/book.scss b/app/assets/stylesheets/book.scss index 19edb140..f3153b1d 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; + } +} diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index aa696681..3ecf48e9 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; + } + } +} diff --git a/app/assets/stylesheets/front-page.scss b/app/assets/stylesheets/front-page.scss index de4b7cdc..b2460ce2 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; + } + } + } +} diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 6ec0819c..0d45c9b5 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..ebcdc118 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; + } + } +} 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..a9d1cc0a 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; + } + } +} diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/search.scss index 9cca6d8d..66e6bc0a 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; + } +} diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss index 3566b866..4bbf1a88 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; + } + } +} diff --git a/app/assets/stylesheets/typography.scss b/app/assets/stylesheets/typography.scss index 16c45b59..9197c130 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; +} diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index 31e673f1..4e77e15c 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; diff --git a/app/views/about/_small_and_fast.html.erb b/app/views/about/_small_and_fast.html.erb index 7e8775e4..6009046a 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 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 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 – 9.4 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 – 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 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 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 – 9.4 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 – 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—a server with no load with a gigabit connection to the client machine. Nearly all of these @@ -122,19 +122,21 @@ 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 @@ -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..868886d9 100644 --- a/app/views/doc/watch.html.erb +++ b/app/views/doc/watch.html.erb @@ -13,4 +13,3 @@ <%= raw "<iframe src=\"https://player.vimeo.com/video/#{@video[1]}?title=0&byline=0&portrait=0&color=f14e32\" width=\"635\" height=\"360\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>" %> </div> </div> - 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..db70f0c9 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> - +<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" %> diff --git a/app/views/shared/_masthead.html.erb b/app/views/shared/_masthead.html.erb index 3ef3bdeb..9a667968 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 --> diff --git a/app/views/shared/_sidebar.html.erb b/app/views/shared/_sidebar.html.erb index 268f85c7..d10c874b 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> 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 & Projects Using Git </h3> + <h3 class="text-center"> Companies & 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew file mode 100644 index 00000000..db3b282a --- /dev/null +++ b/public/images/icons/sidebar@2x.png |