]> git.ipfire.org Git - ipfire.org.git/commitdiff
Improve looks of the index page on mobile
authorMichael Tremer <michael.tremer@ipfire.org>
Mon, 22 Oct 2018 11:27:12 +0000 (12:27 +0100)
committerMichael Tremer <michael.tremer@ipfire.org>
Mon, 22 Oct 2018 11:27:12 +0000 (12:27 +0100)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/scss/style.scss
src/templates/index.html

index 68f4d7c2caf09a70eb7888af57c17cc02a251367..30787a9a878d6e91d10f33262f92fa7770d6dd0a 100644 (file)
@@ -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;
        }
 }
 
index 35297f18aee6b36314dfc02ed3b4f3c4bbb7e90c..2d7df1904d48f882a0c07afe94cfe72d3479345c 100644 (file)
 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
 
 {% block container %}
-       <div class="main">
-               <div class="container intro">
+       <section class="intro">
+               <div class="container d-flex align-items-center">
                        <div class="row flex-md-row-reverse">
-                               <div class="col-md-5 my-5 text-center">
+                               <div class="col-12 col-md-5 my-5 text-center">
                                        <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
                                </div>
 
-                               <div class="col-md-7 my-5 align-self-center px-3">
-                                       <h1 class="display-1">The Open Source Firewall Distribution</h1>
+                               <div class="col-12 col-md-7 align-self-center px-3">
+                                       <h1>{{ _("The Open Source Firewall") }}</h1>
 
-                                       <div class="btn-toolbar">
-                                               <a class="btn btn-outline-primary btn-glow-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
-                                               <a class="btn btn-outline-secondary btn-glow-secondary btn-lg ml-3" href="/features">{{ _("Features") }}</a>
+                                       <div class="btn-toolbar my-5">
+                                               <a class="btn btn-outline-primary btn-glow-primary btn-lg mr-2" href="/download">{{ _("Download") }}</a>
+                                               <a class="btn btn-outline-secondary btn-glow-secondary btn-lg ml-2" href="/features">{{ _("Features") }}</a>
                                        </div>
                                </div>
                        </div>
                </div>
+       </section>
+
+       <section class="inverse">
+               <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>
+
+                                       <p>
+                                               IPFire comes with a versatile and state of the art firewall engine
+                                               that makes even the most complex setups easy to administer.
+                                       </p>
+                               </div>
+                       </div>
 
-               <section class="inverse">
-                       <div class="container">
-                               <div class="row mb-5">
-                                       <div class="col col-md-6">
-                                               <h1 class="display-1 mb-0">{{ _("Secure up your network with IPFire") }}</h1>
+                       <div class="row mt-5 mb-lg-6 mb-md-5">
+                               <div class="col-md-6 col-lg-4 mb-5 pb-lg-5 d-flex">
+                                       <div class="align-self-stretch">
+                                               <span class="fas fa-shield-alt fa-2x text-primary px-3"></span>
+                                       </div>
 
+                                       <div class="flex-column">
+                                               <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 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.
                                                </p>
                                        </div>
                                </div>
 
-                               <div class="row mt-5 mb-lg-6 mb-md-5">
-                                       <div class="col-md-6 col-lg-4 mb-5 pb-lg-5 d-flex">
-                                               <div class="align-self-stretch">
-                                                       <span class="fas fa-shield-alt fa-2x text-primary px-3"></span>
-                                               </div>
-
-                                               <div class="flex-column">
-                                                       <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
-                                                               setups easy to administer.
-                                                       </p>
-                                               </div>
+                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
+                                       <div class="align-self-stretch">
+                                               <span class="fas fa-fast-forward fa-2x text-primary px-3"></span>
                                        </div>
-                                       
-                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                               <div class="align-self-stretch">
-                                                       <span class="fas fa-fast-forward fa-2x text-primary px-3"></span>
-                                               </div>
-
-                                               <div class="flex-column">
-                                                       <h5 class="pb-3">{{ _("Performance") }}</h5>
-                                                       <p>
-                                                               IPFire is ready for high performance networks
-                                                               and running evenly well on embedded hardware.
-                                                       </p>
-                                               </div>  
+
+                                       <div class="flex-column">
+                                               <h5 class="pb-3">{{ _("Performance") }}</h5>
+                                               <p>
+                                                       IPFire is ready for high performance networks
+                                                       and running evenly well on embedded hardware.
+                                               </p>
                                        </div>
