14 changed files with 452 additions and 1 deletions
@ -0,0 +1,9 @@
|
||||
// CSS Normalize |
||||
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button], input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} |
||||
|
||||
// clearfix |
||||
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } |
||||
|
||||
// Sane border box |
||||
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
||||
@ -0,0 +1,25 @@
|
||||
html |
||||
font-size 62.5% |
||||
|
||||
body |
||||
background #D4D4D4 |
||||
-webkit-font-smoothing antialiased |
||||
-moz-osx-font-smoothing grayscale |
||||
font-family 'Open Sans', sans-serif |
||||
font-size 2rem |
||||
|
||||
h1 |
||||
text-align center |
||||
font-weight normal |
||||
margin 0 |
||||
|
||||
h2,h3,h4,h5,h6 |
||||
font-weight normal |
||||
|
||||
h2 |
||||
text-align center |
||||
margin-top 0 |
||||
margin-bottom 2rem |
||||
|
||||
h3 |
||||
font-size 3rem |
||||
@ -0,0 +1,292 @@
|
||||
// Import all partials |
||||
@require './_*.styl' |
||||
|
||||
header.top |
||||
text-align center |
||||
h1 |
||||
font-size 14.4rem |
||||
line-height 0.7 // this font has a wacky baseline |
||||
display flex |
||||
justify-content: center; |
||||
|
||||
// This is a bunch of goofy CSS to make the logo look decent |
||||
.ofThe |
||||
display flex |
||||
font-size 3rem |
||||
color orange |
||||
justify-content: center; |
||||
align-items: center; |
||||
background url('images/anchor.svg') center no-repeat; |
||||
background-size cover |
||||
padding 0 1rem |
||||
.of |
||||
padding-right 2rem |
||||
position relative |
||||
right -0.5rem |
||||
h3 |
||||
margin 0 |
||||
font-size 2rem |
||||
color orange |
||||
position relative |
||||
display inline-block |
||||
span |
||||
background white |
||||
position relative |
||||
z-index 2 |
||||
padding-left 1rem |
||||
padding-right 1rem |
||||
&:before, &:after |
||||
display block |
||||
z-index 1 |
||||
background black |
||||
position absolute |
||||
width 130% |
||||
height 1px |
||||
content '' |
||||
top 5px |
||||
margin-left -15% |
||||
&:after |
||||
top auto |
||||
bottom 7px |
||||
|
||||
|
||||
.catch-of-the-day |
||||
display flex |
||||
height 90vh |
||||
max-width:1500px |
||||
margin 0 auto |
||||
margin-top 5vh |
||||
perspective: 1000; |
||||
transform-style preserve-3d |
||||
& > * |
||||
flex 1 4 auto |
||||
padding 2rem |
||||
border 1rem double lighten(black,10%) |
||||
position relative |
||||
background white |
||||
transition all 0.3s |
||||
box-shadow 0px 5px 5px rgba(0,0,0,0.1) |
||||
overflow scroll |
||||
&:first-child |
||||
flex-shrink 1 // take 4x the extra room |
||||
flex-basis 50% |
||||
transform translateX(50%) rotateY(6deg) translateX(-50%) |
||||
&:nth-child(2) |
||||
transform translateX(-50%) rotateY(-14deg) translateX(50%) |
||||
border-left 0 |
||||
border-right 0 |
||||
min-width 300px |
||||
&:last-child |
||||
flex-shrink 1 // take 4x the extra room |
||||
flex-basis 50% |
||||
transform translateX(-50%) rotateY(10deg) translateX(50%) scale(1.08) translateX(24px) |
||||
|
||||
// Folding Transforms |
||||
// Take off folding when not checked |
||||
input#fold:not(:checked) ~ #main |
||||
.catch-of-the-day > * |
||||
transform none |
||||
|
||||
label[for="fold"] |
||||
position absolute |
||||
top 1rem |
||||
left 1rem |
||||
text-transform uppercase |
||||
font-size 1.3rem |
||||
background black |
||||
color white |
||||
border 2px solid black |
||||
cursor pointer |
||||
padding 0.5rem 1rem |
||||
|
||||
input#fold |
||||
display none |
||||
&:checked + label |
||||
background white |
||||
color black |
||||
|
||||
ul |
||||
list-style none |
||||
margin 0 |
||||
padding 0 |
||||
|
||||
ul.order |
||||
li |
||||
border-bottom 1px solid black |
||||
padding 2rem 0 |
||||
display flex |
||||
font-size 1.4rem |
||||
justify-content space-between |
||||
align-items center |
||||
&:hover |
||||
// padding 1rem 0 |
||||
button |
||||
display inline |
||||
button |
||||
border 0 |
||||
display none |
||||
line-height 1 |
||||
padding 0 |
||||
&.total |
||||
font-weight 600 |
||||
border-bottom 3px solid black |
||||
border-top 3px double black |
||||
&.unavailable |
||||
text-decoration line-through |
||||
background lighten(red, 80%) |
||||
.price |
||||
font-size 1.2rem |
||||
span.count |
||||
position relative |
||||
overflow hidden |
||||
float left // only works if it's floated?! |
||||
span |
||||
display inline-block |
||||
// transition all 0.5s |
||||
|
||||
.order-title |
||||
text-align center |
||||
|
||||
.fish-edit |
||||
margin-bottom 20px |
||||
border 2px solid black |
||||
overflow hidden |
||||
display flex |
||||
flex-wrap wrap |
||||
input, textarea, select |
||||
width 33.33% |
||||
padding 10px |
||||
line-height 1 |
||||
font-size 1.2rem |
||||
border 0 |
||||
border-bottom 1px solid black |
||||
border-right 1px solid black |
||||
appearance none |
||||
border-radius 0 |
||||
background white |
||||
&:focus |
||||
outline 0 |
||||
background lighten(orange, 85%) |
||||
textarea |
||||
width 100% |
||||
input:last-of-type |
||||
width 100% |
||||
button |
||||
width 100% |
||||
border 0 |
||||
|
||||
|
||||
// Menu Styles |
||||
.list-of-fish |
||||
border-top 2px solid black |
||||
border-bottom 1px solid black |
||||
padding-top 5px |
||||
margin-top 2rem |
||||
transform translateZ(0); |
||||
|
||||
.menu-fish |
||||
border-bottom 2px solid black |
||||
border-top 1px solid black |
||||
padding-bottom 2rem |
||||
padding-top 2rem |
||||
margin-bottom 5px |
||||
clear both |
||||
overflow hidden |
||||
p |
||||
margin 0 |
||||
font-size 1.8rem |
||||
.fish-name |
||||
margin 0 |
||||
display flex |
||||
justify-content space-between |
||||
align-items center |
||||
.price |
||||
font-size 1.4rem |
||||
// color orange |
||||
justify-content flex-end |
||||
// font-family 'Open Sans Condensed' |
||||
img |
||||
float left |
||||
width 150px |
||||
margin-right 1rem |
||||
|
||||
button, input[type=submit] |
||||
text-transform uppercase |
||||
background none |
||||
border 1px solid black |
||||
font-weight 600 |
||||
font-size 1.5rem |
||||
font-family 'Open Sans' |
||||
transition all 0.2s |
||||
position relative |
||||
z-index 2 |
||||
&[disabled] |
||||
color red |
||||
background white |
||||
border-color red |
||||
transform rotate(-10deg) scale(2) translateX(50%) translateY(-50%) |
||||
&:hover |
||||
color red |
||||
cursor not-allowed |
||||
&:after |
||||
display none |
||||
&:after |
||||
content '' |
||||
z-index -1 |
||||
display block |
||||
background black |
||||
position absolute |
||||
width 100% |
||||
height 0% |
||||
left 0 |
||||
top 0 |
||||
transition all 0.2s |
||||
&:hover, &:focus |
||||
color white |
||||
outline 0 |
||||
&:after |
||||
height 100% |
||||
// variants |
||||
&.warning |
||||
&:after |
||||
background red |
||||
&.success |
||||
&:after |
||||
background green |
||||
|
||||
&.github, &.facebook, &.twitter |
||||
border 0 |
||||
display block |
||||
margin-bottom 2rem |
||||
width 100% |
||||
color white |
||||
padding 2rem |
||||
|
||||
&.github |
||||
background #82D465 |
||||
&:after |
||||
background darken(#82D465, 20%) |
||||
|
||||
&.facebook |
||||
background #3864A3 |
||||
&:after |
||||
background darken(#3864A3, 20%) |
||||
|
||||
&.twitter |
||||
background #5EA9DD |
||||
&:after |
||||
background darken(#5EA9DD, 20%) |
||||
|
||||
|
||||
// Store Selector |
||||
.store-selector |
||||
background white |
||||
max-width 500px |
||||
margin 50px auto |
||||
padding 2rem |
||||
border 2px solid black |
||||
input |
||||
width 100% |
||||
&[type="text"] |
||||
text-align center |
||||
font-size 3rem |
||||
@ -0,0 +1,111 @@
|
||||
var source = require('vinyl-source-stream'); |
||||
var gulp = require('gulp'); |
||||
var gutil = require('gulp-util'); |
||||
var browserify = require('browserify'); |
||||
var babelify = require('babelify'); |
||||
var watchify = require('watchify'); |
||||
var notify = require('gulp-notify'); |
||||
|
||||
var stylus = require('gulp-stylus'); |
||||
var autoprefixer = require('gulp-autoprefixer'); |
||||
var uglify = require('gulp-uglify'); |
||||
var rename = require('gulp-rename'); |
||||
var buffer = require('vinyl-buffer'); |
||||
|
||||
var browserSync = require('browser-sync'); |
||||
var reload = browserSync.reload; |
||||
var historyApiFallback = require('connect-history-api-fallback') |
||||
|
||||
|
||||
/* |
||||
Styles Task |
||||
*/ |
||||
|
||||
gulp.task('styles',function() { |
||||
// move over fonts
|
||||
|
||||
gulp.src('css/fonts/**.*') |
||||
.pipe(gulp.dest('build/css/fonts')) |
||||
|
||||
// Compiles CSS
|
||||
gulp.src('css/style.styl') |
||||
.pipe(stylus()) |
||||
.pipe(autoprefixer()) |
||||
.pipe(gulp.dest('./build/css/')) |
||||
.pipe(reload({stream:true})) |
||||
}); |
||||
|
||||
/* |
||||
Images |
||||
*/ |
||||
gulp.task('images',function(){ |
||||
gulp.src('css/images/**') |
||||
.pipe(gulp.dest('./build/css/images')) |
||||
}); |
||||
|
||||
/* |
||||
Browser Sync |
||||
*/ |
||||
gulp.task('browser-sync', function() { |
||||
browserSync({ |
||||
// we need to disable clicks and forms for when we test multiple rooms
|
||||
server : {}, |
||||
middleware : [ historyApiFallback() ], |
||||
ghostMode: false |
||||
}); |
||||
}); |
||||
|
||||
function handleErrors() { |
||||
var args = Array.prototype.slice.call(arguments); |
||||
notify.onError({ |
||||
title: 'Compile Error', |
||||
message: '<%= error.message %>' |
||||
}).apply(this, args); |
||||
this.emit('end'); // Keep gulp from hanging on this task
|
||||
} |
||||
|
||||
function buildScript(file, watch) { |
||||
var props = { |
||||
entries: ['./src/' + file], |
||||
debug : true, |
||||
transform: [babelify.configure({ stage : 0 })], |
||||
cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
|
||||
}; |
||||
|
||||
// watchify() if watch requested, otherwise run browserify() once
|
||||
var bundler = watch ? watchify(browserify(props)) : browserify(props); |
||||
|
||||
function rebundle() { |
||||
var stream = bundler.bundle(); |
||||
return stream |
||||
.on('error', handleErrors) |
||||
.pipe(source(file)) |
||||
.pipe(rename('build.js')) |
||||
.pipe(gulp.dest('./build/')) |
||||
// If you also want to uglify it
|
||||
// .pipe(buffer())
|
||||
// .pipe(uglify())
|
||||
// .pipe(rename('app.min.js'))
|
||||
// .pipe(gulp.dest('./build'))
|
||||
.pipe(reload({stream:true})) |
||||
} |
||||
|
||||
// listen for an update and run rebundle
|
||||
bundler.on('update', function() { |
||||
rebundle(); |
||||
gutil.log('Rebundle...'); |
||||
}); |
||||
|
||||
// run it once the first time buildScript is called
|
||||
return rebundle(); |
||||
} |
||||
|
||||
gulp.task('scripts', function() { |
||||
return buildScript('app.jsx', false); // this will run once because we set watch to false
|
||||
}); |
||||
|
||||
// run 'scripts' task first, then watch for future changes
|
||||
gulp.task('default', ['images','styles','scripts','browser-sync'], function() { |
||||
gulp.watch('css/**/*', ['styles']); // gulp watch for stylus changes
|
||||
return buildScript('app.jsx', true); // browserify watch for JS changes
|
||||
}); |
||||
Loading…
Reference in new issue