work on spacing and sizes Viewport 600px wide.

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); }

diff --git a/static/scss/style.scss b/static/scss/style.scss
index f0b303177a94eaa7cdd4b95616e79cb0497ecb43..ce7879db1b2ed530c672c9a4374418ae305e7ea6 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -70,6 +70,9 @@ h2 {
 
 h3 {
        line-height: 2rem;
+       @include media-breakpoint-down(sm) {
+               font-size: 1em;
+       }
 }
 
 h4 {
@@ -86,6 +89,9 @@ h5 {
 
 p {
        line-height: 1.5rem;
+       @include media-breakpoint-down(sm) {
+               font-size: .85em;
+       }
        &.lead {
                line-height: 2rem;
                @include media-breakpoint-down(md) {
@@ -113,7 +119,7 @@ p {
 }
 
 .display-4 {
-       @include media-breakpoint-down(sm) {
+       @include media-breakpoint-down(xs) {
                font-size: .875rem;
                line-height: 1.25rem;
        }
@@ -121,6 +127,9 @@ p {
 
 small {
        line-height: 1rem;
+       @include media-breakpoint-down(sm) {
+               font-size: .75em;
+       }
 }
 
 .truncate {
@@ -155,7 +164,7 @@ img {
        left: .75rem;
        top: -.25rem;
        animation: scroll 1.5s ease-in-out infinite;
-       @include media-breakpoint-down(sm) {
+       @include media-breakpoint-down(xs) {
                width: 1.75rem !important;
                height: 1.75rem !important;
                left: .25rem;
@@ -255,7 +264,7 @@ button.navbar-toggler div {
        @include media-breakpoint-up(md) {
                margin: 0 0 2rem 0;     
        }
-       @include media-breakpoint-down(sm) {
+       @include media-breakpoint-down(xs) {
                font-size: .875rem;
                line-height: 0;
        }
@@ -357,7 +366,7 @@ section.intro {
        position: relative;
        .branding {
                padding-top: 6rem;
-               @include media-breakpoint-up(md) {
+               @include media-breakpoint-up(sm) {
                        padding-top: 192px;
                }
                margin-bottom: 64px;
@@ -366,7 +375,7 @@ section.intro {
                h1 {
                        font-weight: 300 !important;
                        color: $blue-grey-900;
-                       @include media-breakpoint-down(sm) {
+                       @include media-breakpoint-down(xs) {
                                font-size: 4.5rem;
                        }
                        strong {
@@ -384,7 +393,7 @@ section.intro {
                        display: inline-block;
                        position: relative;
                        top: 4px;
-                       @include media-breakpoint-up(md) {
+                       @include media-breakpoint-up(sm) {
                                height: 120px;
                                width: 93px;
                                margin-right: 32px;
@@ -401,7 +410,7 @@ section.intro {
                        width: 36px;
                        height: 36px;
                        fill: $red_900;
-                       @include media-breakpoint-up(md) {
+                       @include media-breakpoint-up(sm) {
                                width: 64px;
                                height: 64px;
                        }
@@ -414,7 +423,7 @@ section.intro {
 
 section.content-section {
        padding: 3rem 0;
-       @include media-breakpoint-up(md) {
+       @include media-breakpoint-up(sm) {
                padding: 72px 0;
        }
 }
@@ -467,8 +476,15 @@ section#fireinfo {
        }
 }
 
+section#appliances {
+       padding-bottom: 48px;
+}
+
 footer {
        padding: 3rem 0 0 0;
+       @include media-breakpoint-down(md) {
+               padding-top: 31px;
+       }
        h4 {
                margin-bottom: 1.25rem;
                color: rgba($blue-grey-900, .6);

diff --git a/templates/base.html b/templates/base.html
index b75940567f042d0142e805c73e432b591f9a297d..d343b4f75c4e1d39ac29a0bfb30f4286238a93f7 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -74,7 +74,7 @@
                        <footer class="footer">
                                <div class="container pb-3">
                                        <div class="row mb-6">
-                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
+                                               <div class="col-6 col-sm-5 offset-sm-1 col-md-3 col-lg-2 mb-5">
                                                        <h4>{{ _("About") }}</h4>
 
                                                        <ul class="list-unstyled">
@@ -93,7 +93,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
+                                               <div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-5">
                                                        <h4>{{ _("Support") }}</h4>
 
                                                        <ul class="list-unstyled">
@@ -106,7 +106,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
+                                               <div class="col-6 col-sm-5 offset-sm-1 col-md-3 col-lg-2 mb-5">
                                                        <h4>{{ _("Community") }}</h4>
 
                                                        <ul class="list-unstyled">
@@ -125,7 +125,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2 mb-6">
+                                               <div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-6">
                                                        <h4>{{ _("Development") }}</h4>
 
                                                        <ul class="list-unstyled">
@@ -144,7 +144,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-md-12 col-lg-4 pt-md-6 pt-lg-1 text-center">
+                                               <div class="col-sm-8 offset-sm-2 col-md-12 col-lg-4 pt-md-6 pt-lg-1 text-center">
                                                        <a class="btn btn-primary btn-lg" href="//www.ipfire.org/donate">
                                                                <svg class="icon i_heart"><use xlink:href="#heart"/></svg>
                                                                {{ _("Donate") }}

diff --git a/templates/index.html b/templates/index.html
index c1bd16183a71575e64d187126012e716e8e545f9..2deedf9fa0e2cdbe745c89a75111ab78011f93f5 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -317,7 +317,7 @@
                                                {% end %}
                                        </p>
                                </div>
-                               <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-1">
+                               <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
                                        <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
                                        <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
                                </div>