Tidy up CSS and remove unused classes

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 0ba58425dd26349ca6380d6fe8c4080069f44c98..0ec4308e20d3a6f21026756d5f4fa70cfed2982b 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -61,6 +61,8 @@ $small-font-size:                     87.5%;
 // Headings
 $headings-font-weight:         300;
 $headings-line-height:         1.5;
+$headings-color:                       $blue-grey-900;
+
 $h1-font-size:                         3rem;
 $h2-font-size:                         2.5rem;
 $h3-font-size:                         2.25rem;

diff --git a/src/scss/style.scss b/src/scss/style.scss
index c5a39e543fb9a1b8410405ea0ec686725a0026cd..1e343ea411a9c389c9d1de9e6960f8e687ea0f57 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -88,6 +88,19 @@ footer {
 }
 
 // Sections
+
+section {
+       padding: 3rem 0;
+
+       @include media-breakpoint-up(sm) {
+               padding: 72px 0;
+       }
+
+       h1 {
+               margin-bottom: 64px;
+       }
+}
+
 section.intro {
        min-height: 100vh;
        background-image: url('img/header-background.jpg');
@@ -97,25 +110,28 @@ section.intro {
        position: relative;
 
        .branding {
+               margin-bottom: 64px;
+               text-align: center;
+
                padding-top: 6rem;
+
                @include media-breakpoint-up(sm) {
                        padding-top: 192px;
                }
-               margin-bottom: 64px;
-               text-align: center;
-               color: $blue-grey-600;
+
                h1 {
-                       font-weight: 300 !important;
-                       color: $blue-grey-900;
+                       margin-bottom: 0;
+
                        @include media-breakpoint-down(xs) {
                                font-size: 72px;
                                line-height: 88px;
-                               margin-bottom: 0;
                        }
+
                        strong {
                                font-weight: 700 !important;
                        }
                }
+
                h1:before {
                        content: "";
                        height: 60px;
@@ -127,6 +143,7 @@ section.intro {
                        display: inline-block;
                        position: relative;
                        top: 4px;
+
                        @include media-breakpoint-up(sm) {
                                height: 120px;
                                width: 93px;
@@ -134,9 +151,30 @@ section.intro {
                                top: 8px;
                        }
                }
+
+               h5 {
+                       color: $blue-grey-600;
+               }
+
        }
 }
 
+section#news, section#support, footer {
+       background-color: rgba($blue-grey-900, .06);
+}
+
+section#news {
+       color: rgba($blue-grey-900, .6);
+}
+
+section#fireinfo {
+       border-bottom: 1px solid rgba($blue-grey-900, .2);
+}
+
+section#appliances {
+       padding-bottom: 48px;
+}
+
 .page-scroll {
        display: block;
        visibility: visible;
@@ -158,13 +196,6 @@ section.intro {
        }
 }
 
-section.content-section {
-       padding: 3rem 0;
-       @include media-breakpoint-up(sm) {
-               padding: 72px 0;
-       }
-}
-
 .feature_icons {
        width: 40px;
        height: 100%;
@@ -172,31 +203,10 @@ section.content-section {
        margin-right: .75rem;
 }
 
-section#news,
-section#support,
-footer {
-       background-color: rgba($blue-grey-900, .06);
-}
-
-section#news {
-       color: rgba($blue-grey-900, .6);
-       h2 {
-               color: $blue-grey-900;
-       }
-}
-
 .progress {
        background-color: rgba(255, 255, 255, .2);
 }
 
-.bg-progress {
-       background-image: linear-gradient(to right, $yellow-700, $amber-800);
-}
-
-section#fireinfo {
-       border-bottom: 1px solid rgba($blue-grey-900, .2);
-}
-
 .circle {
        position: relative;
        p.fireinfo_per {
@@ -207,11 +217,6 @@ section#fireinfo {
        }
 }
 
-section#appliances {
-       padding-bottom: 48px;
-}
-
-.features-content,
 .fixed-top + .blog-content {
        padding-top: 88px;
        margin-bottom: 40px;

diff --git a/src/templates/index.html b/src/templates/index.html
index ac9e6518b101e460d73bc38dd3d59179afaecf09..57194e070c720b96f018924293729167340ee717 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -23,7 +23,7 @@
                </div>
        </section>
 
-       <section id="features" class="content-section">
+       <section id="features">
                <div class="container">
                        <h1 class="text-center">{{ _("Secure up your network with IPFire") }}</h1>
        
@@ -118,11 +118,11 @@
                </div>
        </section>
 
-       <section id="news" class="content-section">
+       <section id="news">
                <div class="container">
                        <div class="row">
                                <div class="col-12 col-md-6 col-lg-5 mb-5">
-                                       <h1 class="mb-6">Latest Release</h1>
+                                       <h1>Latest Release</h1>
 
                                        <p class="mb-0">
                                                <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
@@ -152,7 +152,7 @@
                                </div>
                                
                                <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
-                                       <h1 class="mb-6">What&rsquo;s going on?</h1>
+                                       <h1>What&rsquo;s going on?</h1>
 
                                        <dl class="dl-horizontal">
                                                {% for type, item in latest_news %}
@@ -180,7 +180,7 @@
                </div>
        </section>
 
-       <section id="fireinfo" class="content-section">
+       <section id="fireinfo">
                <div class="container">
                        <h1 class="text-center">Fire<strong>Info</strong> Statistics</h1>
                        
@@ -218,9 +218,9 @@
                </div>
        </section>
 
-       <section id="appliances" class="content-section">
+       <section id="appliances">
                <div class="container">
-                       <h1 class="text-center mb-5">{{ _("Professional Appliances & Services") }}</h1>
+                       <h1 class="text-center">{{ _("Professional Appliances & Services") }}</h1>
                        
                        <div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
                                <div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">