1
0
mirror of https://github.com/ryanoasis/nerd-fonts.git synced 2024-12-19 20:12:52 +02:00
nerd-fonts/_includes/css/skeleton.scss
Fini Jastrow 9f7e6ee0e3 Fix navbar in two lines
[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>
2023-10-09 17:31:56 +02:00

106 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;
}
}