CSS: Correctly configure bootstrap heading variables

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

diff --git a/Makefile.am b/Makefile.am
index cf24e8691c7f6cd73daa41e0f545145e14ef6d51..eb856c77f9e46b3635bea7f7e8d508c0fa93c529 100644 (file)
--- a/Makefile.am
+++ b/Makefile.am
@@ -130,7 +130,6 @@ templates_staticdir = $(templatesdir)/static
 SCSS_FILES = \
        src/scss/style.scss \
        src/scss/_donation.scss \
-       src/scss/_fonts.scss \
        src/scss/_icons.scss \
        src/scss/_variables.scss
 

diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss
deleted file mode 100644 (file)
index fdec60f..0000000
--- a/src/scss/_fonts.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-body {
-       -webkit-font-smoothing: antialiased;
-       font-size: 16px;
-}
-
-h1 {
-       line-height: 3rem;
-}
-
-h2 {
-       line-height: 2.75rem;
-}
-
-h3 {
-       font-size: 20px;
-       line-height: 28px;
-       @include media-breakpoint-up(md) {
-               font-size: 24px;
-               line-height: 32px;
-               font-weight: 500;
-               margin-bottom: 0;
-       }
-       &.headline {
-               text-align: center;
-               font-size: 32px;
-               line-height: 44px;
-               color: $blue-grey-900;
-               @include media-breakpoint-up(sm) {
-                       font-size: 36px;
-                       line-height: 48px;
-               }
-       }
-}
-
-h4 {
-       font-weight: 500;
-       font-size: 16px;
-       line-height: 24px;
-       @include media-breakpoint-up(sm) {
-               font-size: 20px;
-               line-height: 28px;
-       }
-       &.secondHeadline {
-               font-size: 24px;
-               line-height: 32px;
-               text-align: left;
-               margin-top: 24px;
-       }
-}
-
-h5,
-.h5 {
-       font-size: 16px;
-       line-height: 24px;
-       @include media-breakpoint-up(md) {
-               font-size: 24px;
-               line-height: 32px;
-       }
-       &.subheadline {
-               text-align: center;
-               font-size: 16px;
-               line-height: 24px;
-               color: $blue-grey-600;
-       }
-}
-
-p {
-       font-size: 16px;
-       line-height: 24px;
-       &.lead {
-               font-size: inherit;
-               line-height: inherit;
-               @include media-breakpoint-up(md) {
-                       font-size: 24px;
-                       line-height: 32px;
-               }
-       }
-       &.copy {
-               margin-top: 16px;
-               @include media-breakpoint-up(sm) {
-                       margin-top: 24px;
-               }
-       }
-}
-
-.display-1 {
-       font-size: 120px;
-       line-height: 144px;
-}
-
-.display-2 {
-       font-size: 32px;
-       line-height: 44px;
-       margin-bottom: 40px;
-       @include media-breakpoint-up(md) {
-               font-size: 40px;
-               font-weight: 500;
-               line-height: 56px;
-               margin-bottom: 3rem;
-       }
-}
-
-.display-3 {
-       font-size: 24px;
-       line-height: 32px;
-       @include media-breakpoint-up(md) {
-               font-size: 32px;
-               line-height: 44px;
-       }
-}
-
-.display-4 {
-       font-size: 14px;
-       line-height: 20px;
-       font-weight: 400;
-       @include media-breakpoint-up(sm) {
-               font-size: 24px;
-               line-height: 32px;;
-       }
-}
-
-.display-5 {
-       font-size: 20px;
-       line-height: 28px;
-}
-
-small,
-.small {
-       font-size: 14px;
-       line-height: 20px;
-       @include media-breakpoint-up(md) {
-               font-size: 16px;
-               line-height: 24px;
-       }
-}
-
-.truncate {
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-
-// fireInfo
-.fireinfo_cat {
-       font-size: 14px;
-       line-height: 20px;
-}
-
-h5.fireinfo {
-       font-size: 16px;
-       line-height: 28px;
-       font-weight: 500;
-       @include media-breakpoint-up(md) {
-               font-size: 20px;
-       }
-}
-
-.fireinfo_per {
-       font-size: 20px;
-       line-height: 28px;
-}

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 0cbd430e7080f6749013390826ebbd43372eec8e..0ba58425dd26349ca6380d6fe8c4080069f44c98 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -54,7 +54,21 @@ $font-weight-normal:         500;
 $font-weight-bold:                     700;
 
 // Typo
-$font-size-base:                       0.875rem;
+$font-size-base:                       1rem;
+$lead-font-size:                       1.5rem;
+$small-font-size:                      87.5%;
+
+// Headings
+$headings-font-weight:         300;
+$headings-line-height:         1.5;
+$h1-font-size:                         3rem;
+$h2-font-size:                         2.5rem;
+$h3-font-size:                         2.25rem;
+$h4-font-size:                         2rem;
+$h5-font-size:                         1.5rem;
+$h6-font-size:                         1.25rem;
+
+$display1-size:                                7.5rem;
 
 // Navbar
 $navbar-brand-font-size:       36px;

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 3544e0ed1b7ee161fb7125d0a30bda4603cba226..c5a39e543fb9a1b8410405ea0ec686725a0026cd 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -38,7 +38,6 @@
 @import "_donation";
 
 // Custom stuff
-@import '_fonts';
 //@import '_buttons';
 @import '_icons';
 
@@ -47,6 +46,32 @@
        text-transform: uppercase;
 }
 
