From: Michael Tremer Date: Sat, 14 Jul 2018 15:37:29 +0000 (+0100) Subject: CSS: Correctly configure bootstrap heading variables X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e434c81f4de3418bb813c69cf2f32d79f0a686de;p=ipfire.org.git CSS: Correctly configure bootstrap heading variables Signed-off-by: Michael Tremer --- diff --git a/Makefile.am b/Makefile.am index cf24e869..eb856c77 100644 --- 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 index fdec60ff..00000000 --- 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 0cbd430e..0ba58425 100644 --- 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 3544e0ed..c5a39e54 100644 --- 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 f0911b9d..7ad349fe 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -7,7 +7,7 @@

IPFire

-

The Open Source Firewall Distribution

+
The Open Source Firewall Distribution
@@ -25,7 +25,7 @@
-

{{ _("Secure up your network with IPFire") }}

+

{{ _("Secure up your network with IPFire") }}

@@ -33,7 +33,7 @@
-

{{ _("Firewall") }}

+
{{ _("Firewall") }}

IPFire comes with a versatile and state of the art firewall engine that makes even the most complex @@ -47,7 +47,7 @@

-

{{ _("Performance") }}

+
{{ _("Performance") }}

IPFire is ready for high performance networks and running evenly well on embedded hardware. @@ -60,7 +60,7 @@

-

{{ _("Easy to use") }}

+
{{ _("Easy to use") }}

IPFire is set up easily in 15 to 20 minutes but also comes with expert features that @@ -74,7 +74,7 @@

-

{{ _("Network Security") }}

+
{{ _("Network Security") }}

IPFire is designed for high security. It is hardened to protect itself from attacks @@ -88,7 +88,7 @@

-

{{ _("Open Source") }}

+
{{ _("Open Source") }}

IPFire is free software and developed by an open community, that improves it every single day. @@ -101,7 +101,7 @@

-

{{ _("Trusted by thousands") }}

+
{{ _("Trusted by thousands") }}

IPFire is developed in Europe and used all over the world in hundreds of countries @@ -122,9 +122,10 @@

-

Latest Release

+

Latest Release

{{ locale.format_date(latest_release.date, shorter=True) }}

-

+

+ {{ _("%s has been released!") % latest_release.name }}

@@ -143,7 +144,8 @@

-

What’s going on?

+

What’s going on?

+
{% for type, item in latest_news %}
@@ -172,12 +174,12 @@
-

FireInfo Statistics

+

FireInfo Statistics

Latest Release

-
{{ latest_release.name }}
+
{{ latest_release.name }}

{{ "%.0f%%" % (latest_release.penetration * 100) }}

@@ -191,7 +193,7 @@

{{ _("%.0f%% of all IPFire systems are running in") % (fireinfo_country.percentage * 100) }}

-
{{ fireinfo_country.country.name }}
+
{{ fireinfo_country.country.name }}

{{ "%.0f%%" % (fireinfo_country.percentage * 100) }}

@@ -210,7 +212,7 @@
-

{{ _("Professional Appliances & Services") }}

+

{{ _("Professional Appliances & Services") }}

@@ -221,7 +223,7 @@ greatest reliability, stability and performance.

-
+
{{ _("Get Professional Support") }} {{ _("Hardware Appliances") }}