[update] Style Home page
This commit is contained in:
brunosimon
+1
-1
@@ -159,7 +159,7 @@ class App
|
|||||||
_options = {}
|
_options = {}
|
||||||
|
|
||||||
if( typeof _options.port === 'undefined' )
|
if( typeof _options.port === 'undefined' )
|
||||||
_options.port = 3000
|
_options.port = 1571
|
||||||
|
|
||||||
// Save
|
// Save
|
||||||
this.options = _options
|
this.options = _options
|
||||||
|
|||||||
@@ -2,17 +2,10 @@ var gulp = require( 'gulp' ),
|
|||||||
concat = require( 'gulp-concat' ),
|
concat = require( 'gulp-concat' ),
|
||||||
uglify = require( 'gulp-uglify' ),
|
uglify = require( 'gulp-uglify' ),
|
||||||
watch = require( 'gulp-watch' ),
|
watch = require( 'gulp-watch' ),
|
||||||
minify_css = require( 'gulp-minify-css' ),
|
gulp_sourcemaps = require( 'gulp-sourcemaps' ),
|
||||||
autoprefixer = require( 'gulp-autoprefixer' ),
|
|
||||||
postcss = require( 'gulp-postcss' ),
|
|
||||||
precss = require( 'precss' ),
|
|
||||||
postcss_import = require( 'postcss-import' ),
|
|
||||||
cssnano = require( 'cssnano' ),
|
|
||||||
sourcemaps = require( 'gulp-sourcemaps' ),
|
|
||||||
spritesmith = require( 'gulp.spritesmith' ),
|
|
||||||
merge = require( 'merge-stream' ),
|
|
||||||
plumber = require( 'gulp-plumber' ),
|
plumber = require( 'gulp-plumber' ),
|
||||||
gulp_rename = require( 'gulp-rename' ),
|
gulp_rename = require( 'gulp-rename' ),
|
||||||
|
gulp_stylus = require( 'gulp-stylus' ),
|
||||||
browser_sync = require( 'browser-sync' ).create();
|
browser_sync = require( 'browser-sync' ).create();
|
||||||
|
|
||||||
var path = '../';
|
var path = '../';
|
||||||
@@ -44,66 +37,43 @@ var path = '../';
|
|||||||
|
|
||||||
gulp.task( 'stylesheet', function()
|
gulp.task( 'stylesheet', function()
|
||||||
{
|
{
|
||||||
var requires = [
|
return gulp.src( path + 'stylus/style.styl' )
|
||||||
autoprefixer,
|
.pipe( gulp_sourcemaps.init() )
|
||||||
precss,
|
.pipe( plumber() )
|
||||||
postcss_import,
|
.pipe( gulp_stylus( {
|
||||||
cssnano,
|
compress: true,
|
||||||
];
|
|
||||||
|
|
||||||
// Post CSS
|
|
||||||
return gulp.src( path + 'stylesheet/main.css' )
|
|
||||||
.pipe( sourcemaps.init() )
|
|
||||||
.pipe( plumber( function( error )
|
|
||||||
{
|
|
||||||
console.log( error );
|
|
||||||
this.emit( 'end' );
|
|
||||||
} ) )
|
} ) )
|
||||||
.pipe( postcss( requires ) )
|
.pipe( gulp_sourcemaps.write( '.' ) )
|
||||||
.pipe( gulp_rename( {
|
.pipe( gulp.dest( path + 'stylesheet' ) )
|
||||||
// dirname: "main/text/ciao",
|
|
||||||
// basename: "aloha",
|
|
||||||
// prefix: "bonjour-",
|
|
||||||
suffix: ".min",
|
|
||||||
// extname: ".md"
|
|
||||||
} ) )
|
|
||||||
.pipe( sourcemaps.write( '.' ) )
|
|
||||||
.pipe( gulp.dest( path + 'stylesheet/' ) )
|
|
||||||
.pipe( browser_sync.stream( { match: '**/*.css' } ) );
|
.pipe( browser_sync.stream( { match: '**/*.css' } ) );
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* SPRITES
|
|
||||||
*/
|
|
||||||
gulp.task( 'sprites', function()
|
|
||||||
{
|
|
||||||
var sprite_data = gulp.src( path + 'images/sprites/**/*.{png,jpg}' )
|
|
||||||
.pipe( plumber() )
|
|
||||||
.pipe( spritesmith( {
|
|
||||||
|
|
||||||
// Options
|
// var requires = [
|
||||||
padding : 4,
|
// autoprefixer,
|
||||||
|
// precss,
|
||||||
|
// postcss_import,
|
||||||
|
// cssnano,
|
||||||
|
// ];
|
||||||
|
|
||||||
// Default
|
// // Post CSS
|
||||||
imgName : 'sprites.png',
|
// return gulp.src( path + 'stylesheet/main.css' )
|
||||||
cssName : '_sprites.scss',
|
// .pipe( gulp_sourcemaps.init() )
|
||||||
imgPath : path + 'images/sprites.png',
|
// .pipe( plumber( function( error )
|
||||||
|
// {
|
||||||
// Retina
|
// console.log( error );
|
||||||
retinaSrcFilter: [path + 'images/sprites/*-2x.png'],
|
// this.emit( 'end' );
|
||||||
retinaImgName: 'sprites-2x.png',
|
// } ) )
|
||||||
retinaImgPath: path + 'images/sprites-2x.png'
|
// .pipe( postcss( requires ) )
|
||||||
} ) );
|
// .pipe( gulp_rename( {
|
||||||
|
// // dirname: "main/text/ciao",
|
||||||
var img_stream = sprite_data.img
|
// // basename: "aloha",
|
||||||
.pipe( plumber() )
|
// // prefix: "bonjour-",
|
||||||
.pipe( gulp.dest( path + 'images/' ) );
|
// suffix: '.min',
|
||||||
|
// // extname: ".md"
|
||||||
var css_stream = sprite_data.css
|
// } ) )
|
||||||
.pipe( plumber() )
|
// .pipe( gulp_sourcemaps.write( '.' ) )
|
||||||
.pipe( gulp.dest( path + 'sass/base/' ) );
|
// .pipe( gulp.dest( path + 'stylesheet/' ) )
|
||||||
|
// .pipe( browser_sync.stream( { match: '**/*.css' } ) );
|
||||||
return merge( img_stream, css_stream );
|
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -111,10 +81,11 @@ gulp.task( 'sprites', function()
|
|||||||
*/
|
*/
|
||||||
gulp.task( 'browser_sync', function()
|
gulp.task( 'browser_sync', function()
|
||||||
{
|
{
|
||||||
|
console.log('ok');
|
||||||
browser_sync.init( {
|
browser_sync.init( {
|
||||||
proxy:
|
proxy:
|
||||||
{
|
{
|
||||||
target: 'http://localhost:3000',
|
target: 'http://localhost:1571',
|
||||||
ws : true
|
ws : true
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
@@ -125,7 +96,6 @@ gulp.task( 'browser_sync', function()
|
|||||||
*/
|
*/
|
||||||
gulp.task( 'watch', function()
|
gulp.task( 'watch', function()
|
||||||
{
|
{
|
||||||
console.log('ok');
|
|
||||||
// // JS
|
// // JS
|
||||||
// watch(
|
// watch(
|
||||||
// [
|
// [
|
||||||
@@ -140,9 +110,7 @@ gulp.task( 'watch', function()
|
|||||||
// Stylesheet
|
// Stylesheet
|
||||||
watch(
|
watch(
|
||||||
[
|
[
|
||||||
path + 'stylesheet/**',
|
path + 'stylus/**',
|
||||||
'!' + path + 'stylesheet/main.min.css',
|
|
||||||
'!' + path + 'stylesheet/main.min.css.map'
|
|
||||||
],
|
],
|
||||||
function()
|
function()
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -7,20 +7,13 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^6.4.0",
|
"autoprefixer": "^6.4.0",
|
||||||
"browser-sync": "^2.13.0",
|
"browser-sync": "^2.13.0",
|
||||||
"cssnano": "^3.7.4",
|
|
||||||
"gulp": "^3.8.10",
|
"gulp": "^3.8.10",
|
||||||
"gulp-autoprefixer": "^2.1.0",
|
|
||||||
"gulp-concat": "^2.4.3",
|
"gulp-concat": "^2.4.3",
|
||||||
"gulp-minify-css": "^0.3.13",
|
|
||||||
"gulp-plumber": "^1.1.0",
|
"gulp-plumber": "^1.1.0",
|
||||||
"gulp-postcss": "^6.1.1",
|
|
||||||
"gulp-rename": "^1.2.2",
|
"gulp-rename": "^1.2.2",
|
||||||
"gulp-sourcemaps": "^1.6.0",
|
"gulp-sourcemaps": "^1.6.0",
|
||||||
|
"gulp-stylus": "^2.5.0",
|
||||||
"gulp-uglify": "^1.1.0",
|
"gulp-uglify": "^1.1.0",
|
||||||
"gulp-watch": "^3.0.0",
|
"gulp-watch": "^3.0.0"
|
||||||
"gulp.spritesmith": "^6.2.1",
|
|
||||||
"merge-stream": "^1.0.0",
|
|
||||||
"postcss-import": "^8.1.2",
|
|
||||||
"precss": "^1.4.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,10 +0,0 @@
|
|||||||
body
|
|
||||||
{
|
|
||||||
|
|
||||||
}
|
|
||||||
::-moz-selection {background:#888; }
|
|
||||||
::selection {background:#888; }
|
|
||||||
.clearfix
|
|
||||||
{
|
|
||||||
overflow:auto;zoom:1;
|
|
||||||
}
|
|
||||||
@@ -1,133 +0,0 @@
|
|||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
|
||||||
v2.0 | 20110126
|
|
||||||
License: none (public domain)
|
|
||||||
*/
|
|
||||||
|
|
||||||
html, body, div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
border:0;
|
|
||||||
font-size:100%;
|
|
||||||
font:inherit;
|
|
||||||
vertical-align:baseline;
|
|
||||||
}
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
|
||||||
article, aside, details, figcaption, figure,
|
|
||||||
footer, header, hgroup, menu, nav, section {
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
line-height:1;
|
|
||||||
}
|
|
||||||
ol, ul {
|
|
||||||
list-style:none;
|
|
||||||
}
|
|
||||||
blockquote, q {
|
|
||||||
quotes:none;
|
|
||||||
}
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content:'';
|
|
||||||
content:none;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border-collapse:collapse;
|
|
||||||
border-spacing:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* apply a natural box layout model to all elements */
|
|
||||||
*,*::before,*::after,*:before,*:after {
|
|
||||||
-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* inputs */
|
|
||||||
input,button,textarea,select {
|
|
||||||
color:inherit;
|
|
||||||
font-size:inherit;
|
|
||||||
font-style:inherit;
|
|
||||||
font-family:inherit;
|
|
||||||
-webkit-border-radius:0;
|
|
||||||
border-radius:0;
|
|
||||||
-webkit-padding-start:0;
|
|
||||||
align-items:flex-start;
|
|
||||||
text-index:0;
|
|
||||||
border:none;
|
|
||||||
outline:none;
|
|
||||||
background:none;
|
|
||||||
padding:0;
|
|
||||||
margin:0;
|
|
||||||
width:auto;
|
|
||||||
height:auto;
|
|
||||||
line-height:1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* inputs appearance (not for every input) */
|
|
||||||
input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],
|
|
||||||
input[type=submit],input[type=reset],input[type=color],input[type=file],
|
|
||||||
button,textarea,select {
|
|
||||||
height:1em;
|
|
||||||
-webkit-appearance:none;
|
|
||||||
-moz-appearance:none;
|
|
||||||
appearance:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* input color width */
|
|
||||||
input[type=color] {
|
|
||||||
width:1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IE clear cross */
|
|
||||||
input::-ms-clear {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* details and summary */
|
|
||||||
details, summary {
|
|
||||||
-webkit-appearance:none;
|
|
||||||
-moz-appearance:none;
|
|
||||||
appearance:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* text size adjusting */
|
|
||||||
body {
|
|
||||||
-webkit-text-size-adjust:100%;
|
|
||||||
-moz-text-size-adjust:100%;
|
|
||||||
text-size-adjust:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* mark */
|
|
||||||
mark {background:none;}
|
|
||||||
|
|
||||||
/* hr */
|
|
||||||
hr {
|
|
||||||
height:1px;
|
|
||||||
margin:0;padding:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* u */
|
|
||||||
u {
|
|
||||||
text-decoration:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* th */
|
|
||||||
table th {
|
|
||||||
text-align:left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* a */
|
|
||||||
a {
|
|
||||||
color:inherit;
|
|
||||||
outline:none;
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
@import "mixins/image-2x.css";
|
|
||||||
@import "mixins/touch.css";
|
|
||||||
@import "mixins/font-smoothing.css";
|
|
||||||
@import "mixins/breakpoints.css";
|
|
||||||
|
|
||||||
@import "base/fonts.css";
|
|
||||||
@import "base/reset.css";
|
|
||||||
@import "base/general.css";
|
|
||||||
|
|
||||||
@import "pages/index_index.css";
|
|
||||||
@import "pages/index_project.css";
|
|
||||||
Vendored
-2
@@ -1,2 +0,0 @@
|
|||||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}button,input,select,textarea{color:inherit;font-size:inherit;font-style:inherit;font-family:inherit;border-radius:0;-webkit-padding-start:0;align-items:flex-start;text-index:0;border:none;outline:none;background:none;padding:0;margin:0;width:auto;height:auto;line-height:1em}button,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=reset],input[type=search],input[type=submit],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:1em;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=color]{width:1em}input::-ms-clear{display:none}details,summary{-webkit-appearance:none;-moz-appearance:none;appearance:none}body{-webkit-text-size-adjust:100%;text-size-adjust:100%}mark{background:none}hr{height:1px;margin:0;padding:0}u{text-decoration:none}table th{text-align:left}a{color:inherit;outline:none}::-moz-selection{background:#888}::selection{background:#888}.clearfix{overflow:auto;zoom:1}
|
|
||||||
/*# sourceMappingURL=main.min.css.map */
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
$breakpoint-xxsmall: 480px;
|
|
||||||
$breakpoint-xsmall: 600px;
|
|
||||||
$breakpoint-small: 840px;
|
|
||||||
$breakpoint-medium: 960px;
|
|
||||||
$breakpoint-large: 1280px;
|
|
||||||
$breakpoint-xlarge: 1440px;
|
|
||||||
$breakpoint-xxlarge: 1600px;
|
|
||||||
|
|
||||||
@define-mixin max-width $value
|
|
||||||
{
|
|
||||||
@media only screen and (max-width:$value){
|
|
||||||
@mixin-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@define-mixin max-height $value
|
|
||||||
{
|
|
||||||
@media only screen and (max-height:$value){
|
|
||||||
@mixin-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
@define-mixin font-smoothing $value: antialiased
|
|
||||||
{
|
|
||||||
@if $value == antialiased
|
|
||||||
{
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
@else
|
|
||||||
{
|
|
||||||
-webkit-font-smoothing: subpixel-antialiased;
|
|
||||||
-moz-osx-font-smoothing: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
@define-mixin image-2x $image, $width, $height
|
|
||||||
{
|
|
||||||
@media (min--moz-device-pixel-ratio: 1.3),
|
|
||||||
(-o-min-device-pixel-ratio: 2.6/2),
|
|
||||||
(-webkit-min-device-pixel-ratio: 1.3),
|
|
||||||
(min-device-pixel-ratio: 1.3),
|
|
||||||
(min-resolution: 1.3dppx)
|
|
||||||
{
|
|
||||||
background-image: url($image);
|
|
||||||
background-size: $width $height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
@define-mixin no-touch
|
|
||||||
{
|
|
||||||
html.features-no-touch & {
|
|
||||||
@mixin-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@define-mixin touch
|
|
||||||
{
|
|
||||||
html.features-touch & {
|
|
||||||
@mixin-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,13 @@
|
|||||||
|
@font-face
|
||||||
|
font-family 'Stellar'
|
||||||
|
src url('../fonts/Stellar-Regular.eot')
|
||||||
|
src url('../fonts/Stellar-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Stellar-Regular.woff2') format('woff2'), url('../fonts/Stellar-Regular.woff') format('woff'), url('../fonts/Stellar-Regular.ttf') format('truetype')
|
||||||
|
font-weight normal
|
||||||
|
font-style normal
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-family 'Ubuntu Mono'
|
||||||
|
src url('../fonts/UbuntuMono-Regular.eot')
|
||||||
|
src url('../fonts/UbuntuMono-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/UbuntuMono-Regular.woff2') format('woff2'), url('../fonts/UbuntuMono-Regular.woff') format('woff'), url('../fonts/UbuntuMono-Regular.ttf') format('truetype')
|
||||||
|
font-weight normal
|
||||||
|
font-style normal
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
body
|
||||||
|
font-family Helvetica, Arial
|
||||||
|
font-size 12px
|
||||||
|
font-smoothing(antialiased)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video
|
||||||
|
margin 0
|
||||||
|
padding 0
|
||||||
|
border 0
|
||||||
|
font-size 100%
|
||||||
|
font inherit
|
||||||
|
vertical-align baseline
|
||||||
|
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section
|
||||||
|
display block
|
||||||
|
|
||||||
|
body
|
||||||
|
line-height 1
|
||||||
|
-webkit-text-size-adjust 100%
|
||||||
|
-moz-text-size-adjust 100%
|
||||||
|
text-size-adjust 100%
|
||||||
|
|
||||||
|
ol, ul
|
||||||
|
list-style none
|
||||||
|
|
||||||
|
blockquote, q
|
||||||
|
quotes none
|
||||||
|
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after
|
||||||
|
content ''
|
||||||
|
content none
|
||||||
|
|
||||||
|
table
|
||||||
|
border-collapse collapse
|
||||||
|
border-spacing 0
|
||||||
|
th
|
||||||
|
text-align left
|
||||||
|
|
||||||
|
*,*::before,*::after,*:before,*:after
|
||||||
|
-moz-box-sizing border-box
|
||||||
|
-webkit-box-sizing border-box
|
||||||
|
box-sizing border-box
|
||||||
|
|
||||||
|
input,button,textarea,select
|
||||||
|
color inherit
|
||||||
|
font-size inherit
|
||||||
|
font-style inherit
|
||||||
|
font-family inherit
|
||||||
|
-webkit-border-radius 0
|
||||||
|
border-radius 0
|
||||||
|
-webkit-padding-start 0
|
||||||
|
align-items flex-start
|
||||||
|
text-index 0
|
||||||
|
border none
|
||||||
|
outline none
|
||||||
|
background none
|
||||||
|
padding 0
|
||||||
|
margin 0
|
||||||
|
width auto
|
||||||
|
height auto
|
||||||
|
line-height 1em
|
||||||
|
|
||||||
|
input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],
|
||||||
|
input[type=submit],input[type=reset],input[type=color],input[type=file],
|
||||||
|
button,textarea,select
|
||||||
|
height 1em
|
||||||
|
-webkit-appearance none
|
||||||
|
-moz-appearance none
|
||||||
|
appearance none
|
||||||
|
|
||||||
|
input[type=color]
|
||||||
|
width 1em
|
||||||
|
|
||||||
|
input
|
||||||
|
&::-ms-clear
|
||||||
|
display none
|
||||||
|
|
||||||
|
details, summary
|
||||||
|
-webkit-appearance none
|
||||||
|
-moz-appearance none
|
||||||
|
appearance none
|
||||||
|
|
||||||
|
mark
|
||||||
|
background none
|
||||||
|
|
||||||
|
hr
|
||||||
|
height 1px
|
||||||
|
margin 0
|
||||||
|
padding 0
|
||||||
|
|
||||||
|
u
|
||||||
|
text-decoration none
|
||||||
|
|
||||||
|
a
|
||||||
|
color inherit
|
||||||
|
outline none
|
||||||
|
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
font-smoothing($smoothing = auto) {
|
||||||
|
-webkit-font-smoothing $smoothing
|
||||||
|
if $smoothing == antialiased {
|
||||||
|
-moz-osx-font-smoothing grayscale
|
||||||
|
}
|
||||||
|
if $smoothing == subpixel-antialiased {
|
||||||
|
-moz-osx-font-smoothing auto
|
||||||
|
}
|
||||||
|
font-smoothing $smoothing
|
||||||
|
}
|
||||||
@@ -0,0 +1,260 @@
|
|||||||
|
base-font-size ?= 16px
|
||||||
|
rasterise-media-queries ?= false
|
||||||
|
|
||||||
|
rupture = {
|
||||||
|
rasterise-media-queries: rasterise-media-queries
|
||||||
|
mobile-cutoff: 400px
|
||||||
|
desktop-cutoff: 1050px
|
||||||
|
hd-cutoff: 1800px
|
||||||
|
enable-em-breakpoints: false
|
||||||
|
base-font-size: base-font-size
|
||||||
|
anti-overlap: false
|
||||||
|
density-queries: 'dppx' 'webkit' 'moz' 'dpi'
|
||||||
|
retina-density: 1.5
|
||||||
|
use-device-width: false
|
||||||
|
}
|
||||||
|
rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff) (rupture.hd-cutoff)
|
||||||
|
rupture.scale-names = 'xs' 's' 'm' 'l' 'xl' 'hd'
|
||||||
|
|
||||||
|
-is-string(val)
|
||||||
|
if typeof(val) is not 'unit'
|
||||||
|
if val is a 'string' or val is a 'ident'
|
||||||
|
true
|
||||||
|
else
|
||||||
|
false
|
||||||
|
else
|
||||||
|
false
|
||||||
|
|
||||||
|
-get-scale-number(scale-name)
|
||||||
|
for list-item, i in rupture.scale-names
|
||||||
|
if list-item is scale-name
|
||||||
|
return i + 1
|
||||||
|
return false
|
||||||
|
|
||||||
|
-convert-to(to-unit, value, context = rupture.base-font-size)
|
||||||
|
from-unit = unit(value)
|
||||||
|
return value if to-unit is from-unit
|
||||||
|
if to-unit in ('em' 'rem')
|
||||||
|
return value if from-unit in ('em' 'rem')
|
||||||
|
return unit((value / context), to-unit)
|
||||||
|
if to-unit is 'px'
|
||||||
|
return unit((value * context), 'px')
|
||||||
|
|
||||||
|
-on-scale(n)
|
||||||
|
return unit(n) is ''
|
||||||
|
|
||||||
|
-larger-than-scale(n)
|
||||||
|
return (n > (length(rupture.scale) - 1)) and -on-scale(n)
|
||||||
|
|
||||||
|
-is-zero(n)
|
||||||
|
return n is 0
|
||||||
|
|
||||||
|
-overlap-shift(anti-overlap, n)
|
||||||
|
shift-unit = unit(n)
|
||||||
|
anti-overlap = 0px unless anti-overlap
|
||||||
|
anti-overlap = 1px if anti-overlap is true
|
||||||
|
if length(anti-overlap) is 1
|
||||||
|
return -convert-to(shift-unit, anti-overlap)
|
||||||
|
for val in anti-overlap
|
||||||
|
return val if unit(val) is shift-unit
|
||||||
|
|
||||||
|
-adjust-overlap(anti-overlap, n, side = 'min')
|
||||||
|
-shift = -overlap-shift(anti-overlap, n)
|
||||||
|
if (side is 'min' and -shift > 0) or (side is 'max' and -shift < 0)
|
||||||
|
n = n + -shift
|
||||||
|
return n
|
||||||
|
|
||||||
|
-is-positive(n)
|
||||||
|
return n >= 0
|
||||||
|
|
||||||
|
-density-queries(density)
|
||||||
|
if typeof(density) is not 'unit'
|
||||||
|
if not -is-string(density)
|
||||||
|
density = '%s' % density
|
||||||
|
density = rupture.retina-density if density is 'retina'
|
||||||
|
queries = ()
|
||||||
|
for query in rupture.density-queries
|
||||||
|
if query is 'webkit'
|
||||||
|
push(queries, '(-webkit-min-device-pixel-ratio: %s)' % (density))
|
||||||
|
else if query is 'moz'
|
||||||
|
push(queries, '(min--moz-device-pixel-ratio: %s)' % (density))
|
||||||
|
else if query is 'o'
|
||||||
|
push(queries, '(-o-min-device-pixel-ratio: %s/1)' % (density))
|
||||||
|
else if query is 'ratio'
|
||||||
|
push(queries, '(min-device-pixel-ratio: %s)' % (density))
|
||||||
|
else if query is 'dpi'
|
||||||
|
if -is-string(density)
|
||||||
|
density=convert(density)
|
||||||
|
push(queries, '(min-resolution: %sdpi)' % (round(density * 96, 1)))
|
||||||
|
else if query is 'dppx'
|
||||||
|
push(queries, '(min-resolution: %sdppx)' % (density))
|
||||||
|
return queries
|
||||||
|
|
||||||
|
create-fallback-class(selected, class)
|
||||||
|
/{'' + class + ' ' + selected}
|
||||||
|
{block}
|
||||||
|
|
||||||
|
// +between(min, max)
|
||||||
|
// usage (scale can be mixed with custom values):
|
||||||
|
// - +between(1, 3) scale:scale
|
||||||
|
// - +between(0, 3) 0 width:scale
|
||||||
|
// - +between(200px, 500px) custom:custom
|
||||||
|
// - +between(0, 300px) 0 width:custom
|
||||||
|
// - +between(1, 300px) scale:custom
|
||||||
|
// - +between(200px, 4) custom:scale
|
||||||
|
|
||||||
|
between(min, max, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||||
|
selected = selector()
|
||||||
|
|
||||||
|
if -is-string(orientation)
|
||||||
|
orientation = convert(orientation)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
if -is-string(min)
|
||||||
|
min = -get-scale-number(min)
|
||||||
|
if -is-string(max)
|
||||||
|
max = -get-scale-number(max)
|
||||||
|
|
||||||
|
-min = rupture.scale[min - 1] unless -is-zero(min) or (not -on-scale(min))
|
||||||
|
-max = rupture.scale[max] unless not -on-scale(max)
|
||||||
|
-min ?= min
|
||||||
|
-max ?= max
|
||||||
|
|
||||||
|
if (rupture.rasterise-media-queries)
|
||||||
|
if not (density or -max or orientation)
|
||||||
|
{block}
|
||||||
|
else
|
||||||
|
condition = 'only screen'
|
||||||
|
use-device-width = use-device-width ? 'device-' : ''
|
||||||
|
unless -min is 0
|
||||||
|
-min = -convert-to('em', -min) if rupture.enable-em-breakpoints
|
||||||
|
-min = -adjust-overlap(anti-overlap, -min, side: 'min')
|
||||||
|
condition = condition + ' and (min-' + use-device-width + 'width: %s)' % (-min)
|
||||||
|
unless -larger-than-scale(max)
|
||||||
|
-max = -convert-to('em', -max) if rupture.enable-em-breakpoints
|
||||||
|
-max = -adjust-overlap(anti-overlap, -max, side: 'max')
|
||||||
|
condition = condition + ' and (max-' + use-device-width + 'width: %s)' % (-max)
|
||||||
|
if orientation
|
||||||
|
condition = condition + ' and (orientation: %s)' % (orientation)
|
||||||
|
if density
|
||||||
|
conditions = ()
|
||||||
|
for query in -density-queries(density)
|
||||||
|
push(conditions, condition + ' and %s' % (query))
|
||||||
|
condition = join(', ', conditions)
|
||||||
|
@media condition
|
||||||
|
{block}
|
||||||
|
if fallback-class
|
||||||
|
+create-fallback-class(selected, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
at(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||||
|
if -is-string(orientation)
|
||||||
|
orientation = convert(orientation)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
+between(scale-point, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
from-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||||
|
if -is-string(orientation)
|
||||||
|
orientation = convert(orientation)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
+between(scale-point, length(rupture.scale), anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
above = from-width
|
||||||
|
|
||||||
|
to-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||||
|
if -is-string(orientation)
|
||||||
|
orientation = convert(orientation)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
+between(1, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
below = to-width
|
||||||
|
|
||||||
|
mobile(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||||
|
if -is-string(orientation)
|
||||||
|
orientation = convert(orientation)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
+below(rupture.mobile-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
tablet(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||||
|
if -is-string(orientation)
|
||||||
|
orientation = convert(orientation)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
+between(rupture.mobile-cutoff, rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
desktop(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||||
|
if -is-string(orientation)
|
||||||
|
orientation = convert(orientation)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
+above(rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
hd(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||||
|
if -is-string(orientation)
|
||||||
|
orientation = convert(orientation)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
+above(rupture.hd-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
density(density, orientation = null, fallback-class = null)
|
||||||
|
selected = selector()
|
||||||
|
if not (rupture.rasterise-media-queries)
|
||||||
|
conditions = ()
|
||||||
|
for query in -density-queries(density)
|
||||||
|
condition = 'only screen and %s' % (query)
|
||||||
|
if orientation
|
||||||
|
condition = condition + ' and (orientation: %s)' % (orientation)
|
||||||
|
push(conditions, condition)
|
||||||
|
condition = join(', ', conditions)
|
||||||
|
@media condition
|
||||||
|
{block}
|
||||||
|
if fallback-class
|
||||||
|
+create-fallback-class(selected, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
pixel-ratio = density
|
||||||
|
|
||||||
|
retina(orientation = null, fallback-class = null)
|
||||||
|
+density('retina', orientation, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
landscape(density = null, fallback-class = null)
|
||||||
|
selected = selector()
|
||||||
|
if not (rupture.rasterise-media-queries)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
if density
|
||||||
|
+pixel-ratio(density, orientation: landscape, fallback-class)
|
||||||
|
{block}
|
||||||
|
else
|
||||||
|
@media only screen and (orientation: landscape)
|
||||||
|
{block}
|
||||||
|
if fallback-class
|
||||||
|
+create-fallback-class(selected, fallback-class)
|
||||||
|
{block}
|
||||||
|
|
||||||
|
portrait(density = null, fallback-class = null)
|
||||||
|
selected = selector()
|
||||||
|
if not (rupture.rasterise-media-queries)
|
||||||
|
if -is-string(density)
|
||||||
|
density = convert(density)
|
||||||
|
if density
|
||||||
|
+pixel-ratio(density, orientation: portrait, fallback-class)
|
||||||
|
{block}
|
||||||
|
else
|
||||||
|
@media only screen and (orientation: portrait)
|
||||||
|
{block}
|
||||||
|
if fallback-class
|
||||||
|
+create-fallback-class(selected, fallback-class)
|
||||||
|
{block}
|
||||||
@@ -0,0 +1,201 @@
|
|||||||
|
body.projects
|
||||||
|
background #323759
|
||||||
|
color #fff
|
||||||
|
|
||||||
|
::-moz-selection
|
||||||
|
background #f1eff9
|
||||||
|
::selection
|
||||||
|
background #f1eff9
|
||||||
|
|
||||||
|
.gradient-backgroud
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
width 100%
|
||||||
|
height 920px
|
||||||
|
background linear-gradient( 0deg, #323759, #5e50c3 33%, #c9b2cd )
|
||||||
|
|
||||||
|
p,
|
||||||
|
ul
|
||||||
|
font-size 14px
|
||||||
|
line-height 18px
|
||||||
|
margin-bottom 1em
|
||||||
|
|
||||||
|
code
|
||||||
|
font-family 'Ubuntu Mono'
|
||||||
|
|
||||||
|
section.landing
|
||||||
|
position relative
|
||||||
|
margin-bottom 60px
|
||||||
|
|
||||||
|
.logo
|
||||||
|
position absolute
|
||||||
|
top 315px
|
||||||
|
left 50%
|
||||||
|
|
||||||
|
.disks
|
||||||
|
.disk
|
||||||
|
position absolute
|
||||||
|
border-radius 50%
|
||||||
|
background #fff
|
||||||
|
transform translateX(-50%) translateY(-50%)
|
||||||
|
opacity 0.2
|
||||||
|
|
||||||
|
&.index-0
|
||||||
|
width 100px
|
||||||
|
height 100px
|
||||||
|
opacity 0.7
|
||||||
|
&.index-1
|
||||||
|
width 200px
|
||||||
|
height 200px
|
||||||
|
&.index-2
|
||||||
|
width 300px
|
||||||
|
height 300px
|
||||||
|
&.index-3
|
||||||
|
width 400px
|
||||||
|
height 400px
|
||||||
|
&.index-4
|
||||||
|
width 500px
|
||||||
|
height 500px
|
||||||
|
.title
|
||||||
|
font-size 45px
|
||||||
|
|
||||||
|
.letter
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
line-height 0
|
||||||
|
|
||||||
|
&.index-0
|
||||||
|
left 100px - 15px
|
||||||
|
&.index-1
|
||||||
|
left 150px - 15px
|
||||||
|
&.index-2
|
||||||
|
left 200px - 15px
|
||||||
|
&.index-3
|
||||||
|
left 250px - 15px
|
||||||
|
&.index-4
|
||||||
|
left 300px - 15px
|
||||||
|
&.index-5
|
||||||
|
left 350px - 15px
|
||||||
|
&.index-6
|
||||||
|
left 400px - 15px
|
||||||
|
|
||||||
|
.punch-line
|
||||||
|
padding-top 600px
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
.text
|
||||||
|
text-transform uppercase
|
||||||
|
font-size 18px
|
||||||
|
margin 0 0 8px 0
|
||||||
|
|
||||||
|
.links
|
||||||
|
a.link
|
||||||
|
display inline-block
|
||||||
|
padding 5px 10px
|
||||||
|
margin 0 5px
|
||||||
|
background rgba(255,255,255,0.2)
|
||||||
|
text-decoration none
|
||||||
|
transition background 0.15s
|
||||||
|
&:hover
|
||||||
|
background rgba(255,255,255,0.30)
|
||||||
|
|
||||||
|
section.projects
|
||||||
|
position relative
|
||||||
|
width 640px
|
||||||
|
margin 0 auto 90px auto
|
||||||
|
|
||||||
|
.head
|
||||||
|
height 45px
|
||||||
|
line-height 45px
|
||||||
|
background #333759
|
||||||
|
text-align center
|
||||||
|
font-size 14px
|
||||||
|
|
||||||
|
.content
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
span.no-project
|
||||||
|
display block
|
||||||
|
padding 17px 0
|
||||||
|
background #eef0fa
|
||||||
|
text-align center
|
||||||
|
color #6c6e7c
|
||||||
|
font-size 16px
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
.title
|
||||||
|
opacity 0.4
|
||||||
|
|
||||||
|
a.project
|
||||||
|
display block
|
||||||
|
background #eef0fa
|
||||||
|
color #6c6e7c
|
||||||
|
border-bottom 1px solid #dadada
|
||||||
|
transition background 0.15s
|
||||||
|
|
||||||
|
.title
|
||||||
|
display inline-block
|
||||||
|
vertical-align top
|
||||||
|
width 400px
|
||||||
|
font-size 16px
|
||||||
|
font-weight bold
|
||||||
|
padding 17px
|
||||||
|
|
||||||
|
.details
|
||||||
|
display inline-block
|
||||||
|
vertical-align top
|
||||||
|
width 240px
|
||||||
|
text-align right
|
||||||
|
|
||||||
|
.detail
|
||||||
|
display inline-block
|
||||||
|
padding 11px 10px
|
||||||
|
text-align right
|
||||||
|
|
||||||
|
.label
|
||||||
|
font-size 10px
|
||||||
|
opacity 0.5
|
||||||
|
margin-bottom 2px
|
||||||
|
|
||||||
|
.value
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
border-bottom none
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background #f6f7fc
|
||||||
|
|
||||||
|
section.text
|
||||||
|
position relative
|
||||||
|
width 640px
|
||||||
|
margin 0 auto 90px auto
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
.title
|
||||||
|
margin-bottom 18px
|
||||||
|
font-family 'Stellar'
|
||||||
|
font-size 32px
|
||||||
|
|
||||||
|
ul
|
||||||
|
display inline-block
|
||||||
|
text-align left
|
||||||
|
|
||||||
|
pre
|
||||||
|
width 400px
|
||||||
|
margin 0 auto 2em auto
|
||||||
|
background #282c47
|
||||||
|
padding 12px 18px
|
||||||
|
text-align left
|
||||||
|
|
||||||
|
span.line
|
||||||
|
&:before
|
||||||
|
display inline-block
|
||||||
|
content '$'
|
||||||
|
padding 0 8px 0 0
|
||||||
|
.opacity-20
|
||||||
|
opacity 0.2
|
||||||
|
pointer-events none
|
||||||
|
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
@import 'mixins/font-smoothing'
|
||||||
|
@import 'mixins/rupture'
|
||||||
|
|
||||||
|
@import 'base/reset'
|
||||||
|
@import 'base/fonts'
|
||||||
|
@import 'base/general'
|
||||||
|
|
||||||
|
@import 'pages/projects'
|
||||||
|
@import 'pages/project'
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
- var page_class = 'project'
|
||||||
include ../../partials/header.jade
|
include ../../partials/header.jade
|
||||||
|
|
||||||
script(type="text/ng-template",id="folder_template.html")
|
script(type="text/ng-template",id="folder_template.html")
|
||||||
|
|||||||
@@ -1,23 +1,96 @@
|
|||||||
|
- var page_class = 'projects'
|
||||||
include ../../partials/header.jade
|
include ../../partials/header.jade
|
||||||
|
|
||||||
section.page-projects(ng-controller="ProjectsController as controller")
|
.gradient-backgroud
|
||||||
.projects(ng-show="projects")
|
section.landing
|
||||||
.item.title
|
.logo
|
||||||
|
.disks
|
||||||
|
.disk.index-0
|
||||||
|
.disk.index-1
|
||||||
|
.disk.index-2
|
||||||
|
.disk.index-3
|
||||||
|
.disk.index-4
|
||||||
|
.title
|
||||||
|
span.letter.index-0= 'K'
|
||||||
|
span.letter.index-1= 'E'
|
||||||
|
span.letter.index-2= 'P'
|
||||||
|
span.letter.index-3= 'P'
|
||||||
|
span.letter.index-4= 'L'
|
||||||
|
span.letter.index-5= 'E'
|
||||||
|
span.letter.index-6= 'R'
|
||||||
|
.punch-line
|
||||||
|
.text
|
||||||
|
| An efficient way to share your code while presenting
|
||||||
|
.links
|
||||||
|
a.link(href="http://github.com/brunosimon/keppler",target="_blank")
|
||||||
|
| github
|
||||||
|
a.link(href="http://bruno-simon.com",target="_blank")
|
||||||
|
| bruno simon
|
||||||
|
section.projects(ng-controller="ProjectsController as controller")
|
||||||
|
.container
|
||||||
|
.head
|
||||||
| Projects
|
| Projects
|
||||||
a.item(href="/project/{{project.slug}}",ng-repeat="project in projects")
|
.content
|
||||||
.name
|
span.no-project(ng-hide="projects")
|
||||||
| {{project.name}}
|
.title
|
||||||
.file-count
|
|
||||||
| Files: {{project.files_count}}
|
|
||||||
.creation
|
|
||||||
| Creation: {{project.date_formated}}
|
|
||||||
.time-from-now
|
|
||||||
| {{project.time_from_now}}
|
|
||||||
.last-update-date
|
|
||||||
| Last update: {{project.last_update_date_formated}}
|
|
||||||
.time-from-now
|
|
||||||
| {{project.last_update_time_from_now}}
|
|
||||||
.no-project(ng-hide="projects")
|
|
||||||
| No project
|
| No project
|
||||||
|
a.project(href="/project/{{project.slug}}",ng-repeat="project in projects")
|
||||||
|
.title
|
||||||
|
| {{project.name}}
|
||||||
|
.details
|
||||||
|
.detail
|
||||||
|
.label
|
||||||
|
| created at
|
||||||
|
.value
|
||||||
|
| {{project.date_formated}}
|
||||||
|
.detail
|
||||||
|
.label
|
||||||
|
| last update
|
||||||
|
.value
|
||||||
|
| {{project.last_update_date_formated}}
|
||||||
|
.detail
|
||||||
|
.label
|
||||||
|
| files
|
||||||
|
.value
|
||||||
|
| {{project.files_count}}
|
||||||
|
section.text
|
||||||
|
.title
|
||||||
|
| What is keppler
|
||||||
|
.description
|
||||||
|
p
|
||||||
|
| Keppler lets you share your code simply during a presentation.
|
||||||
|
br
|
||||||
|
| The tool displays the hierarchy of files and their history. It indicates the arrival of new versions of a file and displays which parts have changed.
|
||||||
|
p
|
||||||
|
| Viewers can easily browse files and history while following the presentation.
|
||||||
|
p
|
||||||
|
| Keppler is easy to install and works with NodeJS.
|
||||||
|
|
||||||
|
section.text
|
||||||
|
.title
|
||||||
|
| Instructions
|
||||||
|
.description
|
||||||
|
p
|
||||||
|
| Requirements:
|
||||||
|
ul
|
||||||
|
li
|
||||||
|
| - NodeJS installed
|
||||||
|
li
|
||||||
|
| - Spectators connected to the same wifi
|
||||||
|
p
|
||||||
|
| Install Keppler globally
|
||||||
|
pre
|
||||||
|
code
|
||||||
|
span.line.opacity-20
|
||||||
|
| npm install -g keppler
|
||||||
|
p
|
||||||
|
| Go to the project folder and start Keppler
|
||||||
|
pre
|
||||||
|
code
|
||||||
|
span.line.opacity-20
|
||||||
|
| cd ./my-awesome-project
|
||||||
|
br
|
||||||
|
span.line.opacity-20
|
||||||
|
| keppler "My project"
|
||||||
|
|
||||||
include ../../partials/footer.jade
|
include ../../partials/footer.jade
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
html(ng-app="application")
|
html(ng-app="application")
|
||||||
head
|
head
|
||||||
title
|
title
|
||||||
| Code Spectat
|
| Keppler
|
||||||
script.
|
script.
|
||||||
var config = {
|
var config = {
|
||||||
domain : '#{domain}'
|
domain : '#{domain}'
|
||||||
@@ -20,8 +20,7 @@ html(ng-app="application")
|
|||||||
script(src="/javascript/services/projects.js")
|
script(src="/javascript/services/projects.js")
|
||||||
script(src="/javascript/models/tree.js")
|
script(src="/javascript/models/tree.js")
|
||||||
|
|
||||||
link(rel="stylesheet",href="/stylesheets/reset.min.css")
|
link(rel="stylesheet",href="/stylesheet/style.css")
|
||||||
link(rel="stylesheet",href="/stylesheets/style.css")
|
|
||||||
link(rel="stylesheet",href="/vendors/highlight/styles/dracula.css")
|
link(rel="stylesheet",href="/vendors/highlight/styles/dracula.css")
|
||||||
//- link(rel="stylesheet",href="/vendors/highlight/styles/atom-one-dark.css")
|
//- link(rel="stylesheet",href="/vendors/highlight/styles/atom-one-dark.css")
|
||||||
//- link(rel="stylesheet",href="/vendors/highlight/styles/gruvbox-dark.css")
|
//- link(rel="stylesheet",href="/vendors/highlight/styles/gruvbox-dark.css")
|
||||||
@@ -32,8 +31,4 @@ html(ng-app="application")
|
|||||||
//- link(rel="stylesheet",href="/vendors/highlight/styles/tomorrow-night.css")
|
//- link(rel="stylesheet",href="/vendors/highlight/styles/tomorrow-night.css")
|
||||||
|
|
||||||
link(rel="stylesheet",href="/vendors/font-awesome/css/font-awesome.min.css")
|
link(rel="stylesheet",href="/vendors/font-awesome/css/font-awesome.min.css")
|
||||||
body
|
body(class=page_class)
|
||||||
header.main-header
|
|
||||||
h1
|
|
||||||
a(href=domain)
|
|
||||||
| Code Spectat
|
|
||||||
|
|||||||
Reference in New Issue
Block a user