Feature page complete page markup and added new icons

[people/shoehn/ipfire.org.git] / static / css / style.css

diff --git a/static/css/style.css b/static/css/style.css
index 0057d2d5e65a47e8624390e6e9898f497e09a69c..7b2145a3cac57c45fbb259e72521c42bf44b0f10 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2025,6 +2025,64 @@ tbody.collapse.show {
 .navbar-inverse .navbar-text {
   color: rgba(255, 255, 255, 0.5); }
 
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 100%;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem; }
+  .badge:empty {
+    display: none; }
+
+.btn .badge {
+  position: relative;
+  top: -1px; }
+
+a.badge:focus, a.badge:hover {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer; }
+
+.badge-pill {
+  padding-right: 0.6em;
+  padding-left: 0.6em;
+  border-radius: 10rem; }
+
+.badge-default {
+  background-color: #636c72; }
+  .badge-default[href]:focus, .badge-default[href]:hover {
+    background-color: #4b5257; }
+
+.badge-primary {
+  background-color: #0275d8; }
+  .badge-primary[href]:focus, .badge-primary[href]:hover {
+    background-color: #025aa5; }
+
+.badge-success {
+  background-color: #5cb85c; }
+  .badge-success[href]:focus, .badge-success[href]:hover {
+    background-color: #449d44; }
+
+.badge-info {
+  background-color: #5bc0de; }
+  .badge-info[href]:focus, .badge-info[href]:hover {
+    background-color: #31b0d5; }
+
+.badge-warning {
+  background-color: #f0ad4e; }
+  .badge-warning[href]:focus, .badge-warning[href]:hover {
+    background-color: #ec971f; }
+
+.badge-danger {
+  background-color: #d9534f; }
+  .badge-danger[href]:focus, .badge-danger[href]:hover {
+    background-color: #c9302c; }
+
 @keyframes progress-bar-stripes {
   from {
     background-position: 1rem 0; }
@@ -4721,7 +4779,7 @@ h5.fireinfo {
 
 #sidebar {
   padding: 0; }
-  @media (max-width: 991px) {
+  @media (max-width: 767px) {
     #sidebar {
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
       position: fixed;
@@ -4974,8 +5032,45 @@ button:focus {
   vertical-align: top;
   transform: translateY(-0.1rem); }
 
+.i_features {
+  width: 40px;
+  height: 40px;
+  margin: auto; }
+
+.outline_i {
+  border: solid 4px;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center; }
+
+.i_verified {
+  fill: #43a047; }
+
+.i_warning {
+  fill: #b71c1c; }
+
+.i_wifi {
+  fill: #1976d2; }
+
+.i_server {
+  fill: #ff8f00; }
+
 .amber-800 {
-  color: #ff8f00; }
+  color: #ff8f00;
+  border-color: #ff8f00; }
+
+.green-600 {
+  color: #43a047;
+  border-color: #43a047; }
+
+.red-900 {
+  color: #b71c1c;
+  border-color: #b71c1c; }
+
+.blue-700 {
+  color: #1976d2;
+  border-color: #1976d2; }
 
 img.img-fluid {
   width: 100%;
@@ -5105,7 +5200,7 @@ section#appliances {
 .features-content {
   padding-top: 88px;
   margin-bottom: 40px; }
-  @media (min-width: 576px) {
+  @media (min-width: 992px) {
     .features-content {
       padding-top: 161px; } }
   .features-content .content {