From 24397df0943f2ebe3c7088b7429057713e96fada Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 1 Aug 2015 00:35:30 +0200 Subject: [PATCH] refactor all the things, needs gulp --- .gitignore | 3 + README.md | 12 + gulpfile.js | 188 ++++++++++++++++ html/css/kretschmannio.css | 1 - html/index.html | 31 --- html/less/mixins.less | 304 -------------------------- package.json | 30 +++ src/index.html | 48 ++++ {html => src}/less/kretschmannio.less | 83 ++++--- {html => src}/less/normalize.less | 0 {html => src}/less/variables.less | 4 +- 11 files changed, 320 insertions(+), 384 deletions(-) create mode 100644 .gitignore create mode 100644 gulpfile.js delete mode 100644 html/css/kretschmannio.css delete mode 100644 html/index.html delete mode 100644 html/less/mixins.less create mode 100644 package.json create mode 100644 src/index.html rename {html => src}/less/kretschmannio.less (69%) rename {html => src}/less/normalize.less (100%) rename {html => src}/less/variables.less (94%) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7392993 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +dist +node_modules +.awspublish-* diff --git a/README.md b/README.md index 2e28f1c..5ee90dd 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,15 @@ kretschmann.io ============== placeholder thingy + +## Development + +`npm install` + +`gulp` + +`gulp build` + +`gulp dist` + +`gulp deploy` diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..3b0ec4e --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,188 @@ +'use strict' + +// manually require modules that won"t get picked up by gulp-load-plugins +var gulp = require('gulp'), + del = require('del'), + chalk = require('chalk'), + parallelize = require('concurrent-transform'); + +// load plugins +var $ = require('gulp-load-plugins')(); + +// Temporary solution until gulp 4 +// https://github.com/gulpjs/gulp/issues/355 +var runSequence = require('run-sequence'); + +// handle errors +var onError = function(error) { + console.log(chalk.red('You fucked up:', error.message, 'on line' , error.lineNumber)); +} + +var src = 'src/', + dist = 'dist/', + s3bucket = 'kretschmann.io', + s3region = 'eu-west-1'; + +// +// clean everything +// +gulp.task('clean', function (cb) { + return del([ + dist + '**/*' + ], cb); +}); + + +// +// Styles +// +gulp.task('css', function () { + return gulp.src(src + 'less/kretschmannio.less') + .pipe($.less()).on('error', onError) + .pipe($.combineMq({ beautify: false })) + .pipe($.autoprefixer({ browsers: 'last 4 versions' })) + .pipe($.cssmin()) + .pipe($.rename({suffix: '.min'})) + .pipe(gulp.dest(dist + 'assets/css')) + .pipe($.connect.reload()); +}); + + +// +// Copy everything +// +gulp.task('copy', function () { + return gulp.src([ + src + '**/*', + '!' + src + 'less/**/*' + ]) + .pipe(gulp.dest(dist)); +}); + + +// +// Optimize HTML +// +gulp.task('optimize:html', function() { + return gulp.src(dist + '**/*.html') + .pipe($.htmlmin({ + collapseWhitespace: true, + conservativeCollapse: true, + removeComments: true, + useShortDoctype: true, + collapseBooleanAttributes: true, + removeRedundantAttributes: true, + removeEmptyAttributes: true + })) + .pipe(gulp.dest(dist)); +}); + + +// +// Revision static assets +// +gulp.task('revision', function () { + return gulp.src(dist + '**/*.{css,js,png,jpg,jpeg,svg,gif}') + .pipe($.rev()) + .pipe(gulp.dest(dist)) + // output rev manifest for next replace task + .pipe($.rev.manifest()) + .pipe(gulp.dest(dist + 'assets')); +}); + + +// +// Replace all links to assets in files +// from a manifest file +// +gulp.task('revision-replace', function () { + + var manifest = gulp.src(dist + 'assets/rev-manifest.json'); + + return gulp.src(dist + '**/*.{json,html,css}') + .pipe($.revReplace({manifest: manifest})) + .pipe(gulp.dest(dist)); +}); + + +// +// Dev Server +// +gulp.task('connect', function () { + return $.connect.server({ + root: [dist], + livereload: true, + port: 1337 + }); +}); + + +// +// Watch task +// +gulp.task('watch', function () { + gulp.watch([src + '**/*.{html,xml,json}'], ['html']); + gulp.watch([src + 'less/**/*.less'], ['css']); +}); + + +// +// S3 Deployment +// +gulp.task('s3', function() { + + var publisher = $.awspublish.create({ + params: { 'Bucket': s3bucket }, 'region': s3region + }); + + // define custom headers + var headers = { + 'Cache-Control': 'max-age=315360000, no-transform, public', + 'x-amz-acl': 'public-read' + }; + + return gulp.src(dist + '**/*') + .pipe($.awspublish.gzip({ ext: '' })) // gzip all the things + .pipe(parallelize(publisher.publish(), 10)) + .pipe(publisher.sync()) // delete files in bucket that are not in local folder + .pipe(publisher.cache()) + .pipe($.awspublish.reporter({ states: ['create', 'update', 'delete'] })); +}); + + +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +// Task sequences +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + + +// +// gulp +// +gulp.task('default', ['css', 'copy', 'watch', 'connect']); + + +// +// gulp build: Production build +// +gulp.task('build', function (callback) { + runSequence( + 'clean', + ['css', 'copy'], + 'revision', + 'revision-replace', + 'optimize:html', + callback + ); +}); + + +// +// gulp deploy: Deployment with fresh production build +// +gulp.task('deploy', function (callback) { + runSequence( + 'build', + 's3', + callback + ); +}); diff --git a/html/css/kretschmannio.css b/html/css/kretschmannio.css deleted file mode 100644 index 9075741..0000000 --- a/html/css/kretschmannio.css +++ /dev/null @@ -1 +0,0 @@ -/*! normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,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%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}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:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html 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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html,body{background-color:#e7eef4}body{padding:5%;font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.4em;text-align:center;color:#61737c}a{color:#3a9085;text-decoration:none}a:hover{color:#245953;text-decoration:underline}h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.2;color:#015565;margin:30px 0 10px}h1{font-size:17.5px}p{margin:0 0 15px}ol,ul{margin:0 0 15px 25px;padding:0}.list-unstyled{margin-left:0}.list-unstyled li{display:block}.btn{margin-bottom:5px;padding:.5em 1.5em;line-height:1;display:inline-block;color:#3a9085;text-align:center;letter-spacing:-1px;background:#e0e9f1;border-radius:3px}.btn:hover,.btn:active{color:#fff;text-decoration:none;background-color:#3a9085}.btn:active{background-color:#015565}footer{margin-top:5.6em}@media screen and (min-width:820px){body{padding:10%}.btn{margin-bottom:0}.container{margin-left:30%;margin-right:10%;padding-left:0;padding-right:0}}@media screen and (min-width:1100px){body{padding:15%;font-size:17.5px}h1{font-size:21.875px}} \ No newline at end of file diff --git a/html/index.html b/html/index.html deleted file mode 100644 index 253cbff..0000000 --- a/html/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - kretschmann.io - - - - - -
-

