From 00487df5debd77d698d264cb6685aeed4ed4d133 Mon Sep 17 00:00:00 2001 From: Jan Jastrow Date: Tue, 29 Jul 2014 02:02:33 +0200 Subject: [PATCH] Changed some parts --- css/main.css | 417 ++++++++++++++++++++++++++++++++++++------- css/main.min.css | 2 +- index.html | 10 +- scss/_defaults.scss | 22 ++- scss/_normalize.scss | 2 +- scss/main.scss | 18 +- 6 files changed, 387 insertions(+), 84 deletions(-) diff --git a/css/main.css b/css/main.css index c9743cc..f1f8bfa 100644 --- a/css/main.css +++ b/css/main.css @@ -3,25 +3,338 @@ \*----------------------------------------*/ /* Imports --------------------------*/ -/* @import 'normalize'; */ -/* @import 'font-awesome'; */ +/* normalize.css v3.0.0 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined in IE 8/9. + */ +article, aside, details, figcaption, figure, footer, header, hgroup, main, 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 { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ +[hidden], template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background: transparent; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ +b, strong { + font-weight: bold; } + +/** + * Address styling not present in Safari 5 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. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9. + */ +img { + border: 0; } + +/** + * Correct overflow displayed oddly in IE 9. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari 5. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, kbd, pre, samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 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. + */ +button, input, optgroup, select, textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10. + */ +button { + overflow: visible; } + +/** + * 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 `select` style inheritance in Firefox. + */ +button, select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 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"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 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"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `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 { + 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 + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + /* 2 */ + box-sizing: content-box; } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * 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 { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, th { + padding: 0; } + /* Vars --------------------------*/ /* Reset --------------------------*/ -*, *::before, *::after { - -moz-box-sizing: border-box; - box-sizing: border-box; +*, *:before, *:after { + box-sizing: inherit; padding: 0; margin: 0; } html { - height: 100%; } + height: 100%; + box-sizing: border-box; } -.fa { - margin-right: 0.3em; - speak: none; - /* Won't speak the symbol */ } +/* Ideal Viewport-Fix for IE */ +@-ms-viewport { + width: device-width; } /* Cleafix --------------------------*/ @@ -41,6 +354,19 @@ html { img, canvas, iframe, video, svg { max-width: 100%; } +/* Video-Container +--------------------------*/ +.video { + position: relative; + height: 0; + padding-bottom: 56.25%; } + .video > * { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; } + /* Grid and stuff --------------------------*/ .container { @@ -81,17 +407,18 @@ img, canvas, iframe, video, svg { .column.one-fourth { width: 21.25%; } +/* @import 'font-awesome'; */ /* Content --------------------------*/ body { color: #000; - font-family: 'Open Sans', 'Calibri', 'Helvetica', 'Arial', sans-serif; + font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 12pt; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; } h1, h2, h3 { - font-family: 'Open Sans', 'Calibri', 'Helvetica', 'Arial', sans-serif; + font-family: Open Sans, Helvetica, Arial, sans-serif; font-weight: 700; line-height: 1.2em; margin: 0.4em 0em; } @@ -135,44 +462,24 @@ a.notdown:active { a.external:after { content: "\00A0" "[" "\2197" "]"; } } +@media print { + a[href]:after { + content: " (" attr(href) ")"; } } + /* 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; } +.fa { + margin-right: 0.3em; + speak: none; + /* Won't speak the symbol | badly supported by browsers */ } -.about::before { - content: "(#)"; - padding-right: 0.2em; } +.button { + text-overflow: ellipsis; } /* Footer --------------------------*/ @@ -193,28 +500,10 @@ a.notdown:active { .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; } } + 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 { 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%; } } + width: 100%; } } diff --git a/css/main.min.css b/css/main.min.css index a5be442..6b213e4 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +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}.clearfix{*zoom:1}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:#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:.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" "]"}}#instantclick-bar{background:red}.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,#000 0,#000 33%,red 33%,red 66%,#ffd800 66%,#ffe100 100%);background:linear-gradient(to bottom,#000 0,#000 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}.about{position:absolute;top:45%;left:45%;font-weight:700;font-family:'Open Sans',Calibri,Helvetica,Arial,sans-serif}.about::before{content:"(#)";padding-right:.2em}@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 +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{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;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{box-sizing:inherit;padding:0;margin:0}html{height:100%;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 diff --git a/index.html b/index.html index 620ca9f..1dd26bf 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,18 @@ + Title goes here + - Title goes here - - + + + + - diff --git a/scss/_defaults.scss b/scss/_defaults.scss index 6cde61e..683004c 100644 --- a/scss/_defaults.scss +++ b/scss/_defaults.scss @@ -1,29 +1,27 @@ /* Vars --------------------------*/ -$font-sans-serif: 'Open Sans', 'Calibri', 'Helvetica', 'Arial', sans-serif; -$font-serif: 'Georgia', serif; -$font-mono: 'Courier', monospace; +$font-sans-serif: Open Sans, Helvetica, Arial, sans-serif; +$font-serif: Georgia, serif; +$font-mono: Courier, monospace; /* Reset --------------------------*/ -*, *::before, *::after { - box-sizing: border-box; + +*, *:before, *:after { + box-sizing: inherit; padding: 0; margin: 0; } html { height: 100%; + box-sizing: border-box; } -.fa { - margin-right: 0.3em; - speak: none; /* Won't speak the symbol | badly supported by browsers */ -} - -.button { - text-overflow: ellipsis; // Overflow = "..." +/* Ideal Viewport-Fix for IE */ +@-ms-viewport { + width: device-width; } /* Cleafix diff --git a/scss/_normalize.scss b/scss/_normalize.scss index 196d223..03a428a 100644 --- a/scss/_normalize.scss +++ b/scss/_normalize.scss @@ -1,4 +1,4 @@ -/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ +/* normalize.css v3.0.0 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. diff --git a/scss/main.scss b/scss/main.scss index ac7caf5..8133a2d 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -5,10 +5,10 @@ /* Imports --------------------------*/ -/* @import 'normalize'; */ -/* @import 'font-awesome'; */ +@import 'normalize'; @import 'mixins'; @import 'defaults'; +/* @import 'font-awesome'; */ /* Content --------------------------*/ @@ -74,9 +74,15 @@ a.notdown { content: "\00A0" "[" "\2197" "]"; } } +@media print { + a[href]:after { + content: " (" attr(href) ")"; + } +} /* Header --------------------------*/ + #instantclick-bar { background: #f00; } @@ -85,6 +91,14 @@ a.notdown { /* Content --------------------------*/ +.fa { + margin-right: 0.3em; + speak: none; /* Won't speak the symbol | badly supported by browsers */ +} + +.button { + text-overflow: ellipsis; // Overflow = "..." +}