Commit ab963d57 authored by Mattia Migliorini's avatar Mattia Migliorini

Add grunt, add em-calc() SASS function, add some template classes

parent 61bf9a67
*.sublime*
.sass-cache
node_modules/
\ No newline at end of file
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
files: ['Gruntfile.js', 'js/**/*.js'],
options: {
ignores: ['js/core.js', 'js/yui-min.js']
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/style.min.css': 'sass/style.scss'
}
},
check: {
options: {
check: true
},
files: {
'css/style.css': 'sass/style.scss'
}
},
dev: {
options: {
style: 'expanded',
// trace: true,
lineNumbers: true
},
files: {
'css/style.css': 'sass/style.scss'
}
}
},
watch: {
js: {
files: ['Gruntfile.js','js/**/*.js'],
tasks: ['jshint'],
options: {
atBegin: true
}
},
css: {
files: 'sass/**/*.scss',
tasks: ['sass:dev'],
options: {
atBegin: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
grunt.registerTask('dist', ['jshint', 'sass:dist']);
grunt.registerTask('check', ['jshint', 'sass:check']);
};
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "valencia",
"version": "0.1.0",
"description": "A theme for Drupal 7 developed by the Ubuntu Italy community.",
"scripts": {
"test": "check"
},
"repository": {
"type": "git",
"url": "git@code.ubuntu-it.org:ubuntu-it-web/valencia.git"
},
"author": "ubuntu-it-web",
"license": "GPLv2",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-watch": "^0.6.1"
}
}
//--------------------------------------------------
// Formatting classes
//--------------------------------------------------
.page-description {
background: none repeat scroll 0 0 $light-grey;
border: 1px solid $warm-grey;
padding: em-calc(10 10 12);
@include rounded-corners;
@include font-size;
line-height: em-calc(22);
}
.middleinfo {
padding: em-calc(8);
margin-bottom: em-calc(6);
@include rounded-corners;
&.gray {
background: $warm-grey;
border: 1px solid $light-grey;
}
}
\ No newline at end of file
//--------------------------------------------------
// Valencia SASS Constants
//--------------------------------------------------
// Base font-size for the base em value.
$em-base: 16 !default;
\ No newline at end of file
//--------------------------------------------------
// Custom SASS functions
//--------------------------------------------------
// Strip unit.
@function strip-unit( $num ) {
@return $num / ($num * 0 + 1);
}
// Convert to em.
@function convert-to-em( $value ) {
$value: strip-unit( $value ) / strip-unit( $em-base ) * 1em;
@if ( $value == 0em ) {
$value: 0; // Turn 0em to 0
}
@return $value;
}
//--------------------------------------------------
// EM CALC
//
// Call it with 1, 2, 3, or 4 parameters.
// 'px' is not required but supported:
//
// em-calc(10 20 30px 40);
//
// Space delimited, if you want to delimit using commas,
// wrap it in another pair of brackets.
//
// em-calc((10, 20, 30, 40px));
//
//--------------------------------------------------
@function em-calc($values) {
$max: length($values);
@if $max == 1 {
@return convert-to-em( nth( $values, 1 ) );
}
$em-values: ();
@for $i from 1 through $max {
$em-values: append( $em-values, convert-to-em( nth( $values, $i ) ) );
}
@return $em-values;
}
\ No newline at end of file
@import 'core/ubuntu-styles';
@import 'mixins.scss';
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic);
@import 'constants';
@import 'functions';
@import 'mixins';
@import 'classes';
// If a website uses HTTPS, using HTTP here is a great security hole. Use HTTPS!
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic);
// Override default text selection color
::selection {
background:lighten($ubuntu_orange, 10%);
background:lighten($ubuntu-orange, 10%);
}
a {
&::selection,
& *::selection {
background:$light_aubergine;
background:$warm-grey;
}
}
......@@ -49,28 +53,28 @@ header.banner {
}
&.inverted {
background: $light_grey;
background: $light-grey;
margin-bottom:20px;
margin-top:-4px; // Ugly fix for gap between navbar
.nav-primary {
ul {
border-color:lighten($light_grey, 10%);
border-color:lighten($light-grey, 10%);
margin-top:1px;
li {
&, &:last-child {
border-color:darken($light_grey, 5%);
border-color:darken($light-grey, 5%);
}
a {
&:link,
&:visited {
border-color:lighten($light_grey, 7%);
color:darken($warm_grey, 10%);
border-color:lighten($light-grey, 7%);
color:darken($warm-grey, 10%);
}
&:hover {
background:darken($light_grey, 5%);
color:lighten($cool_grey, 7%);
background:darken($light-grey, 5%);
color:lighten($cool-grey, 7%);
}
}
}
......@@ -78,8 +82,8 @@ header.banner {
a {
&.active,
&:active {
border-color:darken($light_grey, 5%);
background:darken($light_grey, 5%);
border-color:darken($light-grey, 5%);
background:darken($light-grey, 5%);
}
}
}
......@@ -91,18 +95,18 @@ header.banner {
float:right;
input[type="search"] {
@include box_sizing(border-box);
@include box-sizing(border-box);
-webkit-appearance:none;
float:left;
display:block;
@include font_size(16);
@include font-size(16);
height:2.1em;
@include rounded_corners(4px);
@include rounded-corners(4px);
width:100%;
border:none;
margin-bottom:0;
background-color: rgba(0, 0, 0, 0);
@include box_shadow(inset 0 1px 4px rgba(0,0,0,.2));
@include box-shadow(inset 0 1px 4px rgba(0,0,0,.2));
@include transition(); // Use defaults
padding:.5em 2.5em .5em .5em;
color:#555;
......@@ -128,7 +132,7 @@ header.banner {
.site-name {
float:right;
.logo-ubuntuit {
@include font_size(36);
@include font-size(36);
margin-bottom:0;
position:relative;
text-transform:lowercase;
......
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