Commit ef2dde52 authored by Pietro Albini's avatar Pietro Albini

Initial commit

parents
/build.css
/node_modules
This diff is collapsed.
## ubuntuit-vanilla-theme
Questo è il tema di Ubuntu-it per [Vanilla Framework][vanilla], un framework
CSS di Canonical Ldt. È una leggera personalizzazione del
[tema vanilla per ubuntu][ubuntu-theme], che si adatta meglio alle nostre
esigenze.
Il tema è rilasciato sotto licenza GNU-LGPL v3.
[vanilla]: https://github.com/ubuntudesign/vanilla-framework
[ubuntu-theme]: https://github.com/ubuntudesign/ubuntu-vanilla-theme
### Inclusione in un progetto SCSS esterno
Per prima cosa installare questo repository git come pacchetto npm. Dopo aver
fatto ciò, supponendo che il file scss si trovi nella stessa directory di
`node_modules`, si può includere il tema con il seguente codice scss:
```sass
@import 'node_modules/ubuntuit-vanilla-theme/scss/theme';
@include ubuntuit-vanilla-theme
```
### Generazione di una build
Per generare una build del css, è necessario posizionarsi nel repository,
installare le dipendenze con `npm install`, ed eseguire il comando `gulp`. La
build generata sarà salvata nel file `build.css`.
### Demo
È presente una demo dentro la directory `demo/`, sia con lo stile delle pagine
su Ubuntu, sia con lo stile per le pagine sulla comunità. È necessario prima
generare una build del tema.
../build.css
\ No newline at end of file
<!--
Vanilla theme for the Ubuntu-it LoCoTeam
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 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; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ubuntuit-vanilla-theme demo</title>
<link rel="stylesheet" href="build.css" />
</head>
<body class="community-page">
<header class="banner global" role="banner">
<nav role="navigation" class="nav-primary nav-right" id="nav">
<div class="logo">
<a href="/">ubuntu-it</a>
<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>
</div>
</div>
<ul>
<li><a href="index.html" class="active">Demo del tema</a></li>
<li><a href="http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme">
Codice sorgente
</a></li>
<li><a href="http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme/issues">
Issue tracker
</a></li>
<li><a href="http://wiki.ubuntu-it.org/GruppoWeb">
Gruppo Web
</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>
<li><a href="index.html">Pagina su Ubuntu</a></li>
<li><a href="comunita.html" class="active">Pagina sulla comunità</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<div id="main-content" class="inner-wrapper">
<nav class="nav-secondary clearfix">
<ul class="breadcrumb">
<li><a href="#" class="breadcrumb-link">
Sottopagina 3
</a></li>
</ul>
<ul class="second-level-nav">
<li><a href="#">Ubuntu</a></li>
<li><a href="#">Kubuntu</a></li>
<li><a href="#" class="active">Xubuntu</a></li>
</ul>
</nav>
<div class="row">
<div class="twelve-col">
<h1>ubuntuit-vanilla-theme</h1>
</div>
</div>
</div>
</div>
<footer class="global clearfix no-global">
<nav class="nav-footer">
<div>
<h2><a href="#">Home </a></h2>
<ul>
<li><a href="#" class="active">Download</a></li>
</ul>
</div>
<div>
<h2><a href="#">Scopri Ubuntu</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Supporto</a></h2>
<ul>
<li><a href="#">Documentazione</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Domande e risposte</a></li>
<li><a href="#">Chat</a></li>
</ul>
</div>
<div>
<h2><a href="#">Comunità</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Eventi</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Contribuisci</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Progetto</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Contatti</a></h2>
<ul>
</ul>
</div>
</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>
Tema realizzato con &#9829; dal Gruppo Web di
Ubuntu-it, basato su
<a href="https://github.com/ubuntudesign/vanilla-framework">
vanilla framework</a> e <a href="https://github.com/ubuntudesign/ubuntu-vanilla-theme">
ubuntu-vanilla-theme</a> di Canonical Ldt.
</p>
<ul class="inline-list clear">
<li><a href="http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme/issues">
<small>Segnala un errore</small>
</a></li>
<li><a href="http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme">
<small>Scarica il codice</small>
</a></li>
<li><a href="http://wiki.ubuntu-it.org/GruppoWeb">
<small>Collabora con noi</small>
</a></li>
</ul>
</div>
</nav>
</footer>
</body>
</html>
../images/
\ No newline at end of file
<!--
Vanilla theme for the Ubuntu-it LoCoTeam
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 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; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ubuntuit-vanilla-theme demo</title>
<link rel="stylesheet" href="build.css" />
</head>
<body>
<header class="banner global" role="banner">
<nav role="navigation" class="nav-primary nav-right" id="nav">
<div class="logo">
<a href="/">ubuntu-it</a>
<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>
</div>
</div>
<ul>
<li><a href="index.html" class="active">Demo del tema</a></li>
<li><a href="http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme">
Codice sorgente
</a></li>
<li><a href="http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme/issues">
Issue tracker
</a></li>
<li><a href="http://wiki.ubuntu-it.org/GruppoWeb">
Gruppo Web
</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>
<li><a href="index.html" class="active">Pagina su Ubuntu</a></li>
<li><a href="comunita.html">Pagina sulla comunità</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<div id="main-content" class="inner-wrapper">
<nav class="nav-secondary clearfix">
<ul class="breadcrumb">
<li><a href="#" class="breadcrumb-link">
Sottopagina 3
</a></li>
</ul>
<ul class="second-level-nav">
<li><a href="#">Ubuntu</a></li>
<li><a href="#">Kubuntu</a></li>
<li><a href="#" class="active">Xubuntu</a></li>
</ul>
</nav>
<div class="row">
<div class="twelve-col">
<h1>ubuntuit-vanilla-theme</h1>
</div>
</div>
</div>
</div>
<footer class="global clearfix no-global">
<nav class="nav-footer">
<div>
<h2><a href="#">Home </a></h2>
<ul>
<li><a href="#" class="active">Download</a></li>
</ul>
</div>
<div>
<h2><a href="#">Scopri Ubuntu</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Supporto</a></h2>
<ul>
<li><a href="#">Documentazione</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Domande e risposte</a></li>
<li><a href="#">Chat</a></li>
</ul>
</div>
<div>
<h2><a href="#">Comunità</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Eventi</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Contribuisci</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Progetto</a></h2>
<ul>
</ul>
</div>
<div>
<h2><a href="#">Contatti</a></h2>
<ul>
</ul>
</div>
</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>
Tema realizzato con &#9829; dal Gruppo Web di
Ubuntu-it, basato su
<a href="https://github.com/ubuntudesign/vanilla-framework">
vanilla framework</a> e <a href="https://github.com/ubuntudesign/ubuntu-vanilla-theme">
ubuntu-vanilla-theme</a> di Canonical Ldt.
</p>
<ul class="inline-list clear">
<li><a href="http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme/issues">
<small>Segnala un errore</small>
</a></li>
<li><a href="http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme">
<small>Scarica il codice</small>
</a></li>
<li><a href="http://wiki.ubuntu-it.org/GruppoWeb">
<small>Collabora con noi</small>
</a></li>
</ul>
</div>
</nav>
</footer>
</body>
</html>
/*
Vanilla theme for the Ubuntu-it LoCoTeam
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 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; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var gulp = require("gulp");
var sass = require("gulp-sass");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
gulp.task("sass", function() {
return gulp.src("scss/build.scss")
.pipe(sass().on("error", sass.logError))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest("."));
});
gulp.task("watch", function() {
gulp.watch("scss/**/*.scss", ["sass"]);
});
gulp.task("default", function() {
gulp.start("sass");
});
{
"name": "ubuntuit-vanilla-theme",
"version": "0.1.0",
"description": "Vanilla theme for the Ubuntu-it LoCo Team.",
"author": {
"name": "Gruppo Web di Ubuntu-it",
"email": "gruppo-web@liste.ubuntu-it.org",
"url": "http://wiki.ubuntu-it.org"
},
"contributors": [
{
"name": "Pietro Albini",
"email": "pietroalbini@ubuntu.com"
}
],
"keywords": [
"ubuntu",
"vanilla",
"framework",
"CSS",
"SASS",
"SCSS",
"mixin",
"module"
],
"bugs": {
"url": "http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme/issues",
"email": "gruppo-web@liste.ubuntu-it.org"
},
"license": "AGPL-3.0",
"repository": {
"type": "git",
"url": "http://code.ubuntu-it.org/ubuntu-it-web/ubuntuit-vanilla-theme.git"
},
"dependencies": {
"ubuntu-vanilla-theme": "^0.0.12"
},
"devDependencies": {
"autoprefixer": "~5.2.0",
"gulp": "~3.9.0",
"gulp-postcss": "~5.1.8",
"gulp-sass": "~2.1.0",
"postcss": "^5.0.13"
},
"peerDependencies": {
"ubuntu-vanilla-theme": "^0.0.12"
}
}
/*
Vanilla theme for the Ubuntu-it LoCoTeam
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 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; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// Import ubuntu-vanilla-theme from the package
@import '../../node_modules/ubuntu-vanilla-theme/scss/theme';
// Import the vanilla theme
@import 'vanilla-theme';
/*
Vanilla theme for the Ubuntu-it LoCoTeam
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 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; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// Import custom modules
@import 'modules/tweaks';
@import 'modules/navbar';
@mixin ubuntuit-vanilla-theme {
@include ubuntu-vanilla-theme;
@include ubuntuit-tweaks;
@include ubuntuit-navbar;
}
@import '../node_modules/ubuntu-vanilla-theme/scss/theme';
@import 'vanilla-theme';
@include ubuntuit-vanilla-theme;
/*
Vanilla theme for the Ubuntu-it LoCoTeam
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 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; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@mixin ubuntuit-navbar {
header.banner {
margin-bottom: 0;
nav {
overflow: visible !important;
height: 44px;
ul li a {
line-height: 17px;
}
}
nav.nav-primary {
div.logo {
top: 0;
height: 44px;
margin-left: 0;
a {
font-size: 22px;
font-weight: 500;
color: #fff;
&:hover, &:active, &:focus {
text-decoration: none;
}
}
}
}
&.inverted {
background: $light-grey;
margin-bottom: 20px;
border-bottom-color: lighten($light-grey, 10%);
z-index: 0;
.nav-primary {
ul {
border-color: lighten($light-grey, 10%);
li {
&, &:last-child {
border-color: darken($light-grey, 5%);
}
a {
&:link, &:visited {
border-color: lighten($light-grey, 7%);
color: darken($warm-grey, 10%);
}
&:hover {
background: #fff;
color: lighten($cool-grey, 7%);
}
&.active, &.active:hover, &:active {
background: darken($light-grey, 2%);
color: darken($warm-grey, 10%);
}
}
}
}
}
}
}
div.logo {
overflow: visible !important;
div.website-selector {
position: absolute;
display: none;
width: 250px;
top: 44px;
left: -30px;
background: rgba(0, 0, 0, 0);
ol {
padding: 0.4em 0;
width: 100%;
background: #fff;
border: 1px solid #d5d5d5;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
font-size: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
li {
margin: 0;
font-size: 15px;
padding: 0 1.2em;
a {
width: 100%;
display: block;
padding: 0.3em 0;
color: #333 !important;
font-size: 15px !important;
&:hover, &.active {
color: $ubuntu-orange !important;
}
}
&.website-selector-footer {
text-align: center;
a.social {
background-image: url("images/common/social.png");
height: 18px;
width: 18px;
padding: 0;
margin: 10px 6px;
display: inline-block;
&.facebook {
background-position: 0 0;
&:hover {
background-position: 0 36px;
}
}
&.twitter {
background-position: 54px 0;
&:hover {
background-position: 54px 36px;
}
}
&.gplus {
background-position: 36px 0;
&:hover {
background-position: 36px 36px;
}
}
&.youtube {
background-position: 18px 0;
&:hover {
background-position: 18px 36px;
}
}
}
}
}
&:before {
height: 10px;
width: 100%;
background: #000;
}
}
}
&:hover div.website-selector {
display: block;
}
}
nav.nav-secondary {
border-bottom-color: darken($light-grey, 5%);
ul {
&.second-level-nav li {
margin: 0;
a {
padding: 1em 0.8em;
line-height: 1.3em;
}
}
&.breadcrumb {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
height: auto;
a.breadcrumb-link {
padding: 1em 0.6em 1em 1.2em;
line-height: 1.3em;
color: $warm-grey;
&:after {
content: "›";
margin-left: 3px;
}
}
}
}
}
}
nav.nav-footer {
width: 984px;
margin: auto;
display: flex;
& > div {
flex: 1;
padding: 0 10px;
border-left: 1px dotted #bbb;
h2 {
padding-bottom: 0;
}
ul li {
margin-bottom: 0;
line-height: 17px;
a {
font-size: 0.75em;
color: #333;
}
}
&:first-child {
padding-left: 0;
border-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
/*
Vanilla theme for the Ubuntu-it LoCoTeam
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 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; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@mixin ubuntuit-tweaks {
// Override default text selection color
::selection {
background: lighten($ubuntu-orange, 10%);
color: #fff;
}
a {
&::selection,
& *::selection {
background: $warm-grey;
color: #fff;
}
}
// Remove unwanted "x"es from search box (webkit and ie)
input[type=text]::-ms-clear { display: none; width: 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width: 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
div.row {
padding: 40px 40px 20px 40px;
border-bottom-color: darken($light-grey, 15%);
&:last-child {
@extend .no-border;
}
&.row-quote blockquote {
padding-top: 20px;
}
}
div.inner-wrapper {
padding-bottom: 0;
}
a {
color: $ubuntu-orange;
}
// Define backgrounds
body {
background-image: url("images/background-paper.png");
&.community-page {
background: url("images/background-dotted.png") repeat scroll 0 0 #F5F6F7;
}
}
footer {
background: #ececec !important;
hr {
border: 0;
border-bottom: 1px solid #d8d8d8;
margin: 1.5em 0;
}
}
.inner-wrapper {
box-shadow: 0 2px 3px #c9c9c9;
}
// A bit of style for buttons
a.button--primary, a.button--secondary {
margin: 0 0 0.75em 0;
font-size: 1.1em;
padding: 8px 17px !important;
border-radius: 3px;
}
}
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