From bf7c60e7ca083f85a0113cd28cb9311f1a20a225 Mon Sep 17 00:00:00 2001 From: Abigail Cabunoc Date: Sun, 1 Jun 2014 22:09:54 -0400 Subject: [PATCH] Change to a css github ribbon * responsive for smaller screens * move menu over more - click will always open menu * #462 --- bootstrap/bootstrap.css | 2 +- swc-bootstrap.css | 70 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) diff --git a/bootstrap/bootstrap.css b/bootstrap/bootstrap.css index 1d9e5d2..8e4b383 100644 --- a/bootstrap/bootstrap.css +++ b/bootstrap/bootstrap.css @@ -4565,7 +4565,7 @@ input[type="submit"].btn.btn-mini { display: none; float: right; padding: 7px 10px; - margin-right: 100px; + margin-right: 5px; margin-left: 5px; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); diff --git a/swc-bootstrap.css b/swc-bootstrap.css index 9cc0582..2190a4f 100644 --- a/swc-bootstrap.css +++ b/swc-bootstrap.css @@ -70,6 +70,7 @@ code { background-color: #ffffff; color: #666666; border-color:#2b3990; + width:150px; } .navbar-inverse .navbar-search { @@ -109,6 +110,49 @@ blockquote p { font-size:14px; } + +/* 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; +} + +#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; +} + + +/* Media Queries */ + @media (max-width: 979px){ .navbar-inverse .nav-collapse ul{ margin:20px 0 0; @@ -178,6 +222,32 @@ blockquote p { } } +/* 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;