kretschmann.io

-
- -

nothing to see here

- - - - \ No newline at end of file diff --git a/html/less/mixins.less b/html/less/mixins.less deleted file mode 100644 index a0d7a1e..0000000 --- a/html/less/mixins.less +++ /dev/null @@ -1,304 +0,0 @@ - -// -// Mixins: vendor prefixes -// -------------------------------------------------- - -// Box sizing -.box-sizing(@box-model) { - -webkit-box-sizing: @box-model; // Safari <= 5 - -moz-box-sizing: @box-model; // Firefox <= 19 - box-sizing: @box-model; -} - -// Single side border-radius -.border-top-radius(@radius) { - border-top-right-radius: @radius; - border-top-left-radius: @radius; -} -.border-right-radius(@radius) { - border-bottom-right-radius: @radius; - border-top-right-radius: @radius; -} -.border-bottom-radius(@radius) { - border-bottom-right-radius: @radius; - border-bottom-left-radius: @radius; -} -.border-left-radius(@radius) { - border-bottom-left-radius: @radius; - border-top-left-radius: @radius; -} - -// Drop shadows -.box-shadow(@shadow) { - -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 - box-shadow: @shadow; -} - -// Transitions -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -o-transition: @transition; - transition: @transition; -} -.transition-delay(@transition-delay) { - -webkit-transition-delay: @transition-delay; - -moz-transition-delay: @transition-delay; - -o-transition-delay: @transition-delay; - transition-delay: @transition-delay; -} -.transition-duration(@transition-duration) { - -webkit-transition-duration: @transition-duration; - -moz-transition-duration: @transition-duration; - -o-transition-duration: @transition-duration; - transition-duration: @transition-duration; -} - -// Transformations -.rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -moz-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); - -o-transform: rotate(@degrees); - transform: rotate(@degrees); -} -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); -} -.translate(@x, @y) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); -} -.skew(@x, @y) { - -webkit-transform: skew(@x, @y); - -moz-transform: skew(@x, @y); - -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885 - -o-transform: skew(@x, @y); - transform: skew(@x, @y); - -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 -} -.translate3d(@x, @y, @z) { - -webkit-transform: translate3d(@x, @y, @z); - -moz-transform: translate3d(@x, @y, @z); - -o-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); -} - -// Backface visibility -// -// Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden -// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples -.backface-visibility(@visibility){ - -webkit-backface-visibility: @visibility; - -moz-backface-visibility: @visibility; - backface-visibility: @visibility; -} - -// User select -// -// For selecting text on the page -.user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -ms-user-select: @select; - -o-user-select: @select; - user-select: @select; -} - -// Opacity -.opacity(@opacity) { - opacity: @opacity; - @opacity-ie: @opacity * 100; - filter: ~"alpha(opacity=@{opacity-ie})"; // IE8 -} - -// Placeholder text -.placeholder(@color: @input-color-placeholder) { - &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; } // Firefox 19+ - &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ - &::-webkit-input-placeholder { color: @color; } // Safari and Chrome -} - -// Resize anything -.resizable(@direction) { - resize: @direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -.content-columns(@width, @count, @gap) { - -webkit-column-width: @width; - -moz-column-width: @width; - column-width: @width; - -webkit-column-count: @count; - -moz-column-count: @count; - column-count: @count; - -webkit-column-gap: @gap; - -moz-column-gap: @gap; - column-gap: @gap; -} - -// Optional hyphenation -.hyphens(@mode: auto) { - word-wrap: break-word; - -webkit-hyphens: @mode; - -moz-hyphens: @mode; - -ms-hyphens: @mode; - -o-hyphens: @mode; - hyphens: @mode; -} - -// Gradients -#gradient { - .horizontal(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down - } - .vertical(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down - } - .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 - } - .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); - background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback - } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); - background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback - } - .radial(@innerColor: #555, @outerColor: #333) { - background-color: @outerColor; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); - background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); - background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); - background-image: -o-radial-gradient(circle, @innerColor, @outerColor); - background-repeat: no-repeat; - } - .striped(@color: #555, @angle: 45deg) { - background-color: @color; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - } -} - -// Reset filters for IE -// -// Useful for when you want to remove a gradient from an element. -.reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - - - -// -// Mixins: utilities -// -------------------------------------------------- - -// Clearfix -// -// Source: http://nicolasgallagher.com/micro-clearfix-hack/ -// -// For modern browsers -// 1. The space content is one way to avoid an Opera bug when the -// contenteditable attribute is included anywhere else in the document. -// Otherwise it causes space to appear at the top and bottom of elements -// that are clearfixed. -// 2. The use of `table` rather than `block` is only necessary if using -// `:before` to contain the top-margins of child elements. -.clearfix() { - &:before, - &:after { - content: " "; // 1 - display: table; // 2 - } - &:after { - clear: both; - } -} - -// Center-align a block level element -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -.size(@width, @height) { - width: @width; - height: @height; -} -.square(@size) { - .size(@size, @size); -} - -// Text overflow -// -// Requires inline-block or block for proper styling -.text-truncate() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// Retina images -// -// Retina background-image support with non-retina fall back -.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) { - background-image: url("@{file-1x}"); - - @media - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and ( min--moz-device-pixel-ratio: 2), - only screen and ( -o-min-device-pixel-ratio: 2/1), - only screen and ( min-device-pixel-ratio: 2), - only screen and ( min-resolution: 192dpi), - only screen and ( min-resolution: 2dppx) { - background-image: url("@{file-2x}"); - background-size: @width-1x @height-1x; - } -} diff --git a/package.json b/package.json new file mode 100644 index 0000000..4b22b90 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "kretschmannio", + "version": "0.0.1", + "description": "", + "devDependencies": { + "chalk": ">=1.0.0", + "concurrent-transform": ">=1.0.0", + "del": ">=1.2.0", + "gulp": ">=3.8.0", + "gulp-autoprefixer": ">=2.3.0", + "gulp-awspublish": ">=2.0.2", + "gulp-combine-mq": ">=0.4.0", + "gulp-connect": ">=2.0.5", + "gulp-cssmin": ">=0.1.7", + "gulp-htmlmin": ">=1.1.3", + "gulp-less": ">=3.0.0", + "gulp-load-plugins": ">=0.10.0", + "gulp-rename": ">=1.2.2", + "gulp-rev": ">=4.0.0", + "gulp-rev-replace": ">=0.4.1", + "run-sequence": ">=1.1.0" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/kremalicious/kretschmann.io.git" + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..e5a7578 --- /dev/null +++ b/src/index.html @@ -0,0 +1,48 @@ + + + + + kretschmann.io + + + + + + + + + + + + + + +
+
+

