diff --git a/css/main.css b/css/main.css index 7fea1b7..0f0099d 100644 --- a/css/main.css +++ b/css/main.css @@ -488,9 +488,12 @@ textarea { /* Content --------------------------*/ html { - font-size: 62.5%; } + font-size: 62.5%; + height: 100%; } body { + background-color: #c9c9c9; + height: 100%; color: #000; font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1.4rem; @@ -514,6 +517,13 @@ h2 { h3 { font-size: 1.25em; } +.wrapper { + width: 960px; + border-left: 1px solid #a2a2a2; + border-right: 1px solid #a2a2a2; + margin: 0 auto; + height: 100%; } + @media screen { a.external:after { content: "\00A0" "[" "\2197" "]"; } } @@ -552,7 +562,7 @@ h3 { padding: 4px 20px; text-decoration: none; } .oben--menu--item a:hover { - background-color: #e8f3fc; + background-color: #d2e8f9; border-radius: inherit; } .oben--menu--item:first-child { border-top-left-radius: 6px; @@ -569,6 +579,10 @@ h3 { /* Content --------------------------*/ +main { + background-color: #eee; + height: 100%; } + .fa { margin-right: 0.3em; speak: none; diff --git a/css/main.min.css b/css/main.min.css index 2dec15a..fd69dfe 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */body,mark{color:#000}img,legend{border:0}.column.full,.video>*{width:100%}body,h1,h2,h3{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif}b,h1,h2,h3,optgroup,strong{font-weight:700}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%;font-size:62.5%}body{margin:0;font-size:1.4rem;-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}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:10in}.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}@media screen{a.external:after{content:"\00A0" "[" "\2197" "]"}}@media print{a[href]:after{content:" (" attr(href) ")"}}.oben{background-color:#f4f4f4;border-bottom:#8ec6f0 3px solid}.oben--logo{display:block;margin:0 auto;padding:10px 0}.oben--menu{margin:0 auto;padding-bottom:1pc;list-style:none;letter-spacing:-.31em;text-align:center}.oben--menu--item{display:inline-block;letter-spacing:normal;background-color:#fff;border:1px solid #3498e4;font-size:1.2rem}.oben--menu--item a{display:inline-block;color:#3498e4;padding:4px 20px;text-decoration:none}.oben--menu--item a:hover{background-color:#e8f3fc;border-radius:inherit}.oben--menu--item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.oben--menu--item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.oben--menu--item__active a{background-color:#3498e4;color:#fff}.oben--menu--item__active a:hover{background-color:#3498e4}.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 */img,legend{border:0}.column.full,.video>*{width:100%}body,mark{color:#000}body,h1,h2,h3{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif}b,h1,h2,h3,optgroup,strong{font-weight:700}html{font-family:sans-serif}body{margin:0}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}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>*,.wrapper,body,html,main{height:100%}.video>*{position:absolute;top:0;left:0}.row{overflow:hidden;max-width:10in}.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%}html{box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;font-size:62.5%}body{background-color:#c9c9c9;font-size:1.4rem;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}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}.wrapper{width:10in;border-left:1px solid #a2a2a2;border-right:1px solid #a2a2a2;margin:0 auto}@media screen{a.external:after{content:"\00A0" "[" "\2197" "]"}}@media print{a[href]:after{content:" (" attr(href) ")"}}.oben{background-color:#f4f4f4;border-bottom:#8ec6f0 3px solid}.oben--logo{display:block;margin:0 auto;padding:10px 0}.oben--menu{margin:0 auto;padding-bottom:1pc;list-style:none;letter-spacing:-.31em;text-align:center}.oben--menu--item{display:inline-block;letter-spacing:normal;background-color:#fff;border:1px solid #3498e4;font-size:1.2rem}.oben--menu--item a{display:inline-block;color:#3498e4;padding:4px 20px;text-decoration:none}.oben--menu--item a:hover{background-color:#d2e8f9;border-radius:inherit}.oben--menu--item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.oben--menu--item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.oben--menu--item__active a{background-color:#3498e4;color:#fff}.oben--menu--item__active a:hover{background-color:#3498e4}main{background-color:#eee}.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/img/banner_home.jpg b/img/banner_home.jpg new file mode 100644 index 0000000..3203a41 Binary files /dev/null and b/img/banner_home.jpg differ diff --git a/index.html b/index.html index b0f33d2..21fac1f 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,7 @@
+ My Home
Welcome!
diff --git a/src/img/banner_home.jpg b/src/img/banner_home.jpg new file mode 100644 index 0000000..794966e Binary files /dev/null and b/src/img/banner_home.jpg differ diff --git a/src/scss/main.scss b/src/scss/main.scss index ac09a1d..9e3e190 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -13,11 +13,16 @@ /* Content --------------------------*/ -html { font-size: 62.5%; } +html { + font-size: 62.5%; + height: 100%; +} $linkcolor: #660000; body { + background-color: #c9c9c9; + height: 100%; color: #000; font-family: $font-sans-serif; font-size: 1.4rem; /* =14px */ @@ -40,6 +45,15 @@ h3 { font-size: 1.25em; } + +.wrapper { + width: 960px; + border-left: 1px solid #a2a2a2; + border-right: 1px solid #a2a2a2; + margin: 0 auto; + height: 100%; +} + @media screen { a.external:after { content: "\00A0" "[" "\2197" "]"; @@ -54,9 +68,11 @@ h3 { /* Header --------------------------*/ +$headercolor: #3498e4; + .oben { background-color: #f4f4f4; - border-bottom: lighten(#3498e4, 20%) 3px solid; + border-bottom: lighten($headercolor, 20%) 3px solid; } .oben--logo { display: block; @@ -74,7 +90,7 @@ h3 { display: inline-block; letter-spacing: normal; background-color: #fff; - border: 1px solid #3498e4; + border: 1px solid $headercolor; font-size: 1.2rem; a { @@ -84,7 +100,7 @@ h3 { text-decoration: none; &:hover { - background-color: lighten(#3498e4, 40%); + background-color: lighten($headercolor, 35%); border-radius: inherit; } } @@ -99,10 +115,10 @@ h3 { } } .oben--menu--item__active a { - background-color: #3498e4; + background-color: $headercolor; color: #fff; &:hover { - background-color: #3498e4; + background-color: $headercolor; } } @@ -111,6 +127,13 @@ h3 { /* Content --------------------------*/ +main { + background-color: #eee; + height: 100%; +} + + + .fa { margin-right: 0.3em; speak: none; /* Won't speak the symbol | badly supported by browsers */