work on spacing and sizes Viewport 600px wide.

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

diff --git a/static/css/style.css b/static/css/style.css
index 469d7f638d1b9f7d2f504d41f5d86c9fb0dbc6e5..a0be2eae5f6736bd427a924de0a245ff5a26bf7e 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4980,6 +4980,9 @@ h2 {
 
 h3 {
   line-height: 2rem; }
+  @media (max-width: 767px) {
+    h3 {
+      font-size: 1em; } }
 
 h4 {
   font-weight: 500;
@@ -4993,6 +4996,9 @@ h5 {
 
 p {
   line-height: 1.5rem; }
+  @media (max-width: 767px) {
+    p {
+      font-size: .85em; } }
   p.lead {
     line-height: 2rem; }
     @media (max-width: 991px) {
@@ -5016,13 +5022,16 @@ p {
       font-size: 2rem;
       line-height: 2.75rem; } }
 
-@media (max-width: 767px) {
+@media (max-width: 575px) {
   .display-4 {
     font-size: .875rem;
     line-height: 1.25rem; } }
 
 small {
   line-height: 1rem; }
+  @media (max-width: 767px) {
+    small {
+      font-size: .75em; } }
 
 .truncate {
   width: 100%;
@@ -5050,7 +5059,7 @@ img.img-fluid {
   top: -.25rem;
   -webkit-animation: scroll 1.5s ease-in-out infinite;
           animation: scroll 1.5s ease-in-out infinite; }
-  @media (max-width: 767px) {
+  @media (max-width: 575px) {
     .i_arrow_down {
       width: 1.75rem !important;
       height: 1.75rem !important;
@@ -5195,7 +5204,7 @@ button.navbar-toggler div {
   @media (min-width: 768px) {
     .btn-block {
       margin: 0 0 2rem 0; } }
-  @media (max-width: 767px) {
+  @media (max-width: 575px) {
     .btn-block {
       font-size: .875rem;
       line-height: 0; } }
@@ -5288,13 +5297,13 @@ section.intro {
     margin-bottom: 64px;
     text-align: center;
     color: #546e7a; }
-    @media (min-width: 768px) {
+    @media (min-width: 576px) {
       section.intro .branding {
         padding-top: 192px; } }
     section.intro .branding h1 {
       font-weight: 300 !important;
       color: #263238; }
-      @media (max-width: 767px) {
+      @media (max-width: 575px) {
         section.intro .branding h1 {
           font-size: 4.5rem; } }
       section.intro .branding h1 strong {
@@ -5310,7 +5319,7 @@ section.intro {
       display: inline-block;
       position: relative;
       top: 4px; }
-      @media (min-width: 768px) {
+      @media (min-width: 576px) {
         section.intro .branding h1:before {
           height: 120px;
           width: 93px;
@@ -5326,7 +5335,7 @@ section.intro {
       width: 36px;
       height: 36px;
       fill: #b71c1c; }
-      @media (min-width: 768px) {
+      @media (min-width: 576px) {
         section.intro .page-scroll .btn {
           width: 64px;
           height: 64px; } }
@@ -5335,7 +5344,7 @@ section.intro {
 
 section.content-section {
   padding: 3rem 0; }
-  @media (min-width: 768px) {
+  @media (min-width: 576px) {
     section.content-section {
       padding: 72px 0; } }
 
@@ -5378,8 +5387,14 @@ section#fireinfo {
     width: 100%;
     font-size: 1.25em; }
 
+section#appliances {
+  padding-bottom: 48px; }
+
 footer {
   padding: 3rem 0 0 0; }
+  @media (max-width: 991px) {
+    footer {
+      padding-top: 31px; } }
   footer h4 {
     margin-bottom: 1.25rem;
     color: rgba(38, 50, 56, 0.6); }