index page

Pavel Popeskul
Commit 77750e2e873e2b581bb0953557d8b142cb4e5290 77750e2e 1 parent 0faebaba
Showing 29 changed files with 846 additions and 0 deletions
bower.json
build/_footer.html
build/_header.html
build/css/main.css
build/img/logo.png
build/img/sprite.png
build/img/sprites/btn-modal.png
build/img/sprites/logo-modal.png
build/index.html
build/js/main.js
gulpfile.js
package.json
savelovsky.iml
src/_footer.html
src/_header.html
src/img/logo.png
src/index.html
src/scripts/main.js
src/styles/button.less
src/styles/content.less
--- a/bower.json 0 → 100644
View file @77750e2
+++ b/bower.json 0 → 100644
View file @77750e2
+ {
+   "name": "home2you",
+   "authors": [
+     "Pasha Popeskul <peterjj91@gmail.com>"
+   ],
+   "description": "",
+   "main": "",
+   "moduleType": [],
+   "license": "MIT",
+   "homepage": "",
+   "private": true,
+   "ignore": [
+     "**/.*",
+     "node_modules",
+     "bower_components",
+     "test",
+     "tests"
+   ],
+   "dependencies": {
+     "bootstrap": "^3.3.6",
+     "jquery": "^2.2.1",
+     "bootstrap-select": "1.12.2"
+   }
+ }
--- a/build/_footer.html 0 → 100644
View file @77750e2
+++ b/build/_footer.html 0 → 100644
View file @77750e2
+ <div class="footer">
+     <div class="footer__container">
+         <div class="footer__left">
+             <p>Следите за кампанией</p>
+ 
+             <ul class="social">
+                 <li><a href="#">Вконтакте</a></li>
+                 <li><a href="#">Фейсбук</a></li>
+                 <li><a href="#">Твиттер</a></li>
+                 <li><a href="#">Одноклассники</a></li>
+             </ul>
+ 
+             <p>Оставьте нам свой мобильный телефон. Мы отправим вам сообщение перед выборами</p>
+ 
+ 
+             <form class="form-inline" role="form">
+                 <div class="form-group">
+                     <input type="email" class="form-control" placeholder="">
+                 </div>
+                 <button type="submit" class="btn btn-default">Напомнить о выборах</button>
+             </form>
+         </div>
+ 
+         <div class="footer__right">
+             <p>Пообщаться с кандидатами</p>
+ 
+             <ul class="social">
+                 <li><a href="#">Телеграм</a></li>
+                 <li><a href="#">Электронная почта</a></li>
+                 <li><a href="#">Телефон</a></li>
+             </ul>
+         </div>
+ 
+         <div class="col-xs-24 text-center">
+             <br>
+ 
+             <h4 class="">Приходите на выборы 10 сентября 2017 года <br> и голосуйте за независимую команду</h4>
+ 
+             <br>
+ 
+             <button type="button" class="btn btn-default">Как проголосовать</button>
+         </div>
+     </div>
+ </div>
+ </body>
+ </html>
\ No newline at end of file
--- a/build/_header.html 0 → 100644
View file @77750e2
+++ b/build/_header.html 0 → 100644
View file @77750e2
+ <!doctype html>
+ <html lang="ru">
+ <head>
+     <meta charset="utf-8">
+     <meta http-equiv="x-ua-compatible" content="ie=edge">
+     <title>Выборы в Совет депутатов Савёловского района</title>
+     <meta name="description" content="">
+     <meta name="viewport" content="width=device-width, initial-scale=1">
+     <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
+     <link rel="stylesheet" href="css/main.css">
+     <script src="js/main.js"></script>
+ </head>
+ <body>
+ <div class="header">
+     <div class="header__container">
+         <a href="#" class="header__logo">
+             <div class="icon icon__logo"></div>
+         </a>
+ 
+         <div class="head-h1 header__title">Выборы в Совет <br> депутатов Савёловского района</div>
+ 
+         <br>
+ 
+         <p>10 сентября вы выбираете между теми, кому небезразличен район, чья жизнь с ним связана, <br> и теми, кто бездумно исполняет любые указания Управы района.</p>
+ 
+         <br>
+ 
+         <button type="button" class="btn btn-default">Познакомится с кандидатами</button>
+ 
+         <div class="header__nav">
+             <ul class="nav">
+                 <li><a href="#">О совете депутатов</a></li>
+                 <li><a href="#">Кандидаты</a></li>
+                 <li><a href="#">Как помочь</a></li>
+                 <li><a href="#">Стать волонтёром</a></li>
+                 <li><a href="#">Как проголосовать</a></li>
+             </ul>
+         </div>
+     </div>
+ </div>
\ No newline at end of file
--- a/build/css/main.css 0 → 100644
View file @77750e2
+++ b/build/css/main.css 0 → 100644
View file @77750e2
--- a/build/img/logo.png 0 → 100644
View file @77750e2
+++ b/build/img/logo.png 0 → 100644
View file @77750e2
--- a/build/img/sprite.png 0 → 100644
View file @77750e2
+++ b/build/img/sprite.png 0 → 100644
View file @77750e2
--- a/build/img/sprites/btn-modal.png 0 → 100644
View file @77750e2
+++ b/build/img/sprites/btn-modal.png 0 → 100644
View file @77750e2
--- a/build/img/sprites/logo-modal.png 0 → 100644
View file @77750e2
+++ b/build/img/sprites/logo-modal.png 0 → 100644
View file @77750e2
--- a/build/index.html 0 → 100644
View file @77750e2
+++ b/build/index.html 0 → 100644
View file @77750e2
+ 
+ <!doctype html>
+ <html lang="ru">
+ <head>
+     <meta charset="utf-8">
+     <meta http-equiv="x-ua-compatible" content="ie=edge">
+     <title>Выборы в Совет депутатов Савёловского района</title>
+     <meta name="description" content="">
+     <meta name="viewport" content="width=device-width, initial-scale=1">
+     <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
+     <link rel="stylesheet" href="css/main.css">
+     <script src="js/main.js"></script>
+ </head>
+ <body>
+ <div class="header">
+     <div class="header__container">
+         <a href="#" class="header__logo">
+             <div class="icon icon__logo"></div>
+         </a>
+ 
+         <div class="head-h1 header__title">Выборы в Совет <br> депутатов Савёловского района</div>
+ 
+         <br>
+ 
+         <p>10 сентября вы выбираете между теми, кому небезразличен район, чья жизнь с ним связана, <br> и теми, кто бездумно исполняет любые указания Управы района.</p>
+ 
+         <br>
+ 
+         <button type="button" class="btn btn-default">Познакомится с кандидатами</button>
+ 
+         <div class="header__nav">
+             <ul class="nav">
+                 <li><a href="#">О совете депутатов</a></li>
+                 <li><a href="#">Кандидаты</a></li>
+                 <li><a href="#">Как помочь</a></li>
+                 <li><a href="#">Стать волонтёром</a></li>
+                 <li><a href="#">Как проголосовать</a></li>
+             </ul>
+         </div>
+     </div>
+ </div>
+ 
+ <div class="content">
+     <div class="content__container">
+ 
+     </div>
+ </div>
+ 
+ <div class="footer">
+     <div class="footer__container">
+         <div class="footer__left">
+             <p>Следите за кампанией</p>
+ 
+             <ul class="social">
+                 <li><a href="#">Вконтакте</a></li>
+                 <li><a href="#">Фейсбук</a></li>
+                 <li><a href="#">Твиттер</a></li>
+                 <li><a href="#">Одноклассники</a></li>
+             </ul>
+ 
+             <p>Оставьте нам свой мобильный телефон. Мы отправим вам сообщение перед выборами</p>
+ 
+ 
+             <form class="form-inline" role="form">
+                 <div class="form-group">
+                     <input type="email" class="form-control" placeholder="">
+                 </div>
+                 <button type="submit" class="btn btn-default">Напомнить о выборах</button>
+             </form>
+         </div>
+ 
+         <div class="footer__right">
+             <p>Пообщаться с кандидатами</p>
+ 
+             <ul class="social">
+                 <li><a href="#">Телеграм</a></li>
+                 <li><a href="#">Электронная почта</a></li>
+                 <li><a href="#">Телефон</a></li>
+             </ul>
+         </div>
+ 
+         <div class="col-xs-24 text-center">
+             <br>
+ 
+             <h4 class="">Приходите на выборы 10 сентября 2017 года <br> и голосуйте за независимую команду</h4>
+ 
+             <br>
+ 
+             <button type="button" class="btn btn-default">Как проголосовать</button>
+         </div>
+     </div>
+ </div>
+ </body>
+ </html>
\ No newline at end of file
--- a/build/js/main.js 0 → 100644
View file @77750e2
+++ b/build/js/main.js 0 → 100644
View file @77750e2
--- a/gulpfile.js 0 → 100644
View file @77750e2
+++ b/gulpfile.js 0 → 100644
View file @77750e2
+ var gulp = require('gulp'),
+     browserSync = require('browser-sync'),
+     mainBowerFiles = require('main-bower-files'),
+     less = require('gulp-less'),
+     filter = require('gulp-filter'),
+     concat = require('gulp-concat'),
+     spritesmith = require('gulp.spritesmith'),
+     del = require('del'),
+     autoprefixer = require('gulp-autoprefixer'),
+     cssmin = require('gulp-minify-css'),
+     rigger = require('gulp-rigger'),
+     pump = require('pump'),
+     uglify = require('gulp-uglify'),
+     print = require('gulp-print');
+ 
+ var svgstore = require('gulp-svgstore');
+ var svgmin = require('gulp-svgmin');
+ var path = require('path');
+ 
+ var Promise = require('es6-promise').Promise;
+ 
+ var paths = {
+     bower: mainBowerFiles(),
+     src:{
+         html: 'src/*.html',
+         js: ['src/scripts/*.js'],
+         css: 'src/styles/main.less',
+         img: 'src/img/**/*',
+         fonts: 'src/fonts/**/*.*',
+         sprites: 'src/img/sprites/*.png',
+         svg: 'src/icons/*.svg'
+     },
+     build:{
+         html: 'build/',
+         js: 'build/js/',
+         css: 'build/css/',
+         img: 'build/img/',
+         fonts: 'build/fonts',
+         spritesImg: 'build/img/',
+         spritesCss: 'src/styles/',
+         svg: 'build/icons/'
+     },
+     watch:{
+         html: 'src/*.html',
+         js: 'src/scripts/*.js',
+         css: 'src/styles/*.less',
+         img: 'src/img/*.*',
+         fonts: 'src/fonts/*.*',
+         sprites: 'src/img/sprites/*.png'
+     }
+ };
+ 
+ 
+ gulp.task('build:svg', function () {
+     return gulp
+         .src(paths.src.svg)
+         .pipe(svgmin(function getOptions (file) {
+             var prefix = path.basename(file.relative, path.extname(file.relative));
+             return {
+                 plugins: [{
+                     cleanupIDs: {
+                         prefix: prefix + '-',
+                         minify: true
+                     }
+                 }]
+             }
+         }))
+         .pipe(svgstore())
+         .pipe(gulp.dest(paths.build.svg));
+ });
+ 
+ gulp.task('build:svgtopng', function () {
+     return gulp
+         .src(paths.src.svg, {base: 'src/icons'})
+         .pipe(gulp.dest(paths.build.svg));
+ });
+ 
+ 
+ gulp.task('build:html', function(){
+     gulp.src(paths.src.html)
+         .pipe(rigger())
+         .pipe(gulp.dest(paths.build.html))
+         .pipe(browserSync.reload({stream:true}));
+ });
+ 
+ gulp.task('build:js', function(){
+ 
+ 	var a = paths.bower.concat(paths.src.js);
+ 
+ 	gulp.src(a)
+         .pipe(filter(['**/*.js']))
+         .pipe(concat('main.js'))
+         // .pipe(uglify())
+         .pipe(gulp.dest(paths.build.js))
+         .pipe(browserSync.reload({stream:true}));
+ });
+ 
+ gulp.task('build:css', function(){
+     gulp.src(paths.src.css)
+         .pipe(less())
+         .pipe(concat('main.css'))
+         .pipe(autoprefixer({
+             browsers: ['last 2 versions'],
+             cascade: false
+         }))
+         // .pipe(cssmin())
+         .pipe(gulp.dest(paths.build.css))
+         .pipe(browserSync.reload({stream:true}));
+ 
+ });
+ 
+ gulp.task('build:img', function(){
+     gulp.src(paths.src.img)
+         .pipe(gulp.dest(paths.build.img))
+         .pipe(browserSync.reload({stream:true}));
+ });
+ 
+ gulp.task('build:sprites', function () {
+     var spriteData = gulp.src(paths.src.sprites).pipe(spritesmith({
+         imgName: 'sprite.png',
+         cssName: 'sprite.less',
+         imgPath: '../img/sprite.png',
+         padding: 5
+     }));
+     // Pipe image stream through image optimizer and onto disk
+     spriteData.img
+         .pipe(gulp.dest(paths.build.spritesImg));
+ 
+     // Pipe CSS stream through CSS optimizer and onto disk
+     spriteData.css
+         .pipe(gulp.dest(paths.build.spritesCss));
+ });
+ 
+ gulp.task('build:fonts', function(){
+     gulp.src(paths.bower.concat([paths.src.fonts]))
+         .pipe(filter(['**/*.eot', '**/*.otf', '**/*.woff', '**/*.ttf', '**/*.svg']))
+         .pipe(gulp.dest(paths.build.fonts))
+         .pipe(browserSync.reload({stream:true}));
+ });
+ 
+ gulp.task('build', ['build:svg', 'build:svgtopng', 'build:html', 'build:js','build:sprites', 'build:css', 'build:img', 'build:fonts']);
+ 
+ gulp.task('reload', browserSync.reload);
+ 
+ gulp.task('clean', function(cb){
+     del('build/', cb);
+ });
+ 
+ gulp.task('serve', function(){
+     browserSync({
+       server: 'build/'
+     });
+ 
+     gulp.watch(paths.watch.html, ['build:html']);
+     gulp.watch(paths.watch.js, ['build:js']);
+     gulp.watch(paths.watch.css, ['build:css']);
+     gulp.watch(paths.watch.img, ['build:img']);
+     gulp.watch(paths.watch.sprites, ['build:sprites']);
+     gulp.watch(paths.src.svg, ['build:svg', 'build:svgtopng', 'build:html']);
+ });
+ 
+ gulp.task('default', ['build', 'serve']);
--- a/package.json 0 → 100644
View file @77750e2
+++ b/package.json 0 → 100644
View file @77750e2
+ {
+   "name": "web-dev.org",
+   "version": "1.0.0",
+   "description": "",
+   "main": "index.js",
+   "scripts": {
+     "test": "echo \"Error: no test specified\" && exit 1"
+   },
+   "author": "web-dev.org",
+   "license": "none",
+   "devDependencies": {
+     "bower": "^1.7.9",
+     "browser-sync": "^2.13.0",
+     "del": "^2.2.1",
+     "es6-promise": "^3.2.1",
+     "gulp": "^3.9.1",
+     "gulp-autoprefixer": "^3.1.0",
+     "gulp-concat": "^2.6.0",
+     "gulp-filter": "^4.0.0",
+     "gulp-less": "^3.1.0",
+     "gulp-minify-css": "1.2.4",
+     "gulp-print": "^2.0.1",
+     "gulp-rigger": "^0.5.8",
+     "gulp-svgmin": "^1.2.2",
+     "gulp-svgstore": "^6.0.0",
+     "gulp-uglify": "2.0.0",
+     "gulp.spritesmith": "^6.2.1",
+     "main-bower-files": "^2.13.1",
+     "path": "^0.12.7",
+     "pump": "1.0.2"
+   },
+   "dependencies": {
+     "del": "^2.2.0",
+     "path": "^0.12.7"
+   }
+ }
--- a/savelovsky.iml 0 → 100644
View file @77750e2
+++ b/savelovsky.iml 0 → 100644
View file @77750e2
+ <?xml version="1.0" encoding="UTF-8"?>
+ <module type="WEB_MODULE" version="4">
+   <component name="NewModuleRootManager" inherit-compiler-output="true">
+     <exclude-output />
+     <content url="file://$MODULE_DIR$" />
+     <orderEntry type="inheritedJdk" />
+     <orderEntry type="sourceFolder" forTests="false" />
+     <orderEntry type="module-library">
+       <library name="PHP Runtime" type="php">
+         <CLASSES>
+           <root url="jar://$APPLICATION_PLUGINS_DIR$/php/lib/php.jar!/stubs/standard" />
+         </CLASSES>
+         <JAVADOC />
+         <SOURCES>
+           <root url="jar://$APPLICATION_PLUGINS_DIR$/php/lib/php.jar!/stubs/standard" />
+         </SOURCES>
+       </library>
+     </orderEntry>
+   </component>
+ </module>
\ No newline at end of file
--- a/src/_footer.html 0 → 100644
View file @77750e2
+++ b/src/_footer.html 0 → 100644
View file @77750e2
+ <div class="footer">
+     <div class="footer__container">
+         <div class="footer__left">
+             <p>Следите за кампанией</p>
+ 
+             <ul class="social">
+                 <li><a href="#">Вконтакте</a></li>
+                 <li><a href="#">Фейсбук</a></li>
+                 <li><a href="#">Твиттер</a></li>
+                 <li><a href="#">Одноклассники</a></li>
+             </ul>
+ 
+             <p>Оставьте нам свой мобильный телефон. Мы отправим вам сообщение перед выборами</p>
+ 
+ 
+             <form class="form-inline" role="form">
+                 <div class="form-group">
+                     <input type="email" class="form-control" placeholder="">
+                 </div>
+                 <button type="submit" class="btn btn-default">Напомнить о выборах</button>
+             </form>
+         </div>
+ 
+         <div class="footer__right">
+             <p>Пообщаться с кандидатами</p>
+ 
+             <ul class="social">
+                 <li><a href="#">Телеграм</a></li>
+                 <li><a href="#">Электронная почта</a></li>
+                 <li><a href="#">Телефон</a></li>
+             </ul>
+         </div>
+ 
+         <div class="col-xs-24 text-center">
+             <br>
+ 
+             <h4 class="">Приходите на выборы 10 сентября 2017 года <br> и голосуйте за независимую команду</h4>
+ 
+             <br>
+ 
+             <button type="button" class="btn btn-default">Как проголосовать</button>
+         </div>
+     </div>
+ </div>
+ </body>
+ </html>
\ No newline at end of file
--- a/src/_header.html 0 → 100644
View file @77750e2
+++ b/src/_header.html 0 → 100644
View file @77750e2
+ <!doctype html>
+ <html lang="ru">
+ <head>
+     <meta charset="utf-8">
+     <meta http-equiv="x-ua-compatible" content="ie=edge">
+     <title>Выборы в Совет депутатов Савёловского района</title>
+     <meta name="description" content="">
+     <meta name="viewport" content="width=device-width, initial-scale=1">
+     <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
+     <link rel="stylesheet" href="css/main.css">
+     <script src="js/main.js"></script>
+ </head>
+ <body>
+ <div class="header">
+     <div class="header__container">
+         <a href="#" class="header__logo">
+             <div class="icon icon__logo"></div>
+         </a>
+ 
+         <div class="head-h1 header__title">Выборы в Совет <br> депутатов Савёловского района</div>
+ 
+         <br>
+ 
+         <p>10 сентября вы выбираете между теми, кому небезразличен район, чья жизнь с ним связана, <br> и теми, кто бездумно исполняет любые указания Управы района.</p>
+ 
+         <br>
+ 
+         <button type="button" class="btn btn-default">Познакомится с кандидатами</button>
+ 
+         <div class="header__nav">
+             <ul class="nav">
+                 <li><a href="#">О совете депутатов</a></li>
+                 <li><a href="#">Кандидаты</a></li>
+                 <li><a href="#">Как помочь</a></li>
+                 <li><a href="#">Стать волонтёром</a></li>
+                 <li><a href="#">Как проголосовать</a></li>
+             </ul>
+         </div>
+     </div>
+ </div>
\ No newline at end of file
--- a/src/img/logo.png 0 → 100644
View file @77750e2
+++ b/src/img/logo.png 0 → 100644
View file @77750e2
--- a/src/index.html 0 → 100644
View file @77750e2
+++ b/src/index.html 0 → 100644
View file @77750e2
+ 
+ //= _header.html
+ 
+ <div class="content">
+     <div class="content__container">
+ 
+     </div>
+ </div>
+ 
+ //= _footer.html
--- a/src/scripts/main.js 0 → 100644
View file @77750e2
+++ b/src/scripts/main.js 0 → 100644
View file @77750e2
--- a/src/styles/button.less 0 → 100644
View file @77750e2
+++ b/src/styles/button.less 0 → 100644
View file @77750e2
+ 
+ .btn {
+   outline: none;
+ 
+   &:active, &:focus {
+     outline: none;
+   }
+ 
+   &:active {
+     &:focus {
+       outline: none;
+     }
+   }
+ }
\ No newline at end of file
--- a/src/styles/content.less 0 → 100644
View file @77750e2
+++ b/src/styles/content.less 0 → 100644
View file @77750e2
+ 
+ .content {
+   min-height: 300px;
+ 
+   &__container {
+     .container();
+   }
+ }
\ No newline at end of file
--- a/src/styles/default__style.less 0 → 100644
View file @77750e2
+++ b/src/styles/default__style.less 0 → 100644
View file @77750e2
+ 
+ .head-h1 {
+   font-size: 28px;
+ }
+ 
+ p {
+ 
+ }
\ No newline at end of file
--- a/src/styles/fonts.less 0 → 100644
View file @77750e2
+++ b/src/styles/fonts.less 0 → 100644
View file @77750e2
--- a/src/styles/footer.less 0 → 100644
View file @77750e2
+++ b/src/styles/footer.less 0 → 100644
View file @77750e2
+ 
+ .footer {
+   //position: absolute;
+   //bottom: 0;
+   //width: 100%;
+   //height: 60px;
+   padding: 30px 0px;
+   background-color: #D7D7D7;
+ 
+   &__container {
+     .container();
+   }
+ 
+   &__left {
+     float: left;
+   }
+ 
+   &__right {
+     float: right;
+   }
+ }
+ 
+ .social {
+   padding: 0;
+   list-style: none;
+ 
+   li {
+     display: inline-block;
+     margin-right: 10px;
+ 
+     &:last-child {
+       margin-right: 0;
+     }
+   }
+ 
+   a {
+     color: #000;
+     text-decoration: underline;
+   }
+ }
\ No newline at end of file
--- a/src/styles/header.less 0 → 100644
View file @77750e2
+++ b/src/styles/header.less 0 → 100644
View file @77750e2
+ 
+ .header {
+   text-align: center;
+   padding: 30px 0px;
+ 
+   &__container {
+     .container();
+   }
+ 
+   &__logo {
+     margin-bottom: 30px;
+     display: inline-block;
+   }
+ 
+   &__title {
+     //margin-bottom: 20px;
+   }
+ 
+   &__nav {
+     margin-top: 30px;
+   }
+ }
+ 
+ .nav {
+   width: 100%;
+   text-align: center;
+ 
+   li {
+     display: inline-block;
+ 
+     a {
+       text-decoration: underline;
+       color: #000;
+       
+       &:focus, &:hover {
+         color: #000;
+         text-decoration: underline;
+       }
+     }
+   }
+ }
\ No newline at end of file
--- a/src/styles/images.less 0 → 100644
View file @77750e2
+++ b/src/styles/images.less 0 → 100644
View file @77750e2
+ .icon {
+   display: inline-block;
+ 
+   &__logo {
+     background: url(../img/logo.png);
+     width: 60px;
+     height: 68px;
+     background-size: cover;
+   }
+ }
\ No newline at end of file
--- a/src/styles/main.less 0 → 100644
View file @77750e2
+++ b/src/styles/main.less 0 → 100644
View file @77750e2
+ @import "../../bower_components/bootstrap/less/bootstrap";
+ @import "../../bower_components/bootstrap-select/less/bootstrap-select";
+ 
+ @import "fonts";
+ @import "variables";
+ @import "sprite";
+ @import "images";
+ 
+ @import "default__style";
+ @import "button";
+ 
+ @import "header";
+ @import "footer";
+ 
+ @import "content";
+ @import "modal";
\ No newline at end of file
--- a/src/styles/modal.less 0 → 100644
View file @77750e2
+++ b/src/styles/modal.less 0 → 100644
View file @77750e2
--- a/src/styles/sprite.less 0 → 100644
View file @77750e2
+++ b/src/styles/sprite.less 0 → 100644
View file @77750e2
+ /*
+ LESS variables are information about icon's compiled state, stored under its original file name
+ 
+ .icon-home {
+   width: @icon-home-width;
+ }
+ 
+ The large array-like variables contain all information about a single icon
+ @icon-home: x y offset_x offset_y width height total_width total_height image_path name;
+ 
+ At the bottom of this section, we provide information about the spritesheet itself
+ @spritesheet: width height image @spritesheet-sprites;
+ */
+ @btn-modal-name: 'btn-modal';
+ @btn-modal-x: 0px;
+ @btn-modal-y: 0px;
+ @btn-modal-offset-x: 0px;
+ @btn-modal-offset-y: 0px;
+ @btn-modal-width: 61px;
+ @btn-modal-height: 26px;
+ @btn-modal-total-width: 61px;
+ @btn-modal-total-height: 71px;
+ @btn-modal-image: '../img/sprite.png';
+ @btn-modal: 0px 0px 0px 0px 61px 26px 61px 71px '../img/sprite.png' 'btn-modal';
+ @logo-modal-name: 'logo-modal';
+ @logo-modal-x: 0px;
+ @logo-modal-y: 31px;
+ @logo-modal-offset-x: 0px;
+ @logo-modal-offset-y: -31px;
+ @logo-modal-width: 40px;
+ @logo-modal-height: 40px;
+ @logo-modal-total-width: 61px;
+ @logo-modal-total-height: 71px;
+ @logo-modal-image: '../img/sprite.png';
+ @logo-modal: 0px 31px 0px -31px 40px 40px 61px 71px '../img/sprite.png' 'logo-modal';
+ @spritesheet-width: 61px;
+ @spritesheet-height: 71px;
+ @spritesheet-image: '../img/sprite.png';
+ @spritesheet-sprites: @btn-modal @logo-modal;
+ @spritesheet: 61px 71px '../img/sprite.png' @spritesheet-sprites;
+ 
+ /*
+ The provided classes are intended to be used with the array-like variables
+ 
+ .icon-home {
+   .sprite-width(@icon-home);
+ }
+ .icon-email {
+   .sprite(@icon-email);
+ }
+ 
+ Example usage in HTML:
+ 
+ `display: block` sprite:
+ <div class="icon-home"></div>
+ 
+ To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
+ 
+ // CSS
+ .icon {
+   display: inline-block;
+ }
+ 
+ // HTML
+ <i class="icon icon-home"></i>
+ */
+ .sprite-width(@sprite) {
+   width: extract(@sprite, 5);
+ }
+ 
+ .sprite-height(@sprite) {
+   height: extract(@sprite, 6);
+ }
+ 
+ .sprite-position(@sprite) {
+   @sprite-offset-x: extract(@sprite, 3);
+   @sprite-offset-y: extract(@sprite, 4);
+   background-position: @sprite-offset-x @sprite-offset-y;
+ }
+ 
+ .sprite-image(@sprite) {
+   @sprite-image: extract(@sprite, 9);
+   @sprite-image-bare: ~`"@{sprite-image}".slice(1, -1)`;
+   background-image: url(@sprite-image-bare);
+ }
+ 
+ .sprite(@sprite) {
+   .sprite-image(@sprite);
+   .sprite-position(@sprite);
+   .sprite-width(@sprite);
+   .sprite-height(@sprite);
+ }
+ 
+ /*
+ The `.sprites` mixin generates identical output to the CSS template
+   but can be overridden inside of LESS
+ 
+ This must be run when you have at least 2 sprites.
+   If run with a single sprite, then there will be reference errors.
+ 
+ .sprites(@spritesheet-sprites);
+ */
+ .sprites(@sprites, @i: 1) when (@i <= length(@sprites)) {
+   @sprite: extract(@sprites, @i);
+   @sprite-name: e(extract(@sprite, 10));
+   .@{sprite-name} {
+     .sprite(@sprite);
+   }
+   .sprites(@sprites, @i + 1);
+ }
--- a/src/styles/variables.less 0 → 100644
View file @77750e2
+++ b/src/styles/variables.less 0 → 100644
View file @77750e2
+ 
+ //== Media queries breakpoints
+ //
+ //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+ 
+ // Extra small screen / phone
+ //** Deprecated `@screen-xs` as of v3.0.1
+ @screen-xs:                  320px;
+ //** Deprecated `@screen-xs-min` as of v3.2.0
+ @screen-xs-min:              @screen-xs;
+ //** Deprecated `@screen-phone` as of v3.0.1
+ @screen-phone:               @screen-xs-min;
+ 
+ // Small screen / tablet
+ //** Deprecated `@screen-sm` as of v3.0.1
+ @screen-sm:                  550px;
+ @screen-sm-min:              @screen-sm;
+ //** Deprecated `@screen-tablet` as of v3.0.1
+ @screen-tablet:              @screen-sm-min;
+ 
+ // Medium screen / desktop
+ //** Deprecated `@screen-md` as of v3.0.1
+ @screen-md:                  797px;
+ @screen-md-min:              @screen-md;
+ //** Deprecated `@screen-desktop` as of v3.0.1
+ @screen-desktop:             @screen-md-min;
+ 
+ // Large screen / wide desktop
+ //** Deprecated `@screen-lg` as of v3.0.1
+ @screen-lg:                  970px;
+ @screen-lg-min:              @screen-lg;
+ //** Deprecated `@screen-lg-desktop` as of v3.0.1
+ @screen-lg-desktop:          @screen-lg-min;
+ 
+ // So media queries don't overlap when required, provide a maximum
+ @screen-xs-max:              (@screen-sm-min - 1);
+ @screen-sm-max:              (@screen-md-min - 1);
+ @screen-md-max:              (@screen-lg-min - 1);
+ 
+ 
+ //== Grid system
+ //
+ //## Define your custom responsive grid.
+ 
+ //** Number of columns in the grid.
+ @grid-columns:              24;
+ //** Padding between columns. Gets divided in half for the left and right.
+ @grid-gutter-width:         20px;
+ // Navbar collapse
+ //** Point at which the navbar becomes uncollapsed.
+ @grid-float-breakpoint:     @screen-sm-min;
+ //** Point at which the navbar begins collapsing.
+ @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+ 
+ 
+ //== Container sizes
+ //
+ //## Define the maximum width of `.container` for different screen sizes.
+ 
+ // Small screen / tablet
+ @container-tablet:             (100% + @grid-gutter-width);
+ //** For `@screen-sm-min` and up.
+ @container-sm:                 @container-tablet;
+ 
+ // Medium screen / desktop
+ @container-desktop:            (100% + @grid-gutter-width);
+ //** For `@screen-md-min` and up.
+ @container-md:                 @container-desktop;
+ 
+ // Large screen / wide desktop
+ @container-large-desktop:      (950px + @grid-gutter-width);
+ //** For `@screen-lg-min` and up.
+ @container-lg:                 @container-large-desktop;
+ 
+ @xs:  ~'max-width: @{screen-xs-max}';
+ @sm:  ~'max-width: @{screen-sm-max}';
+ @md:  ~'max-width: @{screen-md-max}';
+ @lg:  ~'min-width: @{screen-lg}';
+ 
+ // fonts
+ @default-font: 'Roboto', sans-serif;