-                                       
-                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                               <div class="align-self-stretch">
-                                                       <span class="fas fa-couch fa-2x text-primary px-3"></span>
-                                               </div>
-
-                                               <div class="flex-column">
-                                                       <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
-                                                               are needed in professional networks.
-                                                       </p>
-                                               </div>
+                               </div>
+
+                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
+                                       <div class="align-self-stretch">
+                                               <span class="fas fa-couch fa-2x text-primary px-3"></span>
                                        </div>
 
-                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                               <div class="align-self-stretch">
-                                                       <span class="fas fa-lock fa-2x text-primary px-3"></span>
-                                               </div>
-
-                                               <div class="flex-column">
-                                                       <h5 class="pb-3">{{ _("Network Security") }}</h5>
-                                                       <p>
-                                                               IPFire is designed for high security.
-                                                               It is hardened to protect itself from attacks
-                                                               from the network.
-                                                       </p>
-                                               </div>
+                                       <div class="flex-column">
+                                               <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
+                                                       are needed in professional networks.
+                                               </p>
                                        </div>
-                                       
-                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                               <div class="align-self-stretch">
-                                                       <span class="fab fa-osi fa-2x text-primary px-3"></span>
-                                               </div>
-
-                                               <div class="flex-column">
-                                                       <h5 class="pb-3">{{ _("Open Source") }}</h5>
-                                                       <p>
-                                                               IPFire is free software and developed by an open community,
-                                                               that improves it every single day.
-                                                       </p>
-                                               </div>
+                               </div>
+
+                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
+                                       <div class="align-self-stretch">
+                                               <span class="fas fa-lock fa-2x text-primary px-3"></span>
                                        </div>
-                                       
-                                       <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                               <div class="align-self-stretch">
-                                                       <span class="fas fa-heart fa-2x text-primary px-3"></span>
-                                               </div>
-
-                                               <div class="flex-column">
-                                                       <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>
-                                                               by hundreds of thousands of users every day.
-                                                       </p>
-                                               </div>
+
+                                       <div class="flex-column">
+                                               <h5 class="pb-3">{{ _("Network Security") }}</h5>
+                                               <p>
+                                                       IPFire is designed for high security.
+                                                       It is hardened to protect itself from attacks
+                                                       from the network.
+                                               </p>
                                        </div>
                                </div>
-                       </div>
-               </section>
 
-               <section>
-                       <div class="container">
-                               <div class="row">
-                                       <div class="col-12 col-md-6 col-lg-5 mb-5">
-                                               <h1>Latest Release</h1>
+                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
+                                       <div class="align-self-stretch">
+                                               <span class="fab fa-osi fa-2x text-primary px-3"></span>
+                                       </div>
 
-                                               <p class="mb-0">
-                                                       <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
+                                       <div class="flex-column">
+                                               <h5 class="pb-3">{{ _("Open Source") }}</h5>
+                                               <p>
+                                                       IPFire is free software and developed by an open community,
+                                                       that improves it every single day.
                                                </p>
+                                       </div>
+                               </div>
 
-                                               <h3 class="mb-5">
-                                                       {% if latest_release.post %}
-                                                               <a href="https://blog.ipfire.org/post/{{ latest_release.post.slug }}">
-                                                                       {{ _("%s has been released!") % latest_release.name }}
-                                                               </a>
-                                                       {% else %}
-                                                               {{ _("%s has been released!") % latest_release.name }}
-                                                       {% end %}
-                                               </h3>
+                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
+                                       <div class="align-self-stretch">
+                                               <span class="fas fa-heart fa-2x text-primary px-3"></span>
+                                       </div>
 
-                                               <div class="btn-toolbar mb-5">
-                                                       <a class="btn btn-primary mr-3" href="/download">
-                                                               <span class="fas fa-download"></span> {{ _("Download") }}
-                                                       </a>
+                                       <div class="flex-column">
+                                               <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>
+                                                       by hundreds of thousands of users every day.
+                                               </p>
+                                       </div>
+                               </div>
+                       </div>
+               </div>
+       </section>
 
