Issue #659: GH "Fork me" ribbon (#986)

Co-authored-by: Katie Keel <[email protected]>

* Prevent Github ribbon from overlapping the sign-in button

- Done making the ribbon a bit smaller to keep ribbon visible on the
existing media breakpoints
- Bonus: open link in new tab/window

* Show ribbon from 1401px viewport size

- Increased the breakpoint to also fully show the profile dropdown
when logged in.

* Alas… let's set an even bigger breakpoint

app/assets/stylesheets/partials/_github-ribbon.sass

@@ -16,7 +16,7 @@
   text-indent: -999999px
 
   // Animations
-  @media (max-width:1360px)
+  @media (max-width:1430px)
     visibility: hidden
     opacity:  0
     -webkit-transition: visibility 0s linear 0.2s,  opacity 0.2s linear
@@ -25,7 +25,7 @@
     -o-transition: visibility 0s linear 0.2s,  opacity 0.2s linear
     transition: visibility 0s linear 0.2s,  opacity 0.2s linear
 
-  @media (min-width:1360px)
+  @media (min-width:1430px)
     visibility: visible
     -webkit-transition: visibility 0s linear 0.2s,  opacity 0.2s linear
     -moz-transition: visibility 0s linear 0.2s,  opacity 0.2s linear
@@ -37,7 +37,7 @@
   position: absolute
   display: block
   width: 15.38em
-  height: 2.2em
+  height: 1.8em
 
   top: 2.70em
   right: -3.76em
@@ -74,7 +74,7 @@
   // Set the text properties
   color: white
   font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif
-  line-height: 2.2em
+  line-height: 1.8em
   text-decoration: none
   text-align: center
   text-indent: 0

app/views/layouts/application.html.slim

@@ -17,7 +17,7 @@ html
   body class=controller.controller_name
     = render 'navigation'
 
-    a.ribbon href='//github.com/rails-girls-summer-of-code/rgsoc-teams' title='Fork me on GitHub'
+    a.ribbon href='//github.com/rails-girls-summer-of-code/rgsoc-teams' title='Fork me on GitHub' target='_blank'
 
     div#wrap
       section.container#content