diff --git a/css/fluidity.scss b/css/fluidity.scss deleted file mode 100755 index aa11edf..0000000 --- a/css/fluidity.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* - FLUIDITY v0.1.0 - @mrmrs - http://mrmrs.cc - MIT -*/ - -img, canvas, iframe, video, svg { max-width: 100%; } - -/* Wrap tables or pre elements in a div with this class */ - -.overflow-container { - overflow-y: scroll; -} diff --git a/css/main.css b/css/main.css index edea3d2..c9743cc 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +1,220 @@ -/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}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:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}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}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,*::before,*::after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}.clearfix::before,.clearfix::after{content:" ";display:table}.clearfix::after{clear:both}.clearfix{*zoom:1}.container{margin:0 auto;max-width:960px;width:90%}.row{overflow:hidden}.column{float:left;margin-left:5%}.column:first-child{margin-left:0}.column.full{width:100%}.column.two-thirds{width:65%}.column.half{width:47.5%}.column.one-third{width:30%}.column.one-fourth{width:21.25%}body{background-color:#fff0de;color:#683800;font-family:"Open Sans","Calibri","Helvetica","Arial",sans-serif}h1,h2,h3{font-family:"Open Sans","Calibri","Helvetica","Arial",sans-serif;font-weight:700;line-height:1.2em;margin:0.4em 0em}p{line-height:1.4em;padding:0.5em 0}ul li{list-style:disc;margin:0.3em 0em 0.3em 0.5em;list-style-position:inside;list-style-type:square;font-size:1em}a{color:#663700;-moz-transition:color 0.2s ease;-webkit-transition:color 0.2s ease;-o-transition:color 0.2s ease;transition:color 0.2s ease}a:hover,a:active,a:focus{color:#b36000}a:active{position:relative;top:1px}h1,h2{font-family:"Droid Serif","Georgia",serif;text-align:center}h1{font-size:3em}h2{font-size:1.7em}h3{margin-top:1em;font-family:"Anonymous Pro","Monaco","Courier",serif}.bobble{width:100%;text-align:center}.bobble img{margin:10px auto 0;width:200px}.container{font-family:"Anonymous Pro","Monaco","Courier",serif;margin-bottom:2em}table tbody td{padding:0.3em 0}table tbody td:nth-child(odd){padding-right:0.7em}@media screen and (max-width: 980px){.column.full,.column.two-thirds,.column.half{float:none;margin:0;width:100%}.column.one-third,.column.one-fourth{float:left;margin:0;width:50%}}@media screen and (max-width: 480px){.column.one-third,.column.one-fourth{float:left;margin:0;width:100%}} +/*----------------------------------------*\ + Schwerkraftlabor.de | @Gehirnfussel +\*----------------------------------------*/ +/* Imports +--------------------------*/ +/* @import 'normalize'; */ +/* @import 'font-awesome'; */ +/* Vars +--------------------------*/ +/* Reset +--------------------------*/ +*, *::before, *::after { + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; } + +html { + height: 100%; } + +.fa { + margin-right: 0.3em; + speak: none; + /* Won't speak the symbol */ } + +/* Cleafix +--------------------------*/ +.clearfix::before, .clearfix::after { + content: " "; + display: table; } + +.clearfix::after { + clear: both; } + +.clearfix { + *zoom: 1; } + +/* FLUIDITY v0.1.0 + @mrmrs - http://mrmrs.cc – MIT +--------------------------*/ +img, canvas, iframe, video, svg { + max-width: 100%; } + +/* Grid and stuff +--------------------------*/ +.container { + margin: 0 auto; + /*max-width: 960px; + width: 90%;*/ } + +.row { + overflow: hidden; + max-width: 960px; + margin: 0 auto; } + +.fullrow { + max-width: 100%; } + +.column { + float: left; + margin-left: 5%; } + +.column:first-child { + margin-left: 0; } + +.column.full { + width: 100%; } + +.column.three-fourth { + width: 63.75%; } + +.column.two-thirds { + width: 65%; } + +.column.half { + width: 47.5%; } + +.column.one-third { + width: 30%; } + +.column.one-fourth { + width: 21.25%; } + +/* Content +--------------------------*/ +body { + color: #000; + font-family: 'Open Sans', 'Calibri', 'Helvetica', 'Arial', sans-serif; + font-size: 12pt; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +h1, h2, h3 { + font-family: 'Open Sans', 'Calibri', 'Helvetica', 'Arial', sans-serif; + font-weight: 700; + line-height: 1.2em; + margin: 0.4em 0em; } + +h1 { + font-size: 2em; + word-break: break-all; } + +h2 { + font-size: 1.5em; } + +h3 { + font-size: 1.25em; } + +p { + line-height: 1.45em; + padding: 0.5em 0; } + +ul li { + margin: 0.3em 0em 0.3em 0.5em; + list-style-position: inside; + list-style-type: square; + font-size: 1em; } + ul li p { + padding-left: 1em; } + +a { + color: #660000; + -webkit-transition: color 0.2s ease; + transition: color 0.2s ease; } + a:hover, a:active, a:focus { + color: #b30000; } + a:active { + position: relative; + top: 1px; } + +a.notdown:active { + position: inherit; } + +@media screen { + a.external:after { + content: "\00A0" "[" "\2197" "]"; } } + +/* Header +--------------------------*/ +#instantclick-bar { + background: #f00; } + +.logo { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + margin: 1em; + font-size: 8pt; + font-weight: 700; } + .logo::before { + background: -webkit-linear-gradient(top, black 0%, black 33%, red 33%, red 66%, #ffd800 66%, #ffe100 100%); + background: linear-gradient(to bottom, black 0%, black 33%, red 33%, red 66%, #ffd800 66%, #ffe100 100%); + width: 4px; + float: left; + height: 7em; + content: " "; } + .logo::after { + clear: both; + display: table; + content: " "; } + .logo p { + padding-left: 1em; + padding-top: 0; } + +/* Content +--------------------------*/ +.about { + position: absolute; + top: 45%; + left: 45%; + font-weight: bold; + font-family: 'Open Sans', 'Calibri', 'Helvetica', 'Arial', sans-serif; } + +.about::before { + content: "(#)"; + padding-right: 0.2em; } + +/* Footer +--------------------------*/ +/* Responsive Stuff +--------------------------*/ +@media screen and (max-width: 768px) { + .column.full, .column.three-fourth, .column.two-thirds, .column.half { + float: none; + margin: 0; + width: 100%; } + .column.one-third, .column.one-fourth { + float: left; + margin: 0; + width: 50%; + padding: 0.4em; } } + +@media screen and (max-width: 568px) { + .column.one-third, .column.two-third { + float: none; + margin: 0; + width: 100%; } + .wr_topbar { + font-size: 10.5pt; } + .wr_infobar ul li { + width: 33%; + padding: 0.2em; } + .wr_infobar ul li a { + padding: 0.7em 0.5em; } + .wr_infobar img { + height: 70px; + width: 222px; } } + +@media screen and (max-width: 480px) { + .column.one-third, .column.one-fourth, .column.full, .column.three-fourth, .column.two-thirds, .column.half, .column.full { + float: left; + margin: 0; + width: 100%; } + .wr_infobar ul li { + width: 50%; + padding: 0.1em; + text-transform: none; } + .wr_footer ul li { + width: 48%; + padding: 0.3em; + margin: 1%; } } diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..d29fe1d --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +*,::after,::before{-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}html{height:100%}.fa{margin-right:.3em;speak:none}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}canvas,iframe,img,svg,video{max-width:100%}.container{margin:0 auto}.row{overflow:hidden;max-width:960px;margin:0 auto}.fullrow{max-width:100%}.column{float:left;margin-left:5%}.column:first-child{margin-left:0}.column.full{width:100%}.column.three-fourth{width:63.75%}.column.two-thirds{width:65%}.column.half{width:47.5%}.column.one-third{width:30%}.column.one-fourth{width:21.25%}body{color:#1e1e1e;background:#eee;font-family:'Open Sans',Calibri,Helvetica,Arial,sans-serif;font-size:12pt;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}h1,h2,h3{font-family:'Open Sans',Calibri,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2em;margin:.4em 0}h1{font-size:2em;word-break:break-all}@media only screen and (max-width:640px){h1{font-size:1.7em}}h2{font-size:1.5em}@media only screen and (max-width:640px){h2{font-size:1.4em}}h3{font-size:1.25em}@media only screen and (max-width:640px){h3{font-size:1.2em}}p{line-height:1.6em;padding:.5em 0}ul li{margin:.3em 0 .3em .5em;list-style-position:inside;list-style-type:square;font-size:1em}ul li p{padding-left:1em}a{color:#8d3812;-webkit-transition:color .2s ease;transition:color .2s ease}a:active,a:focus,a:hover{color:#d1511b}a:active{position:relative;top:1px}a.notdown:active{position:inherit}.menu{background:#5a5a5a;border-bottom:#000 1px solid;font-size:1.2em;width:100%;padding:.6em;color:#ddd;z-index:100}@media only screen and (max-width:640px){.menu{font-size:1em}}.seperator{position:relative}.seperator .bg{background-size:cover!important;margin:0 auto;padding:0;position:absolute;width:100%}@media only screen and (min-width:980px){.seperator .bg{background-attachment:fixed!important}}.seperator1{height:517px}@media only screen and (max-width:640px){.seperator1{height:276px}}.seperator1 .bg{height:517px;background:url(../img/trees.jpg) center}@media only screen and (max-width:640px){.seperator1 .bg{height:276px;background-image:url(../img/trees_640.jpg)}}.seperator2{height:440px}@media only screen and (max-width:640px){.seperator2{height:235px}}.seperator2 .bg{height:440px;background:url(../img/code.jpg) center}@media only screen and (max-width:640px){.seperator2 .bg{height:235px;background-image:url(../img/code_640.jpg)}}.seperator3{height:435px}@media only screen and (max-width:640px){.seperator3{height:232px}}.seperator3 .bg{height:435px;background:url(../img/breakfast.jpg) center}@media only screen and (max-width:640px){.seperator3 .bg{height:232px;background-image:url(../img/breakfast_640.jpg)}}.text{margin:1em}.text h1{font-family:Merriweather,serif}@media screen and (max-width:768px){.column.full,.column.half,.column.three-fourth,.column.two-thirds{float:none;margin:0;width:100%}.column.one-fourth,.column.one-third{float:left;margin:0;width:50%;padding:.4em}}@media screen and (max-width:568px){.column.one-third,.column.two-third{float:none;margin:0;width:100%}.wr_topbar{font-size:10.5pt}.wr_infobar ul li{width:33%;padding:.2em}.wr_infobar ul li a{padding:.7em .5em}.wr_infobar img{height:70px;width:222px}}@media screen and (max-width:480px){.column.full,.column.half,.column.one-fourth,.column.one-third,.column.three-fourth,.column.two-thirds{float:left;margin:0;width:100%}.wr_infobar ul li{width:50%;padding:.1em;text-transform:none}.wr_footer ul li{width:48%;padding:.3em;margin:1%}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss deleted file mode 100644 index 23bce95..0000000 --- a/css/main.scss +++ /dev/null @@ -1,125 +0,0 @@ -/* Imports ---------------------------*/ - -@import 'normalize'; -@import 'mixins'; -@import 'defaults'; -/* -@import 'fluidity'; -@import 'font-awesome'; -*/ - -/* Content ---------------------------*/ - -body { - background-color: #fff0de; - color: #683800; - font-family: $font-sans-serif; -} - -h1, h2, h3 { - font-family: $font-sans-serif; - font-weight: 700; - line-height: 1.2em; - margin: 0.4em 0em; -} -p { - line-height: 1.4em; - padding: 0.5em 0; -} -ul { - li { - list-style: disc; - margin: 0.3em 0em 0.3em 0.5em; - list-style-position: inside; - list-style-type:square; - font-size: 1em; - } -} -$linkcolor: #663700; -a { - color: $linkcolor; - @include transition(color 0.2s ease); - &:hover, &:active, &:focus{ - color: lighten($linkcolor, 15%); - } - &:active { - position: relative; - top: 1px; - } -} - -/* Header ---------------------------*/ -/* -#instantclick-bar { - background: #ff0000; -} -*/ - -h1, h2 { - font-family: $font-serif; - text-align: center; -} -h1 { - font-size: 3em; -} -h2 { - font-size: 1.7em; -} -h3 { - margin-top: 1em; - font-family: $font-mono; -} -.bobble { - width: 100%; - text-align: center; - img { - margin: 10px auto 0; - width: 200px; - } -} - -/* Content ---------------------------*/ - -.container { - font-family: $font-mono; - margin-bottom: 2em; -} -table tbody { - td { - padding: 0.3em 0; - &:nth-child(odd) { - padding-right: 0.7em; - } - } -} - -/* Responsive Stuff ---------------------------*/ -@media screen and (max-width: 980px) { - .column.full, - .column.two-thirds, - .column.half { - float: none; - margin: 0; - width: 100%; - } - .column.one-third, - .column.one-fourth { - float: left; - margin: 0; - width: 50%; - } -} - -@media screen and (max-width: 480px) { -.column.one-third, -.column.one-fourth { - float: left; - margin: 0; - width: 100%; -} -} diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf old mode 100755 new mode 100644 index 8b0f54e..3461e3f Binary files a/fonts/FontAwesome.otf and b/fonts/FontAwesome.otf differ diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot index 7c79c6a..6cfd566 100755 Binary files a/fonts/fontawesome-webfont.eot and b/fonts/fontawesome-webfont.eot differ diff --git a/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg index 45fdf33..a9f8469 100755 --- a/fonts/fontawesome-webfont.svg +++ b/fonts/fontawesome-webfont.svg @@ -14,10 +14,11 @@ + - + - + @@ -30,385 +31,474 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf index e89738d..5cd6cff 100755 Binary files a/fonts/fontawesome-webfont.ttf and b/fonts/fontawesome-webfont.ttf differ diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff index 8c1748a..9eaecb3 100755 Binary files a/fonts/fontawesome-webfont.woff and b/fonts/fontawesome-webfont.woff differ diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..eb8c8a7 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,79 @@ +// include gulp +var gulp = require('gulp'); + +// include plug-ins +var jshint = require('gulp-jshint'); +var sass = require('gulp-sass'); +var prefix = require('gulp-autoprefixer'); +var rename = require('gulp-rename'); +var cssmin = require('gulp-cssmin'); +var watch = require('gulp-watch'); +var imagemin = require('gulp-imagemin'); +var pngcrush = require('imagemin-pngcrush'); +var imageResize = require('gulp-image-resize'); + + +// JS hint task +gulp.task('jshint', function() { + gulp.src('./scripts/*.js') + .pipe(jshint()) + .pipe(jshint.reporter('default')); +}); + +// sass + watch +gulp.task('sass', function() { + gulp.src('./scss/*.scss') + .pipe(watch()) + .pipe(sass()) + .pipe(prefix("last 2 versions", "ie 9")) + .pipe(cssmin()) + .pipe(rename({suffix: ".min"})) + .pipe(gulp.dest('./css')) +}); + +// image +gulp.task('img', function() { + gulp.src('src/img/*') + .pipe(imagemin({ + progressive: true, + svgoPlugins: [{removeViewBox: false}], + use: [pngcrush()] + })) + .pipe(gulp.dest('./img/')) + gulp.src('src/img/*.jpg') + .pipe(imageResize({ + width : 640, + height : 0, + crop : false, + upscale : false + })) + .pipe(imagemin({ + progressive: true, + svgoPlugins: [{removeViewBox: false}], + use: [pngcrush()] + })) + .pipe(rename({suffix: "_640"})) + .pipe(gulp.dest('./img/')) +}); + +gulp.task('default', function () { + +}); + +// finalize +gulp.task('final', function() { + gulp.src('./scss/*.scss') + .pipe(sass()) + .pipe(prefix("last 2 versions", "ie 9")) + .pipe(gulp.dest('./css')) + .pipe(rename({suffix: ".min"})) + .pipe(cssmin()) + .pipe(gulp.dest('./css')) + gulp.src('src/img/*') + .pipe(imagemin({ + progressive: true, + svgoPlugins: [{removeViewBox: false}], + use: [pngcrush()] + })) + .pipe(gulp.dest('./img/')) +}); diff --git a/img/bobble.jpg b/img/bobble.jpg deleted file mode 100644 index 40ab84b..0000000 Binary files a/img/bobble.jpg and /dev/null differ diff --git a/img/breakfast.jpg b/img/breakfast.jpg new file mode 100644 index 0000000..c6dfbc4 Binary files /dev/null and b/img/breakfast.jpg differ diff --git a/img/breakfast_640.jpg b/img/breakfast_640.jpg new file mode 100644 index 0000000..73be971 Binary files /dev/null and b/img/breakfast_640.jpg differ diff --git a/img/code.jpg b/img/code.jpg new file mode 100644 index 0000000..4aa695d Binary files /dev/null and b/img/code.jpg differ diff --git a/img/code_640.jpg b/img/code_640.jpg new file mode 100644 index 0000000..be3a007 Binary files /dev/null and b/img/code_640.jpg differ diff --git a/img/trees.jpg b/img/trees.jpg new file mode 100644 index 0000000..11f2fc5 Binary files /dev/null and b/img/trees.jpg differ diff --git a/img/trees_640.jpg b/img/trees_640.jpg new file mode 100644 index 0000000..0f9d0f5 Binary files /dev/null and b/img/trees_640.jpg differ diff --git a/index.php b/index.php index f4b02d9..74cb6a3 100755 --- a/index.php +++ b/index.php @@ -1,7 +1,6 @@ + - Jastrow.me | "Ohhh… THAT guy…" + Jastrow.me | Someone from the ether - + + + -
-
-
-
-
Picture of Jan
-

