oreolek/shooter
1
0
Fork 0
mirror of https://github.com/Oreolek/shooter.git synced 2024-04-26 14:09:20 +03:00
Code Issues Releases Wiki Activity

WIP: Bootstrap v4 integration.

Browse source
This commit is contained in:
Alexander Yakovlev 2015-12-12 12:56:10 +07:00
parent c89172ba94
commit e40045e325
11 changed files with 81 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "sass/bootstrap"]
path = sass/bootstrap
url = https://github.com/twbs/bootstrap.git

27
Gulpfile.js
View file

@ -8,7 +8,7 @@ var watchify = require('watchify'),
source = require('vinyl-source-stream'), source = require('vinyl-source-stream'),
gutil = require('gulp-util'), gutil = require('gulp-util'),
coffeify = require('coffeeify'), coffeify = require('coffeeify'),
less = require('gulp-less'), sass = require('gulp-sass'),
minifyCSS = require('gulp-minify-css'), minifyCSS = require('gulp-minify-css'),
uglify = require('gulp-uglify'), uglify = require('gulp-uglify'),
buffer = require('vinyl-buffer'), buffer = require('vinyl-buffer'),
@ -49,10 +49,10 @@ gulp.task('audio', audio('./build/audio'));
/* Less */ /* Less */
gulp.task('less', function () { gulp.task('sass', function () {
gulp.src('less/main.less') gulp.src('sass/main.scss')
.pipe(less()) .pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./build/css')); .pipe(gulp.dest('./build/css'));
}); });
/* Bundle libraries */ /* Bundle libraries */
@ -107,7 +107,7 @@ bundler.on('log', gutil.log); // Output build logs to terminal
/* Make a development build */ /* Make a development build */
gulp.task('build', ['html', 'img', 'less', 'coffee', 'audio'], function () { gulp.task('build', ['html', 'img', 'sass', 'coffee', 'audio'], function () {
}); });
@ -120,16 +120,16 @@ gulp.task('serve', ['build'], function () {
} }
}); });
var lessListener = function () { var sassListener = function () {
reload('./build/css/main.css'); reload('./build/css/main.css');
} }
gulp.watch(['./html/*.html'], ['html']); gulp.watch(['./html/*.html'], ['html']);
gulp.watch(['./less/*.less'], ['less']); gulp.watch(['./sass/*.scss'], ['sass']);
gulp.watch(['./img/*.png', './img/*.jpeg', './img/*.jpg'], ['img']); gulp.watch(['./img/*.png', './img/*.jpeg', './img/*.jpg'], ['img']);
gulp.watch(['./game/*.coffee', './game/translations/*.coffee'], ['coffee']); gulp.watch(['./game/*.coffee', './game/translations/*.coffee'], ['coffee']);
gulp.watch(['./build/css/main.css'], lessListener); gulp.watch(['./build/css/main.css'], sassListener);
gulp.watch( gulp.watch(
['./build/game/bundle.js', './build/img/*', './build/index.html'], ['./build/game/bundle.js', './build/img/*', './build/index.html'],
browserSync.reload); browserSync.reload);
@ -151,10 +151,9 @@ gulp.task('html-dist', html('./dist'));
gulp.task('img-dist', img('./dist/img')); gulp.task('img-dist', img('./dist/img'));
gulp.task('audio-dist', audio('./dist/audio')); gulp.task('audio-dist', audio('./dist/audio'));
gulp.task('less-dist', function () { gulp.task('sass-dist', function () {
return gulp.src('./less/main.less') return gulp.src('./sass/main.scss')
.pipe(less()) .pipe(sass({outputStyle: 'compressed'}))
.pipe(minifyCSS())
.pipe(gulp.dest('./dist/css')); .pipe(gulp.dest('./dist/css'));
}); });
@ -175,7 +174,7 @@ gulp.task('coffee-dist', ['undum-dist', 'concatCoffee'], function () {
.pipe(gulp.dest('./dist/game')); .pipe(gulp.dest('./dist/game'));
}); });
gulp.task('dist', ['html-dist', 'img-dist', 'less-dist', 'coffee-dist', 'audio-dist'], gulp.task('dist', ['html-dist', 'img-dist', 'sass-dist', 'coffee-dist', 'audio-dist'],
function () { function () {
return; return;
}); });

2
html/index.html
View file

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head> </head>
<body> <body>
<div id="page"> <div id="page" class="container">
<div id="mid_panel"> <div id="mid_panel">
<div id="title"> <div id="title">
<div class="label"> <div class="label">

75
less/animations.less
View file

@ -1,75 +0,0 @@
/* Animate newly inserted DOM elements within content */
/* "Why don't we just use opacity?"
"Because opacity, creates massive jank and this doesn't. Browsers!"
*/
.fade-in() {
animation: fadeIn 500ms ease-in-out;
-webkit-animation: fadeIn 500ms ease-in-out;
//-moz-animation: fadeIn 500ms;
a {
animation: fadeInA 500ms ease-in-out;
-webkit-animation: fadeInA 500ms ease-in-out;
}
}
@keyframes fadeIn {
from {
color: rgba(0,0,0,0);
}
to {
color: rgba(0,0,0,1);
}
}
@-webkit-keyframes fadeIn {
from {
color: rgba(0,0,0,0);
}
to {
color: rgba(0,0,0,1);
}
}
@keyframes fadeInA {
0% {
color: transparentize(@anchor-colour, 1);
}
100% {
color: transparentize(@anchor-colour, 0);
}
}
@-webkit-keyframes fadeInA {
from {
color: transparentize(@anchor-colour, 1);
}
to {
color: transparentize(@anchor-colour, 0);
}
}
@keyframes fadeInS {
0% {
color: transparentize(@option-colour, 1);
}
100% {
color: @option-colour;
}
}
@-webkit-keyframes fadeInS {
from {
color: transparentize(@option-colour, 1);
}
to {
color: @option-colour;
}
}
.fade {
.fade-in();
}

