]> git.ipfire.org Git - ipfire.org.git/blobdiff - src/templates/location/how-to-use.html
location: Update layout to Bulma
[ipfire.org.git] / src / templates / location / how-to-use.html
index 787053bd02ca1f0dd8c55626c968d05e4a22604c..07a5f8dce8bb4b64e53ffc56edf90c1418e60c5e 100644 (file)
 {% block title %}{{ _("How To Use") }}{% end block %}
 
 {% block container %}
-       <section>
-               <div class="container">
-                       <div class="row">
-                               <div class="col col-lg-6">
-                                       <h1 class="display-2">{{ _("How To Use") }}</h1>
-
-                                       <p>
-                                               <code>libloc</code> is versatile, fast and easy to use
-                                               in any application.
-                                       </p>
-                               </div>
+       <section class="hero is-primary">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Home") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="#">
+                                                               {{ _("Projects") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/projects/location">
+                                                               {{ _("Location") }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ _("How to use?") }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+
+                               <h1 class="title is-1">{{ _("IPFire Location") }}</h1>
+                               <h6 class="subtitle is-6">
+                                       <code>libloc</code> is versatile, fast and easy to use
+                                       in any application.
+                               </h6>
                        </div>
                </div>
        </section>
 
-       <section class="inverse">
+       <section class="section">
                <div class="container">
-                       <div class="row justify-content-between flex-md-row-reverse">
-                               <div class="col-12 col-md-4 text-center text-md-end">
-                                       <img class="img-fluid w-100 my-5" src="{{ static_url("img/bash-logo.svg") }}"
-                                               alt="{{ _("CLI") }}">
+                       <div class="columns">
+                               <div class="column">
+                                       <h2 class="title is-2">{{ _("Command Line") }}</h2>
+
+                                       <div class="content">
+                                               <p>
+                                                       <code>libloc</code> comes with a command line tool which
+                                                       makes it easy to test the library or integrate it into
+                                                       your shell scripts.
+                                                       <code>location(8)</code> knows a couple of commands
+                                                       to retrieve country or Autonomous System of an IP address
+                                                       and can generate lists of networks to be imported into
+                                                       other software.
+                                               </p>
+
+                                               <p>
+                                                       Although this is not the fastest way to lookup a large number
+                                                       of IP addresses, <code>location(8)</code> is versatile
+                                                       and very easy to use.
+                                               </p>
+
+                                               <a class="button is-light" href="https://man-pages.ipfire.org/libloc/location.html">
+                                                       {{ _("Man Page") }}
+                                               </a>
+                                       </div>
                                </div>
 
-                               <div class="col-12 col-md-8">
-                                       <h1>{{ _("Command Line") }}</h1>
-
-                                       <p>
-                                               <code>libloc</code> comes with a command line tool which
-                                               makes it easy to test the library or integrate it into
-                                               your shell scripts.
-                                               <code>location(8)</code> knows a couple of commands
-                                               to retrieve country or Autonomous System of an IP address
-                                               and can generate lists of networks to be imported into
-                                               other software.
-                                       </p>
-
-                                       <p>
-                                               Although this is not the fastest way to lookup a large number
-                                               of IP addresses, <code>location(8)</code> is versatile
-                                               and very easy to use.
-                                       </p>
-
-                                       <a class="btn btn-secondary" href="https://man-pages.ipfire.org/libloc/location.html">
-                                               {{ _("Man Page") }}
-                                       </a>
+                               <div class="column is-narrow">
+                                       <figure class="image is-256x256">
+                                               <img src="{{ static_url("img/bash-logo.svg") }}" alt="{{ _("CLI") }}">
+                                       </figure>
                                </div>
                        </div>
 
-                       <div class="row">
-                               <div class="col-12">
-                                       <h6>{{ _("Search for an Autonomous System by Name") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Search for an Autonomous System by Name") }}</h6>
 
-                                       <pre class="mb-4"><code>$ location search-as "Lightning Wire Labs"
+                               <pre><code>$ location search-as "Lightning Wire Labs"
 AS204867 (Lightning Wire Labs GmbH)</code></pre>
+                       </div>
 
-                                       <h6>{{ _("Lookup an IP Address") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Lookup an IP Address") }}</h6>
 
-                                       <pre class="mb-4"><code>$ location lookup 81.3.27.38
+                               <pre><code>$ location lookup 81.3.27.38
 81.3.27.38 belongs to 81.3.27.0/24 which is a part of AS24679 (Hostway Deutschland GmbH)</code></pre>
-                               </div>
                        </div>
                </div>
        </section>
 
-       <section>
+       <section class="section">
                <div class="container">
-                       <div class="row justify-content-between flex-md-row-reverse">
-                               <div class="col-12 col-md-4 text-center text-md-end">
-                                       <img class="img-fluid w-100 my-5" src="{{ static_url("img/python-logo.svg") }}"
-                                               alt="{{ _("Python") }}">
+                       <div class="columns">
+                               <div class="column is-narrow">
+                                       <figure class="image is-256x256">
+                                               <img src="{{ static_url("img/python-logo.svg") }}"
+                                                       alt="{{ _("Python") }}">
+                                       </figure>
                                </div>
 
-                               <div class="col-12 col-md-6">
-                                       <h1>{{ _("Python") }}</h1>
-
-                                       <p>
-                                               <code>libloc</code> comes with native Python bindings which
-                                               are used by its main command-line tool
-                                               <a class="text-white" href="https://man-pages.ipfire.org/libloc/location.html">
-                                                       <code>location</code>
-                                               </a>.
-                                               They are the most advanced bindings as they support reading
-                                               from the database as well as writing to it.
-                                       </p>
+                               <div class="column">
+                                       <h2 class="title is-2">{{ _("Python") }}</h2>
+
+                                       <div class="content">
+                                               <p>
+                                                       <code>libloc</code> comes with native Python bindings which
+                                                       are used by its main command-line tool
+                                                       <a class="text-white" href="https://man-pages.ipfire.org/libloc/location.html">
+                                                               <code>location</code>
+                                                       </a>.
+                                                       They are the most advanced bindings as they support reading
+                                                       from the database as well as writing to it.
+                                               </p>
+                                       </div>
                                </div>
                        </div>
 
-                       <div class="row">
-                               <div class="col-12">
-                                       <h6>{{ _("Load the database") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Load the database") }}</h6>
 
-                                       <pre class="pre-light mb-4"><code>Python 3.7.3 (default, Apr  3 2019, 05:39:12)
+                               <pre><code>Python 3.7.3 (default, Apr  3 2019, 05:39:12)
 [GCC 8.3.0] on linux
 Type "help", "copyright", "credits" or "license" for more information.
 &gt;&gt;&gt; import location
 &gt;&gt;&gt; d = location.Database("/usr/share/location/database.db")</code></pre>
+                       </div>
 
-                                       <h6>{{ _("Search for an Autonomous System by Name") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Search for an Autonomous System by Name") }}</h6>
 
-                                       <pre class="pre-light mb-4"><code>&gt;&gt;&gt; for i in d.search_as("Lightning Wire Labs"):
+                               <pre><code>&gt;&gt;&gt; for i in d.search_as("Lightning Wire Labs"):
 ... &nbsp;&nbsp;print(i)
 ...
 AS204867 (Lightning Wire Labs GmbH)</code></pre>
+                       </div>
 
-                                       <h6>{{ _("Lookup an IP Address") }}</h6>
+                       <div class="block">
+                               <h6 class="title is-6">{{ _("Lookup an IP Address") }}</h6>
 
-                                       <pre class="pre-light"><code>&gt;&gt;&gt; n = d.lookup("81.3.27.38")
+                               <pre><code>&gt;&gt;&gt; n = d.lookup("81.3.27.38")
 &gt;&gt;&gt; n
 &lt;location.Network 81.3.27.0/24&gt;
 &gt;&gt;&gt; n.asn
 24679
 &gt;&gt;&gt; n.country_code
 'DE'</code></pre>
-                               </div>
                        </div>
                </div>
        </section>