]> git.ipfire.org Git - ipfire.org.git/commitdiff
about: started adding new design
authorRico Hoppe <rico.hoppe@ipfire.org>
Sun, 19 Mar 2023 19:11:32 +0000 (19:11 +0000)
committerRico Hoppe <rico.hoppe@ipfire.org>
Sun, 19 Mar 2023 19:11:32 +0000 (19:11 +0000)
src/templates/about.html

index e521a06107fd992eeb7ff8f8d91199360fa7d5c3..838582b724ec1025218ed68e1d0ca238c51d07da 100644 (file)
 
 
        <div class="container">
-               <section>
-                       <h3>{{ _("Top Features") }}</h3>
+               <section class="section">
+                       <h3 class="title is-3">{{ _("Top Features") }}</h3>
 
                        <!-- this should talk more about what IPFire can do instead of how it does it -->
                        <!-- brief and to the point. longer technical stuff goes below -->
 
-                       <div class="row">
-                               <div class="col-12 col-lg-4">
-                                       <ul class="list-unstyled">
+                       <div class="columns">
+                               <div class="column is-one-third">
+                                       <ul>
                                                <li>
                                                        <strong>Feature #1</strong> is particularly cool
                                                </li>
@@ -59,8 +59,8 @@
                                        </ul>
                                </div>
 
-                               <div class="col-12 col-lg-4">
-                                       <ul class="list-unstyled">
+                               <div class="column">
+                                       <ul>
                                                <li>
                                                        Another feature
                                                </li>
@@ -75,8 +75,8 @@
                                        </ul>
                                </div>
 
-                               <div class="col-12 col-lg-4">
-                                       <ul class="list-unstyled">
+                               <div class="column">
+                                       <ul>
                                                <li>
                                                        We really think that people will like this
                                                </li>
                                </div>
                        </div>
                </section>
-       </div>
 
-       <div class="container">
-               <section>
-                       <h3>{{ _("Meet The Team") }}</h3>
+               <section class="section">
+                       <h3 class="title is-3">{{ _("Meet The Team") }}</h3>
 
                        {% set core_team = backend.groups.get_by_gid("core-team") %}
 
-                       <div class="row row-cols-1 row-cols-md-{{ len(core_team) // 2 }} row-cols-lg-{{ len(core_team) }} justify-content-center my-5">
+                       <div class="columns row-cols-1 row-cols-md-{{ len(core_team) // 2 }} row-cols-lg-{{ len(core_team) }} justify-content-center my-5"> <!-- Berechnungszeug nochmal fragen und so -->
                                {% for account in sorted(core_team, key=lambda a: a.created_at) %}
                                        <div class="col mb-4">
                                                <div class="row justify-content-center mb-3">
                                                        <div class="col-6 col-md-10">
-                                                               <img class="img-fluid rounded-circle"
-                                                                       src="{{ account.avatar_url(size=256) }}">
+                                                               <figure class="image is-256x256">
+                                                                       <img class="is-rounded" src="{{ account.avatar_url(size=256) }}">
+                                                               </figure>
                                                        </div>
                                                </div>
 
-                                               <h5 class="text-center">{{ account.name or account.nickname }}</h5>
+                                               <h5 class="has-text-centered has-text-weight-bold">{{ account.name or account.nickname }}</h5>
                                        </div>
                                {% end %}
                        </div>
                        ] %}
 
                        {% if team %}
-                               <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
+                               <div class="columns row-cols-1 row-cols-md-2 row-cols-lg-4">
                                        {% for account in sorted(team, key=lambda a: a.created_at) %}
                                                <div class="col mb-4">
                                                        <div class="row align-items-center">
                                                                <div class="col-2 col-md-3">
-                                                                       <img class="img-fluid rounded-circle"
-                                                                               src="{{ account.avatar_url(size=64) }}">
+                                                                       <figure class="image is-64x64">
+                                                                               <img class="is-rounded" src="{{ account.avatar_url(size=64) }}">
+                                                                       </figure>
                                                                </div>
 
                                                                <div class="col">
-                                                                       <h6 class="mb-0">{{ account.name or account.nickname }}</h6>
+                                                                       <h6 class="has-text-weight-bold">{{ account.name or account.nickname }}</h6>
                                                                </div>
                                                        </div>
                                                </div>
        </div>
 
        <div class="container">
-               <section>
-                       <h3>{{ _("Features") }}</h3>
+               <div class="block">
+                       <h3 class="title is-3">{{ _("Features") }}</h3>
 
