Skip to content

Commit

Permalink
Add GitHub Ribbon to our lessons
Browse files Browse the repository at this point in the history
Backport of 9a19e91 from swcarpentry/site.

All credits to Abigail Cabunoc <abigail.cabunoc@oicr.on.ca>
for the awesome work with CSS.
  • Loading branch information
Raniere Silva committed Jun 4, 2014
1 parent 6cb7935 commit 96b0a57
Showing 1 changed file with 77 additions and 0 deletions.
77 changes: 77 additions & 0 deletions swc-bootstrap.css
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,80 @@ code {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}

/* GitHub Ribbon */

#github-ribbon a {
background:#000;
color:#fff;
text-decoration:none;
font-family:arial, sans-serif;
text-align:center;
font-weight:bold;
padding:5px 40%;
font-size:0.8rem;
line-height:1.6rem;
position:relative;
transition:0.5s;
width:100%;
margin: 0 auto;
white-space: nowrap;
z-index:10;
}

#github-ribbon a:hover {
background:#600;
color:#fff;
}

#github-ribbon a::before, #github-ribbon a::after {
content:"";
width:100%;
display:block;
position:absolute;
top:1px;
left:0;
height:1px;
background:#fff;
}

#github-ribbon a::after{
bottom:1px;
top:auto;
}

/* github ribbon breaking point */
@media screen and (min-width:600px){
#github-ribbon{
position:absolute;
display:block;
top:0;
right:0;
width:150px;
overflow:hidden;
height:150px;
}
#github-ribbon a{
width:200px;
position:absolute;
padding:5px 40px;
top:40px;
right:-80px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
box-shadow:1px 1px 10px rgba(0,0,0,0.8);
}
.navbar .btn-navbar {
margin-right: 150px;
}
}

@media (max-width: 319px) {
.header h1 {
font-size: 20pt;
}

#header-text {
font-size:16pt;
}
}

0 comments on commit 96b0a57

Please sign in to comment.