Initial migration to the new theme

assets/sass/website.scss

-// Import Vanilla Framework
-@import "../../node_modules/ubuntuit-vanilla-theme/scss/theme";
-@include ubuntuit-vanilla-theme;
-
-// Import backports from web-style-guide
-@import "wsg-backports.scss";
-
-// Import Ubuntu-it website's customizations
-@import "www.scss";

assets/sass/wsg-backports.scss

-@charset 'UTF-8';
-
-.row.row-image-centered,
-div.box-image-centered,
-div.row-image-centered,
-div.row.row-image-centered {
-    padding: 20px 10px 0;
-}
-
-.row-box.row-image-centered {
-    padding-top: 20px;
-    padding-bottom: 20px;
-}
-
-.row.row-image-centered {
-  padding-top: 40px;
-    padding-bottom: 40px;
-}
-
-.row-hero.row-image-centered {
-        padding-top: 0;
-}
-
-div.row-image-centered,
-div.box-image-centered,
-div.row.row-image-centered {
-    //display: block;
-
-    div,
-    span {
-        //display: block;
-        float: none;
-    }
-
-    span {
-        width: 100%;
-
-        img {
-            height: auto;
-            max-width: 100%;
-            display: block;
-            padding: 0;
-            margin: 0 auto;
-            margin-bottom: 20px;
-        }
-    }
-
-    p,
-    h2,
-    h3 {
-        float: none;
-    }
-}
-
-@media only screen and (min-width : 768px) {
-
-    div.row-image-centered,
-    div.row.row-image-centered,
-    div.box-image-centered {
-        box-sizing: border-box;
-        padding-bottom: 20px;
-        display: table;
-
-        div {
-            float: none;
-            display: table-cell;
-            position: relative;
-
-            p,
-            h2,
-            h3 {
-                display: block;
-                width: 100%;
-                float: left;
-            }
-
-            + span img { // if image is on the right hand side
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-        }
-
-        span {
-            display: table-cell;
-            float: none;
-            position: relative;
-            text-align: center;
-            top: 0;
-            vertical-align: middle;
-            width: auto;
-
-            img {
-                padding-right: 20px; // if image is on the left hand side
-            }
-        }
-    }
-    /* 
-        alternative to row-image-centered
-        requires equal-height class on row 
-        add align-vertically to the div containing the image
-        http://caniuse.com/transforms2d
-    */
-    .js .align-vertically {
-        -moz-transform-style: preserve-3d;
-        -webkit-transform-style: preserve-3d;
-        transform-style: preserve-3d;
-        
-        img, 
-        div {
-          -ms-transform: translateY(-50%); // for IE9
-          -webkit-transform: translateY(-50%);
-          position: relative;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-    }
-} //@media only screen and (min-width : 768px)
-
-div.box-image-centered {
-    padding-top: 20px;
-}
-
-@media only screen and (min-width : 768px) {
-
-    .row.row-image-centered,
-    div.box-image-centered,
-    div.row-image-centered,
-    div.row.row-image-centered {
-        padding: 30px;
-    }
-    
-    div.box-image-centered div + span img,
-    div.row-image-centered div + span img,
-    div.row.row-image-centered div + span img,
-    div.box-image-centered span img.priority-0,
-    div.row-image-centered span img.priority-0,
-    div.row.row-image-centered span img.priority-0 {
-        margin-right: auto;
-        display: table-cell;
-        margin-bottom: 0;
-    }
-
-} // @media only screen and (min-width : 768px)
-
-@media only screen and (min-width: 984px) {
-
-  .row.row-image-centered,
-    div.row-image-centered,
-    div.row.row-image-centered,
-    div.box-image-centered {
-        box-sizing: border-box;
-        padding: 40px;
-        display: table;
-
-        div {
-            float: none;
-            display: table-cell;
-            position: relative;
-
-            p,
-            h2,
-            h3 {
-                display: block;
-                width: 100%;
-                float: left;
-            }
-
-             + span img { // if image is on the right hand side
-                padding-right: 0;
-                //margin-bottom: 20px;
-            }
-        }
-
-        span {
-            display: table-cell;
-            float: none;
-            position: relative;
-            text-align: center;
-            top: 0;
-            vertical-align: middle;
-            width: auto;
-
-            img {
-                padding-right: 20px; // if image is on the left hand side
-            }
-        }
-    }
-
-} // end @media only screen and (min-width: 984px)

assets/sass/www.scss → assets/scss/www.scss

-.background-wallpaper {
-    @extend .no-border;
+div.page div.row.background-wallpaper {
     color: #fff;
+    border-top: 0;
+
+    & + div.row {
+        border-top: 0;
+    }
 
     .box {
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
@@ -8,11 +12,12 @@
         border: 0;
     }
 
-    a.button--secondary {
-        border: 0;
-    }
-
     &.ubuntu {
-        background: url(images/wallpapers/ubuntu.jpg) 100% 70%;
+        background: url("images/wallpapers/ubuntu.jpg") 100% 70%;
     }
 }
+
+.pictogram {
+    height: 65%;
+    width: 65%;
+}

env

+build/envs/devel/
\ No newline at end of file

gulpfile.js

-var gulp = require("gulp");
-var postcss = require("gulp-postcss");
-var autoprefixer = require("autoprefixer");
-var sass = require("gulp-sass");
-var concat = require("gulp-concat");
-var uglify = require("gulp-uglify");
-
-gulp.task("sass", function() {
-  return gulp.src("assets/sass/website.scss")
-    .pipe(sass({
-      includePaths: ['node_modules']
-    }).on('error', sass.logError))
-    .pipe(postcss([autoprefixer()]))
-    .pipe(gulp.dest("uitwww/static"));
-});
-
-gulp.task("js", function() {
-    return gulp.src(["assets/js/vendor/*.js",
-                     "node_modules/vanilla-framework/js/core.js",
-                     "assets/js/*.js"])
-               .pipe(concat("website.js"))
-               .pipe(uglify())
-               .pipe(gulp.dest("uitwww/static"));
-});
-
-gulp.task("watch", function() {
-    gulp.start("sass");
-    gulp.start("js");
-    gulp.watch("assets/sass/**/*.scss", ["sass"]);
-    gulp.watch("assets/js/**/*.js", ["js"]);
-});
-
-gulp.task("default", function() {
-    gulp.start("sass");
-    gulp.start("js");
-});

package.json

-{
-  "devDependencies": {
-    "gulp-postcss": "~5.1.8",
-    "gulp": "~3.9.0",
-    "autoprefixer": "~5.2.0",
-    "ubuntuit-vanilla-theme": "git+http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme.git#develop",
-    "gulp-concat": "~2.6.0",
-    "gulp-uglify": "~1.2.0",
-    "gulp-sass": "~2.1.0"
-  }
-}

requirements-assets.txt

+pyscss==1.3.5

tasks.py

@@ -66,11 +66,9 @@ def clean(ctx):
     remove_files = [
         re.compile(r'.py[co]$'), re.compile(r'.mo$'),
         "%s/uitwww/static/website.css" % BASE,
-        "%s/uitwww/static/website.js" % BASE,
     ]
     remove_dirs = [
         re.compile('__pycache__'),
-        "%s/node_modules" % BASE,
     ]
 
     # Remove all the unwanted things
@@ -110,21 +108,13 @@ def clean(ctx):
 
 
 @invoke.task
-def assets(ctx, watch=False):
+def assets(ctx):
     """Build the assets"""
-    node_bin = "%s/node_modules/.bin" % BASE
-
-    # Be sure to have all the dependencies installed
-    if not os.path.exists(node_bin):
-        invoke.run("yarn")
-
-    if watch:
-        try:
-            invoke.run("%s/gulp watch" % node_bin)
-        except KeyboardInterrupt:
-            pass
-    else:
-        invoke.run("%s/gulp" % node_bin)
+    env = create_env("assets", requirements=True)
+    invoke.run(
+        "%s/bin/python -mscss < %s/assets/scss/www.scss > %s/uitwww/static/website.css"
+        % (env, BASE, BASE)
+    )
 
 
 @invoke.task(pre=[assets])

uitwww/templates/404.html

@@ -20,20 +20,26 @@
 {% block title %} Pagina non trovata {% endblock %}
 
 {% block content %}
-    <div class="row row-hero">
-        <div class="twelve-col">
-            <h2>Questa pagina non esiste</h2>
+    <div class="page">
+        <div class="row">
+            <div class="col">
+                <h1 class="text-center">Questa pagina non esiste</h1>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
                 <p>
                     Beh, ovviamente <i>questa</i> pagina esiste. Ma la pagina che hai
-                richiesto non esiste. Infatti, questa pagina è qui solo per dirti
+                    richiesto non esiste. Infatti, questa pagina esiste solo per dirti
                     che la pagina che stai cercando non esiste.
                 </p>
                 <p>
                     Se questa pagina esisteva in passato e non la trovi più
-                <a href="http://forum.ubuntu-it.org/viewforum.php?f=45&sid=855a03444972c626fb2d486b42d05469">
+                    <a href="https://forum.ubuntu-it.org/viewforum.php?f=45&sid=855a03444972c626fb2d486b42d05469">
                         segnalacelo
                     </a> che provvederemo a sistemare il prima possibile!
                 </p>
             </div>
         </div>
+    </div>
 {% endblock %}

uitwww/templates/layout-community.html

-{# Source code of the Ubuntu-it website
- # Copyright (C) 2015  Pietro Albini <pietroalbini@ubuntu.com>
- #
- # This program is free software: you can redistribute it and/or modify
- # it under the terms of the GNU Affero General Public License as published
- # by the Free Software Foundation, either version 3 of the License, or
- # (at your option) any later version.
- #
- # This program is distributed in the hope that it will be useful,
- # but WITHOUT ANY WARRANTY; witout even the implied warranty of
- # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- # GNU Affero General Public License for more details.
- #
- # You should have received a copy of the GNU Affero General Public License
- # along with this program.  If not, see <http://www.gnu.org/licenses/>.
- #}
-
-{% extends "layout.html" %}
-{% block extra_body %}class="community-page"{% endblock %}

uitwww/templates/layout.html

 {# Source code of the Ubuntu-it website
- # Copyright (C) 2015  Pietro Albini <pietroalbini@ubuntu.com>
+ # Copyright (C) 2015-2018  Pietro Albini <pietroalbini@ubuntu.com>
  #
  # This program is free software: you can redistribute it and/or modify
  # it under the terms of the GNU Affero General Public License as published
@@ -18,126 +18,102 @@
 {% from "macros.html" import nav_item with context %}
 
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
-
-<head>
-    <meta charset="UTF-8" />
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         <title>{% block title %}Senza titolo{% endblock %} - Ubuntu-it</title>
 
+        <link rel="stylesheet" href="https://static.ubuntu-it.org/themes/italy/theme.min.css">
         <link rel="stylesheet" href="{{ url_for("static", filename="website.css") }}" />
-    <script type="text/javascript" src="{{ url_for("static", filename="website.js") }}"></script>
-</head>
+    </head>
 
-<body {% block extra_body %}{% endblock %}>
-    <header class="banner global" role="banner">
-        <nav role="navigation" class="nav-primary nav-right" id="nav">
-            <span id="main-navigation-link"><a href="#main-navigation">Jump to site nav</a></span>
-            <div class="logo">
-                <a href="{{ url_for("pages.index") }}">ubuntu-it</a>
-                {# Used <ol> so it won't be styled #}
-                <div class="website-selector">
-                    <ol>
-                        <li><a href="http://www.ubuntu-it.org" class="active">Sito web</a></li>
-                        <li><a href="http://wiki.ubuntu-it.org">Documentazione e wiki</a></li>
-                        <li><a href="http://forum.ubuntu-it.org">Forum</a></li>
-                        <li><a href="http://chiedi.ubuntu-it.org">Domande e risposte</a></li>
-                        <li><a href="http://chat.ubuntu-it.org">Chat IRC</a></li>
-                        <li><a href="http://cerca.ubuntu-it.org">Ricerca</a></li>
-                        <li><a href="http://planet.ubuntu-it.org">Planet della comunità</a></li>
-                        <li class="website-selector-footer">
-                            <a class="social facebook" href="https://www.facebook.com/ubuntu.it"></a>
-                            <a class="social twitter" href="https://twitter.com/ubuntuit"></a>
-                            <a class="social gplus" href="https://plus.google.com/+ubuntuit"></a>
-                            <a class="social youtube" href="https://www.youtube.com/ubuntuitpromozione"></a>
-                        </li>
-                    </ol>
+    <body {% block extra_body %}{% endblock %}>
+        <div class="cookie-policy hidden">
+            <div class="container">
+                <span>
+                    Questo sito utilizza i cookie per offrirti un'esperienza
+                    migliore. Continuando la navigazione ne accetti l'uso.
+                </span>
+                <a href="{{ url_for("pages.cookies") }}" id="ubuntuit-cookiepolicy-hide">OK</a>
+                <a href="#">Maggiori informazioni</a>
             </div>
         </div>
+
+        <nav class="sites-list">
+            <div class="container">
                 <ul>
-                {% for item in _navbar[0] %}
-                    {{ nav_item(item) }}
-                {% endfor %}
+                    <li><a href="{{ url_for('pages.index') }}" class="active">Sito web</a></li>
+                    <li><a href="https://wiki.ubuntu-it.org">Wiki</a></li>
+                    <li><a href="https://forum.ubuntu-it.org">Forum</a></li>
+                    <li><a href="https://chiedi.ubuntu-it.org">Chiedi</a></li>
+                    <li><a href="https://chat.ubuntu-it.org">Chat</a></li>
+                    <li><a href="https://cerca.ubuntu-it.org">Cerca</a></li>
+                    <li><a href="https://planet.ubuntu-it.org">Planet</a></li>
+                    <li class="right"><a href="https://telegram.me/ubuntuit">Telegram</a></li>
+                    <li class="right"><a href="https://www.youtube.com/ubuntuitpromozione">YouTube</a></li>
+                    <li class="right"><a href="https://plus.google.com/+ubuntuit">Google+</a></li>
+                    <li class="right"><a href="https://twitter.com/ubuntuit">Twitter</a></li>
+                    <li class="right"><a href="https://www.facebook.com/ubuntu.it">Facebook</a></li>
                 </ul>
-        </nav>
-        <div class="nav-toggle">
-            <a href="#nav" class="nav-toggle__link open"></a>
-            <a href="#" class="nav-toggle__link close"></a>
             </div>
-    </header>
-    <header class="banner inverted">
-        <nav role="navigation" class="nav-primary nav-right" id="subnav">
-            <ul>
-                {% for item in _navbar[1] %}
-                    {{ nav_item(item) }}
-                {% endfor %}
-            </ul>
         </nav>
-    </header>
-    <div class="wrapper">
-        <div id="main-content" class="inner-wrapper">
-            {% if _navbar|length >= 3 %}
-            <nav class="nav-secondary clearfix">
-                <ul class="breadcrumb">
-                    <li>
-                        <a href="{{ url_for(_navbar_active[1].endpoint) }}"
-                           class="breadcrumb-link">
-                            {{ _navbar_active[1].name }}
-                        </a>
-                    </li>
-                </ul>
-                <ul class="second-level-nav">
-                    {% for item in _navbar[2] %}
+
+        <nav class="main-navbar">
+            <div class="container">
+                <ul>
+                    <li class="site-name"><a href="{{ url_for("pages.index") }}">ubuntu-it</a></li>
+                    {% for item in _navbar[0] %}
                         {{ nav_item(item) }}
                     {% endfor %}
                 </ul>
-            </nav>
-            {% endif %}
-            {% block content %}{% endblock %}
-        </div>
             </div>
-    <footer class="global clearfix no-global">
-        <nav class="nav-footer">
-            {% for category in _navbar[0] %}
-                <div>
-                    <h2><a href="{{ url_for(category.endpoint) }}">{{ category.name }}</a></h2>
-                    {% if "subs" in category %}
+        </nav>
+
+        {% if _navbar[1] %}
+        <nav>
+            <div class="container">
                 <ul>
-                            {% for item in category.subs %}
+                    {% for item in _navbar[1] %}
                         {{ nav_item(item) }}
                     {% endfor %}
                 </ul>
-                    {% endif %}
             </div>
-            {% endfor %}
         </nav>
-        <hr>
-        <nav id="main-navigation" role="navigation" class="clearfix">
-            <div class="legal clearfix">
-                <p class="twelve-col">
-                    Ubuntu e Canonical sono marchi registrati da Canonical Ltd.<br>
-                    Sito realizzato con &#9829; dal Gruppo Web di Ubuntu-it, con
+        {% endif %}
+
+        <div class="container">
+            {% block content %}{% endblock %}
+
+            <footer>
+                <p>
+                    Ubuntu e Canonical sono marchi registrati da Canonical
+                    Ltd.
+                </p>
+                <p>
+                    Sito web realizzato dal Gruppo Web di Ubuntu-it, con
                     <a href="https://www.python.org/">Python</a>,
-                    <a href="http://flask.pocoo.org/">Flask</a> e
+                    <a href="https://www.palletsproject.com/p/flask/">Flask</a> e
                     <a href="http://www.postgresql.org/">PostgreSQL</a>.
                 </p>
-                <ul class="inline-list clear">
-                    <li><a href="{{ url_for("pages.cookies") }}"><small>Informativa sui cookie</small></a></li>
-                    <li><a href="http://code.ubuntu-it.org/ubuntu-it-web/www/issues">
-                        <small>Segnala un errore</small>
+                <ul>
+                    <li><a href="{{ url_for("pages.cookies") }}">
+                        Informativa sui cookie
                     </a></li>
-                    <li><a href="http://code.ubuntu-it.org/ubuntu-it-web/www">
-                        <small>Scarica il codice</small>
+                    <li><a href="https://code.ubuntu-it.org/ubuntu-it-web/www/issues">
+                        Segnala un problema
                     </a></li>
-                    <li><a href="http://wiki.ubuntu-it.org/GruppoWeb">
-                        <small>Collabora con noi</small>
+                    <li><a href="https://code.ubuntu-it.org/ubuntu-it-web/www">
+                        Codice sorgente
+                    </a></li>
+                    <li><a href="https://wiki.ubuntu-it.org/GruppoWeb">
+                        Collabora con noi
                     </a></li>
                 </ul>
-                <span class="accessibility-aid"><a href="#">Got to the top of the page</a></span>
-            </div>
-        </nav>
             </footer>
-</body>
+        </div>
 
+        <script type="text/javascript" src="https://static.ubuntu-it.org/themes/italy/theme.min.js"></script>
+    </body>
 </html>

uitwww/templates/pages/download/index.html

@@ -20,24 +20,23 @@
 {% block title %}Download{% endblock %}
 
 {% block content %}
-<div class="row row-hero no-border">
-    <div class="nine-col">
+<div class="page">
+    <div class="row">
+        <div class="col">
             <h1>Scarica Ubuntu</h1>
             <p class="intro">Entra subito nel mondo Ubuntu. Scaricalo ora!</p>
             <p>
-            <a class="button--primary" href="{{ url_for("pages.download_desktop") }}">Desktop e portatili</a>
-            <a class="button--primary" href="#">Server</a>
-            <a class="button--primary" href="#">Prova una derivata</a>
+                <a class="btn" href="{{ url_for("pages.download_desktop") }}">Desktop e portatili</a>
+                <a class="btn" href="#">Server</a>
+                <a class="btn" href="#">Prova una derivata</a>
             </p>
         </div>
-    <div class="three-col last-col">
-        <span class="not-for-small">
-            <img src="{{ url_for("static", filename="images/pictograms/download.svg")}}">
-        </span>
+        <div class="col col-quarter col-center">
+            <img class="pictogram" src="https://static.ubuntu-it.org/pictograms/download.svg">
         </div>
-</div>
-<div class="row background-wallpaper ubuntu">
-    <div class="six-col">
+    </div>
+    <div class="row background-wallpaper ubuntu">
+        <div class="col">
             <h3>Necessiti di supporto?</h3>
             <p>
                 Se hai difficoltà ad installare Ubuntu, oppure si sono verificati
@@ -45,9 +44,9 @@
                 La comunità italiana di Ubuntu offre molteplici strumenti di supporto,
                 per aiutarti nel miglior modo possibile.
             </p>
-        <a class="button--secondary smaller" href="#">Ottieni supporto</a>
+            <a class="btn btn-inverse" href="{{ url_for("pages.supporto") }}">Ottieni supporto</a>
         </div>
-    <div class="six-col last-col">
+        <div class="col">
             <div class="box">
                 <h3 class="muted-heading">Hai difficoltà a scaricare Ubuntu?</h3>
                 <p>
@@ -55,13 +54,13 @@
                     disponibile ad inviarti un DVD direttamente a casa tua! Basta chiedere.
                 </p>
                 <div class="align-center">
-                <a class="button--primary" href="#">Richiedi un DVD</a>
+                    <a class="btn" href="#">Richiedi un DVD</a>
                 </div>
             </div>
         </div>
-</div>
-<div class="row">
-    <div class="six-col">
+    </div>
+    <div class="row">
+        <div class="col">
             <h3>Requisiti di sistema</h3>
             <p>
                 Se non sei sicuro che il tuo computer possa reggere Ubuntu ti
@@ -69,18 +68,19 @@
                 Ed in caso disponessi di un vecchio computer, puoi sempre
                 provare una derivata più leggera!
             </p>
-        <a class="button--primary smaller" href="http://wiki.ubuntu-it.org/Installazione/RequisitiDiSistema">
+            <a class="btn" href="https://wiki.ubuntu-it.org/Installazione/RequisitiDiSistema">
                 Leggi i requisiti
             </a>
         </div>
-    <div class="six-col last-col">
+        <div class="col">
             <h3>La comunità</h3>
             <p>
                 Ubuntu è creato e supportato da volontari che dedicano il loro
                 tempo a sviluppare un sistema operativo migliore.<br />
                 Cosa aspetti a contribuire ed aiutarci a realizzare qualcosa di innovativo? È facile!
             </p>
-        <a class="button--primary smaller" href="#">Inizia subito a contribuire</a>
+            <a class="btn" href="#">Inizia subito a contribuire</a>
+        </div>
     </div>
 </div>
 {% endblock %}

uitwww/templates/pages/index.html

@@ -20,7 +20,9 @@
 {% block title %}Home page{% endblock %}
 
 {% block content %}
-    <div class="row row-hero no-border" style="padding-bottom: 20px;">
+    <div class="page">
+        <div class="row">
+            <div class="col">
                 <p>
                     Questo sito contiene la versione in fase di sviluppo del sito web
                     di ubuntu-it.<br>
@@ -34,4 +36,6 @@
                 </p>
                 <p><b>Il Gruppo Web di ubuntu-it</b></p>
             </div>
+        </div>
+    </div>
 {% endblock %}

uitwww/templates/pages/supporto.html

@@ -15,16 +15,19 @@
  # along with this program.  If not, see <http://www.gnu.org/licenses/>.
  #}
 
-{% extends "layout-community.html" %}
+{% extends "layout.html" %}
 
 {% block title %}Supporto{% endblock %}
 {% block content %}
-    <div class="row row-hero">
+    <div class="page">
+        <div class="row">
+            <div class="col">
                 <h1 class="text-center">Supporto</h1>
                 <p class="intro text-center">Hai bisogno di aiuto oppure hai qualche curiosità da soddisfare? Guarda qui.</p>
             </div>
-    <div class="row row-image-centered">
-        <div class="nine-col">
+        </div>
+        <div class="row">
+            <div class="col">
                 <h2>Documentazione</h2>
                 <p>
                     La documentazione fornita da Ubuntu-it è il primo posto dove cercare per risolvere i problemi o per avere informazioni utli.
@@ -32,50 +35,51 @@
                     i manuali d'uso ufficiali.
                 </p>
                 <div>
-                <a class="button--primary" href="http://help.ubuntu-it.org/">Manuali d'uso</a>
-                <a class="button--primary" href="http://wiki.ubuntu-it.org/Documentazione/Indice">Guide della comunità</a>
+                    <a class="btn" href="https://help.ubuntu-it.org/">Manuali d'uso</a>
+                    <a class="btn" href="https://wiki.ubuntu-it.org/Documentazione/Indice">Guide della comunità</a>
+                </div>
             </div>
+            <div class="col col-quarter col-center">
+                <img class="pictogram" src="https://static.ubuntu-it.org/pictograms/articles.svg">
             </div>
-        <span>
-            <img src="http://design.ubuntu.com/wp-content/uploads/pictogram-articles-orange-hex.svg" class="not-for-small">
-        </span>
         </div>
         <div class="row">
-        <div class="six-col">
+            <div class="col">
                 <h2>Domande e risposte</h2>
                 <p>
-                <a href="http://chiedi.ubuntu-it.org/">Chiedi</a> è il portale di Ubuntu-it specifico per domande e risposte.
+                    <a href="https://chiedi.ubuntu-it.org/">Chiedi</a> è il portale di Ubuntu-it specifico per domande e risposte.
                     In esso puoi fare domande o rispondere ad quelle di altre persone in modo semplice e veloce.
                 </p>
                 <div>
-                <a class="button--primary" href="http://chiedi.ubuntu-it.org/">Entra su Chiedi</a>
+                    <a class="btn" href="https://chiedi.ubuntu-it.org/">Entra su Chiedi</a>
                 </div>
             </div>
-        <div class="six-col last-col">
+            <div class="col">
                 <h2>Forum della comunità</h2>
                 <p>
-                Il <a href="http://forum.ubuntu-it.org/">forum</a> di Ubuntu-it è uno strumento di supporto che pone più enfasi
+                    Il <a href="https://forum.ubuntu-it.org/">forum</a> di Ubuntu-it è uno strumento di supporto che pone più enfasi
                     nella conversazione fra gli utenti, adatto per confrontarsi o discutere di soluzioni alternative.
                 </p>
                 <div>
-                <a class="button--primary" href="http://forum.ubuntu-it.org/">Entra sul forum</a>
+                    <a class="btn" href="https://forum.ubuntu-it.org/">Entra sul forum</a>
                 </div>
             </div>
         </div>
-    <div class="row row-image-centered no-border">
-        <div class="nine-col">
+        <div class="row">
+            <div class="col">
                 <h2>Canale di chat</h2>
                 <p>
                     Ubuntu-it dispone di un canale di chat IRC, per ottenere un supporto in tempo reale, veloce ed efficace.
                     Puoi trovarlo su freenode come <i>#ubuntu-it</i>, o accederci direttamente da
-                <a href="http://chat.ubuntu-it.org/#ubuntu-it">qui</a>.
+                    <a href="https://chat.ubuntu-it.org/#ubuntu-it">qui</a>.
                 </p>
                 <div>
-                <a class="button--primary" href="http://chat.ubuntu-it.org/#ubuntu-it">Entra subito in chat</a>
+                    <a class="btn" href="https://chat.ubuntu-it.org/#ubuntu-it">Entra subito in chat</a>
+                </div>
+            </div>
+            <div class="col col-quarter col-center">
+                <img class="pictogram" src="https://static.ubuntu-it.org/pictograms/discussion.svg">
             </div>
         </div>
-        <span>
-            <img src="http://design.ubuntu.com/wp-content/uploads/pictogram-discussion-orange-hex.svg" class="not-for-small">
-        </span>
     </div>
 {% endblock %}