From 8ad3de4a34e7263faff3da00e5d12e3bc1c3c8c2 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Mon, 22 Oct 2018 12:27:12 +0100 Subject: [PATCH] Improve looks of the index page on mobile Signed-off-by: Michael Tremer --- src/scss/style.scss | 32 ++-- src/templates/index.html | 336 +++++++++++++++++++-------------------- 2 files changed, 187 insertions(+), 181 deletions(-) diff --git a/src/scss/style.scss b/src/scss/style.scss index 68f4d7c2..30787a9a 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -160,26 +160,32 @@ footer { // Sections section { - padding: 3rem 0; + padding: 3rem 1rem; - @include media-breakpoint-up(sm) { - padding: 72px 0; + @include media-breakpoint-up(md) { + padding: 3rem 0; } -} -.main { - .intro { - min-height: 100%; - min-height: 100vh; + @include media-breakpoint-up(md) { + // Reset large headlines to normal size on mobile devices + h1 { + font-size: $display1-size; + font-weight: $display1-weight; + line-height: $display-line-height; + } + } - margin-top: -6rem; + &.intro { + .container { + min-height: 100%; + min-height: 100vh; + } + + margin-top: -$navbar-height; @include media-breakpoint-down(sm) { - padding-top: 6rem; + padding-top: $navbar-height; } - - display: flex; - align-items: center; } } diff --git a/src/templates/index.html b/src/templates/index.html index 35297f18..2d7df190 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -7,211 +7,211 @@ {% block title %}{{ _("Welcome to IPFire") }}{% end block %} {% block container %} -
-
+
+
-
+
IPFire Logo
-
-

The Open Source Firewall Distribution

+
+

{{ _("The Open Source Firewall") }}

-
- {{ _("Download") }} - {{ _("Features") }} +
+ {{ _("Download") }} + {{ _("Features") }}
+
+ +
+
+
+
+

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

+ +

+ IPFire comes with a versatile and state of the art firewall engine + that makes even the most complex setups easy to administer. +

+
+
-
-
-
-
-

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

+
+
+
+ +
+
+
{{ _("Firewall") }}

- IPFire comes with a versatile and state of the art firewall engine - that makes even the most complex setups easy to administer. + IPFire comes with a versatile and state of the art + firewall engine that makes even the most complex + setups easy to administer.

-
-
-
- -
- -
-
{{ _("Firewall") }}
-

- IPFire comes with a versatile and state of the art - firewall engine that makes even the most complex - setups easy to administer. -

-
+
+
+
- -
-
- -
- -
-
{{ _("Performance") }}
-

- IPFire is ready for high performance networks - and running evenly well on embedded hardware. -

-
+ +
+
{{ _("Performance") }}
+

+ IPFire is ready for high performance networks + and running evenly well on embedded hardware. +

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

- IPFire is set up easily in 15 to 20 minutes - but also comes with expert features that - are needed in professional networks. -

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

- IPFire is designed for high security. - It is hardened to protect itself from attacks - from the network. -

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

+ IPFire is set up easily in 15 to 20 minutes + but also comes with expert features that + are needed in professional networks. +

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

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

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

- IPFire is developed in Europe and used all over the world - in hundreds of countries - by hundreds of thousands of users every day. -

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

+ IPFire is designed for high security. + It is hardened to protect itself from attacks + from the network. +

-
-
-
-
-
-
-

Latest Release

+
+
+ +
-

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

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

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

+
+
-

- {% if latest_release.post %} - - {{ _("%s has been released!") % latest_release.name }} - - {% else %} - {{ _("%s has been released!") % latest_release.name }} - {% end %} -

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

+ IPFire is developed in Europe and used all over the world + in hundreds of countries + by hundreds of thousands of users every day. +

+
+
+
+
+
- - {{ _("Donate") }} +
+
+
+
+

Latest Release

+ +

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

+ +

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

-
- -
-

{{ _("What's going on?") }}

- -
- {% for post in posts %} -
- {{ locale.format_date(post.published_at, relative=True, shorter=True) }}   -
- -
- {{ post.title }} -
- {% end %} -
- - {{ _("Read More") }} + {% else %} + {{ _("%s has been released!") % latest_release.name }} + {% end %} + + +
+ + {{ _("Download") }} + + + + {{ _("Donate") }} +
+ +
+

{{ _("What's going on?") }}

+ +
+ {% for post in posts %} +
+ {{ locale.format_date(post.published_at, relative=True, shorter=True) }}   +
+ +
+ {{ post.title }} +
+ {% end %} +
+ + {{ _("Read More") }} +
-
- -
-
-

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

- -
-
-

- Lightning Wire Labs offer - IPFire hardware appliances for enterprises, large businesses and SOHO. - Deploying one of these on your network will provide you with the - greatest reliability, stability and performance. -

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

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

+ +
+
+

+ Lightning Wire Labs offer + IPFire hardware appliances for enterprises, large businesses and SOHO. + Deploying one of these on your network will provide you with the + greatest reliability, stability and performance. +

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