diff --git a/Checklist.md b/Checklist.md index c315488..3a12114 100644 --- a/Checklist.md +++ b/Checklist.md @@ -1,4 +1,4 @@ #Design-Checklist -- Responsive Design – Mobile: 320, 360, 400px +- Responsive Design – Mobile: 320, 400, 640px - Create Favicons (ICO!) with multiple sizes (16, 32, 48, 64px) diff --git a/crossdomain.xml b/crossdomain.xml index a05eb8b..818b822 100755 --- a/crossdomain.xml +++ b/crossdomain.xml @@ -1,22 +1,15 @@ + - - - - - - - - + + + + diff --git a/css/main.css b/css/main.css index 29440a4..076d35a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,9 +1,8 @@ -/*----------------------------------------*\ - Schwerkraftlabor.de | @Gehirnfussel +/*----------------------------------------* Schwerkraftlabor.de | @Gehirnfussel \*----------------------------------------*/ /* Imports --------------------------*/ -/* normalize.css v3.0.0 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling @@ -26,16 +25,34 @@ body { /* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined in IE 8/9. + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. */ -article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ -audio, canvas, progress, video { +audio, +canvas, +progress, +video { display: inline-block; /* 1 */ vertical-align: baseline; @@ -50,10 +67,11 @@ audio:not([controls]) { height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9. - * Hide the `template` element in IE, Safari, and Firefox < 22. + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ -[hidden], template { +[hidden], +template { display: none; } /* Links @@ -62,37 +80,39 @@ audio:not([controls]) { * Remove the gray background color from active links in IE 10. */ a { - background: transparent; } + background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ -a:active, a:hover { +a:active, +a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** - * Address styling not present in IE 8/9, Safari 5, and Chrome. + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ -b, strong { +b, +strong { font-weight: bold; } /** - * Address styling not present in Safari 5 and Chrome. + * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. + * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; @@ -114,7 +134,8 @@ small { /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ -sub, sup { +sub, +sup { font-size: 75%; line-height: 0; position: relative; @@ -129,13 +150,13 @@ sub { /* Embedded content ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9. + * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** - * Correct overflow displayed oddly in IE 9. + * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } @@ -143,7 +164,7 @@ svg:not(:root) { /* Grouping content ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari 5. + * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } @@ -152,8 +173,7 @@ figure { * Address differences between Firefox and other browsers. */ hr { - -webkit-box-sizing: content-box; - box-sizing: content-box; + box-sizing: content-box; height: 0; } /** @@ -165,7 +185,10 @@ pre { /** * Address odd `em`-unit font size rendering in all browsers. */ -code, kbd, pre, samp { +code, +kbd, +pre, +samp { font-family: monospace, monospace; font-size: 1em; } @@ -179,9 +202,13 @@ code, kbd, pre, samp { * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ -button, input, optgroup, select, textarea { +button, +input, +optgroup, +select, +textarea { color: inherit; /* 1 */ font: inherit; @@ -190,7 +217,7 @@ button, input, optgroup, select, textarea { /* 3 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10. + * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } @@ -198,10 +225,11 @@ button { /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8+, and Opera + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ -button, select { +button, +select { text-transform: none; } /** @@ -211,7 +239,9 @@ button, select { * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ -button, html input[type="button"], input[type="reset"], input[type="submit"] { +button, +html input[type="button"], input[type="reset"], +input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; @@ -220,13 +250,15 @@ button, html input[type="button"], input[type="reset"], input[type="submit"] { /** * Re-set default cursor for disabled elements. */ -button[disabled], html input[disabled] { +button[disabled], +html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ -button::-moz-focus-inner, input::-moz-focus-inner { +button::-moz-focus-inner, +input::-moz-focus-inner { border: 0; padding: 0; } @@ -244,9 +276,9 @@ input { * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ -input[type="checkbox"], input[type="radio"] { - -webkit-box-sizing: border-box; - box-sizing: border-box; +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } @@ -256,18 +288,18 @@ input[type="checkbox"], input[type="radio"] { * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ -input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ - -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } @@ -276,7 +308,8 @@ input[type="search"] { * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ -input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** @@ -288,7 +321,7 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9. + * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { @@ -298,7 +331,7 @@ legend { /* 2 */ } /** - * Remove default vertical scrollbar in IE 8/9. + * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } @@ -319,7 +352,8 @@ table { border-collapse: collapse; border-spacing: 0; } -td, th { +td, +th { padding: 0; } /* Vars @@ -327,15 +361,16 @@ td, th { /* Reset --------------------------*/ *, *:before, *:after { - -webkit-box-sizing: inherit; - box-sizing: inherit; + box-sizing: inherit; padding: 0; margin: 0; } html { height: 100%; - -webkit-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + text-size-adjust: 100%; } /* Ideal Viewport-Fix for IE */ @-ms-viewport { @@ -343,7 +378,8 @@ html { /* Cleafix --------------------------*/ -.clearfix::before, .clearfix::after { +.clearfix::before, +.clearfix::after { content: " "; display: table; } @@ -353,12 +389,48 @@ html { .clearfix { *zoom: 1; } -/* FLUIDITY v0.1.0 - @mrmrs - http://mrmrs.cc – MIT ---------------------------*/ -img, canvas, iframe, video, svg { +/* + FLUIDITY v0.1.0 + @mrmrs - http://mrmrs.cc + MIT +*/ +/* + + Responsive Utilities + +*/ +img, +canvas, +iframe, +video, +svg, +select, +textarea { max-width: 100%; } +/* Wrap tables or pre elements in a div with this class */ +.overflow-container { + overflow-y: scroll; } + +/* + Aspect ratios for media objects i.e canvas, iframe, video, svg etc. + Defaults to 16x9 +*/ +.aspect-ratio { + height: 0; + padding-top: 56.25%; + position: relative; } + +.aspect-ratio--object { + height: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + z-index: 100; } + /* Video-Container --------------------------*/ .video { @@ -377,7 +449,7 @@ img, canvas, iframe, video, svg { .container { margin: 0 auto; /*max-width: 960px; - width: 90%;*/ } + width: 90%;*/ } .row { overflow: hidden; @@ -429,7 +501,7 @@ h1, h2, h3 { margin: 0.4em 0em; } h1 { - font-size: 2em; + font-size: 2.0em; word-break: break-all; } h2 { @@ -473,9 +545,6 @@ a.notdown:active { /* Header --------------------------*/ -#instantclick-bar { - background: #f00; } - /* Content --------------------------*/ .fa { @@ -491,24 +560,35 @@ a.notdown:active { /* Responsive Stuff --------------------------*/ @media screen and (max-width: 768px) { - .column.full, .column.three-fourth, .column.two-thirds, .column.half { + .column.full, + .column.three-fourth, + .column.two-thirds, + .column.half { float: none; margin: 0; width: 100%; } - .column.one-third, .column.one-fourth { + .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 { + .column.one-third, + .column.two-third { float: none; margin: 0; width: 100%; } } @media screen and (max-width: 480px) { - .column.one-third, .column.one-fourth, .column.full, .column.three-fourth, .column.two-thirds, .column.half, .column.full { + .column.one-third, + .column.one-fourth, + .column.full, + .column.three-fourth, + .column.two-thirds, + .column.half, + .column.full { float: left; margin: 0; width: 100%; } } diff --git a/css/main.min.css b/css/main.min.css index a1db701..fa1406a 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -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:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-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]{-webkit-box-sizing:border-box;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;-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 silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit;padding:0;margin:0}html{height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}@-ms-viewport{width:device-width}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}canvas,iframe,img,svg,video{max-width:100%}.video{position:relative;height:0;padding-bottom:56.25%}.video>*{position:absolute;top:0;left:0;height:100%;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:#000;font-family:Open Sans,Helvetica,Arial,sans-serif;font-size:12pt;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}h1,h2,h3{font-family:Open Sans,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2em;margin:.4em 0}h1{font-size:2em;word-break:break-all}h2{font-size:1.5em}h3{font-size:1.25em}p{line-height:1.45em;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:#600;-webkit-transition:color .2s ease;transition:color .2s ease}a:active,a:focus,a:hover{color:#b30000}a:active{position:relative;top:1px}a.notdown:active{position:inherit}@media screen{a.external:after{content:"\00A0" "[" "\2197" "]"}}@media print{a[href]:after{content:" (" attr(href) ")"}}#instantclick-bar{background:red}.fa{margin-right:.3em;speak:none}.button{text-overflow:ellipsis}@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%}}@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%}} \ No newline at end of file +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */body,mark{color:#000}img,legend{border:0}.column.full,.video>*{width:100%}b,h1,h2,h3,optgroup,strong{font-weight:700}body,h1,h2,h3{font-family:Open Sans,Helvetica,Arial,sans-serif}html{font-family:sans-serif;height:100%;box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;font-size:12pt;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,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-color:transparent;color:#600;-webkit-transition:color .2s ease;transition:color .2s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}dfn{font-style:italic}mark{background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{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;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{padding:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,:after,:before{box-sizing:inherit;padding:0;margin:0}.container,.row{margin:0 auto}@-ms-viewport{width:device-width}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}canvas,iframe,img,select,svg,textarea,video{max-width:100%}.overflow-container{overflow-y:scroll}.aspect-ratio{height:0;padding-top:56.25%;position:relative}.aspect-ratio--object{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;z-index:100}.video{position:relative;height:0;padding-bottom:56.25%}.video>*{position:absolute;top:0;left:0;height:100%}.row{overflow:hidden;max-width:960px}.fullrow{max-width:100%}.column{float:left;margin-left:5%}.column:first-child{margin-left:0}.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%}h1,h2,h3{line-height:1.2em;margin:.4em 0}h1{font-size:2em;word-break:break-all}h2{font-size:1.5em}h3{font-size:1.25em}p{line-height:1.45em;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:active,a:focus,a:hover{color:#b30000}a:active{position:relative;top:1px}a.notdown:active{position:inherit}@media screen{a.external:after{content:"\00A0" "[" "\2197" "]"}}@media print{a[href]:after{content:" (" attr(href) ")"}}.fa{margin-right:.3em;speak:none}.button{text-overflow:ellipsis}@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%}}@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%}} \ No newline at end of file diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf index 3461e3f..f7936cc 100644 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 6cfd566..33b2bb8 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 a9f8469..1ee89d4 100755 --- a/fonts/fontawesome-webfont.svg +++ b/fonts/fontawesome-webfont.svg @@ -1,6 +1,6 @@ - + @@ -32,473 +32,534 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - \ No newline at end of file diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf index 5cd6cff..ed9372f 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 9eaecb3..8b280b9 100755 Binary files a/fonts/fontawesome-webfont.woff and b/fonts/fontawesome-webfont.woff differ diff --git a/fonts/fontawesome-webfont.woff2 b/fonts/fontawesome-webfont.woff2 new file mode 100644 index 0000000..3311d58 Binary files /dev/null and b/fonts/fontawesome-webfont.woff2 differ diff --git a/gulpfile.js b/gulpfile.js index 222f38a..a8dfa4e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -28,7 +28,7 @@ gulp.task('styles', function() {var onError = function(err) { this.emit('end'); }; - gulp.src('./src/scss/blacktie.scss') + gulp.src('./src/scss/main.scss') .pipe(plumber({errorHandler: onError})) .pipe(sass({ style: 'expanded' })) .pipe(autoprefixer('last 2 version', 'IE 9', 'safari 5', 'Firefox ESR', 'opera 12.1', 'ios 6', 'android 4', 'BlackBerry 10')) diff --git a/htaccess b/htaccess index e304d32..286b2b5 100644 --- a/htaccess +++ b/htaccess @@ -1,17 +1,727 @@ -# CHARSET +# Apache Server Configs v2.14.0 | MIT License +# https://github.com/h5bp/server-configs-apache + +# based on html5-boilerplate htaccess-file: +# https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess + +# (!) Using `.htaccess` files slows down Apache, therefore, if you have +# access to the main server configuration file (which is usually called +# `httpd.conf`), you should add this logic there. +# +# https://httpd.apache.org/docs/current/howto/htaccess.html. + +# ###################################################################### +# # CROSS-ORIGIN # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Cross-origin requests | +# ---------------------------------------------------------------------- + +# Allow cross-origin requests. +# +# https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS +# http://enable-cors.org/ +# http://www.w3.org/TR/cors/ + +# +# Header set Access-Control-Allow-Origin "*" +# + +# ---------------------------------------------------------------------- +# | Cross-origin images | +# ---------------------------------------------------------------------- + +# Send the CORS header for images when browsers request it. +# +# https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image +# https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html + + + + + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + + + + +# ---------------------------------------------------------------------- +# | Cross-origin web fonts | +# ---------------------------------------------------------------------- + +# Allow cross-origin access to web fonts. + + + + Header set Access-Control-Allow-Origin "*" + + + +# ---------------------------------------------------------------------- +# | Cross-origin resource timing | +# ---------------------------------------------------------------------- + +# Allow cross-origin access to the timing information for all resources. +# +# If a resource isn't served with a `Timing-Allow-Origin` header that +# would allow its timing information to be shared with the document, +# some of the attributes of the `PerformanceResourceTiming` object will +# be set to zero. +# +# http://www.w3.org/TR/resource-timing/ +# http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/ + +# +# Header set Timing-Allow-Origin: "*" +# + + +# ###################################################################### +# # ERRORS # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Custom error messages/pages | +# ---------------------------------------------------------------------- + +# Customize what Apache returns to the client in case of an error. +# https://httpd.apache.org/docs/current/mod/core.html#errordocument + +ErrorDocument 404 /404.html + +# ---------------------------------------------------------------------- +# | Error prevention | +# ---------------------------------------------------------------------- + +# Disable the pattern matching based on filenames. +# +# This setting prevents Apache from returning a 404 error as the result +# of a rewrite when the directory with the same name does not exist. +# +# https://httpd.apache.org/docs/current/content-negotiation.html#multiviews + +Options -MultiViews + + +# ###################################################################### +# # INTERNET EXPLORER # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Document modes | +# ---------------------------------------------------------------------- + +# Force Internet Explorer 8/9/10 to render pages in the highest mode +# available in the various cases when it may not. +# +# https://hsivonen.fi/doctype/#ie8 +# +# (!) Starting with Internet Explorer 11, document modes are deprecated. +# If your business still relies on older web apps and services that were +# designed for older versions of Internet Explorer, you might want to +# consider enabling `Enterprise Mode` throughout your company. +# +# https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode +# http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx + + + + Header set X-UA-Compatible "IE=edge" + + # `mod_headers` cannot match based on the content-type, however, + # the `X-UA-Compatible` response header should be send only for + # HTML documents and not for the other resources. + + + Header unset X-UA-Compatible + + + + +# ---------------------------------------------------------------------- +# | Iframes cookies | +# ---------------------------------------------------------------------- + +# Allow cookies to be set from iframes in Internet Explorer. +# +# https://msdn.microsoft.com/en-us/library/ms537343.aspx +# http://www.w3.org/TR/2000/CR-P3P-20001215/ + +# +# Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" +# + + +# ###################################################################### +# # MEDIA TYPES AND CHARACTER ENCODINGS # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Media types | +# ---------------------------------------------------------------------- + +# Serve resources with the proper media types (f.k.a. MIME types). +# +# https://www.iana.org/assignments/media-types/media-types.xhtml +# https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype + + + + # Data interchange + + AddType application/atom+xml atom + AddType application/json json map topojson + AddType application/ld+json jsonld + AddType application/rss+xml rss + AddType application/vnd.geo+json geojson + AddType application/xml rdf xml + + + # JavaScript + + # Normalize to standard type. + # https://tools.ietf.org/html/rfc4329#section-7.2 + + AddType application/javascript js + + + # Manifest files + + AddType application/manifest+json webmanifest + AddType application/x-web-app-manifest+json webapp + AddType text/cache-manifest appcache + + + # Media files + + AddType audio/mp4 f4a f4b m4a + AddType audio/ogg oga ogg opus + AddType image/bmp bmp + AddType image/svg+xml svg svgz + AddType image/webp webp + AddType video/mp4 f4v f4p m4v mp4 + AddType video/ogg ogv + AddType video/webm webm + AddType video/x-flv flv + + # Serving `.ico` image files with a different media type + # prevents Internet Explorer from displaying then as images: + # https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee + + AddType image/x-icon cur ico + + + # Web fonts + + AddType application/font-woff woff + AddType application/font-woff2 woff2 + AddType application/vnd.ms-fontobject eot + + # Browsers usually ignore the font media types and simply sniff + # the bytes to figure out the font type. + # https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern + # + # However, Blink and WebKit based browsers will show a warning + # in the console if the following font types are served with any + # other media types. + + AddType application/x-font-ttf ttc ttf + AddType font/opentype otf + + + # Other + + AddType application/octet-stream safariextz + AddType application/x-bb-appworld bbaw + AddType application/x-chrome-extension crx + AddType application/x-opera-extension oex + AddType application/x-xpinstall xpi + AddType text/vcard vcard vcf + AddType text/vnd.rim.location.xloc xloc + AddType text/vtt vtt + AddType text/x-component htc + + + +# ---------------------------------------------------------------------- +# | Character encodings | +# ---------------------------------------------------------------------- + +# Serve all resources labeled as `text/html` or `text/plain` +# with the media type `charset` parameter set to `UTF-8`. +# +# https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset + AddDefaultCharset utf-8 +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -# MIME TYPES -AddType application/font-woff .woff -AddType application/javascript .js +# Serve the following file types with the media type `charset` +# parameter set to `UTF-8`. +# +# https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset + + + AddCharset utf-8 .atom \ + .bbaw \ + .css \ + .geojson \ + .js \ + .json \ + .jsonld \ + .manifest \ + .rdf \ + .rss \ + .topojson \ + .vtt \ + .webapp \ + .webmanifest \ + .xloc \ + .xml + -# BEGIN Compression +# ###################################################################### +# # REWRITES # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Rewrite engine | +# ---------------------------------------------------------------------- + +# (1) Turn on the rewrite engine (this is necessary in order for +# the `RewriteRule` directives to work). +# +# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#RewriteEngine +# +# (2) Enable the `FollowSymLinks` option if it isn't already. +# +# https://httpd.apache.org/docs/current/mod/core.html#options +# +# (3) If your web host doesn't allow the `FollowSymlinks` option, +# you need to comment it out or remove it, and then uncomment +# the `Options +SymLinksIfOwnerMatch` line (4), but be aware +# of the performance impact. +# +# https://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks +# +# (4) Some cloud hosting services will require you set `RewriteBase`. +# +# https://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site +# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase +# +# (5) Depending on how your server is set up, you may also need to +# use the `RewriteOptions` directive to enable some options for +# the rewrite engine. +# +# https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions +# +# (6) Set %{ENV:PROTO} variable, to allow rewrites to redirect with the +# appropriate schema automatically (http or https). + + + + # (1) + RewriteEngine On + + # (2) + Options +FollowSymlinks + + # (3) + # Options +SymLinksIfOwnerMatch + + # (4) + # RewriteBase / + + # (5) + # RewriteOptions + + # (6) + RewriteCond %{HTTPS} =on + RewriteRule ^ - [env=proto:https] + RewriteCond %{HTTPS} !=on + RewriteRule ^ - [env=proto:http] + + + +# ---------------------------------------------------------------------- +# | Forcing `https://` | +# ---------------------------------------------------------------------- + +# Redirect from the `http://` to the `https://` version of the URL. +# https://wiki.apache.org/httpd/RewriteHTTPToHTTPS + +# +# RewriteEngine On +# RewriteCond %{HTTPS} !=on +# RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] +# + +# ---------------------------------------------------------------------- +# | Suppressing / Forcing the `www.` at the beginning of URLs | +# ---------------------------------------------------------------------- + +# The same content should never be available under two different +# URLs, especially not with and without `www.` at the beginning. +# This can cause SEO problems (duplicate content), and therefore, +# you should choose one of the alternatives and redirect the other +# one. +# +# By default `Option 1` (no `www.`) is activated. +# http://no-www.org/faq.php?q=class_b +# +# If you would prefer to use `Option 2`, just comment out all the +# lines from `Option 1` and uncomment the ones from `Option 2`. +# +# (!) NEVER USE BOTH RULES AT THE SAME TIME! + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Option 1: rewrite www.example.com → example.com + + + RewriteEngine On + RewriteCond %{HTTPS} !=on + RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] + RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L] + + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Option 2: rewrite example.com → www.example.com +# +# Be aware that the following might not be a good idea if you use "real" +# subdomains for certain parts of your website. + +# +# RewriteEngine On +# RewriteCond %{HTTPS} !=on +# RewriteCond %{HTTP_HOST} !^www\. [NC] +# RewriteCond %{SERVER_ADDR} !=127.0.0.1 +# RewriteCond %{SERVER_ADDR} !=::1 +# RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] +# + + +# ###################################################################### +# # SECURITY # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Clickjacking | +# ---------------------------------------------------------------------- + +# Protect website against clickjacking. +# +# The example below sends the `X-Frame-Options` response header with +# the value `DENY`, informing browsers not to display the content of +# the web page in any frame. +# +# This might not be the best setting for everyone. You should read +# about the other two possible values the `X-Frame-Options` header +# field can have: `SAMEORIGIN` and `ALLOW-FROM`. +# https://tools.ietf.org/html/rfc7034#section-2.1. +# +# Keep in mind that while you could send the `X-Frame-Options` header +# for all of your website’s pages, this has the potential downside that +# it forbids even non-malicious framing of your content (e.g.: when +# users visit your website using a Google Image Search results page). +# +# Nonetheless, you should ensure that you send the `X-Frame-Options` +# header for all pages that allow a user to make a state changing +# operation (e.g: pages that contain one-click purchase links, checkout +# or bank-transfer confirmation pages, pages that make permanent +# configuration changes, etc.). +# +# Sending the `X-Frame-Options` header can also protect your website +# against more than just clickjacking attacks: +# https://cure53.de/xfo-clickjacking.pdf. +# +# https://tools.ietf.org/html/rfc7034 +# http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx +# https://www.owasp.org/index.php/Clickjacking + +# + +# Header set X-Frame-Options "DENY" + +# # `mod_headers` cannot match based on the content-type, however, +# # the `X-Frame-Options` response header should be send only for +# # HTML documents and not for the other resources. + +# +# Header unset X-Frame-Options +# + +# + +# ---------------------------------------------------------------------- +# | Content Security Policy (CSP) | +# ---------------------------------------------------------------------- + +# Mitigate the risk of cross-site scripting and other content-injection +# attacks. +# +# This can be done by setting a `Content Security Policy` which +# whitelists trusted sources of content for your website. +# +# The example header below allows ONLY scripts that are loaded from +# the current website's origin (no inline scripts, no CDN, etc). +# That almost certainly won't work as-is for your website! +# +# To make things easier, you can use an online CSP header generator +# such as: http://cspisawesome.com/. +# +# http://content-security-policy.com/ +# http://www.html5rocks.com/en/tutorials/security/content-security-policy/ +# http://www.w3.org/TR/CSP11/). + +# + +# Header set Content-Security-Policy "script-src 'self'; object-src 'self'" + +# # `mod_headers` cannot match based on the content-type, however, +# # the `Content-Security-Policy` response header should be send +# # only for HTML documents and not for the other resources. + +# +# Header unset Content-Security-Policy +# + +# + +# ---------------------------------------------------------------------- +# | File access | +# ---------------------------------------------------------------------- + +# Block access to directories without a default document. +# +# You should leave the following uncommented, as you shouldn't allow +# anyone to surf through every directory on your server (which may +# includes rather private places such as the CMS's directories). + + + Options -Indexes + + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Block access to all hidden files and directories with the exception of +# the visible content from within the `/.well-known/` hidden directory. +# +# These types of files usually contain user preferences or the preserved +# state of an utility, and can include rather private places like, for +# example, the `.git` or `.svn` directories. +# +# The `/.well-known/` directory represents the standard (RFC 5785) path +# prefix for "well-known locations" (e.g.: `/.well-known/manifest.json`, +# `/.well-known/keybase.txt`), and therefore, access to its visible +# content should not be blocked. +# +# https://www.mnot.net/blog/2010/04/07/well-known +# https://tools.ietf.org/html/rfc5785 + + + RewriteEngine On + RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC] + RewriteCond %{SCRIPT_FILENAME} -d [OR] + RewriteCond %{SCRIPT_FILENAME} -f + RewriteRule "(^|/)\." - [F] + + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Block access to files that can expose sensitive information. +# +# By default, block access to backup and source files that may be +# left by some text editors and can pose a security risk when anyone +# has access to them. +# +# http://feross.org/cmsploit/ +# +# (!) Update the `` regular expression from below to +# include any files that might end up on your production server and +# can expose sensitive information about your website. These files may +# include: configuration files, files that contain metadata about the +# project (e.g.: project dependencies), build scripts, etc.. + + + + # Apache < 2.3 + + Order allow,deny + Deny from all + Satisfy All + + + # Apache ≥ 2.3 + + Require all denied + + + + +# ---------------------------------------------------------------------- +# | HTTP Strict Transport Security (HSTS) | +# ---------------------------------------------------------------------- + +# Force client-side SSL redirection. +# +# If a user types `example.com` in their browser, even if the server +# redirects them to the secure version of the website, that still leaves +# a window of opportunity (the initial HTTP connection) for an attacker +# to downgrade or redirect the request. +# +# The following header ensures that browser will ONLY connect to your +# server via HTTPS, regardless of what the users type in the browser's +# address bar. +# +# (!) Remove the `includeSubDomains` optional directive if the website's +# subdomains are not using HTTPS. +# +# http://www.html5rocks.com/en/tutorials/security/transport-layer-security/ +# https://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1 +# http://blogs.msdn.com/b/ieinternals/archive/2014/08/18/hsts-strict-transport-security-attacks-mitigations-deployment-https.aspx + +# +# Header always set Strict-Transport-Security "max-age=16070400; includeSubDomains" +# + +# ---------------------------------------------------------------------- +# | Reducing MIME type security risks | +# ---------------------------------------------------------------------- + +# Prevent some browsers from MIME-sniffing the response. +# +# This reduces exposure to drive-by download attacks and cross-origin +# data leaks, and should be left uncommented, especially if the server +# is serving user-uploaded content or content that could potentially be +# treated as executable by the browser. +# +# http://www.slideshare.net/hasegawayosuke/owasp-hasegawa +# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx +# https://msdn.microsoft.com/en-us/library/ie/gg622941.aspx +# https://mimesniff.spec.whatwg.org/ + + + Header set X-Content-Type-Options "nosniff" + + +# ---------------------------------------------------------------------- +# | Reflected Cross-Site Scripting (XSS) attacks | +# ---------------------------------------------------------------------- + +# (1) Try to re-enable the cross-site scripting (XSS) filter built +# into most web browsers. +# +# The filter is usually enabled by default, but in some cases it +# may be disabled by the user. However, in Internet Explorer for +# example, it can be re-enabled just by sending the +# `X-XSS-Protection` header with the value of `1`. +# +# (2) Prevent web browsers from rendering the web page if a potential +# reflected (a.k.a non-persistent) XSS attack is detected by the +# filter. +# +# By default, if the filter is enabled and browsers detect a +# reflected XSS attack, they will attempt to block the attack +# by making the smallest possible modifications to the returned +# web page. +# +# Unfortunately, in some browsers (e.g.: Internet Explorer), +# this default behavior may allow the XSS filter to be exploited, +# thereby, it's better to inform browsers to prevent the rendering +# of the page altogether, instead of attempting to modify it. +# +# https://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities +# +# (!) Do not rely on the XSS filter to prevent XSS attacks! Ensure that +# you are taking all possible measures to prevent XSS attacks, the +# most obvious being: validating and sanitizing your website's inputs. +# +# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx +# http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx +# https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 + +# + +# # (1) (2) +# Header set X-XSS-Protection "1; mode=block" + +# # `mod_headers` cannot match based on the content-type, however, +# # the `X-XSS-Protection` response header should be send only for +# # HTML documents and not for the other resources. + +# +# Header unset X-XSS-Protection +# + +# + +# ---------------------------------------------------------------------- +# | Server-side technology information | +# ---------------------------------------------------------------------- + +# Remove the `X-Powered-By` response header that: +# +# * is set by some frameworks and server-side languages +# (e.g.: ASP.NET, PHP), and its value contains information +# about them (e.g.: their name, version number) +# +# * doesn't provide any value as far as users are concern, +# and in some cases, the information provided by it can +# be used by attackers +# +# (!) If you can, you should disable the `X-Powered-By` header from the +# language / framework level (e.g.: for PHP, you can do that by setting +# `expose_php = off` in `php.ini`) +# +# https://php.net/manual/en/ini.core.php#ini.expose-php + + + Header unset X-Powered-By + + +# ---------------------------------------------------------------------- +# | Server software information | +# ---------------------------------------------------------------------- + +# Prevent Apache from adding a trailing footer line containing +# information about the server to the server-generated documents +# (e.g.: error messages, directory listings, etc.) +# +# https://httpd.apache.org/docs/current/mod/core.html#serversignature + +ServerSignature Off + +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +# Prevent Apache from sending in the `Server` response header its +# exact version number, the description of the generic OS-type or +# information about its compiled-in modules. +# +# (!) The `ServerTokens` directive will only work in the main server +# configuration file, so don't try to enable it in the `.htaccess` file! +# +# https://httpd.apache.org/docs/current/mod/core.html#servertokens + +#ServerTokens Prod + + +# ###################################################################### +# # WEB PERFORMANCE # +# ###################################################################### + +# ---------------------------------------------------------------------- +# | Compression | +# ---------------------------------------------------------------------- + - # Force compression for mangled headers. - # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping + # Force compression for mangled `Accept-Encoding` request headers + # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html + SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding @@ -19,34 +729,104 @@ AddType application/javascript .js - # Compress all output labeled with one of the following MIME-types + # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + # Compress all output labeled with one of the following media types. + # + # (!) For Apache versions below version 2.3.7 you don't need to + # enable `mod_filter` and can remove the `` + # and `` lines as `AddOutputFilterByType` is still in + # the core directives. + # + # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype + - AddOutputFilterByType DEFLATE application/atom+xml \ - application/javascript \ - application/json \ - application/ld+json \ - application/rss+xml \ - application/vnd.ms-fontobject \ - application/x-font-ttf \ - application/x-web-app-manifest+json \ - application/xhtml+xml \ - application/xml \ - font/opentype \ - image/svg+xml \ - image/x-icon \ - text/css \ - text/html \ - text/plain \ - text/x-component \ - text/xml + AddOutputFilterByType DEFLATE "application/atom+xml" \ + "application/javascript" \ + "application/json" \ + "application/ld+json" \ + "application/manifest+json" \ + "application/rdf+xml" \ + "application/rss+xml" \ + "application/schema+json" \ + "application/vnd.geo+json" \ + "application/vnd.ms-fontobject" \ + "application/x-font-ttf" \ + "application/x-javascript" \ + "application/x-web-app-manifest+json" \ + "application/xhtml+xml" \ + "application/xml" \ + "font/eot" \ + "font/opentype" \ + "image/bmp" \ + "image/svg+xml" \ + "image/vnd.microsoft.icon" \ + "image/x-icon" \ + "text/cache-manifest" \ + "text/css" \ + "text/html" \ + "text/javascript" \ + "text/plain" \ + "text/vcard" \ + "text/vnd.rim.location.xloc" \ + "text/vtt" \ + "text/x-component" \ + "text/x-cross-domain-policy" \ + "text/xml" + + + + # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + # Map the following filename extensions to the specified + # encoding type in order to make Apache serve the file types + # with the appropriate `Content-Encoding` response header + # (do note that this will NOT make Apache compress them!). + # + # If these files types would be served without an appropriate + # `Content-Enable` response header, client applications (e.g.: + # browsers) wouldn't know that they first need to uncompress + # the response, and thus, wouldn't be able to understand the + # content. + # + # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding + + + AddEncoding gzip svgz -# END Compression +# ---------------------------------------------------------------------- +# | Content transformation | +# ---------------------------------------------------------------------- + +# Prevent intermediate caches or proxies (e.g.: such as the ones +# used by mobile network providers) from modifying the website's +# content. +# +# https://tools.ietf.org/html/rfc2616#section-14.9.5 +# +# (!) If you are using `mod_pagespeed`, please note that setting +# the `Cache-Control: no-transform` response header will prevent +# `PageSpeed` from rewriting `HTML` files, and, if the +# `ModPagespeedDisableRewriteOnNoTransform` directive isn't set +# to `off`, also from rewriting other resources. +# +# https://developers.google.com/speed/pagespeed/module/configuration#notransform + +# +# Header merge Cache-Control "no-transform" +# + +# ---------------------------------------------------------------------- +# | ETags | +# ---------------------------------------------------------------------- # Remove `ETags` as resources are sent with far-future expires headers. -# http://developer.yahoo.com/performance/rules.html#etags. +# +# https://developer.yahoo.com/performance/rules.html#etags +# https://tools.ietf.org/html/rfc7232#section-2.3 # `FileETag None` doesn't work in all cases. @@ -54,59 +834,154 @@ AddType application/javascript .js FileETag None -# END Remove `ETags` +# ---------------------------------------------------------------------- +# | Expires headers | +# ---------------------------------------------------------------------- + +# Serve resources with far-future expires headers. +# +# (!) If you don't control versioning with filename-based +# cache busting, you should consider lowering the cache times +# to something like one week. +# +# https://httpd.apache.org/docs/current/mod/mod_expires.html -# Expires headers ExpiresActive on ExpiresDefault "access plus 1 month" # CSS + ExpiresByType text/css "access plus 1 year" + # Data interchange + + ExpiresByType application/atom+xml "access plus 1 hour" + ExpiresByType application/rdf+xml "access plus 1 hour" + ExpiresByType application/rss+xml "access plus 1 hour" + ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" + ExpiresByType application/schema+json "access plus 0 seconds" + ExpiresByType application/vnd.geo+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" + # Favicon (cannot be renamed!) and cursor images + + ExpiresByType image/vnd.microsoft.icon "access plus 1 week" ExpiresByType image/x-icon "access plus 1 week" - # HTML components (HTCs) - ExpiresByType text/x-component "access plus 1 month" - # HTML + ExpiresByType text/html "access plus 0 seconds" + # JavaScript + ExpiresByType application/javascript "access plus 1 year" + ExpiresByType application/x-javascript "access plus 1 year" + ExpiresByType text/javascript "access plus 1 year" + # Manifest files + + ExpiresByType application/manifest+json "access plus 1 week" ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" - # Media + + # Media files + ExpiresByType audio/ogg "access plus 1 month" + ExpiresByType image/bmp "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" + ExpiresByType image/svg+xml "access plus 1 month" + ExpiresByType image/webp "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" - # Web feeds - ExpiresByType application/atom+xml "access plus 1 hour" - ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts - ExpiresByType application/font-woff "access plus 1 month" + + # Embedded OpenType (EOT) ExpiresByType application/vnd.ms-fontobject "access plus 1 month" - ExpiresByType application/x-font-ttf "access plus 1 month" + ExpiresByType font/eot "access plus 1 month" + + # OpenType ExpiresByType font/opentype "access plus 1 month" - ExpiresByType image/svg+xml "access plus 1 month" + + # TrueType + ExpiresByType application/x-font-ttf "access plus 1 month" + + # Web Open Font Format (WOFF) 1.0 + ExpiresByType application/font-woff "access plus 1 month" + ExpiresByType application/x-font-woff "access plus 1 month" + ExpiresByType font/woff "access plus 1 month" + + # Web Open Font Format (WOFF) 2.0 + ExpiresByType application/font-woff2 "access plus 1 month" + + + # Other + + ExpiresByType text/x-cross-domain-policy "access plus 1 week" -# END Expires headers + +# ---------------------------------------------------------------------- +# | File concatenation | +# ---------------------------------------------------------------------- + +# Allow concatenation from within specific files. +# +# e.g.: +# +# If you have the following lines in a file called, for +# example, `main.combined.js`: +# +# +# +# +# Apache will replace those lines with the content of the +# specified files. + +# +# +# Options +Includes +# AddOutputFilterByType INCLUDES application/javascript \ +# application/x-javascript \ +# text/javascript +# SetOutputFilter INCLUDES +# +# +# Options +Includes +# AddOutputFilterByType INCLUDES text/css +# SetOutputFilter INCLUDES +# +# + +# ---------------------------------------------------------------------- +# | Filename-based cache busting | +# ---------------------------------------------------------------------- + +# If you're not using a build process to manage your filename version +# revving, you might want to consider enabling the following directives +# to route all requests such as `/style.12345.css` to `/style.css`. +# +# To understand why this is important and even a better solution than +# using something like `*.css?v231`, please see: +# http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ + +# +# RewriteEngine On +# RewriteCond %{REQUEST_FILENAME} !-f +# RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp|webmanifest)$ $1.$3 [L] +# diff --git a/humans.txt b/humans.txt index 0e0d073..dd9c88c 100755 --- a/humans.txt +++ b/humans.txt @@ -1,8 +1,8 @@ /* TEAM */ Design: Jan Jastrow - Site: http://schwerkraftlabor.de/blog + Site: http://jastrow.me Twitter: @Gehirnfussel - Location: Rendsburg, Schleswig-Holstein, Germany + Location: Flensburg, Schleswig-Holstein, Germany /* THANKS */ Name: Humanstxt.org @@ -11,12 +11,4 @@ /* SITE */ Standards: HTML5, CSS3 - Software: Sublime Text 3, CodeKit, Photoshop CS5 - - - _ _ - | | | | - | | __ _ ___| |_ _ __ _____ __ - _ | |/ _` / __| __| '__/ _ \ \ /\ / / - | |__| | (_| \__ \ |_| | | (_) \ V V / - \____/ \__,_|___/\__|_| \___/ \_/\_/ + Software: Atom.io, Gulp, Photoshop CS5 diff --git a/index.html b/index.html index db7956f..bcfb676 100644 --- a/index.html +++ b/index.html @@ -4,26 +4,36 @@ Title goes here - - - + + + - - - - + + + + + + + + + + -
-
-

