]> git.ipfire.org Git - people/shoehn/ipfire.org.git/blobdiff - static/css/style.css
index page: Redesign jumbotron.
[people/shoehn/ipfire.org.git] / static / css / style.css
index a15ea4a4dfa3e80f3a4a00c4d29cfc3f24214395..f8006300d731bc544a23c03330c0fa45eb71b0f3 100644 (file)
@@ -2,16 +2,20 @@ body {
        padding-top: 45px;
 }
 
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  color:#DDD;
+}
+.sidenav > li.active > a {
+  background: #880400;
+  color: #FFF;
+}
 .container-body {
-       background-color: white;
-
-       padding-top: 10px;
-       padding-left: 15px;
-       padding-right: 15px;
-       padding-bottom: 10px;
+  background-color: #FFF;
+  padding: 10px 15px;
 }
 
-.ac {
+.ac, td.ac {
        text-align: center;
 }
 
@@ -24,7 +28,7 @@ body {
 }
 
 .separator {
-  margin: 40px 0 39px;
+       margin: 40px 0 39px;
 }
 
 .img-padding {
@@ -32,49 +36,36 @@ body {
 }
 
 table.table-fireinfo td.bar {
-       width: 70%;
+width: 70%;
 }
-
 table.table-fireinfo td.key {
-       width: 20%;
+width: 20%;
 }
-
 table.table-fireinfo td.val {
-       width: 10%;
+width: 10%;
 }
-
-.wishes li div.thumbnail {
-       padding: 1em;
+.wishes div.thumbnail {
+padding: 1em;
 }
-
 .objectives .icon {
-       padding: 1.2em;
+padding: 1.2em;
 }
-
 .thumbnails .download-box {
-       padding-top: 2em;
-       padding-left: 2em;
-       padding-right: 2em;
+padding: 2em 2em 0 2em;
 }
-
-section {
-       padding-top: 40px;
+section > .page-header {
+margin:0;
+padding:40px 0 20px;
 }
-
 section > .page-header, section > .lead {
-       color: #5a5a5a;
+color: #5a5a5a;
 }
-
 section > ul li {
-       margin-bottom: 5px;
+margin-bottom: 5px;
 }
 
 .jumbotron {
-       position: relative;
-       padding: 40px 0;
-       color: #fff;
-       text-align: center;
-       text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
+       color: white;
        background: #880400; /* Old browsers */
        background: -moz-linear-gradient(45deg, #000000 0%, #880400 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(100%,#880400)); /* Chrome,Safari4+ */
@@ -84,52 +75,19 @@ section > ul li {
        background: linear-gradient(45deg,  #000000 0%, #880400 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#880400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-          -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-                   box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-       margin-bottom: 1em;
-}
-
-.jumbotron h1 {
-       font-size: 80px;
-       font-weight: bold;
-       letter-spacing: -1px;
-       line-height: 1;
-}
-
-.jumbotron p {
-       font-size: 24px;
-       font-weight: 300;
-       line-height: 1.25;
-       margin-bottom: 30px;
-}
-
-.jumbotron a {
-       color: #fff;
-       color: rgba(255,255,255,.5);
-}
-
-.jumbotron a:hover {
-       color: #fff;
-       text-shadow: 0 0 10px rgba(255,255,255,.25);
+       -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+       box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 }
 
 /* Download button */
 .masthead .btn, .download-button {
-  padding: 19px 24px;
-  font-size: 24px;
-  font-weight: 200;
-  color: #fff;
-}
-
-.jumbotron .container {
-       position: relative;
-       z-index: 2;
+       padding: 19px 24px;
+       font-size: 24px;
 }
 
 .masthead {
-       padding: 70px 0 60px;
+       padding-top: 70px;
        margin-bottom: 0;
-       color: #fff;
 }
 
 .masthead h1 {
@@ -138,271 +96,94 @@ section > ul li {
        letter-spacing: -2px;
 }
 
-.masthead p {
-       font-size: 40px;
+.masthead p.lead {
+       font-size: 36px;
        font-weight: 200;
        line-height: 1.25;
 }
 
-.masthead-links {
-       margin: 0;
-       list-style: none;
-}
-
-.masthead-links li {
-       display: inline;
-       padding: 0 10px;
-       color: rgba(255,255,255,.5);
-}
-
-.subhead {
-       text-align: left;
-       border-bottom: 1px solid #ddd;
-}
-
-.subhead h1 {
-       font-size: 60px;
-}
-
-.subhead p {
-       margin-bottom: 20px;
-}
-
-.subhead .navbar {
-       display: none;
-}
-
 .footer {
-/*     text-align: center; */
-       padding: 30px 0;
-       margin-top: 70px;
-       border-top: 1px solid #e5e5e5;
-       background-color: #f8f8f8;
+  border-top: 1px solid #E7E7E7;
+  padding: 30px 0;
+  margin-top: 70px;
 }
-
 .footer p {
-       margin-bottom: 0;
-       color: #777;
+margin-bottom: 0;
+color: #777;
 }
-
 .footer-links {
-       margin: 10px 0;
+margin: 10px 0;
 }
-
 .footer-links li {
-       display: inline;
-       padding: 0 2px;
+display: inline;
+padding: 0 2px;
 }
-
 .footer-links li:first-child {
-       padding-left: 0;
+padding-left: 0;
 }
-
 .sidenav {
-       width: 228px;
-       margin: 30px 0 0;
-       padding: 0;
-       background-color: #fff;
-       -webkit-border-radius: 6px;
-          -moz-border-radius: 6px;
-               border-radius: 6px;
-       -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-          -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-               box-shadow: 0 1px 4px rgba(0,0,0,.065);
+width: 228px;
+margin: 30px 0 0;
+padding: 0;
+background-color: #fff;
+-webkit-border-radius: 6px;
+-moz-border-radius: 6px;
+border-radius: 6px;
+-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+box-shadow: 0 1px 4px rgba(0,0,0,.065);
 }
-
 .sidenav > li > a {
-       display: block;
-       width: 190px \9;
-       margin: 0 0 -1px;
-       padding: 8px 14px;
-       border: 1px solid #e5e5e5;
+display: block;
+width: 190px \9;
+margin: 0 0 -1px;
+padding: 8px 14px;
+border: 1px solid #e5e5e5;
 }
-
 .sidenav > li:first-child > a {
-       -webkit-border-radius: 6px 6px 0 0;
-          -moz-border-radius: 6px 6px 0 0;
-               border-radius: 6px 6px 0 0;
+-webkit-border-radius: 6px 6px 0 0;
+-moz-border-radius: 6px 6px 0 0;
+border-radius: 6px 6px 0 0;
 }
-
 .sidenav > li:last-child > a {
-       -webkit-border-radius: 0 0 6px 6px;
-          -moz-border-radius: 0 0 6px 6px;
-               border-radius: 0 0 6px 6px;
-}
-
-.sidenav > .active > a {
-       position: relative;
-       z-index: 2;
-       padding: 9px 15px;
-       border: 0;
-       text-shadow: 0 1px 0 rgba(0,0,0,.15);
-       -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
-          -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
-               box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
-}
-
-.sidenav .icon-chevron-left {
-       float: left;
-       margin-top: 2px;
-       margin-left: -6px;
-       opacity: .25;
+-webkit-border-radius: 0 0 6px 6px;
+-moz-border-radius: 0 0 6px 6px;
+border-radius: 0 0 6px 6px;
 }
-
-.sidenav > li > a:hover {
-       background-color: #f5f5f5;
+.sidenav .glyphicon-chevron-left {
+opacity: .25;
 }
-
-.sidenav a:hover .icon-chevron-left {
-       opacity: .5;
+.sidenav a:hover .glyphicon-chevron-left {
+opacity: .5;
 }
-
-.sidenav .active .icon-chevron-left, .sidenav .active a:hover .icon-chevron-left {
-  background-image: url(../img/glyphicons-halflings-white.png);
-  opacity: 1;
+.sidenav .active .glyphicon-chevron-left, .sidenav .active a:hover .glyphicon-chevron-left {
+opacity: 1;
 }
-
 .sidenav.affix {
-       top: 40px;
+top: 40px;
 }
-
 .sidenav.affix-bottom {
-       position: absolute;
-       top: auto;
-       bottom: 270px;
+position: absolute;
+top: auto;
+bottom: 270px;
 }
-
 .download-box {
-       text-align: center;
-
-       margin-top: 100px;
-       margin-bottom: 100px;
+text-align: center;
+margin: 100px 0;
 }
-
 .progress-small {
-       margin-top: 6px;
-       height: 6px;
-}
-
-@media (min-width: 768px) and (max-width: 979px) {
-       body {
-               padding-top: 0;
-       }
-       .jumbotron {
-               margin-top: -25px; /* Offset bottom margin on .navbar */
-       }
-
-       .sidenav {
-               width: 166px;
-               margin-top: 20px;
-       }
-       .sidenav.affix {
-               top: 0;
-       }
+margin-top: 6px;
+height: 6px;
 }
-
-@media (max-width: 767px) {
-       body {
-               padding-top: 0;
-       }
-
-       .jumbotron {
-               padding: 40px 20px;
-               margin-top:   -25px; /* Offset bottom margin on .navbar */
-               margin-right: -20px;
-               margin-left:  -20px;
-       }
-
-       .masthead h1 {
-               font-size: 90px;
-       }
-
-       .masthead p, .masthead .btn {
-               font-size: 24px;
-       }
-
-       .sidenav {
-               width: auto;
-               margin-bottom: 20px;
-       }
-
-       .sidenav.affix {
-               position: static;
-               width: auto;
-               top: 0;
-       }
-
-       .footer {
-               margin-left: -20px;
-               margin-right: -20px;
-               padding-left: 20px;
-               padding-right: 20px;
-       }
-
-       .footer p {
-               margin-bottom: 9px;
-       }
-}
-
-@media (max-width: 480px) {
-       body {
-               padding-top: 0;
-       }
-
-       h2 small {
-               display: block;
-       }
-
-       .jumbotron h1 {
-               font-size: 45px;
-       }
-
-       .jumbotron p, .jumbotron .btn {
-               font-size: 18px;
-       }
-
-       .jumbotron .btn {
-               display: block;
-               margin: 0 auto;
-       }
-
-       .subhead h1, .subhead p {
-               text-align: center;
-       }
-
-       table code {
-               white-space: normal;
-               word-wrap: break-word;
-               word-break: break-all;
-       }
-
-       .footer {
-               padding-top: 20px;
-               padding-bottom: 20px;
-       }
-}
-
+.planet-table td.author,
 .planet-table td.date {
-       width: 10em;
+width: 10em;
 }
-
-.planet-table td.author {
-       width: 10em;
-}
-
 .news-entries td.date {
-       width: 8em;
-       text-align: right;
-}
-
-.well-white {
-       background-color: white;
+width: 8em;
+text-align: right;
 }
 
 .table-wishlist-widget {
        width: 100%;
 }
-
-.table-wishlist-widget td.progress-bar {
-       width: 40%;
-}