Bug 11335 modified font smoothing and weight

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

diff --git a/static/scss/style.scss b/static/scss/style.scss
index f0b303177a94eaa7cdd4b95616e79cb0497ecb43..18621ad448460d7d4d222a6882270e7aa886a9aa 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -53,83 +53,17 @@
 // Utility classes
 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
 
+// Custom stuff
+@import '_fonts';
+@import '_nav';
+@import '_buttons';
+
 
 // Colors
 .amber-800 {
        color: $amber-800;
 }
 
-// Fonts
-h1 {
-       line-height: 3rem;
-}
-
-h2 {
-       line-height: 2.75rem;
-}
-
-h3 {
-       line-height: 2rem;
-}
-
-h4 {
-       font-weight: 500;
-       line-height: 1.75rem;
-       @include media-breakpoint-down(sm) {
-               font-size: 1em;
-       }
-}
-
-h5 {
-       line-height: 1.5rem;
-}
-
-p {
-       line-height: 1.5rem;
-       &.lead {
-               line-height: 2rem;
-               @include media-breakpoint-down(md) {
-                       font-size: 1.5rem;
-                       line-height: 2rem;
-               }
-               @include media-breakpoint-down(sm) {
-                       font-size: 1rem;
-                       line-height: 1.5rem;
-               }
-       }
-}
-
-.display-2 {
-       margin-bottom: 4rem;
-       @include media-breakpoint-down(md) {
-               font-size: 2.5rem;
-               line-height: 3.5rem;
-               margin-bottom: 3rem;
-       }
-       @include media-breakpoint-down(sm) {
-               font-size: 2rem;
-               line-height: 2.75rem;
-       }
-}
-
-.display-4 {
-       @include media-breakpoint-down(sm) {
-               font-size: .875rem;
-               line-height: 1.25rem;
-       }
-}
-
-small {
-       line-height: 1rem;
-}
-
-.truncate {
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 // Images
 img {
        &.img-fluid {
@@ -155,7 +89,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;
@@ -191,161 +125,6 @@ footer {
        }
 }
 
-// Buttons
-.btn-red900 {
-  @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
-}
-.btn-white {
-  @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
-}
-.btn-bluegrey900 {
-  @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
-}
-
-button.navbar-toggler div {
-       font-family: 'Ubuntu', sans-serif;
-       font-size: 1rem;
-       display: inline-block;
-       position: relative;
-       top: -4px;
-}
-
-.btn {
-       height: 36px;
-       text-transform: uppercase;
-       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
-       transition: box-shadow .25s ease-in-out;
-       &:hover {
-               box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
-               transition: box-shadow .25s ease-in-out;
-       }
-       @include media-breakpoint-down(sm) {
-               font-size: .875rem;
-       }
-}
-
-.btn-outline-primary,
-.btn-outline-secondary {
-       transition: background-color .25s ease-in-out;
-       &:hover {
-               transition: background-color .25s ease-in-out;
-       }
-}
-
-.btn-lg {
-       height: 48px;
-       margin: 0 24px;
-       @include media-breakpoint-down(sm) {
-               height: 36px;
-               margin: 0 8px;
-               padding: 1rem;
-               font-size: .875rem;
-               line-height: 0;
-       }
-}
-
-.btn-md {
-       font-size: 0.875rem;
-       line-height: 1.25rem;
-       padding: .4rem 1rem .5rem 1rem;
-}
-
-.btn-block {
-       margin: 0 0 1.5rem 0;
-       @include media-breakpoint-up(md) {
-               margin: 0 0 2rem 0;     
-       }
-       @include media-breakpoint-down(sm) {
-               font-size: .875rem;
-               line-height: 0;
-       }
-}
-
-button:focus {
-       outline: none;
-}
-
-// Top Navigation
-.fixed-top {
-       transition: background-color 700ms linear;
-       .navbar {
-               width: 100%;
-               @include media-breakpoint-down(md) {
-                       padding: .5rem 0;
-               }
-               .navbar-toggler-left {
-                       left: -1rem;
-               }
-       }
-       .navbar-brand {
-               opacity: 0;
-               transition: opacity 700ms linear;
-               @include media-breakpoint-up(lg) {
-                       opacity: 1;
-               }
-       }
-}
-
-.scrolled {
-       background-color: rgba(255, 255, 255, .96);
-       .navbar-brand {
-               opacity: 1;
-               transition: opacity 700ms linear;
-       }
-}
-
-.menu-text.hidden {
-       display: none;
-       visibility: hidden;
-}
-
-.navbar {
-       a {
-               color: $blue-grey-900;
-       }
-       .btn {
-               margin-top: .15rem;
-       }
-}
-
-a.nav-link {
-       padding-bottom: 30px;
-       display: block;
-       position: relative;
-       &:after {
-               content: "";
-               border-bottom: 2px solid $red_900;
-               position: absolute;
-               transform: scaleX(0);
-               width: 100%;
-               left: 0;
-               padding: inherit;
-               transition: transform .3s ease-out, color .3s ease-out;
-       }
-}
-
-a.nav-link:hover {
-       color: $red_900;
-}
-
-a.nav-link:hover:after {
-       transform: scaleX(1);
-}
-
-.navbar-brand {
-       font-size: 1.25rem;
-       @include media-breakpoint-up(sm) {
-               font-size: 2rem;
-       }
-       font-weight: 300;
-       strong {
-               font-weight: 900;
-       }
-       img {
-               margin-right: 1rem;
-               transform: translateY(-5px);
-       }
-}
 
 // Sections
 section.intro {
@@ -357,7 +136,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 +145,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 +163,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 +180,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 +193,7 @@ section.intro {
 
 section.content-section {
        padding: 3rem 0;
-       @include media-breakpoint-up(md) {
+       @include media-breakpoint-up(sm) {
                padding: 72px 0;
        }
 }
@@ -467,8 +246,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);