Headline

-
-
-
- Welcome! -
-
+
+
+

Headline

+
+
+
+ Welcome! +
+
diff --git a/package.json b/package.json index 7cad6f4..9a9737c 100644 --- a/package.json +++ b/package.json @@ -2,37 +2,37 @@ "name": "ProjectName", "description": "Project description", "version": "1.0.0", - "author": "Jan Jastrow", - "license": "MIT", + "author": "Jan Jastrow", + "license": "MIT", "homepage": "http://projecturl.skl", "url" : "http://github.com/Gehirnfussel/project/", "email" : "jan@schwerkraftlabor.de", - "scripts": {}, - "main": "gulpfile.js", - "repository": { - "type": "git", - "url": "https://bitbucket.org/Gehirnfussel/project" - }, - "dependencies": {}, - "devDependencies": { - "del": "^0.1.3", - "gulp": "^3.9", - "gulp-autoprefixer": "^2.3", - "gulp-cache": "^0.2.10", - "gulp-concat": "^2.6", - "gulp-cssmin": "^0.1.7", - "gulp-imagemin": "^2.3.0", - "gulp-jshint": "^1.11.2", - "gulp-livereload": "^3.8", - "gulp-minify-css": "^1.2", - "gulp-notify": "^2.2.0", - "gulp-plumber": "^1.0.1", - "gulp-rename": "^1.2.2", - "gulp-ruby-sass": "^1.0.5", - "gulp-sass": "^2.0.4", - "gulp-uglify": "^1.2", - "gulp-watch": "^4.3.4", - "imagemin-jpegtran": "^4.3.0", - "imagemin-pngcrush": "^4.1.0" - } + "scripts": {}, + "main": "gulpfile.js", + "repository": { + "type": "git", + "url": "https://bitbucket.org/Gehirnfussel/project" + }, + "dependencies": {}, + "devDependencies": { + "del": "^0.1.3", + "gulp": "^3.9", + "gulp-autoprefixer": "^2.3", + "gulp-cache": "^0.2.10", + "gulp-concat": "^2.6", + "gulp-cssmin": "^0.1.7", + "gulp-imagemin": "^2.3.0", + "gulp-jshint": "^1.11.2", + "gulp-livereload": "^3.8", + "gulp-minify-css": "^1.2", + "gulp-notify": "^2.2.0", + "gulp-plumber": "^1.0.1", + "gulp-rename": "^1.2.2", + "gulp-ruby-sass": "^1.0.5", + "gulp-sass": "^2.0.4", + "gulp-uglify": "^1.2", + "gulp-watch": "^4.3.4", + "imagemin-jpegtran": "^4.3.0", + "imagemin-pngcrush": "^4.1.0" + } } diff --git a/robots.txt b/robots.txt index 694f71b..468c22d 100644 --- a/robots.txt +++ b/robots.txt @@ -1,3 +1,5 @@ # www.robotstxt.org/ -# http://code.google.com/web/controlcrawlindex/ + +# Allow crawling of all content User-agent: * +Disallow: diff --git a/src/scss/_defaults.scss b/src/scss/_defaults.scss index 25aa83d..9a34fcb 100644 --- a/src/scss/_defaults.scss +++ b/src/scss/_defaults.scss @@ -2,7 +2,7 @@ --------------------------*/ $font-sans-serif: Open Sans, Helvetica, Arial, sans-serif; -$font-serif: Georgia, serif; +$font-serif: Droid Serif, Georgia, serif; $font-mono: Courier, monospace; /* Reset @@ -41,11 +41,13 @@ html { *zoom: 1; } -/* FLUIDITY v0.1.0 - @mrmrs - http://mrmrs.cc – MIT ---------------------------*/ +/* + FLUIDITY v0.1.0 + @mrmrs - http://mrmrs.cc + MIT +*/ -img, canvas, iframe, video, svg { max-width: 100%; } +@import "responsive-utilities"; /* Video-Container diff --git a/src/scss/_font-awesome.scss b/src/scss/_font-awesome.scss index eb4127b..2dcdc22 100644 --- a/src/scss/_font-awesome.scss +++ b/src/scss/_font-awesome.scss @@ -1,24 +1,24 @@ /*! - * Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome + * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; - src: url('../fonts/fontawesome-webfont.eot?v=4.1.0'); - src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg'); + src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); + src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa { display: inline-block; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - line-height: 1; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + transform: translate(0, 0); } /* makes the font 33% larger relative to the icon container */ .fa-lg { @@ -78,36 +78,24 @@ margin-left: .3em; } .fa-spin { - -webkit-animation: spin 2s infinite linear; - -moz-animation: spin 2s infinite linear; - -o-animation: spin 2s infinite linear; - animation: spin 2s infinite linear; + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; } -@-moz-keyframes spin { - 0% { - -moz-transform: rotate(0deg); - } - 100% { - -moz-transform: rotate(359deg); - } +.fa-pulse { + -webkit-animation: fa-spin 1s infinite steps(8); + animation: fa-spin 1s infinite steps(8); } -@-webkit-keyframes spin { +@-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); + transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } -@-o-keyframes spin { - 0% { - -o-transform: rotate(0deg); - } - 100% { - -o-transform: rotate(359deg); - } -} -@keyframes spin { +@keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); @@ -120,43 +108,40 @@ .fa-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); - -o-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); - -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); - -o-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); -webkit-transform: scale(-1, 1); - -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); - -o-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); -webkit-transform: scale(1, -1); - -moz-transform: scale(1, -1); -ms-transform: scale(1, -1); - -o-transform: scale(1, -1); transform: scale(1, -1); } +:root .fa-rotate-90, +:root .fa-rotate-180, +:root .fa-rotate-270, +:root .fa-flip-horizontal, +:root .fa-flip-vertical { + filter: none; +} .fa-stack { position: relative; display: inline-block; @@ -222,6 +207,8 @@ .fa-check:before { content: "\f00c"; } +.fa-remove:before, +.fa-close:before, .fa-times:before { content: "\f00d"; } @@ -551,7 +538,8 @@ .fa-arrows-h:before { content: "\f07e"; } -.fa-bar-chart-o:before { +.fa-bar-chart-o:before, +.fa-bar-chart:before { content: "\f080"; } .fa-twitter-square:before { @@ -627,6 +615,7 @@ .fa-twitter:before { content: "\f099"; } +.fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } @@ -1276,7 +1265,8 @@ .fa-male:before { content: "\f183"; } -.fa-gittip:before { +.fa-gittip:before, +.fa-gratipay:before { content: "\f184"; } .fa-sun-o:before { @@ -1380,7 +1370,6 @@ .fa-digg:before { content: "\f1a6"; } -.fa-pied-piper-square:before, .fa-pied-piper:before { content: "\f1a7"; } @@ -1497,6 +1486,7 @@ content: "\f1cc"; } .fa-life-bouy:before, +.fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { @@ -1543,6 +1533,7 @@ .fa-history:before { content: "\f1da"; } +.fa-genderless:before, .fa-circle-thin:before { content: "\f1db"; } @@ -1564,3 +1555,247 @@ .fa-bomb:before { content: "\f1e2"; } +.fa-soccer-ball-o:before, +.fa-futbol-o:before { + content: "\f1e3"; +} +.fa-tty:before { + content: "\f1e4"; +} +.fa-binoculars:before { + content: "\f1e5"; +} +.fa-plug:before { + content: "\f1e6"; +} +.fa-slideshare:before { + content: "\f1e7"; +} +.fa-twitch:before { + content: "\f1e8"; +} +.fa-yelp:before { + content: "\f1e9"; +} +.fa-newspaper-o:before { + content: "\f1ea"; +} +.fa-wifi:before { + content: "\f1eb"; +} +.fa-calculator:before { + content: "\f1ec"; +} +.fa-paypal:before { + content: "\f1ed"; +} +.fa-google-wallet:before { + content: "\f1ee"; +} +.fa-cc-visa:before { + content: "\f1f0"; +} +.fa-cc-mastercard:before { + content: "\f1f1"; +} +.fa-cc-discover:before { + content: "\f1f2"; +} +.fa-cc-amex:before { + content: "\f1f3"; +} +.fa-cc-paypal:before { + content: "\f1f4"; +} +.fa-cc-stripe:before { + content: "\f1f5"; +} +.fa-bell-slash:before { + content: "\f1f6"; +} +.fa-bell-slash-o:before { + content: "\f1f7"; +} +.fa-trash:before { + content: "\f1f8"; +} +.fa-copyright:before { + content: "\f1f9"; +} +.fa-at:before { + content: "\f1fa"; +} +.fa-eyedropper:before { + content: "\f1fb"; +} +.fa-paint-brush:before { + content: "\f1fc"; +} +.fa-birthday-cake:before { + content: "\f1fd"; +} +.fa-area-chart:before { + content: "\f1fe"; +} +.fa-pie-chart:before { + content: "\f200"; +} +.fa-line-chart:before { + content: "\f201"; +} +.fa-lastfm:before { + content: "\f202"; +} +.fa-lastfm-square:before { + content: "\f203"; +} +.fa-toggle-off:before { + content: "\f204"; +} +.fa-toggle-on:before { + content: "\f205"; +} +.fa-bicycle:before { + content: "\f206"; +} +.fa-bus:before { + content: "\f207"; +} +.fa-ioxhost:before { + content: "\f208"; +} +.fa-angellist:before { + content: "\f209"; +} +.fa-cc:before { + content: "\f20a"; +} +.fa-shekel:before, +.fa-sheqel:before, +.fa-ils:before { + content: "\f20b"; +} +.fa-meanpath:before { + content: "\f20c"; +} +.fa-buysellads:before { + content: "\f20d"; +} +.fa-connectdevelop:before { + content: "\f20e"; +} +.fa-dashcube:before { + content: "\f210"; +} +.fa-forumbee:before { + content: "\f211"; +} +.fa-leanpub:before { + content: "\f212"; +} +.fa-sellsy:before { + content: "\f213"; +} +.fa-shirtsinbulk:before { + content: "\f214"; +} +.fa-simplybuilt:before { + content: "\f215"; +} +.fa-skyatlas:before { + content: "\f216"; +} +.fa-cart-plus:before { + content: "\f217"; +} +.fa-cart-arrow-down:before { + content: "\f218"; +} +.fa-diamond:before { + content: "\f219"; +} +.fa-ship:before { + content: "\f21a"; +} +.fa-user-secret:before { + content: "\f21b"; +} +.fa-motorcycle:before { + content: "\f21c"; +} +.fa-street-view:before { + content: "\f21d"; +} +.fa-heartbeat:before { + content: "\f21e"; +} +.fa-venus:before { + content: "\f221"; +} +.fa-mars:before { + content: "\f222"; +} +.fa-mercury:before { + content: "\f223"; +} +.fa-transgender:before { + content: "\f224"; +} +.fa-transgender-alt:before { + content: "\f225"; +} +.fa-venus-double:before { + content: "\f226"; +} +.fa-mars-double:before { + content: "\f227"; +} +.fa-venus-mars:before { + content: "\f228"; +} +.fa-mars-stroke:before { + content: "\f229"; +} +.fa-mars-stroke-v:before { + content: "\f22a"; +} +.fa-mars-stroke-h:before { + content: "\f22b"; +} +.fa-neuter:before { + content: "\f22c"; +} +.fa-facebook-official:before { + content: "\f230"; +} +.fa-pinterest-p:before { + content: "\f231"; +} +.fa-whatsapp:before { + content: "\f232"; +} +.fa-server:before { + content: "\f233"; +} +.fa-user-plus:before { + content: "\f234"; +} +.fa-user-times:before { + content: "\f235"; +} +.fa-hotel:before, +.fa-bed:before { + content: "\f236"; +} +.fa-viacoin:before { + content: "\f237"; +} +.fa-train:before { + content: "\f238"; +} +.fa-subway:before { + content: "\f239"; +} +.fa-medium:before { + content: "\f23a"; +} diff --git a/src/scss/_normalize.scss b/src/scss/_normalize.scss index 03a428a..458eea1 100644 --- a/src/scss/_normalize.scss +++ b/src/scss/_normalize.scss @@ -1,4 +1,4 @@ -/* normalize.css v3.0.0 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. @@ -24,7 +24,10 @@ body { ========================================================================== */ /** - * Correct `block` display not defined in IE 8/9. + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. */ article, @@ -36,6 +39,7 @@ footer, header, hgroup, main, +menu, nav, section, summary { @@ -66,8 +70,8 @@ audio:not([controls]) { } /** - * Address `[hidden]` styling not present in IE 8/9. - * Hide the `template` element in IE, Safari, and Firefox < 22. + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], @@ -83,7 +87,7 @@ template { */ a { - background: transparent; + background-color: transparent; } /** @@ -99,7 +103,7 @@ a:hover { ========================================================================== */ /** - * Address styling not present in IE 8/9, Safari 5, and Chrome. + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { @@ -107,7 +111,7 @@ abbr[title] { } /** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, @@ -116,7 +120,7 @@ strong { } /** - * Address styling not present in Safari 5 and Chrome. + * Address styling not present in Safari and Chrome. */ dfn { @@ -125,7 +129,7 @@ dfn { /** * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. + * contexts in Firefox 4+, Safari, and Chrome. */ h1 { @@ -174,7 +178,7 @@ sub { ========================================================================== */ /** - * Remove border when inside `a` element in IE 8/9. + * Remove border when inside `a` element in IE 8/9/10. */ img { @@ -182,7 +186,7 @@ img { } /** - * Correct overflow displayed oddly in IE 9. + * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { @@ -193,7 +197,7 @@ svg:not(:root) { ========================================================================== */ /** - * Address margin not present in IE 8/9 and Safari 5. + * Address margin not present in IE 8/9 and Safari. */ figure { @@ -242,7 +246,7 @@ samp { * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, @@ -256,7 +260,7 @@ textarea { } /** - * Address `overflow` set to `hidden` in IE 8/9/10. + * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { @@ -266,7 +270,7 @@ button { /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8+, and Opera + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ @@ -345,8 +349,8 @@ input[type="number"]::-webkit-outer-spin-button { } /** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ @@ -379,7 +383,7 @@ fieldset { } /** - * 1. Correct `color` not being inherited in IE 8/9. + * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ @@ -389,7 +393,7 @@ legend { } /** - * Remove default vertical scrollbar in IE 8/9. + * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { diff --git a/src/scss/_responsive-utilities.scss b/src/scss/_responsive-utilities.scss new file mode 100644 index 0000000..74bac7c --- /dev/null +++ b/src/scss/_responsive-utilities.scss @@ -0,0 +1,43 @@ +/* + + Responsive Utilities + +*/ + +img, +canvas, +iframe, +video, +svg, +select, +textarea { + max-width: 100%; +} + +/* Wrap tables or pre elements in a div with this class */ + +.overflow-container { + overflow-y: scroll; +} + +/* + Aspect ratios for media objects i.e canvas, iframe, video, svg etc. + Defaults to 16x9 +*/ + +.aspect-ratio { + height: 0; + padding-top: 56.25%; + position: relative; +} + +.aspect-ratio--object { + height: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + z-index: 100; +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 17a4e88..45169b1 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -83,9 +83,7 @@ a.notdown { /* Header --------------------------*/ -#instantclick-bar { - background: #f00; -} + /* Content