-                       <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
-                               <div class="col mb-4">
+                       <div class="columns">
+                               <div class="column is-one-fourth">
                                        IPFire is not only an app that you install, it is a whole operating
                                        system based on Linux, hardened and tuned to the maximum to serve
                                        as a firewall.
                                        Regular updates help keeping even the hardest kind of hacker out.
                                </div>
 
-                               <div class="col mb-4">
+                               <div class="column">
                                        IPFire is being managed over a web user interface that is easy
                                        to use, yet powerful.
                                        Every feature is only one click away. Our detailed documentation
                                        tells you how.
                                </div>
 
-                               <div class="col mb-4">
+                               <div class="column">
                                        The stateful inspection firewall that is working inside IPFire
                                        is one of the fastest of its kind.
                                        Configuration of even complex rulesets becomes easy with
                                        to keep things in order, even when it gets complicated.
                                </div>
 
-                               <div class="col mb-4">
+                               <div class="column">
                                         Network segmentation is the key to a secure network.
                                         IPFire allows setting up a demilitarized zone (DMZ) on your
                                         network to control any threats from services that are being hosted
                                         on the internet.
                                </div>
                        </div>
-               </section>
-       </div>
+               </div>
 
-       <!-- any screenshots go here -->
+               <!-- any screenshots go here -->
 
-       <div class="container">
-               <section>
-                       <div class="d-grid">
-                               <a class="btn btn-primary btn-lg" href="/download">
-                                       {{ _("Download IPFire now. It's free!") }}
+               <div class="block">
+                       <button class="button is-fullwidth is-medium is-primary">
+                               <a href="/download">
+                                       {{ _("Download IPFire now. It's free!") }}
                                </a>
-                       </div>
-               </section>
+                       </button>
+               </div>
 
-               <section>
-                       <div class="row text-muted small row-cols-1 row-cols-md-2 row-cols-lg-3">
-                               <div class="col mb-4">
-                                       <h6>Network Security</h6>
+<!--   <div class="block">
+                       <div class="columns">
+                               <div class="column is-half">
+                                       <h6 class="title is-6">Network Security</h6>
 
                                        <ul>
                                                <li>Stateful inspection firewall</li>
                                                <li>Connection Logging</li>
                                        </ul>
 
-                                       <h6>Network Features</h6>
+                                       <h6 class="title is-6">Network Features</h6>
 
                                        <ul>
                                                <li>VLAN (802.1q)</li>
                                                <li>Wake-on-LAN (WOL)</li>
                                        </ul>
 
-                                       <h6>Web Proxy</h6>
+                                       <h6 class="title is-6">Web Proxy</h6>
 
                                        <ul>
                                                <li>Transparent Mode</li>
                                        </ul>
                                </div>
 
-                               <div class="col mb-4">
-                                       <h6>WAN Features</h6>
+                               <div class="column is-half">
+                                       <h6 class="title is-6">WAN Features</h6>
 
                                        <ul>
                                                <li>Support for Fibre, DSL, Cable and 5G/4G/3G</li>
                                                <li>User-Assignable MAC Address</li>
                                        </ul>
 
-                                       <h6>VPN</h6>
+                                       <h6 class="title is-6">VPN</h6>
 
                                        <ul>
                                                <li>
                                                </li>
                                        </ul>
 
-                                       <h6>Quality of Service (QoS)</h6>
+                                       <h6 class="title is-6">Quality of Service (QoS)</h6>
 
                                        <ul>
                                                <li>Inbound &amp; Outbound Traffic Shaping</li>
                                        </ul>
                                </div>
 
-                               <div class="col mb-4">
-                                       <h6>Intrusion Prevention System</h6>
+                               <div class="column is-half">
+                                       <h6 class="title is-6">Intrusion Prevention System</h6>
 
                                        <ul>
                                                <li>Live Deep Packet Analysis</li>
                                                <li>Automatic Ruleset Updates</li>
                                        </ul>
 
-                                       <h6>DNS</h6>
+                                       <h6 class="title is-6">DNS</h6>
 
                                        <ul>
                                                <li>Internal DNSSEC-validating DNS proxy</li>
                                                <li>QNAME Minimization</li>
                                        </ul>
 
-                                       <h6>Operating System</h6>
+                                       <h6 class="title is-6">Operating System</h6>
 
                                        <ul>
                                                <li>Comfortable Web User Interface in various languages</li>
                                        </ul>
                                </div>
                        </div>
-               </section>
+               </div> -->
        </div>
 {% end block %}