basic styling Support page

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

diff --git a/static/css/style.css b/static/css/style.css
index ab4a7d7b80ef9422147b6db0940ac48b428d15da..5bb3e65896885789ad019fdc3f75cf14c567f73c 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4376,9 +4376,15 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
   .hidden-print {
     display: none !important; } }
 
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column; }
+
 .container {
   width: 100%;
-  max-width: 1200px; }
+  max-width: 1200px;
+  flex: 1; }
 
 body {
   -webkit-font-smoothing: antialiased;
@@ -4401,9 +4407,13 @@ h3 {
       margin-bottom: 0; } }
   h3.headline {
     text-align: center;
-    font-size: 36px;
-    line-height: 48px;
+    font-size: 32px;
+    line-height: 44px;
     color: #263238; }
+    @media (min-width: 576px) {
+      h3.headline {
+        font-size: 36px;
+        line-height: 48px; } }
 
 h4 {
   font-weight: 500;
@@ -4444,7 +4454,10 @@ p {
         font-size: 24px;
         line-height: 32px; } }
   p.copy {
-    margin-top: 24px; }
+    margin-top: 16px; }
+    @media (min-width: 576px) {
+      p.copy {
+        margin-top: 24px; } }
 
 .display-1 {
   font-size: 120px;
@@ -4558,7 +4571,7 @@ h5.fireinfo {
   transition: opacity .35s ease-in-out; }
 
 .fixed-top {
-  transition: background-color .5s linear;
+  transition: background-color .25s linear;
   height: 56px; }
   @media (min-width: 576px) {
     .fixed-top {
@@ -4635,10 +4648,10 @@ h5.fireinfo {
       height: 100vh;
       padding-top: 64px;
       transform: translateX(-256px);
-      transition: all 0.25s ease-in-out; }
+      transition: all .15s ease-in-out; }
       #navbarSupportedContent.open {
         transform: translateX(0);
-        transition: all .25s ease-in-out;
+        transition: all .15s ease-in-out;
         box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26); } }
 
 @media (min-width: 992px) {
@@ -4687,14 +4700,109 @@ h5.fireinfo {
   .navbar-nav .nav-link:hover:after {
     transform: scaleX(1); } }
 
-#sidebar ul {
-  list-style: none; }
-  #sidebar ul ul {
-    margin: 24px 0 0 0;
-    padding-left: 0; }
-  #sidebar ul li {
-    padding: 0 16px;
-    margin-bottom: 24px; }
+@media (min-width: 992px) {
+  body.About li.nav-item a.about,
+  body.Download li.nav-item a.download,
+  body.Involved li.nav-item a.support {
+    color: #b71c1c; }
+    body.About li.nav-item a.about:after,
+    body.Download li.nav-item a.download:after,
+    body.Involved li.nav-item a.support:after {
+      content: "";
+      border-bottom: 2px solid #b71c1c;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: 44px;
+      padding: inherit;
+      transform: scale(1); } }
+
+#sidebar {
+  padding: 0; }
+  @media (max-width: 991px) {
+    #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;
+      top: 52px;
+      z-index: 9999;
+      background-color: white; } }
+  #sidebar ul {
+    list-style: none; }
+    #sidebar ul.features_nav {
+      padding: 0 0 24px 0;
+      overflow-x: auto; }
+      #sidebar ul.features_nav.fixed {
+        position: fixed;
+        top: 100px;
+        outline: 1px solid grey; }
+    #sidebar ul ul {
+      margin: 0;
+      padding-left: 0; }
+      #sidebar ul ul li:last-child {
+        margin-bottom: 0; }
+    #sidebar ul li {
+      padding: 0 16px;
+      margin: 8px 0; }
+      #sidebar ul li a.nav-link {
+        padding: inherit;
+        color: #263238;
+        height: 32px;
+        padding: 0 8px;
+        line-height: 2; }
+        #sidebar ul li a.nav-link.active {
+          color: #b71c1c;
+          border-left: 2px solid #b71c1c;
+          padding: 0 8px 0 6px; }
+
+/* Fix for Android */
+body {
+  -webkit-animation: bugfix infinite 1s; }
+
+@-webkit-keyframes bugfix {
+  from {
+    padding: 0; }
+  to {
+    padding: 0; } }
+
+/* default checkbox */
+input[type=checkbox] {
+  position: absolute;
+  top: -9999px;
+  left: -9999px; }
+
+label {
+  cursor: pointer;
+  user-select: none; }
+
+nav[role="dropdown"] label {
+  display: none; }
+
+@media screen and (max-width: 44em) {
+  nav[role="dropdown"] ul {
+    height: 48px;
+    overflow: hidden; }
+  nav[role="dropdown"] label {
+    position: relative;
+    display: block;
+    width: 100%; }
+  nav[role="dropdown"] label:after {
+    font-family: FontAwesome;
+    font-size: 24px;
+    content: "\f107";
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 9999;
+    width: 100%;
+    height: 56px;
+    padding: 12px 12px 0;
+    text-align: right; }
+  nav[role="dropdown"] input:checked ~ label:after {
+    content: "\f106"; }
+  nav[role="dropdown"] input:checked ~ ul {
+    display: block;
+    height: 40vh;
+    overflow-y: scroll; } }
 
 .btn-red900 {
   color: #fff !important;
@@ -4782,6 +4890,11 @@ button.navbar-toggler div {
   .btn-outline-secondary:hover {
     transition: background-color .25s ease-in-out; }
 
+.btn-xlg {
+  height: 72px;
+  margin: 0 36px;
+  padding-top: 16px; }
+
 .btn-lg, .btn-group-lg > .btn {
   height: 48px;
   margin: 0 24px; }
@@ -4824,14 +4937,6 @@ button:focus {
     vertical-align: -7px;
     margin-right: 5px; }
 
-.amber-800 {
-  color: #ff8f00; }
-
-img.img-fluid {
-  width: 100%;
-  max-width: 100%;
-  height: auto; }
-
 .icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -4860,10 +4965,21 @@ img.img-fluid {
   transform: translateY(-0.35rem);
   fill: #b71c1c; }
 
+.i_white {
+  fill: white; }
+
 .i_sm {
   vertical-align: top;
   transform: translateY(-0.1rem); }
 
+.amber-800 {
+  color: #ff8f00; }
+
+img.img-fluid {
+  width: 100%;
+  max-width: 100%;
+  height: auto; }
+
 footer .btn-toolbar .icon {
   height: 2.25rem;
   width: 2.25rem;
@@ -4984,20 +5100,27 @@ section#appliances {
   padding-bottom: 48px; }
 
 .features-content {
-  padding-top: 161px;
+  padding-top: 88px;
   margin-bottom: 40px; }
+  @media (min-width: 576px) {
+    .features-content {
+      padding-top: 161px; } }
   .features-content .content {
     background: white;
     border-radius: 4px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-    padding: 40px 24px; }
+    padding: 40px 24px;
+    position: relative; }
 
 .divider {
   width: 128px;
   height: 4px;
   border-radius: 2px;
   background-image: linear-gradient(to right, #b71c1c, #ff3d00);
-  margin: 56px auto 40px auto; }
+  margin: 40px auto 24px auto; }
+  @media (min-width: 576px) {
+    .divider {
+      margin: 56px auto 40px auto; } }
 
 footer {
   padding: 3rem 0 0 0; }