From 96b0a57f2473739c026200fdc675eea90ba21613 Mon Sep 17 00:00:00 2001 From: Raniere Silva Date: Fri, 18 Apr 2014 10:52:12 -0300 Subject: [PATCH 1/2] Add GitHub Ribbon to our lessons Backport of 9a19e91 from swcarpentry/site. All credits to Abigail Cabunoc for the awesome work with CSS. --- swc-bootstrap.css | 77 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/swc-bootstrap.css b/swc-bootstrap.css index 5f52b79..b43d75e 100644 --- a/swc-bootstrap.css +++ b/swc-bootstrap.css @@ -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; + } +} From 595873c8b50dece182b7f96a4cf63997a844a4b9 Mon Sep 17 00:00:00 2001 From: Raniere Silva Date: Sat, 7 Jun 2014 13:43:05 -0300 Subject: [PATCH 2/2] Improve CSS for GitHub ribbon - For small screen, preserve margin. - Use css-beautify --- swc-bootstrap.css | 202 ++++++++++++++++++++++------------------------ 1 file changed, 97 insertions(+), 105 deletions(-) diff --git a/swc-bootstrap.css b/swc-bootstrap.css index b43d75e..b8b8e65 100644 --- a/swc-bootstrap.css +++ b/swc-bootstrap.css @@ -1,148 +1,140 @@ /* Customizations to Bootstrap's default styles */ blockquote p { - font-size: inherit; - font-weight: inherit; - line-height: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; } - /* readability: darken the alert colour for contrast with background */ + .alert { - color: rgb(0,0,0); + color: rgb(0, 0, 0); } - /* Container for page contents. */ + .container { background-color: white; } - .hero-unit { - padding: 20px; + padding: 20px; } - .navbar .container { background-color: inherit; } - .navbar-inner { - min-height: 40px; - padding-right: 20px; - padding-left: 20px; - background-color: #F4F4F4; - background-image: none; - border: 1px solid #d4d4d4; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + min-height: 40px; + padding-right: 20px; + padding-left: 20px; + background-color: #F4F4F4; + background-image: none; + border: 1px solid #d4d4d4; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } - code { - color: #333333; + color: #333333; } - .navbar-inverse .navbar-inner { - background-color: #20267D; - background-image: none; - border-color: #20267D; + background-color: #20267D; + background-image: none; + border-color: #20267D; } - .navbar-inverse .nav .active > a, -.navbar-inverse .nav .active > a:hover, -.navbar-inverse .nav .active > a:focus { - color: #ffffff; - background-color: #20267D; +.navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus { + color: #ffffff; + background-color: #20267D; } - .navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle { - color: #ffffff; - background-color: #20267D; + color: #ffffff; + background-color: #20267D; } - .navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret { - border-top-color: #999999; - border-bottom-color: #999999; + border-top-color: #999999; + border-bottom-color: #999999; } - .navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret { - border-top-color: #ffffff; - border-bottom-color: #ffffff; + 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; + 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; + 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; + 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 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; - } +@media screen and (min-width: 600px) { + .navbar .btn-navbar { + margin-right: 150px; + } + #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); + } +} +@media (max-width: 599px) { + .header h1 { + font-size: 20pt; + } + #header-text { + font-size: 16pt; + } + #github-ribbon { + width: 100%; + } + #github-ribbon a { + display: block; + padding: 0px 0px; + margin: 0px 0px; + } }