Team:Rutgers/css/component.icongrid

From 2013.igem.org

Latest revision as of 00:13, 28 September 2013

@font-face { font-family: 'anyoldicon'; src:url('https://github.com/svensken/iGEMwiki2013/blob/gh-pages/fonts/anyoldicon/any-old-icon.eot?raw=true'); src:url('https://github.com/svensken/iGEMwiki2013/blob/gh-pages/fonts/anyoldicon/any-old-icon.eot?raw=true?#iefix') format('embedded-opentype'), url('https://github.com/svensken/iGEMwiki2013/blob/gh-pages/fonts/anyoldicon/any-old-icon.woff?raw=true') format('woff'), url('https://github.com/svensken/iGEMwiki2013/blob/gh-pages/fonts/anyoldicon/any-old-icon.tff?raw=true') format('truetype'), url('https://github.com/svensken/iGEMwiki2013/blob/gh-pages/fonts/anyoldicon/any-old-icon.svg?raw=true#anyoldicon') format('svg'); font-weight: normal; font-style: normal; }

/* General grid styles */ .cbp-ig-grid { list-style: none; padding: 0 0 50px 0; margin: 0; }

/* Clear floats */ .cbp-ig-grid:before, .cbp-ig-grid:after { content: " "; display: table; }

.cbp-ig-grid:after { clear: both; }

/* grid item */ .cbp-ig-grid li { width: 33%; float: left; height: 320px; text-align: center; border-top: 1px solid #ddd; }

/* we are using a combination of borders and box shadows to control the grid lines */ .cbp-ig-grid li:nth-child(-n+3){ border-top: none; }

.cbp-ig-grid li:nth-child(3n-1), .cbp-ig-grid li:nth-child(3n-2) { box-shadow: 1px 0 0 #ddd; }

/* anchor style */ .cbp-ig-grid li > a { display: block; height: 100%; color: #fff; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; }

/* the icon with pseudo class for icon font */ .cbp-ig-icon { padding: 5px 0 0 0; display: block; -webkit-transition: -webkit-transform 0.2s; transition: -moz-transform 0.2s; transition: transform 0.2s; }

.cbp-ig-icon:before { font-family: 'anyoldicon'; font-size: 14em; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; }

.cbp-ig-icon-project:before { content: "\e011"; }

.cbp-ig-icon-team:before { content: "\e02f"; }

.cbp-ig-icon-modelling:before { content: "\e02d"; }

.cbp-ig-icon-sponsors:before { content: "\e00f"; }

.cbp-ig-icon-notebook:before { content: "\e00b"; }

.cbp-ig-icon-outreach:before { content: "\e041"; }

/* title element */ .cbp-ig-grid .cbp-ig-title { margin: 5px 0 5px 0; padding: 5px 0 0 0; font-size: 2em; position: relative; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s; }

.cbp-ig-grid .cbp-ig-title:before { content: ; position: absolute; background: #ff0000; width: 160px; height: 6px; top: 0px; left: 50%; margin: -10px 0 0 -80px; -webkit-transition: margin-top 0.2s; /* top or translate does not seem to work in Firefox */ -moz-transition: margin-top 0.2s; transition: margin-top 0.2s; }

.cbp-ig-grid .cbp-ig-category { text-transform: uppercase; display: inline-block; font-size: 1em; letter-spacing: 1px; color: #000; -webkit-transform: translateY(10px); -moz-transform: -moz-translateY(10px); -ms-transform: -ms-translateY(10px); transform: translateY(10px); opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; -webkit-transition: transform 0.3s, opacity 0.2s; }

.cbp-ig-grid li:hover .cbp-ig-category, .touch .cbp-ig-grid li .cbp-ig-category { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }

/* Hover styles */

.cbp-ig-grid li > a:hover { background: #808080; }

.cbp-ig-grid li > a:hover .cbp-ig-icon { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); }

.cbp-ig-grid li > a:hover .cbp-ig-icon:before, .cbp-ig-grid li > a:hover .cbp-ig-title { color: #000; }

.cbp-ig-grid li > a:hover .cbp-ig-title { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }

.cbp-ig-grid li > a:hover .cbp-ig-title:before { background: #000; margin-top: 50px; }

@media screen and (max-width: 62.75em) { .cbp-ig-grid li { width: 50%; }

/* reset the grid lines */ .cbp-ig-grid li:nth-child(-n+3){ border-top: 1px solid #ddd; }

.cbp-ig-grid li:nth-child(3n-1), .cbp-ig-grid li:nth-child(3n-2) { box-shadow: none; }

.cbp-ig-grid li:nth-child(-n+2){ border-top: none; }

.cbp-ig-grid li:nth-child(2n-1) { box-shadow: 1px 0 0 #ddd; } }

@media screen and (max-width: 41.6em) { .cbp-ig-grid li { width: 100%; }

.cbp-ig-grid li:nth-child(-n+2){ border-top: 1px solid #ddd; }

.cbp-ig-grid li:nth-child(2n-1) { box-shadow: none }

.cbp-ig-grid li:first-child { border-top: none; } }

@media screen and (max-width: 25em) { .cbp-ig-grid { font-size: 80%; }

.cbp-ig-grid .cbp-ig-category { margin-top: 20px; } }