Jastrow.me

-

Ohhh… THAT guy…

-
-
+ +
Jastrow.me
+ +
+
-
-
-

Basic Data

- - - - - - - - - - - - - - - - - - - - - -
Name:Jan Jastrow
Age:25 (Born 1988-11-27)
Sex:Male
Geo:Germany, SH, Rendsburg
Job:IT ("My pc is acting weird! Help me!")
-

Contact me

- - - - - - - - - - - - - - - - - - - - - - - - - -
Mail:Jan@Jastrow.me [PGP]
Phone:+49 175 2736642
Twitter:@Gehirnfussel
XMPP (Jabber):Jastrow@jabber.ccc.de
Facebook:Jan.Jastrow
App.net:@Gehirnfussel
-

Projects and content

- -
+ +
+

From the ether…

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptate hic et, aspernatur consectetur, sunt iste beatae iure cumque maiores numquam nobis possimus commodi.

+

Ipsam eius atque laudantium, delectus accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, eos atque odio expedita. Laborum cum laboriosam officiis, voluptate neque id quos ut explicabo modi a, obcaecati nesciunt nihil illo accusantium.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quod veritatis suscipit quas id maxime, aliquid facere aut aliquam quasi tempore voluptatum minima, consectetur accusamus unde perspiciatis dicta dolorem et.

-
- -# -?> + +
+
+
+ +
+

Writing

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptate hic et, aspernatur consectetur, sunt iste beatae iure cumque maiores numquam nobis possimus commodi ipsam eius atque laudantium, delectus accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, eos atque odio expedita. Laborum cum laboriosam officiis, voluptate neque id quos ut explicabo modi a, obcaecati nesciunt nihil illo accusantium.

+

My projects on GitHub.com

+
+ +
+
+
+ +
+

Social

+

Writing code, working on webpages and coding small scripts is fun, but there is more in life then work.

+

I also spend a lot of time on those "social media platforms" these guys with the silly glasses (social-media-consultans) are talking about.

+

I use Facebook and Instagram – but I love Twitter. While designing and writing this site I wrote my 13.275th tweet and I won't stop there!

+
+ + + + + + diff --git a/js/instantclick3.min.js b/js/instantclick3.min.js deleted file mode 100644 index 3403327..0000000 --- a/js/instantclick3.min.js +++ /dev/null @@ -1,12 +0,0 @@ -/* InstantClick 3.0 | (C) 2014 Alexandre Dieulot | http://instantclick.io/license.html */ -var InstantClick=function(e,g){function v(a){var c=a.indexOf("#");return 0>c?a:a.substr(0,c)}function y(a){for(;"A"!=a.nodeName;)a=a.parentNode;return a}function t(a,c){for(var b=0;bp.readyState)&&0!=p.status){q.ready=+new Date-q.start;t("receive");if(p.getResponseHeader("Content-Type").match(/\/(x|ht|xht)ml/)){var a= -e.implementation.createHTMLDocument("");a.documentElement.innerHTML=p.responseText;F=a.title;x=a.body;var c=v(s);f[c]={body:x,title:F,scrollY:c in f?f[c].scrollY:0};for(var a=a.head.children,c=0,b,l=a.length-1;0<=l;l--)if(b=a[l],b.hasAttribute("data-instant-track")){b=b.getAttribute("href")||b.getAttribute("src")||b.innerHTML;for(var n=B.length-1;0<=n;n--)B[n]==b&&c++}c!=B.length&&(C=!0)}else C=!0;h&&(h=!1,L(s))}}function H(a){for(var c=e.getElementsByTagName("a"),b,l=g.protocol+"//"+g.host,n=c.length- -1;0<=n;n--){b=c[n];var d;if(!((d=b.target)||(d=b.hasAttribute("download"))||(d=0!=b.href.indexOf(l+"/"))||(d=-1+new Date-(q.start+q.display)))if(r&&(clearTimeout(r),r=!1),a||(a=K),!u||a!=s&&!h)u= -!0,h=!1,s=a,C=x=!1,q={start:+new Date},t("fetch"),p.open("GET",a),p.send()}function L(a){"display"in q||(q.display=+new Date-q.start);r?s&&s!=a?g.href=a:(w(a),z.start(0,!0),t("wait"),h=!0):!u||h?g.href=a:C?g.href=s:x?(f[m].scrollY=pageYOffset,h=u=!1,G(F,x,s)):(z.start(0,!0),t("wait"),h=!0)}var N=navigator.userAgent,O="createTouch"in e,m,K,r,f={},p,s=!1,F=!1,C=!1,x=!1,q={},u=!1,h=!1,B=[],M,A,E,D={fetch:[],receive:[],wait:[],change:[]},z=function(){function a(a,d){f=a;e.getElementById(k.id)&&e.body.removeChild(k); -k.style.opacity="1";e.getElementById(k.id)&&e.body.removeChild(k);l();d&&setTimeout(c,0);clearTimeout(m);m=setTimeout(b,500)}function c(){f=10;l()}function b(){f+=1+2*Math.random();98<=f?f=98:m=setTimeout(b,500);l()}function l(){g.style[h]="translate("+f+"%)";e.getElementById(k.id)||e.body.appendChild(k)}function n(){e.getElementById(k.id)?(clearTimeout(m),f=100,l(),k.style.opacity="0"):(a(100==f?0:f),setTimeout(n,0))}function d(){k.style.left=pageXOffset+"px";k.style.width=innerWidth+"px";k.style.top= -pageYOffset+"px";var a=innerWidth/screen[90==Math.abs(orientation)?"height":"width"]*2;k.style[h]="scaleY("+a+")"}var k,g,h,f,m;return{init:function(){k=e.createElement("div");k.id="instantclick";g=e.createElement("div");g.id="instantclick-bar";g.className="instantclick-bar";k.appendChild(g);var a=["Webkit","Moz","O"];h="transform";if(!(h in g.style))for(var b=0;3>b;b++)a[b]+"Transform"in g.style&&(h=a[b]+"Transform");var c="transition";if(!(c in g.style))for(b=0;3>b;b++)a[b]+"Transition"in g.style&& -(c="-"+a[b].toLowerCase()+"-"+c);a=e.createElement("style");a.innerHTML="#instantclick{position:"+(O?"absolute":"fixed")+";top:0;left:0;width:100%;pointer-events:none;z-index:2147483647;"+c+":opacity .25s .1s}.instantclick-bar{background:#29d;width:100%;margin-left:-100%;height:2px;"+c+":all .25s}";e.head.appendChild(a);O&&(d(),addEventListener("resize",d),addEventListener("scroll",d))},start:a,done:n}}(),P="pushState"in history&&(!N.match("Android")||N.match("Chrome/"))&&"file:"!=g.protocol;return{supported:P, -init:function(){if(!m)if(P){for(var a=arguments.length-1;0<=a;a--){var c=arguments[a];!0===c?M=!0:"mousedown"==c?A=!0:"number"==typeof c&&(E=c)}m=v(g.href);f[m]={body:e.body,title:e.title,scrollY:pageYOffset};for(var c=e.head.children,b,a=c.length-1;0<=a;a--)b=c[a],b.hasAttribute("data-instant-track")&&(b=b.getAttribute("href")||b.getAttribute("src")||b.innerHTML,B.push(b));p=new XMLHttpRequest;p.addEventListener("readystatechange",T);H(!0);z.init();t("change",!0);addEventListener("popstate",function(){var a= -v(g.href);a!=m&&(a in f?(f[m].scrollY=pageYOffset,m=a,G(f[a].title,f[a].body,!1,f[a].scrollY)):g.href=g.href)})}else t("change",!0)},on:function(a,c){D[a].push(c)}}}(document,location); \ No newline at end of file diff --git a/js/scripts-min.js b/js/scripts-min.js new file mode 100644 index 0000000..3cf9448 --- /dev/null +++ b/js/scripts-min.js @@ -0,0 +1 @@ +function externalLinks(){if(document.getElementsByTagName)for(var e=document.getElementsByTagName("a"),t=0;t li { @@ -52,13 +52,13 @@ } .fa-li { position: absolute; - left: -2.142857142857143em; - width: 2.142857142857143em; - top: 0.14285714285714285em; + left: -2.14285714em; + width: 2.14285714em; + top: 0.14285714em; text-align: center; } .fa-li.fa-lg { - left: -1.8571428571428572em; + left: -1.85714286em; } .fa-border { padding: .2em .25em .15em; @@ -107,19 +107,13 @@ -o-transform: rotate(359deg); } } -@-ms-keyframes spin { - 0% { - -ms-transform: rotate(0deg); - } - 100% { - -ms-transform: rotate(359deg); - } -} @keyframes spin { 0% { + -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { + -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @@ -369,6 +363,8 @@ .fa-video-camera:before { content: "\f03d"; } +.fa-photo:before, +.fa-image:before, .fa-picture-o:before { content: "\f03e"; } @@ -732,6 +728,8 @@ .fa-square:before { content: "\f0c8"; } +.fa-navicon:before, +.fa-reorder:before, .fa-bars:before { content: "\f0c9"; } @@ -791,11 +789,11 @@ content: "\f0dc"; } .fa-sort-down:before, -.fa-sort-asc:before { +.fa-sort-desc:before { content: "\f0dd"; } .fa-sort-up:before, -.fa-sort-desc:before { +.fa-sort-asc:before { content: "\f0de"; } .fa-envelope:before { @@ -985,12 +983,10 @@ .fa-code:before { content: "\f121"; } +.fa-mail-reply-all:before, .fa-reply-all:before { content: "\f122"; } -.fa-mail-reply-all:before { - content: "\f122"; -} .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { @@ -1336,3 +1332,235 @@ .fa-plus-square-o:before { content: "\f196"; } +.fa-space-shuttle:before { + content: "\f197"; +} +.fa-slack:before { + content: "\f198"; +} +.fa-envelope-square:before { + content: "\f199"; +} +.fa-wordpress:before { + content: "\f19a"; +} +.fa-openid:before { + content: "\f19b"; +} +.fa-institution:before, +.fa-bank:before, +.fa-university:before { + content: "\f19c"; +} +.fa-mortar-board:before, +.fa-graduation-cap:before { + content: "\f19d"; +} +.fa-yahoo:before { + content: "\f19e"; +} +.fa-google:before { + content: "\f1a0"; +} +.fa-reddit:before { + content: "\f1a1"; +} +.fa-reddit-square:before { + content: "\f1a2"; +} +.fa-stumbleupon-circle:before { + content: "\f1a3"; +} +.fa-stumbleupon:before { + content: "\f1a4"; +} +.fa-delicious:before { + content: "\f1a5"; +} +.fa-digg:before { + content: "\f1a6"; +} +.fa-pied-piper-square:before, +.fa-pied-piper:before { + content: "\f1a7"; +} +.fa-pied-piper-alt:before { + content: "\f1a8"; +} +.fa-drupal:before { + content: "\f1a9"; +} +.fa-joomla:before { + content: "\f1aa"; +} +.fa-language:before { + content: "\f1ab"; +} +.fa-fax:before { + content: "\f1ac"; +} +.fa-building:before { + content: "\f1ad"; +} +.fa-child:before { + content: "\f1ae"; +} +.fa-paw:before { + content: "\f1b0"; +} +.fa-spoon:before { + content: "\f1b1"; +} +.fa-cube:before { + content: "\f1b2"; +} +.fa-cubes:before { + content: "\f1b3"; +} +.fa-behance:before { + content: "\f1b4"; +} +.fa-behance-square:before { + content: "\f1b5"; +} +.fa-steam:before { + content: "\f1b6"; +} +.fa-steam-square:before { + content: "\f1b7"; +} +.fa-recycle:before { + content: "\f1b8"; +} +.fa-automobile:before, +.fa-car:before { + content: "\f1b9"; +} +.fa-cab:before, +.fa-taxi:before { + content: "\f1ba"; +} +.fa-tree:before { + content: "\f1bb"; +} +.fa-spotify:before { + content: "\f1bc"; +} +.fa-deviantart:before { + content: "\f1bd"; +} +.fa-soundcloud:before { + content: "\f1be"; +} +.fa-database:before { + content: "\f1c0"; +} +.fa-file-pdf-o:before { + content: "\f1c1"; +} +.fa-file-word-o:before { + content: "\f1c2"; +} +.fa-file-excel-o:before { + content: "\f1c3"; +} +.fa-file-powerpoint-o:before { + content: "\f1c4"; +} +.fa-file-photo-o:before, +.fa-file-picture-o:before, +.fa-file-image-o:before { + content: "\f1c5"; +} +.fa-file-zip-o:before, +.fa-file-archive-o:before { + content: "\f1c6"; +} +.fa-file-sound-o:before, +.fa-file-audio-o:before { + content: "\f1c7"; +} +.fa-file-movie-o:before, +.fa-file-video-o:before { + content: "\f1c8"; +} +.fa-file-code-o:before { + content: "\f1c9"; +} +.fa-vine:before { + content: "\f1ca"; +} +.fa-codepen:before { + content: "\f1cb"; +} +.fa-jsfiddle:before { + content: "\f1cc"; +} +.fa-life-bouy:before, +.fa-life-saver:before, +.fa-support:before, +.fa-life-ring:before { + content: "\f1cd"; +} +.fa-circle-o-notch:before { + content: "\f1ce"; +} +.fa-ra:before, +.fa-rebel:before { + content: "\f1d0"; +} +.fa-ge:before, +.fa-empire:before { + content: "\f1d1"; +} +.fa-git-square:before { + content: "\f1d2"; +} +.fa-git:before { + content: "\f1d3"; +} +.fa-hacker-news:before { + content: "\f1d4"; +} +.fa-tencent-weibo:before { + content: "\f1d5"; +} +.fa-qq:before { + content: "\f1d6"; +} +.fa-wechat:before, +.fa-weixin:before { + content: "\f1d7"; +} +.fa-send:before, +.fa-paper-plane:before { + content: "\f1d8"; +} +.fa-send-o:before, +.fa-paper-plane-o:before { + content: "\f1d9"; +} +.fa-history:before { + content: "\f1da"; +} +.fa-circle-thin:before { + content: "\f1db"; +} +.fa-header:before { + content: "\f1dc"; +} +.fa-paragraph:before { + content: "\f1dd"; +} +.fa-sliders:before { + content: "\f1de"; +} +.fa-share-alt:before { + content: "\f1e0"; +} +.fa-share-alt-square:before { + content: "\f1e1"; +} +.fa-bomb:before { + content: "\f1e2"; +} diff --git a/css/mixins.scss b/scss/_mixins.scss similarity index 71% rename from css/mixins.scss rename to scss/_mixins.scss index 224ba14..8fa8d38 100755 --- a/css/mixins.scss +++ b/scss/_mixins.scss @@ -1,3 +1,17 @@ + +// Usage: Light-on-dark = on + +@mixin font-smoothing($value: on) { + @if $value == on { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + @else { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + } +} + @mixin box-sizing($model) { -webkit-box-sizing: $model; -moz-box-sizing: $model; @@ -29,6 +43,7 @@ background: -ms-linear-gradient(top, $f1, $f2, $f3, $f4); /* IE10+ */ background: linear-gradient(to bottom, $f1, $f2, $f3, $f4); /* W3C */ } + @mixin linear-gradient ($f1, $f2) { background: -moz-linear-gradient(top, $f1 0%, $f2 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, $f1 0%, $f2 100%); /* Chrome10+,Safari5.1+ */ @@ -37,6 +52,7 @@ background: linear-gradient(to bottom, $f1 0%, $f2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$f1', endColorstr='$f2',GradientType=0 ); /* IE6-9 */ } + @mixin linear-gradient6 ($a1, $a2, $a3, $a4, $a5, $a6) { background: -moz-linear-gradient($a1, $a2, $a3, $a4, $a5, $a6); /* FF3.6+ */ background: -webkit-linear-gradient($a1, $a2, $a3, $a4, $a5, $a6); /* Chrome10+,Safari5.1+ */ @@ -44,9 +60,40 @@ background: -ms-linear-gradient($a1, $a2, $a3, $a4, $a5, $a6); /* IE10+ */ background: linear-gradient($a1, $a2, $a3, $a4, $a5, $a6); /* W3C */ } + @mixin hyphens ($value) { -webkit-hyphens: $value; -moz-hyphens: $value; -ms-hyphens: $value; hyphens: $value; } + +@mixin vertical-align { + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + + // IE 6-10 hack + position: inherit\9; + top: inherit\9; + -ms-transform: translateY(0%)\9; + display:table-cell\9; + vertical-align:middle\9; +} + +@mixin vertical-align2 { + display: flex; + align-items: center; + justify-content: center; +} + +@mixin flexbox { + display: -webkit-box; + -webkit-box-orient: horizontal; + display: -moz-box; + -moz-box-orient: horizontal; + display: box; + box-orient: horizontal; +} diff --git a/css/normalize.scss b/scss/_normalize.scss similarity index 100% rename from css/normalize.scss rename to scss/_normalize.scss diff --git a/scss/main.scss b/scss/main.scss new file mode 100644 index 0000000..b5da15f --- /dev/null +++ b/scss/main.scss @@ -0,0 +1,264 @@ +/*----------------------------------------*\ + Schwerkraftlabor.de | @Gehirnfussel +\*----------------------------------------*/ + +/* Imports +--------------------------*/ + +/* @import 'normalize'; */ +/* @import 'font-awesome'; */ +@import 'mixins'; +@import 'defaults'; + +/* Content +--------------------------*/ + +$greybackground: #404040; +$whitebackground: #eeeeee; +$linkcolor: #8d3812; + +body { + color: #1e1e1e; + background: $whitebackground; + font-family: $font-sans-serif; + font-size: 12pt; + @include font-smoothing(off); +} +h1, h2, h3 { + font-family: $font-sans-serif; + font-weight: 700; + line-height: 1.2em; + margin: 0.4em 0.0em; +} +h1 { + font-size: 2.0em; + word-break: break-all; + @media only screen and (max-width: 640px) { + font-size: 1.7em; + } +} +h2 { + font-size: 1.5em; + @media only screen and (max-width: 640px) { + font-size: 1.4em; + } +} +h3 { + font-size: 1.25em; + @media only screen and (max-width: 640px) { + font-size: 1.2em; + } +} +p { + line-height: 1.6em; + padding: 0.5em 0; +} +ul { + li { + margin: 0.3em 0em 0.3em 0.5em; + list-style-position: inside; + list-style-type: square; + font-size: 1em; + + p { + padding-left: 1em; + } + } +} +a { + color: $linkcolor; + @include transition(color 0.2s ease); + &:hover, &:active, &:focus{ + color: lighten($linkcolor, 15%); + } + &:active { + position: relative; + top: 1px; + } +} +a.notdown { + &:active { + position: inherit; + } +} +/* +@media screen { + a.external:after { + content: "\00A0" "[" "\2197" "]"; + } +} +*/ + +/* Header +--------------------------*/ + +.menu { + background: lighten($greybackground, 10%); + border-bottom: darken($greybackground, 30%) 1px solid; + font-size: 1.2em; + width: 100%; + padding: .6em; + color: #ddd; + z-index: 100; + + @media only screen and (max-width: 640px) { + font-size: 1em; + } +} + + +/* Content +--------------------------*/ + +.seperator { + position: relative; + .bg { + background-size: cover !important; + margin: 0 auto; + padding: 0; + position: absolute; + width: 100%; + + @media only screen and (min-width: 980px) { + background-attachment: fixed !important; + } + } +} + +.seperator1 { + height: 517px; + @media only screen and (max-width: 640px) { + height: 276px; + } + .bg { + height: 517px; + background: url(../img/trees.jpg) repeat center; + @media only screen and (max-width: 640px) { + height: 276px; + background-image: url(../img/trees_640.jpg); + } + } +} + +.seperator2 { + height: 440px; + @media only screen and (max-width: 640px) { + height: 235px; + } + .bg { + height: 440px; + background: url(../img/code.jpg) repeat center; + @media only screen and (max-width: 640px) { + height: 235px; + background-image: url(../img/code_640.jpg); + } + } +} + +.seperator3 { + height: 435px; + @media only screen and (max-width: 640px) { + height: 232px; + } + .bg { + height: 435px; + background: url(../img/breakfast.jpg) repeat center; + @media only screen and (max-width: 640px) { + height: 232px; + background-image: url(../img/breakfast_640.jpg); + } + } +} + + +.text { + margin: 1em; + + h1 { + font-family: 'Merriweather', serif; + } +} + + +/* Footer +--------------------------*/ + + + + +/* Responsive Stuff +--------------------------*/ + +@media screen and (max-width: 768px) { + .column.full, + .column.three-fourth, + .column.two-thirds, + .column.half { + float: none; + margin: 0; + width: 100%; + } + .column.one-third, + .column.one-fourth { + float: left; + margin: 0; + width: 50%; + padding: 0.4em; + } +} + +@media screen and (max-width: 568px) { + .column.one-third, + .column.two-third { + float: none; + margin: 0; + width: 100%; + } +.wr_topbar { + font-size: 10.5pt; +} +.wr_infobar ul { + li { + width: 33%; + padding: 0.2em; + + a { + padding: 0.7em 0.5em; + } + } + } +.wr_infobar img { + height: 70px; + width: 222px; +} + +} + +@media screen and (max-width: 480px) { +.column.one-third, +.column.one-fourth, +.column.full, +.column.three-fourth, +.column.two-thirds, +.column.half, +.column.full { + float: left; + margin: 0; + width: 100%; +} +.wr_infobar ul { + li { + width: 50%; + padding: 0.1em; + text-transform: none; + } + } +.wr_footer ul { + li { + width: 48%; + padding: 0.3em; + margin: 1%; + } + } + +} diff --git a/src/img/breakfast.jpg b/src/img/breakfast.jpg new file mode 100644 index 0000000..644b07c Binary files /dev/null and b/src/img/breakfast.jpg differ diff --git a/src/img/code.jpg b/src/img/code.jpg new file mode 100644 index 0000000..8ef8eb5 Binary files /dev/null and b/src/img/code.jpg differ diff --git a/src/img/trees.jpg b/src/img/trees.jpg new file mode 100644 index 0000000..361676d Binary files /dev/null and b/src/img/trees.jpg differ