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;