Commit 9834da41 authored by Pietro Albini's avatar Pietro Albini

Initial migration to the new theme

parent 9afb805a
Pipeline #54 passed with stage
in 0 seconds
This diff is collapsed.
// 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";
@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)
.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%;
}
build/envs/devel/
\ No newline at end of file
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");
});
{
"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"
}
}
......@@ -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])
......
......@@ -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 %}
{# 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 %}
{# 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>
......@@ -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 %}
......@@ -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 %}
......@@ -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 %}
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment