CSS: Make base font size 18px

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

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index f3e9a7180d32a759940777029042c73b6dce6632..aa8ef50165995a20816c528dfea5c75d59c127b6 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -53,14 +53,14 @@ $font-weight-normal:                400;
 $font-weight-bold:                     700;
 
 // Typo
-$font-size-base:                       1rem;
+$font-size-base:                       1.125rem;
 $lead-font-size:                       1.5rem;
 $small-font-size:                      87.5%;
 
 // Headings
 $headings-font-weight:         500;
-$headings-line-height:         1.5;
-$headings-margin-bottom:       1.5rem;
+$headings-line-height:         1.15;
+$headings-margin-bottom:       1.25rem;
 $headings-color:                       $white;
 
 $h1-font-size:                         3rem;
@@ -70,7 +70,7 @@ $h4-font-size:                                2rem;
 $h5-font-size:                         1.5rem;
 $h6-font-size:                         1.25rem;
 
-$display1-size:                                7.5rem;
+$display1-size:                                4rem;
 
 // Links
 $link-color:                           $primary;

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 889fa5a679e7442093c3ccaceb586671cbbddb55..1a679d24431525d70b90d8eb75667bdf4f0f1e4a 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -61,33 +61,6 @@ body {
        }
 }
 
-// Headings
-
-h1 {
-       line-height: 4rem;
-       font-weight: 300;
-}
-
-h2 {
-       line-height: 3.5rem;
-}
-
-h3 {
-       line-height: 3rem;
-}
-
-h4 {
-       line-height: 2.75rem;
-}
-
-h5 {
-       line-height: 2rem;
-}
-
-h6 {
-       line-height: 1.75rem;
-}
-
 .card {
        @extend .inverse;
 
@@ -163,13 +136,6 @@ footer {
 
                display: flex;
                align-items: center;
-
-               h1 {
-                       @include media-breakpoint-up(lg) {
-                               font-size: 4rem;
-                               line-height: 5rem;
-                       }
-               }
        }
 
        section {
@@ -178,10 +144,6 @@ footer {
                @include media-breakpoint-up(sm) {
                        padding: 72px 0;
                }
-
-               h1 {
-                       margin-bottom: 64px;
-               }
        }
 
        section#news, section#support, footer {

diff --git a/src/templates/index.html b/src/templates/index.html
index 8cb6eb0887f07c4c5bea2227a4b4385101e3fa12..815d7a6ab2b8ec8b9eacca947e8fd8aa17499f78 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -15,7 +15,7 @@
                                </div>
 
                                <div class="col-md-7 my-5 align-self-center">
-                                       <h1>The Open Source Firewall Distribution</h1>
+                                       <h1 class="display-1">The Open Source Firewall Distribution</h1>
 
                                        <div class="btn-toolbar">
                                                <a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
@@ -29,7 +29,7 @@
                        <div class="container">
                                <div class="row mb-5">
                                        <div class="col col-md-6">
-                                               <h1 class="mb-0">{{ _("Secure up your network with IPFire") }}</h1>
+                                               <h1 class="display-1 mb-0">{{ _("Secure up your network with IPFire") }}</h1>
 
                                                <p>
                                                        IPFire comes with a versatile and state of the art firewall engine