mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2024-09-19 09:51:48 +02:00
9f7e6ee0e3
[why] The navbar should only be one line, switching to smaller and smaller items, until we reach a very small size (the smallest) where we finally allow it to overlow into the next lines. But that is not the case, the navbar switches between one and two lines already at medium sized screens. [how] Correct the width point when the navbar titles switch from long-titles to short-titles. Introduce new width switch point that reduces the cell widths of the navbar one they become very full and further reduction in width would result in overflow into the next line. Tested on Netscape and Chromium; the later needs bigger numbers (hmm) Fixes: #1375 Signed-off-by: Fini Jastrow <ulf.fini.jastrow@desy.de>
105 lines
2.6 KiB
SCSS
105 lines
2.6 KiB
SCSS
|
|
/* -----------------------------------*/
|
|
/* ----- 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;
|
|
}
|
|
|
|
/* top nav tweaks */
|
|
@media(min-width:940px) {
|
|
.hide-on-larger-view {
|
|
display: none !important;
|
|
}
|
|
|
|
}
|
|
|
|
@media(max-width:939px) {
|
|
.hide-on-smaller-view {
|
|
display: none !important;
|
|
}
|
|
}
|