mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2024-09-19 09:51:48 +02:00
91 lines
2.4 KiB
CSS
91 lines
2.4 KiB
CSS
|
|
/* -----------------------------------*/
|
|
/* ----- 960px wide fancy grid! ----- */
|
|
/* -----------------------------------*/
|
|
|
|
/* by tim o'brien, t413.com
|
|
* based on getskeleton.com
|
|
*/
|
|
|
|
|
|
/* ----- base grid----- */
|
|
|
|
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
|
.container .column { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
|
.row { margin-bottom: 20px; }
|
|
|
|
.container .small.column { width: 300px; }
|
|
.container .half.column { width: 460px; }
|
|
.container .big.column { width: 620px; }
|
|
.container .full.column { width: 940px; }
|
|
|
|
|
|
/* ----- Tablet (Portrait) -- 768px ----- */
|
|
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
|
.container { width: 768px; }
|
|
|
|
.container .small.column { width: 236px; }
|
|
.container .half.column { width: 364px; }
|
|
.container .big.column { width: 488px; }
|
|
.container .full.column { width: 748px; }
|
|
}
|
|
|
|
|
|
/* ----- Mobile (Portrait) ----- */
|
|
@media only screen and (max-width: 767px) {
|
|
.container { width: 96%; }
|
|
.container .column { margin: 1%; }
|
|
|
|
.container .small.column { width: 48%; }
|
|
.container .half.column { width: 48%; }
|
|
.container .big.column { width: 98%; }
|
|
.container .full.column { width: 98%; }
|
|
}
|
|
|
|
|
|
/* ----- Mobile (Landscape) -- 480px ----- */
|
|
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
|
.container { width: 92%; }
|
|
.container .column { margin: 2%; }
|
|
|
|
.container .small.column { width: 46%; }
|
|
.container .half.column { width: 46%; }
|
|
.container .big.column { width: 96%; }
|
|
.container .full.column { width: 96%; }
|
|
}
|
|
|
|
|
|
|
|
/* ----- Clearing ----- */
|
|
|
|
/* Self Clearing Goodness */
|
|
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
|
|
|
/* Use clearfix class on parent to clear nested columns,
|
|
or wrap each row of columns in a <div class="row"> */
|
|
.clearfix:before,
|
|
.clearfix:after,
|
|
.row:before,
|
|
.row:after {
|
|
content: '\0020';
|
|
display: block;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0; }
|
|
.row:after,
|
|
.clearfix:after {
|
|
clear: both; }
|
|
.row,
|
|
.clearfix {
|
|
zoom: 1; }
|
|
|
|
/* You can also use a <br class="clear" /> to clear columns */
|
|
.clear {
|
|
clear: both;
|
|
display: block;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0;
|
|
}
|