-                                                       <a class="btn btn-secondary ml-3" href="/donate">
-                                                               <span class="fas fa-heart"></span> {{ _("Donate") }}
+       <section>
+               <div class="container">
+                       <div class="row">
+                               <div class="col-12 col-md-6 col-lg-5 mb-5">
+                                       <h1>Latest Release</h1>
+
+                                       <p class="mb-0">
+                                               <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
+                                       </p>
+
+                                       <h3 class="mb-5">
+                                               {% if latest_release.post %}
+                                                       <a href="https://blog.ipfire.org/post/{{ latest_release.post.slug }}">
+                                                               {{ _("%s has been released!") % latest_release.name }}
                                                        </a>
-                                               </div>
-                                       </div>
-                                       
-                                       <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
-                                               <h1>{{ _("What's going on?") }}</h1>
-
-                                               <dl class="dl-horizontal">
-                                                       {% for post in posts %}
-                                                               <dt>
-                                                                       <small>{{ locale.format_date(post.published_at, relative=True, shorter=True) }} &nbsp;</small>
-                                                               </dt>
-
-                                                               <dd class="text-overflow mb-4">
-                                                                       <a href="https://blog.ipfire.org/post/{{ post.slug }}">{{ post.title }}</a>
-                                                               </dd>
-                                                       {% end %}
-                                               </dl>
-                                               
-                                               <a class="btn btn-secondary" href="https://blog.ipfire.org/">{{ _("Read More") }}</a>
+                                               {% else %}
+                                                       {{ _("%s has been released!") % latest_release.name }}
+                                               {% end %}
+                                       </h3>
+
+                                       <div class="btn-toolbar mb-5">
+                                               <a class="btn btn-primary mr-3" href="/download">
+                                                       <span class="fas fa-download"></span> {{ _("Download") }}
+                                               </a>
+
+                                               <a class="btn btn-secondary ml-3" href="/donate">
+                                                       <span class="fas fa-heart"></span> {{ _("Donate") }}
+                                               </a>
                                        </div>
                                </div>
+
+                               <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
+                                       <h1>{{ _("What's going on?") }}</h1>
+
+                                       <dl class="dl-horizontal">
+                                               {% for post in posts %}
+                                                       <dt>
+                                                               <small>{{ locale.format_date(post.published_at, relative=True, shorter=True) }} &nbsp;</small>
+                                                       </dt>
+
+                                                       <dd class="text-overflow mb-4">
+                                                               <a href="https://blog.ipfire.org/post/{{ post.slug }}">{{ post.title }}</a>
+                                                       </dd>
+                                               {% end %}
+                                       </dl>
+
+                                       <a class="btn btn-secondary" href="https://blog.ipfire.org/">{{ _("Read More") }}</a>
+                               </div>
                        </div>
-               </section>
-
-               <section class="inverse">
-                       <div class="container">
-                               <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">
-                                               <p class="lead">
-                                                       <a href="https://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> 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.
-                                               </p>
-                                       </div>
-                                       <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
-                                               <a class="btn btn-light btn-lg btn-block px-md-0 mb-4" href="https://www.lightningwirelabs.com/">{{ _("Get Professional Support") }}</a>
-                                               <a class="btn btn-light btn-lg btn-block px-md-0" href="https://www.lightningwirelabs.com/products/ipfire/appliances">{{ _("Hardware Appliances") }}</a>
-                                       </div>
+               </div>
+       </section>
+
+       <section class="inverse">
+               <div class="container">
+                       <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">
+                                       <p class="lead">
+                                               <a href="https://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> 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.
+                                       </p>
                                </div>
-                               <div class="text-center">
-                                       <picture>
-                                               <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
-                                               <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
-                                               <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
-                                               <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
-                                               <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
-                                       </picture>
+                               <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
+                                       <a class="btn btn-light btn-lg btn-block px-md-0 mb-4" href="https://www.lightningwirelabs.com/">{{ _("Get Professional Support") }}</a>
+                                       <a class="btn btn-light btn-lg btn-block px-md-0" href="https://www.lightningwirelabs.com/products/ipfire/appliances">{{ _("Hardware Appliances") }}</a>
                                </div>
                        </div>
-               </section>
-       </div>
+                       <div class="text-center">
+                               <picture>
+                                       <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
+                                       <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
+                                       <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
+                                       <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
+                                       <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
+                               </picture>
+                       </div>
+               </div>
+       </section>
 <script>
 $(document).ready(function () {
        $('.scroll').on('click', function(event) {