Commit 993be001 authored by Pietro Albini's avatar Pietro Albini

Initial commit

parents
# Building stuff
/uitwww.egg-info
/build
/node_modules
# Python stuff
__pycache__
.py[co]
# Compiled assets
/uitwww/static/website.css
/uitwww/static/website.js
This diff is collapsed.
recursive-include uitwww/templates *
recursive-include uitwww/static *
include uitwww/navbar.json
# Il sito web di Ubuntu-it
Questo repository contiene tutto il codice sorgente del [sito web][1] di
ubuntu-it. Il tutto è rilasciato sotto licenza GNU-AGPL v3+.
Il sito è realizzato con [flask](http://flask.pocoo.org) e Python 3.
## Esecuzione del sito in locale
Per eseguire il sito in locale, è possibile eseguire questo comando (una volta
dentro il virtualenv o con il sito installato globalmente):
```
$ uitwww run -d -p 8000
```
Esso avvierà un'istanza in debug-mode (*da non eseguire in produzione!!!*), che
ascolta su `localhost:8000`. Se si vuole attivare anche la cache statica,
bisogna aggiungere come argomento il path della directory che la dovrà
contenere:
```
$ uitwww run -d -p 8000 path/to/cache
```
## Generazione di una build
Per creare una build dell'intero sito, è necessario disporre di Python 3,
[virtualenv][2], [pyinvoke][3] e nodejs. Dopo averli installati si può crearla
con il seguente comando:
```
$ invoke build
```
Esso scaricherà tutte le dipendenze da internet (la prima volta), compilerà gli
assets e genererà il pacchetto, salvandolo in ``build/packages``. È possibile
rimuovere tutti i file creati dal processo con il comando:
```
$ invoke clean
```
## Hacking
Per preparare l'ambiente di sviluppo è necessario disporre di Python 3,
[virtualenv][2], [pyinvoke][3] e nodejs. Dopo averli installati si può
generarlo con il seguente comando:
```
$ invoke devel
```
Esso scaricherà tutte le dipendenze da internet (la prima volta), compilerà gli
assets e creerà un virtualenv con dentro installato il sito (in modalità
modificabile). Per attivare il virtualenv, bisogna dare in ogni sessione di
terminale il seguente comando:
```
$ source build/envs/devel/bin/activate
```
Se si modificano gli assets è necessario ricompilarli. Lo si può effettuare con
il seguente comando:
```
$ invoke assets
```
In caso si facciano modifiche frequenti, può risultare conveniente l'aggiunta
della flag `-w` al comando, che ricompila gli assets quando sono rilevate
modifiche.
[1]: http://www.ubuntu-it.org
[2]: https://virtualenv.pypa.io
[3]: http://www.pyinvoke.org
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="141.732px" height="141.732px" viewBox="70.866 70.866 141.732 141.732"
enable-background="new 70.866 70.866 141.732 141.732" xml:space="preserve">
<path fill="#DD4814" d="M141.733,85.039c-31.262,0-56.693,25.432-56.693,56.692c0,31.262,25.432,56.695,56.693,56.695
c31.259,0,56.692-25.433,56.692-56.695C198.425,110.471,172.992,85.039,141.733,85.039z M161.588,153.334l-17.345,17.346
c-1.384,1.383-3.625,1.383-5.01,0l-17.172-17.174c-0.75-0.65-1.223-1.607-1.223-2.678c0-1.956,1.586-3.544,3.544-3.544h0.013h10.25
v-0.001v-28.446c0-3.914,3.174-7.086,7.086-7.086c3.914,0,7.087,3.172,7.087,7.086v28.447h10.264c1.432,0,2.725,0.862,3.271,2.188
C162.904,150.797,162.6,152.322,161.588,153.334z"/>
</svg>
This diff is collapsed.
// 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; }
// Fix some paddings
div.row {
padding: 40px 40px 20px 40px;
&:last-child {
@extend .no-border;
}
&.row-quote blockquote {
padding-top: 20px;
}
}
div.inner-wrapper {
padding-bottom: 0;
}
a {
color: #dd4814;
}
// Define backgrounds
body {
background-image: url("images/background-paper.png");
&.community-page {
background: url("images/background-dotted.png") repeat scroll 0 0 #F5F6F7;
}
}
header.banner {
margin-bottom: 0;
nav {
overflow: visible !important;
height: 44px;
ul li a {
line-height: 17px;
font-weight: 400 !important;
}
}
nav.nav-primary {
ul li a {
border-left: 1px solid lighten($ubuntu-orange, 10%) !important;
&:hover {
background: #e1662f !important;
}
&:active, &.active {
background: #b83a10 !important;
}
}
div.logo {
top: 0;
height: 44px;
margin-left: 0;
a {
font-size: 1.4em;
font-weight: 500;
color: #fff;
&:hover, &:active, &:focus {
text-decoration: none;
}
}
}
}
&.inverted {
background: $light-grey;
margin-bottom: 20px;
z-index: 0 !important;
nav {
height: 45px;
}
.nav-primary {
ul {
border-color: lighten($light-grey, 10%);
margin-top: 1px;
li {
&, &:last-child {
border-color: darken($light-grey, 5%);
}
a {
&:link,
&:visited {
border-color: lighten($light-grey, 7%) !important;
color: darken($warm-grey, 10%);
}
&:hover {
background: #fff !important;
color: lighten($cool-grey, 7%) !important;
}
}
}
}
a.active, a:active {
border-color:darken($light-grey, 5%);
background:darken($light-grey, 5%) !important;
}
}
}
}
div.logo {
overflow: visible !important;
div.website-selector {
position: absolute;
display: none;
width: 250px;
z-index: 3;
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 !important;
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: #dd4814 !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-left: none;
border-right: none;
border-color: #dfdcd9;
ul {
li a {
margin-top: 8px;
&.active {
color: #dd4814 !important;
font-weight: 300 !important;
}
}
&.breadcrumb li {
margin: 0;
a.breadcrumb-link {
margin-right: 0 !important;
&:after {
content: "›";
margin-left: 3px;
}
}
}
}
}
nav.nav-footer {
width: 984px;
margin: auto;
display: flex;
& > div {
flex: 1;
padding: 0 10px;
border-left: 1px dotted #333;
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;
}
}
}
footer {
background: #ececec !important;
hr {
border: 0;
border-bottom: 1px solid #d8d8d8;
margin: 1.5em 0;
}
}
// Responsiveness
@media all and (max-width: $site-max-width) {
div.wrapper {
width: 100% !important;
}
}
.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;
}
// Import Vanilla Framework
@import "../../node_modules/vanilla-framework/scss/build.scss";
@import "../../node_modules/ubuntu-vanilla-theme/scss/theme";
@include ubuntu-vanilla-theme;
// Import backports from web-style-guide
@import "wsg-backports.scss";
// Import Ubuntu-it common customizations
@import "ubuntuit.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;
color: #fff;
.box {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
background-color: rgba(0, 0, 0, 0.25);
border: 0;
}
a.button--secondary {
border: 0;
}
&.ubuntu {
background: url(images/wallpapers/ubuntu.jpg) 100% 70%;
}
}
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().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");
});
# Ubuntu-it website source code
# Copyright (C) 2015 Pietro Albini
#