57
less/grid.less
View file

@ -1,57 +0,0 @@
/////////////////
// Semantic.gs // for LESS: http://lesscss.org/
/////////////////
// Defaults which you can freely override
@column-width: 60;
@gutter-width: 20;
@columns: 12;
// Utility variable — you should never need to modify this
@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;
// Set @total-width to 100% for a fluid layout
@total-width: @gridsystem-width;
// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
}
//////////
// GRID //
//////////
body {
width: 100%;
.clearfix;
}
.row(@columns:@columns) {
display: block;
width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
.clearfix;
}
.column(@x,@columns:@columns) {
display: inline;
float: left;
width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
}
.push(@offset:1) {
margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}
.pull(@offset:1) {
margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}

2
package.json
View file

@ -16,7 +16,7 @@
"coffeeify": "^1.0.0", "coffeeify": "^1.0.0",
"gulp": "^3.8.11", "gulp": "^3.8.11",
"gulp-gzip": "^1.1.0", "gulp-gzip": "^1.1.0",
"gulp-less": "^3.0.2", "gulp-sass": "^2.1.1",
"gulp-minify-css": "^1.0.0", "gulp-minify-css": "^1.0.0",
"gulp-uglify": "^1.2.0", "gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.4", "gulp-util": "^3.0.4",

0
less/slider.less → sass/_slider.scss
View file

14
sass/_variables.scss Normal file
View file

@ -0,0 +1,14 @@
$font-family-sans-serif: 'PT Sans','Open Sans',"Helvetica Neue", Helvetica, Arial, sans-serif;
$body-bg: lightgrey url("../img/background.jpg");
$link-color: #D29506;
/*
@text-colour: rgba(0,0,0,0.9);
@anchor-colour: #D29506;
@option-colour: #125D79;
@background: lightgrey url("../img/background.jpg");
@text_background: #e6e6c6;
@color: black;
@links: #B68000;
*/

1
sass/bootstrap Submodule

@ -0,0 +1 @@
Subproject commit 70247e36f64295c61e0f867606793da5a26eebeb

0
less/main.less → sass/main.less
View file

67
less/layout.less → sass/main.scss
View file

@ -1,21 +1,28 @@
@import 'grid.less'; @import "variables";
// Bootstrap v4 stripped core
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/normalize";
@import "bootstrap/scss/print";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/responsive-embed";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities-background";
@import "bootstrap/scss/utilities-spacing";
@import "bootstrap/scss/utilities-responsive";
@columns: 12; h1,h2,h3,h4,h5,h6 {
@column-width: 60; font-family:"PT Sans Caption",$font-family-serif;
@gutter-width: 20; }
@total-width: 100%;
body { body {
background: @background;
color: @color;
font-family: @font-body;
font-size: 18px;
line-height: 1.6em;
background-attachment: fixed;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
} }
/*
#page { #page {
.row(); .row();
} }
@ -29,7 +36,7 @@ body {
#content_wrapper { #content_wrapper {
margin: 1.1em auto; margin: 1.1em auto;
padding: 2.8em; padding: 2.8em;
display: none; /* Shown by Javascript */ display: none; // Shown by Javascript
overflow: auto; overflow: auto;
} }
@media (min-width: 981px) { @media (min-width: 981px) {
@ -50,12 +57,12 @@ body {
} }
} }
/* The title block */ // The title block
#title { #title {
max-width: 28em; max-width: 28em;
margin: 2.2em auto 1.1em auto; margin: 2.2em auto 1.1em auto;
padding: 1.7em; padding: 1.7em;
cursor: pointer; /* Until we click to start. */ cursor: pointer; // Until we click to start.
.label { .label {
overflow: hidden; overflow: hidden;
margin: auto; margin: auto;
@ -125,7 +132,7 @@ body {
} }
} }
/* Main content */ // Main content
#content_wrapper { #content_wrapper {
background: @text_background; background: @text_background;
} }
@ -224,7 +231,7 @@ img.left {
color: #654; color: #654;
margin: 1em auto 0 auto; margin: 1em auto 0 auto;
padding-bottom: 2.2em; padding-bottom: 2.2em;
display: none; /* Shown by Javascript */ display: none; // Shown by Javascript
p { p {
font-size: 0.7em; font-size: 0.7em;
line-height: 1.3em; line-height: 1.3em;
@ -248,7 +255,7 @@ img.left {
line-height: 1.5em; line-height: 1.5em;
} }
/* Title */ // Title
#title { #title {
margin-top: -1.5em; margin-top: -1.5em;
padding: 1.0em 0.5em; padding: 1.0em 0.5em;
@ -259,7 +266,7 @@ img.left {
} }
} }
/* Main content */ // Main content
#content_wrapper { #content_wrapper {
width: auto; width: auto;
padding: 2.0em; padding: 2.0em;
@ -294,3 +301,25 @@ h3 {
.column(2); .column(2);
} }
} }
*/
.way {
color: darkred;
}
.cycle {
color: darkgreen;
border-bottom: darkgreen dashed 1px;
}
ul.options {
border: 1px solid #876;
li {
border-bottom: 1px solid #876;
}
li:hover {
background-color: rgba(153,136,119,0.2);
}
}
#legal {
.muted {
color: grey;
}
}