+// Headings
+
+h1 {
+       line-height: 4rem;
+}
+
+h2 {
+       line-height: 3.5rem;
+}
+
+h3 {
+       line-height: 3rem;
+}
+
+h4 {
+       line-height: 2.75rem;
+}
+
+h5 {
+       line-height: 2rem;
+}
+
+h6 {
+       line-height: 1.75rem;
+}
+
 footer {
        .btn-toolbar .icon {
                height: 2.25rem;

diff --git a/src/templates/index.html b/src/templates/index.html
index f0911b9d5eec96e5d9f9e03d0a512e3e256bbca9..7ad349feb652a896bf750e805fec990c3a7bfc1d 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -7,7 +7,7 @@
                <div class="container">
                        <div class="branding">
                                <h1 class="display-1">IP<strong>Fire</strong></h1>
-                               <h2 class="display-4">The Open Source Firewall Distribution</h2>
+                               <h5>The Open Source Firewall Distribution</h5>
                        </div>
 
                        <div class="row justify-content-center">
@@ -25,7 +25,7 @@
 
        <section id="features" class="content-section">
                <div class="container">
-                       <h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
+                       <h1 class="text-center">{{ _("Secure up your network with IPFire") }}</h1>
        
                        <div class="row mb-lg-6 mb-md-5">
                                <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
@@ -33,7 +33,7 @@
                                                <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
                                        </div>
                                        <div class="flex-column">
-                                               <h4 class="pb-3">{{ _("Firewall") }}</h4>
+                                               <h5 class="pb-3">{{ _("Firewall") }}</h5>
                                                <p>
                                                        IPFire comes with a versatile and state of the art
                                                        firewall engine that makes even the most complex
@@ -47,7 +47,7 @@
                                                <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
                                        </div>
                                        <div class="flex-column">
-                                               <h4 class="pb-3">{{ _("Performance") }}</h4>
+                                               <h5 class="pb-3">{{ _("Performance") }}</h5>
                                                <p>
                                                        IPFire is ready for high performance networks
                                                        and running evenly well on embedded hardware.
@@ -60,7 +60,7 @@
                                                <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
                                        </div>
                                        <div class="flex-column">
-                                               <h4 class="pb-3">{{ _("Easy to use") }}</h4>
+                                               <h5 class="pb-3">{{ _("Easy to use") }}</h5>
                                                <p class="mb-1">
                                                        IPFire is set up easily in 15 to 20 minutes
                                                        but also comes with expert features that
@@ -74,7 +74,7 @@
                                                <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
                                        </div>
                                        <div class="flex-column">
-                                               <h4 class="pb-3">{{ _("Network Security") }}</h4>
+                                               <h5 class="pb-3">{{ _("Network Security") }}</h5>
                                                <p>
                                                        IPFire is designed for high security.
                                                        It is hardened to protect itself from attacks
@@ -88,7 +88,7 @@
                                                <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
                                        </div>
                                        <div class="flex-column">
-                                               <h4 class="pb-3">{{ _("Open Source") }}</h4>
+                                               <h5 class="pb-3">{{ _("Open Source") }}</h5>
                                                <p>
                                                        IPFire is free software and developed by an open community,
                                                        that improves it every single day.
@@ -101,7 +101,7 @@
                                                <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
                                        </div>
                                        <div class="flex-column">
-                                               <h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
+                                               <h5 class="pb-3">{{ _("Trusted by thousands") }}</h5>
                                                <p>
                                                        IPFire is developed in Europe and used all over the world
                                                        <a href="https://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
@@ -122,9 +122,10 @@
                <div class="container">
                        <div class="row">
                                <div class="col-12 col-md-6 col-lg-5 mb-6">
-                                       <h2 class="display-2 mb-6">Latest Release</h2>
+                                       <h1 class="mb-6">Latest Release</h1>
                                        <p class="mb-3"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
-                                       <h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
+                                       <h3 class="mb-5 pb-5">
+                                               <a href="/news/{{ latest_release.news.slug }}">
                                                        {{ _("%s has been released!") % latest_release.name }}
                                                </a>
                                        </h3>
@@ -143,7 +144,8 @@
                                </div>
                                
                                <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
-                                       <h2 class="display-2 mb-6">What&rsquo;s going on?</h2>
+                                       <h1 class="mb-6">What&rsquo;s going on?</h1>
+
                                        <dl class="dl-horizontal">
                                                {% for type, item in latest_news %}
                                                        <dt>
@@ -172,12 +174,12 @@
 
        <section id="fireinfo" class="content-section">
                <div class="container">
-                       <h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
+                       <h1 class="text-center">Fire<strong>Info</strong> Statistics</h1>
                        
                        <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6 justify-content-center">
                                <div class="col-6 col-md-3 mb-6 text-center">
                                        <p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
-                                       <h5 class="pb-5 fireinfo">{{ latest_release.name }}</h5>
+                                       <h6 class="pb-5 fireinfo">{{ latest_release.name }}</h6>
                                        <div class="r_circle circle mt-5">
                                                <p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
                                        </div>
@@ -191,7 +193,7 @@
                                                <p class="mb-0 mb-sm-3 fireinfo_cat truncate">
                                                        {{ _("%.0f%% of all IPFire systems are running in") % (fireinfo_country.percentage * 100) }}
                                                </p>
-                                               <h5 class="pb-5 fireinfo">{{ fireinfo_country.country.name }}</h5>
+                                               <h6 class="pb-5 fireinfo">{{ fireinfo_country.country.name }}</h6>
                                                <div class="v_circle circle mt-5">
                                                        <p class="fireinfo_per">{{ "%.0f%%" % (fireinfo_country.percentage * 100) }}</p>
                                                </div>
@@ -210,7 +212,7 @@
 
        <section id="appliances" class="content-section">
                <div class="container">
-                       <h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
+                       <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">
@@ -221,7 +223,7 @@
                                                greatest reliability, stability and performance.
                                        </p>
                                </div>
-                               <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
+                               <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
                                        <a class="btn btn-dark btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
                                        <a class="btn btn-dark btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
                                </div>