diff --git a/css/reset.css b/css/reset.css index ed11813..0fcd5e8 100644 --- a/css/reset.css +++ b/css/reset.css @@ -1,8 +1,3 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -15,34 +10,12 @@ 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: baseline; -} -/* HTML5 display-role reset for older browsers */ +time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} 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; -} +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; -} +q:before, q:after{content:'';content:none;} +table{border-collapse:collapse;border-spacing:0;} \ No newline at end of file diff --git a/css/skeleton.css b/css/skeleton.css index 211454a..b7375fa 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,284 +1,73 @@ -@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700); -* { - margin: 0; - padding: 0; +@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);*{margin:0;padding:0;} +body{font-size:1.5em;line-height:1.6;font-family:'Roboto', sans-serif;font-weight:400;background-color:#f9f9f9;margin-bottom:4%;} +header{font-weight:400;background-color:#9C27B0;color:#f9f9f9;padding-left:20%;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);} +.main-content{} +.project-img{border-radius:2px;} +.project{border-radius:2px;margin-top:10px;background:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);transition:all 0.3s cubic-bezier(.25, .8, .25, 1);} +.project-content{display:inline-block;margin:0.5rem;position:relative;width:90%;} +.project:hover{box-shadow:0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);} +.project-content a:link, .project-content a:visited{font-weight:500;color:#607D8B;text-decoration:none;text-transform:uppercase;font-size:18px;} +.project-blue{color:#f9f9f9;background-color:#039be5;} +.project-red{color:#f9f9f9;background-color:#f44336;} +.project-gray{color:#f9f9f9;background-color:#546e7a;} +.project-side a:link, .project-side a:visited{color:#f9f9f9;} +.u-full-width{width:100%;box-sizing:border-box;} +.u-max-full-width{max-width:100%;box-sizing:border-box;} +.u-pull-right{float:right;} +.u-pull-left{float:left;} +h1{font-size:112px;line-height:1.2;letter-spacing:-.1rem;} +h2{font-size:56px;line-height:1.25;letter-spacing:-.1rem;} +h3{font-size:45px;line-height:1.3;letter-spacing:-.1rem;} +h4{font-size:34px;line-height:1.35;letter-spacing:-.08rem;} +h5{font-size:24px;line-height:1.5;letter-spacing:-.05rem;} +h6{font-size:1.5rem;line-height:1.6;letter-spacing:0;} +@media (min-width:550px){h1{font-size:112px;} +h2{font-size:56px;} +h3{font-size:45px;} +h4{font-size:34px;} +h5{font-size:24px;} +h6{font-size:1.5rem;} } -body { - font-size: 1.5em; - /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-family: 'Roboto', sans-serif; - font-weight: 400; - background-color: #f9f9f9; - margin-bottom: 4%; +.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box;} +.column, .columns{width:100%;float:left;box-sizing:border-box;} +@media (min-width:400px){.container{width:85%;padding:0;} } -header { - font-weight: 400; - background-color: #9C27B0; - color: #f9f9f9; - padding-left: 20%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); +@media (min-width:550px){.container{width:80%;} +.column, .columns{margin-left:4%;} +.column:first-child, .columns:first-child{margin-left:0;} +.one.column, .one.columns{width:4.66666666667%;} +.two.columns{width:13.3333333333%;} +.three.columns{width:22%;} +.four.columns{width:30.6666666667%;} +.five.columns{width:39.3333333333%;} +.six.columns{width:48%;} +.seven.columns{width:56.6666666667%;} +.eight.columns{width:65.3333333333%;} +.nine.columns{width:74.0%;} +.ten.columns{width:82.6666666667%;} +.eleven.columns{width:91.3333333333%;} +.twelve.columns{width:100%;margin-left:0;} +.one-third.column{width:30.6666666667%;} +.two-thirds.column{width:65.3333333333%;} +.one-half.column{width:48%;} +.offset-by-one.column, .offset-by-one.columns{margin-left:8.66666666667%;} +.offset-by-two.column, .offset-by-two.columns{margin-left:17.3333333333%;} +.offset-by-three.column, .offset-by-three.columns{margin-left:26%;} +.offset-by-four.column, .offset-by-four.columns{margin-left:34.6666666667%;} +.offset-by-five.column, .offset-by-five.columns{margin-left:43.3333333333%;} +.offset-by-six.column, .offset-by-six.columns{margin-left:52%;} +.offset-by-seven.column, .offset-by-seven.columns{margin-left:60.6666666667%;} +.offset-by-eight.column, .offset-by-eight.columns{margin-left:69.3333333333%;} +.offset-by-nine.column, .offset-by-nine.columns{margin-left:78.0%;} +.offset-by-ten.column, .offset-by-ten.columns{margin-left:86.6666666667%;} +.offset-by-eleven.column, .offset-by-eleven.columns{margin-left:95.3333333333%;} +.offset-by-one-third.column, .offset-by-one-third.columns{margin-left:34.6666666667%;} +.offset-by-two-thirds.column, .offset-by-two-thirds.columns{margin-left:69.3333333333%;} +.offset-by-one-half.column, .offset-by-one-half.columns{margin-left:52%;} } -.main-content {} -.project-img { - border-radius: 2px; -} -.project { - border-radius: 2px; - margin-top: 10px; - background: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - transition: all 0.3s cubic-bezier(.25, .8, .25, 1); -} -.project-content { - display: inline-block; - margin: 0.5rem; - position: relative; - width: 90%; -} -.project:hover { - box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); -} -.project-content a:link, .project-content a:visited { - font-weight: 500; - color: #607D8B; - text-decoration: none; - text-transform: uppercase; - font-size: 18px; -} -.project-blue { - color: #f9f9f9; - background-color:#039be5; -} -.project-red { - color: #f9f9f9; - background-color: #f44336; -} -.project-gray { - color: #f9f9f9; - background-color: #546e7a; -} -.project-side a:link, .project-side a:visited { - color: #f9f9f9; -} -/* Skeleton stuff - ------------------------------------ */ - -.u-full-width { - width: 100%; - box-sizing: border-box; -} -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; -} -.u-pull-right { - float: right; -} -.u-pull-left { - float: left; -} -h1 { - font-size: 112px; - line-height: 1.2; - letter-spacing: -.1rem; -} -h2 { - font-size: 56px; - line-height: 1.25; - letter-spacing: -.1rem; -} -h3 { - font-size: 45px; - line-height: 1.3; - letter-spacing: -.1rem; -} -h4 { - font-size: 34px; - line-height: 1.35; - letter-spacing: -.08rem; -} -h5 { - font-size: 24px; - line-height: 1.5; - letter-spacing: -.05rem; -} -h6 { - font-size: 1.5rem; - line-height: 1.6; - letter-spacing: 0; -} -@media (min-width: 550px) { - h1 { - font-size: 112px; - } - h2 { - font-size: 56px; - } - h3 { - font-size: 45px; - } - h4 { - font-size: 34px; - } - h5 { - font-size: 24px; - } - h6 { - font-size: 1.5rem; - } -} - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -.container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; -} -.column, .columns { - width: 100%; - float: left; - box-sizing: border-box; -} - -/* For devices larger than 400px */ - -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; - } -} - -/* For devices larger than 550px */ - -@media (min-width: 550px) { - .container { - width: 80%; - } - .column, .columns { - margin-left: 4%; - } - .column:first-child, .columns:first-child { - margin-left: 0; - } - .one.column, .one.columns { - width: 4.66666666667%; - } - .two.columns { - width: 13.3333333333%; - } - .three.columns { - width: 22%; - } - .four.columns { - width: 30.6666666667%; - } - .five.columns { - width: 39.3333333333%; - } - .six.columns { - width: 48%; - } - .seven.columns { - width: 56.6666666667%; - } - .eight.columns { - width: 65.3333333333%; - } - .nine.columns { - width: 74.0%; - } - .ten.columns { - width: 82.6666666667%; - } - .eleven.columns { - width: 91.3333333333%; - } - .twelve.columns { - width: 100%; - margin-left: 0; - } - .one-third.column { - width: 30.6666666667%; - } - .two-thirds.column { - width: 65.3333333333%; - } - .one-half.column { - width: 48%; - } - /* Offsets */ - .offset-by-one.column, .offset-by-one.columns { - margin-left: 8.66666666667%; - } - .offset-by-two.column, .offset-by-two.columns { - margin-left: 17.3333333333%; - } - .offset-by-three.column, .offset-by-three.columns { - margin-left: 26%; - } - .offset-by-four.column, .offset-by-four.columns { - margin-left: 34.6666666667%; - } - .offset-by-five.column, .offset-by-five.columns { - margin-left: 43.3333333333%; - } - .offset-by-six.column, .offset-by-six.columns { - margin-left: 52%; - } - .offset-by-seven.column, .offset-by-seven.columns { - margin-left: 60.6666666667%; - } - .offset-by-eight.column, .offset-by-eight.columns { - margin-left: 69.3333333333%; - } - .offset-by-nine.column, .offset-by-nine.columns { - margin-left: 78.0%; - } - .offset-by-ten.column, .offset-by-ten.columns { - margin-left: 86.6666666667%; - } - .offset-by-eleven.column, .offset-by-eleven.columns { - margin-left: 95.3333333333%; - } - .offset-by-one-third.column, .offset-by-one-third.columns { - margin-left: 34.6666666667%; - } - .offset-by-two-thirds.column, .offset-by-two-thirds.columns { - margin-left: 69.3333333333%; - } - .offset-by-one-half.column, .offset-by-one-half.columns { - margin-left: 52%; - } -} -.container:after, .row:after, .u-cf { - content: ""; - display: table; - clear: both; -} - -/* Larger than mobile */ - -@media (min-width: 400px) {} - -/* Larger than phablet (also point when grid becomes active) */ - -@media (min-width: 550px) {} - -/* Larger than tablet */ - -@media (min-width: 750px) {} - -/* Larger than desktop */ - -@media (min-width: 1000px) {} - -/* Larger than Desktop HD */ - -@media (min-width: 1200px) {} +.container:after, .row:after, .u-cf{content:"";display:table;clear:both;} +@media (min-width:400px){} +@media (min-width:550px){} +@media (min-width:750px){} +@media (min-width:1000px){} +@media (min-width:1200px){} \ No newline at end of file diff --git a/images/moat.png b/images/moat.png deleted file mode 100644 index 923c4b5..0000000 Binary files a/images/moat.png and /dev/null differ diff --git a/images/nodemc.png b/images/nodemc.png index 8a21060..aecdc9e 100644 Binary files a/images/nodemc.png and b/images/nodemc.png differ diff --git a/images/simmertech.png b/images/simmertech.png index c3554c3..8a0840e 100644 Binary files a/images/simmertech.png and b/images/simmertech.png differ diff --git a/images/spigot.png b/images/spigot.png index c385e49..53a1991 100644 Binary files a/images/spigot.png and b/images/spigot.png differ