diff --git a/css/base.css b/css/base.css index 51b0fc8..fbdf5dc 100644 --- a/css/base.css +++ b/css/base.css @@ -1,581 +1 @@ -/* - Based on the Eric Meyer CSS Reset v2.0 (http://meyerweb.com/eric/tools/css/reset/) -*/ -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: top; -} -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; -} -body { - line-height: 1; -} -ol, -ul { - list-style: none; -} -blockquote, -q { - quotes: none; -} -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -body { - font-size: 15px; - line-height: 140%; -} -h1, -h2, -h3, -h4, -h5, -h6 { - line-height: 140%; -} -.container { - width: 960px; - margin: 0 auto; -} -header { - float: left; - width: 940px; - margin-left: 10px; - margin-right: 10px; - padding-left: 0px; - padding-right: 0px; -} -article { - float: left; - width: 620px; - margin-left: 10px; - margin-right: 10px; - padding-left: 0px; - padding-right: 0px; -} -aside { - float: left; - width: 300px; - margin-left: 10px; - margin-right: 10px; - padding-left: 0px; - padding-right: 0px; -} -footer { - float: left; - width: 940px; - margin-left: 10px; - margin-right: 10px; - padding-left: 0px; - padding-right: 0px; -} -body { - color: #000000; - font-family: 'Helvetica', sans-serif; - -webkit-font-smoothing: antialiased; -} -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: 'Trebuchet MS', sans-serif; - font-weight: bold; -} -h1 { - font-size: 3em; - margin-top: 0.75em; - margin-bottom: 0.25em; -} -h2 { - font-size: 2em; - margin-top: 1em; - margin-bottom: 0.75em; -} -h3 { - font-size: 1.5em; - margin-top: 1.25em; - margin-bottom: 0.5em; - font-weight: normal; -} -h4 { - font-size: 1.25em; - margin-top: 1em; - margin-bottom: 0.5em; - font-weight: normal; - color: #4d4d4d; -} -h5 { - font-size: 1.125em; - margin-top: 0.5em; - margin-bottom: 0.5em; -} -h6 { - font-size: 1em; - margin-top: 0.5em; - margin-bottom: 0.5em; -} -p { - margin: 1em 0; -} -a { - color: #69b5e1; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -abbr, -acronym { - border-bottom: 1px dotted; - cursor: help; -} -address { - font-size: 1em; - font-style: italic; -} -blockquote { - margin: 1em 0; - padding: 0 0 0 2em; -} -cite { - font-style: italic; -} -code { - font-size: 1em; - font-family: monospace; - background: #eeeeee; - border: 1px solid #e1e1e1; - padding: 0.125em 0.25em; - line-height: 150%; -} -em, -i { - font-style: italic; -} -strong, -b { - font-weight: bold; -} -hr { - outline: none; - border: none; - margin: 1em 0; - padding: 0; - border-top: 1px solid #eeeeee; -} -ol, -ul { - margin: 1em 0; - padding: 0 0 0 2em; -} -ol li, -ul li { - font-size: 1em; - list-style-position: outside; -} -ul li { - list-style: disc; -} -ol li { - list-style: decimal; -} -form { - margin: 1em 0; -} -dl { - margin: 1em 0; -} -dl dt { - font-weight: bold; -} -dl dd { - margin: 0 0 0.5em; -} -table { - width: 100%; - margin: 1em 0; -} -table th { - padding: 0.5em; - border: 1px solid #eeeeee; - background: #f4f4f4; - text-align: left; - font-weight: bold; -} -table td { - padding: 0.5em; - border: 1px solid #eeeeee; -} -form { - display: block; -} -fieldset { - display: block; - margin: 1.25em 0; - padding: 0; -} -legend { - display: block; - width: 100%; - margin: 0 0 1em 0; - font-weight: bold; - border-bottom: 1px solid #eeeeee; -} -label { - display: block; - margin: 0 0 0.25em; - font-weight: bold; -} -select, -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="image"], -input[type="color"] { - display: block; - padding: 0.5em; - margin: 0 0 0.625em; - vertical-align: middle; - border: 1px solid #eeeeee; - outline: none; - font-family: inherit; - font-size: 1em; - -webkit-appearance: none; - border-radius: 0; -} -select:hover, -textarea:hover, -input[type="text"]:hover, -input[type="password"]:hover, -input[type="datetime"]:hover, -input[type="datetime-local"]:hover, -input[type="date"]:hover, -input[type="month"]:hover, -input[type="time"]:hover, -input[type="week"]:hover, -input[type="number"]:hover, -input[type="email"]:hover, -input[type="url"]:hover, -input[type="search"]:hover, -input[type="tel"]:hover, -input[type="image"]:hover, -input[type="color"]:hover { - border: 1px solid #e6e6e6; -} -select:focus, -textarea:focus, -input[type="text"]:focus, -input[type="password"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="time"]:focus, -input[type="week"]:focus, -input[type="number"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="image"]:focus, -input[type="color"]:focus { - border: 1px solid #e1e1e1; -} -input[type="submit"], -input[type="button"] { - display: block; - border-radius: 0; -} -input[type="file"] { - padding: 0.125em; - margin: 0 0 0.625em; - font-family: inherit; - font-size: 1em; - -webkit-appearance: none; - border-radius: 0; - line-height: 100%; -} -textarea { - padding: 0.25em; -} -progress, -meter { - padding: 0.125em; - margin: 0 0 0.625em; - font-family: inherit; - font-size: 1em; -} -.button, -a[class^="button"], -button, -input[type="button"], -input[type="submit"], -input[type="reset"] { - -webkit-appearance: none; - padding: 0.625em 1.25em; - margin: 0 0 0.625em; - font-family: inherit; - font-size: 1em; - border: none; - outline: none; - background: #eeeeee; - line-height: 100%; - cursor: pointer; - text-decoration: none; - display: inline-block; - zoom: 1; - *display: inline; -} -.button:hover, -a[class^="button"]:hover, -button:hover, -input[type="button"]:hover, -input[type="submit"]:hover, -input[type="reset"]:hover { - background: #e6e6e6; - text-decoration: none; -} -.button:active, -a[class^="button"]:active, -button:active, -input[type="button"]:active, -input[type="submit"]:active, -input[type="reset"]:active { - background: #dfdfdf; -} -.button.disabled, -a[class^="button"].disabled, -button.disabled, -input[type="button"].disabled, -input[type="submit"].disabled, -input[type="reset"].disabled { - background: #f4f4f4; - color: #c8c8c8; - cursor: default; -} -button.primary, -.button-primary, -input.button-primary { - background: #69b5e1; - color: white; -} -button.primary:hover, -.button-primary:hover, -input.button-primary:hover { - background: #54abdd; -} -button.primary:active, -.button-primary:active, -input.button-primary:active { - background: #3ea0d9; -} -button.primary.disabled, -.button-primary.disabled, -input.button-primary.disabled { - background: #bedff2; - color: #69b5e1; - cursor: default; -} -button.secondary, -.button-secondary, -input.button-secondary { - background: #9d6ab4; - color: white; -} -button.secondary:hover, -.button-secondary:hover, -input.button-secondary:hover { - background: #9259ab; -} -button.secondary:active, -.button-secondary:active, -input.button-secondary:active { - background: #844f9c; -} -button.secondary.disabled, -.button-secondary.disabled, -input.button-secondary.disabled { - background: #caaed6; - color: #9d6ab4; - cursor: default; -} -ul[class*="menu-"] { - margin: 1em 0; - padding: 0; -} -ul[class*="menu-"] li { - position: relative; - list-style: none; -} -ul[class*="menu-"] li a { - padding: 0.75em 1.25em; - line-height: 100%; - color: #000000; - text-decoration: none; -} -ul[class*="menu-"] li:hover > a, -ul[class*="menu-"] li a:hover, -ul[class*="menu-"] li a.selected, -ul[class*="menu-"] li.selected a { - background: #eeeeee; -} -ul[class*="menu-"] li a:active, -ul[class*="menu-"] li a.selected:hover, -ul[class*="menu-"] li.selected a:hover { - background: #e6e6e6; -} -ul.menu-primary li { - display: inline; -} -ul.menu-primary li a { - display: inline-block; - zoom: 1; - *display: inline; -} -ul.menu-primary li ul { - display: none; - margin: 0; - padding: 0; - position: absolute; - top: 2.25em; - left: 0; - border: 1px solid #eeeeee; - background: white; - z-index: 1000; -} -ul.menu-primary li ul li { - display: block; -} -ul.menu-primary li ul li a { - display: block; - white-space: nowrap; -} -ul.menu-primary li:hover ul, -ul.menu-primary li ul:hover { - display: inline; -} -ul.menu-secondary { - border: 1px solid #eeeeee; -} -ul.menu-secondary li { - display: block; -} -ul.menu-secondary li a { - display: block; -} +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{font-size:15px;line-height:140%}h1,h2,h3,h4,h5,h6{line-height:140%}.container{width:960px;margin:0 auto}header{float:left;width:940px;margin-left:10px;margin-right:10px}article{float:left;width:620px;margin-left:10px;margin-right:10px}aside{float:left;width:300px;margin-left:10px;margin-right:10px}footer{float:left;width:940px;margin-left:10px;margin-right:10px}body{color:#000;font-family:Helvetica,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet MS',sans-serif;font-weight:700}h1{font-size:3em;margin-top:.75em;margin-bottom:.25em}h2{font-size:2em;margin-top:1em;margin-bottom:.75em}h3{font-size:1.5em;margin-top:1.25em;margin-bottom:.5em;font-weight:400}h4{font-size:1.25em;margin-top:1em;margin-bottom:.5em;font-weight:400;color:#4d4d4d}h5{font-size:1.125em;margin-top:.5em;margin-bottom:.5em}h6{font-size:1em;margin-top:.5em;margin-bottom:.5em}p{margin:1em 0}a{color:#69b5e1;text-decoration:none}a:hover{text-decoration:underline}abbr,acronym{border-bottom:1px dotted;cursor:help}address{font-size:1em;font-style:italic}blockquote{margin:1em 0;padding:0 0 0 2em}cite{font-style:italic}code{font-size:1em;font-family:monospace;background:#eee;border:1px solid #e1e1e1;padding:.125em .25em;line-height:150%}em,i{font-style:italic}strong,b{font-weight:700}hr{outline:0;border:0;margin:1em 0;padding:0;border-top:1px solid #eee}ol,ul{margin:1em 0;padding:0 0 0 2em}ol li,ul li{font-size:1em;list-style-position:outside}ul li{list-style:disc}ol li{list-style:decimal}form{margin:1em 0}dl{margin:1em 0}dl dt{font-weight:700}dl dd{margin:0 0 .5em}table{width:100%;margin:1em 0}table th{padding:.5em;border:1px solid #eee;background:#f4f4f4;text-align:left;font-weight:700}table td{padding:.5em;border:1px solid #eee}form{display:block}fieldset{display:block;margin:1.25em 0;padding:0}legend{display:block;width:100%;margin:0 0 1em;font-weight:700;border-bottom:1px solid #eee}label{display:block;margin:0 0 .25em;font-weight:700}select,textarea,input[type=text],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],input[type=email],input[type=url],input[type=search],input[type=tel],input[type=image],input[type=color]{display:block;padding:.5em;margin:0 0 .625em;vertical-align:middle;border:1px solid #eee;outline:0;font-family:inherit;font-size:1em;-webkit-appearance:none;border-radius:0}select:hover,textarea:hover,input[type=text]:hover,input[type=password]:hover,input[type=datetime]:hover,input[type=datetime-local]:hover,input[type=date]:hover,input[type=month]:hover,input[type=time]:hover,input[type=week]:hover,input[type=number]:hover,input[type=email]:hover,input[type=url]:hover,input[type=search]:hover,input[type=tel]:hover,input[type=image]:hover,input[type=color]:hover{border:1px solid #e6e6e6}select:focus,textarea:focus,input[type=text]:focus,input[type=password]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=date]:focus,input[type=month]:focus,input[type=time]:focus,input[type=week]:focus,input[type=number]:focus,input[type=email]:focus,input[type=url]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=image]:focus,input[type=color]:focus{border:1px solid #e1e1e1}input[type=submit],input[type=button]{display:block;border-radius:0}input[type=file]{padding:.125em;margin:0 0 .625em;font-family:inherit;font-size:1em;-webkit-appearance:none;border-radius:0;line-height:100%}textarea{padding:.25em}progress,meter{padding:.125em;margin:0 0 .625em;font-family:inherit;font-size:1em}.button,a[class^=button],button,input[type=button],input[type=submit],input[type=reset]{-webkit-appearance:none;padding:.625em 1.25em;margin:0 0 .625em;font-family:inherit;font-size:1em;border:0;outline:0;background:#eee;line-height:100%;cursor:pointer;text-decoration:none;display:inline-block;zoom:1;*display:inline}.button:hover,a[class^=button]:hover,button:hover,input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover{background:#e6e6e6;text-decoration:none}.button:active,a[class^=button]:active,button:active,input[type=button]:active,input[type=submit]:active,input[type=reset]:active{background:#dfdfdf}.button.disabled,a[class^=button].disabled,button.disabled,input[type=button].disabled,input[type=submit].disabled,input[type=reset].disabled{background:#f4f4f4;color:#c8c8c8;cursor:default}button.primary,.button-primary,input.button-primary{background:#69b5e1;color:#fff}button.primary:hover,.button-primary:hover,input.button-primary:hover{background:#54abdd}button.primary:active,.button-primary:active,input.button-primary:active{background:#3ea0d9}button.primary.disabled,.button-primary.disabled,input.button-primary.disabled{background:#bedff2;color:#69b5e1;cursor:default}button.secondary,.button-secondary,input.button-secondary{background:#9d6ab4;color:#fff}button.secondary:hover,.button-secondary:hover,input.button-secondary:hover{background:#9259ab}button.secondary:active,.button-secondary:active,input.button-secondary:active{background:#844f9c}button.secondary.disabled,.button-secondary.disabled,input.button-secondary.disabled{background:#caaed6;color:#9d6ab4;cursor:default}ul[class*=menu-]{margin:1em 0;padding:0}ul[class*=menu-] li{position:relative;list-style:none}ul[class*=menu-] li a{padding:.75em 1.25em;line-height:100%;color:#000;text-decoration:none}ul[class*=menu-] li:hover>a,ul[class*=menu-] li a:hover,ul[class*=menu-] li a.selected,ul[class*=menu-] li.selected a{background:#eee}ul[class*=menu-] li a:active,ul[class*=menu-] li a.selected:hover,ul[class*=menu-] li.selected a:hover{background:#e6e6e6}ul.menu-primary li{display:inline}ul.menu-primary li a{display:inline-block;zoom:1;*display:inline}ul.menu-primary li ul{display:none;margin:0;padding:0;position:absolute;top:2.25em;left:0;border:1px solid #eee;background:#fff;z-index:1000}ul.menu-primary li ul li{display:block}ul.menu-primary li ul li a{display:block;white-space:nowrap}ul.menu-primary li:hover ul,ul.menu-primary li ul:hover{display:inline}ul.menu-secondary{border:1px solid #eee}ul.menu-secondary li{display:block}ul.menu-secondary li a{display:block} \ No newline at end of file diff --git a/css/desktop.css b/css/desktop.css index 8700972..fcb00cb 100644 --- a/css/desktop.css +++ b/css/desktop.css @@ -1,50 +1 @@ -@media (min-width: 1200px) { - body { - font-size: 15px; - line-height: 140%; - } - h1, - h2, - h3, - h4, - h5, - h6 { - line-height: 140%; - } - .container { - width: 1140px; - margin: 0 auto; - } - header { - float: left; - width: 1111.5px; - margin-left: 14.25px; - margin-right: 14.25px; - padding-left: 0px; - padding-right: 0px; - } - article { - float: left; - width: 731.5px; - margin-left: 14.25px; - margin-right: 14.25px; - padding-left: 0px; - padding-right: 0px; - } - aside { - float: left; - width: 351.5px; - margin-left: 14.25px; - margin-right: 14.25px; - padding-left: 0px; - padding-right: 0px; - } - footer { - float: left; - width: 1111.5px; - margin-left: 14.25px; - margin-right: 14.25px; - padding-left: 0px; - padding-right: 0px; - } -} +@media (min-width:1200px){body{font-size:15px;line-height:140%}h1,h2,h3,h4,h5,h6{line-height:140%}.container{width:1140px;margin:0 auto}header{float:left;width:1111.5px;margin-left:14.25px;margin-right:14.25px}article{float:left;width:731.5px;margin-left:14.25px;margin-right:14.25px}aside{float:left;width:351.5px;margin-left:14.25px;margin-right:14.25px}footer{float:left;width:1111.5px;margin-left:14.25px;margin-right:14.25px}} \ No newline at end of file diff --git a/css/mobile.css b/css/mobile.css index 083a420..ff0449c 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -1,50 +1 @@ -@media (max-width: 767px) { - body { - font-size: 16px; - line-height: 140%; - } - h1, - h2, - h3, - h4, - h5, - h6 { - line-height: 140%; - } - .container { - width: 100%; - margin: 0 auto; - } - header { - float: left; - width: 90%; - margin-left: 5%; - margin-right: 5%; - padding-left: 0%; - padding-right: 0%; - } - article { - float: left; - width: 90%; - margin-left: 5%; - margin-right: 5%; - padding-left: 0%; - padding-right: 0%; - } - aside { - float: left; - width: 90%; - margin-left: 5%; - margin-right: 5%; - padding-left: 0%; - padding-right: 0%; - } - footer { - float: left; - width: 90%; - margin-left: 5%; - margin-right: 5%; - padding-left: 0%; - padding-right: 0%; - } -} +@media (max-width:767px){body{font-size:16px;line-height:140%}h1,h2,h3,h4,h5,h6{line-height:140%}.container{width:100%;margin:0 auto}header{float:left;width:90%;margin-left:5%;margin-right:5%}article{float:left;width:90%;margin-left:5%;margin-right:5%}aside{float:left;width:90%;margin-left:5%;margin-right:5%}footer{float:left;width:90%;margin-left:5%;margin-right:5%}} \ No newline at end of file diff --git a/css/tablet.css b/css/tablet.css index 84b07d0..f842160 100644 --- a/css/tablet.css +++ b/css/tablet.css @@ -1,50 +1 @@ -@media (min-width: 768px) and (max-width: 959px) { - body { - font-size: 14px; - line-height: 140%; - } - h1, - h2, - h3, - h4, - h5, - h6 { - line-height: 140%; - } - .container { - width: 768px; - margin: 0 auto; - } - header { - float: left; - width: 752px; - margin-left: 8px; - margin-right: 8px; - padding-left: 0px; - padding-right: 0px; - } - article { - float: left; - width: 496px; - margin-left: 8px; - margin-right: 8px; - padding-left: 0px; - padding-right: 0px; - } - aside { - float: left; - width: 240px; - margin-left: 8px; - margin-right: 8px; - padding-left: 0px; - padding-right: 0px; - } - footer { - float: left; - width: 752px; - margin-left: 8px; - margin-right: 8px; - padding-left: 0px; - padding-right: 0px; - } -} +@media (min-width:768px) and (max-width:959px){body{font-size:14px;line-height:140%}h1,h2,h3,h4,h5,h6{line-height:140%}.container{width:768px;margin:0 auto}header{float:left;width:752px;margin-left:8px;margin-right:8px}article{float:left;width:496px;margin-left:8px;margin-right:8px}aside{float:left;width:240px;margin-left:8px;margin-right:8px}footer{float:left;width:752px;margin-left:8px;margin-right:8px}} \ No newline at end of file diff --git a/less/_mixins.less b/less/_mixins.less index d163173..329a847 100644 --- a/less/_mixins.less +++ b/less/_mixins.less @@ -12,13 +12,13 @@ width: @columnWidth * @columnCount + @gutterWidth * @columnCount; } -.column(@columns: 1, @offset: 0, @padding: 0) when (@columnCount >= (@columns+@offset)) { +.column(@columns: 1, @offset: 0) when (@columnCount >= (@columns + @offset)) { @consideredColumns: (@columnCount * @columns) / @columnCount; .newColumn(); } -.column(@columns: 1, @offset: 0, @padding: 0) when (@columnCount < (@columns+@offset)) { +.column(@columns: 1, @offset: 0) when (@columnCount < (@columns + @offset)) { @consideredColumns: (@columnCount * @columns) / @columns; @offset: 0; @@ -27,15 +27,13 @@ .newColumn() { @offsetWidth: @columnWidth * @offset + @gutterWidth * @offset; - @width: (@columnWidth * @consideredColumns) + (@gutterWidth * (@consideredColumns - 1)) - ((@padding * (unit(@paddingRatio) / 100)) * 2); + @width: (@columnWidth * @consideredColumns) + (@gutterWidth * (@consideredColumns - 1)); @unit: @columnWidth - @columnWidth; float: left; width: @width; - margin-left: @offsetWidth+@gutterWidth/2; - margin-right: @gutterWidth/2; - padding-left: @unit + @padding * (unit(@paddingRatio) / 100); - padding-right: @unit + @padding * (unit(@paddingRatio) / 100); + margin-left: @offsetWidth + @gutterWidth/2; + margin-right: @gutterWidth / 2; }