gmemstr.github.io/css/skeleton.css
gmemstr e4657c37cb Optimized images & CSS.
Ran through Google Pagespeed Insights for smaller
filesizes.
2016-06-24 20:23:05 -07:00

73 lines
3.9 KiB
CSS

@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;}
}
.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;}
}
@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%;}
}
.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){}