kretschmann.io

+
+ + +
+ + + + + + diff --git a/html/less/kretschmannio.less b/src/less/kretschmannio.less similarity index 69% rename from html/less/kretschmannio.less rename to src/less/kretschmannio.less index 1797aff..448f5e5 100644 --- a/html/less/kretschmannio.less +++ b/src/less/kretschmannio.less @@ -5,32 +5,56 @@ @import "variables.less"; @import "normalize.less"; -@import "mixins.less"; // // Stuff // +// Reset the box-sizing +* { + &, + &:before, + &:after { + box-sizing: border-box; + } +} + +html, +body, +body > section { height: 100%; } html, body { background-color: @body-background; } + body { - padding: 5%; + padding: 10%; font-family: @font-family-sans-serif; font-size: @font-size-base; font-weight: 400; line-height: @line-height-base; text-align: center; color: @text-color; + + > section { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + } + + @media screen and (min-width: 1100px) { + font-size: @font-size-large; + } } // Links a { color: @link-color; text-decoration: none; + transition: all .2s ease-in-out; &:hover { color: @link-color-hover; text-decoration: underline; @@ -49,6 +73,11 @@ h1, h2, h3, h4, h5, h6 { h1 { font-size: @font-size-large; + margin-top: 0; + + @media screen and (min-width: 1100px) { + font-size: @font-size-large*1.25; + } } p { @@ -60,13 +89,6 @@ ul { margin: 0 0 15px 25px; padding: 0; } -.list-unstyled { - margin-left: 0; - li { - display: block; - } - -} // Buttons @@ -77,9 +99,13 @@ ul { display: inline-block; color: @link-color; text-align: center; - letter-spacing: -1px; background: darken(@brand-light, 2%); border-radius: 3px; + font-size: @font-size-small; + + @media screen and (min-width: 1100px) { + font-size: @font-size-base; + } &:hover, &:active { @@ -95,40 +121,5 @@ ul { } footer { - margin-top: @line-height-base*4; -} - -// Responsive -@media screen and (min-width: 820px) { - - body { - padding: 10%; - } - - .btn { - - margin-bottom: 0; - } - - // Push over the container contents to make room - .container { - margin-left: 30%; - margin-right: 10%; - padding-left: 0; - padding-right: 0; - } - -} - -// Larger responsive -@media screen and (min-width: 1100px) { - body { - padding: 15%; - font-size: @font-size-large; - } - - h1 { - font-size: @font-size-large*1.25; - } - + margin-top: @line-height-base*2; } diff --git a/html/less/normalize.less b/src/less/normalize.less similarity index 100% rename from html/less/normalize.less rename to src/less/normalize.less diff --git a/html/less/variables.less b/src/less/variables.less similarity index 94% rename from html/less/variables.less rename to src/less/variables.less index fa335fc..6cee21f 100644 --- a/html/less/variables.less +++ b/src/less/variables.less @@ -28,7 +28,7 @@ @font-family-sans-serif: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-base: @font-family-sans-serif; -@font-size-base: 14px; +@font-size-base: 16px; @font-size-large: @font-size-base * 1.25; // ~18px @font-size-small: @font-size-base * 0.85; // ~12px @font-size-mini: @font-size-base * 0.75; // ~11px @@ -36,4 +36,4 @@ @line-height-base: 1.4em; @headings-font-family: inherit; -@headings-font-weight: 500; \ No newline at end of file +@headings-font-weight: 500;