mirror of
https://github.com/kremalicious/kretschmann.io.git
synced 2024-12-29 16:17:42 +01:00
refactor all the things, needs gulp
This commit is contained in:
$GIT_AUTHOR_NAME
parent
cd24f8ac7a
commit
24397df094
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
dist
|
||||
node_modules
|
||||
.awspublish-*
|
||||
12
README.md
12
README.md
@ -2,3 +2,15 @@ kretschmann.io
|
||||
==============
|
||||
|
||||
placeholder thingy
|
||||
|
||||
## Development
|
||||
|
||||
`npm install`
|
||||
|
||||
`gulp`
|
||||
|
||||
`gulp build`
|
||||
|
||||
`gulp dist`
|
||||
|
||||
`gulp deploy`
|
||||
|
||||
188
gulpfile.js
Normal file
188
gulpfile.js
Normal file
@ -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
|
||||
);
|
||||
});
|
||||
@ -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}}
|
||||
@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width; initial-scale=1">
|
||||
<link href="http://gmpg.org/xfn/11" rel="profile">
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="css/kretschmannio.css">
|
||||
|
||||
<title>kretschmann.io</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>kretschmann.io</h1>
|
||||
</header>
|
||||
|
||||
<p>nothing to see here</p>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
<a href="http://matthiaskretschmann.com" class="btn">portfolio</a>
|
||||
<a href="http://kremalicious.com" class="btn">blog</a>
|
||||
<a href="https://twitter.com/kremalicious" class="btn">twitter</a>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
30
package.json
Normal file
30
package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
48
src/index.html
Normal file
48
src/index.html
Normal file
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<title>kretschmann.io</title>
|
||||
|
||||
<meta name="author" content="Matthias Kretschmann">
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="http://gmpg.org/xfn/11" rel="profile">
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="/assets/css/kretschmannio.min.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section role="document">
|
||||
<header>
|
||||
<h1>kretschmann.io</h1>
|
||||
</header>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
<a href="http://matthiaskretschmann.com" class="btn">portfolio</a>
|
||||
<a href="http://kremalicious.com" class="btn">blog</a>
|
||||
<a href="https://twitter.com/kremalicious" class="btn">twitter</a>
|
||||
<a href="https://plus.google.com/+MatthiasKretschmann?rel=author" class="btn">google+</a>
|
||||
</p>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-1441794-10', 'kretschmann.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
@headings-font-weight: 500;
|
||||
Loading…
Reference in New Issue
Block a user