work on spacing and sizes Viewport 600px wide.

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

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