Feature page mobile version first steps.

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

diff --git a/static/css/style.css b/static/css/style.css
index 27b3d6828513e6ae22564d24f688b28deaa984f3..bb32825af4591bef5d6667f6346b168db74156dc 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4401,9 +4401,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 +4448,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 +4565,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 +4642,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,24 +4694,37 @@ h5.fireinfo {
   .navbar-nav .nav-link:hover:after {
     transform: scaleX(1); } }
 
-body.About li.nav-item a.about {
-  color: #b71c1c; }
-  body.About li.nav-item a.about:after {
-    content: "";
-    border-bottom: 2px solid #b71c1c;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: 44px;
-    padding: inherit;
-    transform: scale(1); }
+@media (min-width: 992px) {
+  body.About li.nav-item a.about {
+    color: #b71c1c; }
+    body.About li.nav-item a.about: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; }
+      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; }
@@ -4724,6 +4744,51 @@ body.About li.nav-item a.about {
           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;
+    right: 20px;
+    top: 12px; }
+  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;
   background-color: #b71c1c;
@@ -5012,8 +5077,11 @@ 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;
@@ -5026,7 +5094,10 @@ section#appliances {
   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; }