Change to a css github ribbon

* responsive for smaller screens * move menu over more - click will always open menu * #462
HPC-workshops · Jun 2, 2014 · bf7c60e · bf7c60e
1 parent debaf9e
commit bf7c60e
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 1 deletion.
diff --git 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
@@ -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;