nerd-fonts/_includes/css/nerd-font-tweaks.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

751 lines
12 KiB
SCSS

p {
line-height: 1.75em;
}
#main .nerd-font-button {
margin: 0px;
font-weight: 900;
text-align: center;
padding: 8px 18px;
}
input.nerd-font-input {
cursor: inherit;
}
.highlight {
display: inline-block;
width: auto;
margin: 0pt auto;
}
.nerd-font-button,
.nerd-font-input {
cursor: pointer;
border-width: 2px;
font-size: 21px;
border-style: solid;
border-color: #f8f8f8;
color: #f8f8f8;
&input {
cursor: inherit;
border-radius: unset;
}
&.primary {
background: #1E5D8A;
}
&.secondary {
background: #BA45AE;
}
&.tertiary {
background: #565346;
border-color: #0fbfcf;
color: #0fbfcf;
}
&.tertiary--inverse {
background: #0fbfcf;
border-color: #565346;
color: #565346;
}
&.download {
background: #0C640C;
}
}
#main .nerd-font-button a {
text-decoration: none;
color: inherit;
}
a.nerd-font-button {
font-size: 21px;
text-decoration: none;
}
a.nerd-font-button:before {
font-weight: normal;
margin-right: .25em;
/* .nf */
font-family: 'NerdFontsSymbols Nerd Font';
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
#main .nerd-font-badges {
line-height: 2.3em;
}
/* adjust touch-size on mobile */
@media screen and (max-width:800px) {
#main .nerd-font-badges img {
height: 2.2em;
margin: 6px 0px;
}
}
#icon-cheat-sheet .container {
max-width: none;
width: auto;
}
#main .nerd-font-buttons {
line-height: 4em;
}
#main input.nerd-font-cheat-sheet-search {
margin-right: auto;
margin-left: auto;
width: 400px;
}
#main .nerd-font-cheat-sheet {
// max-height: 520px;
overflow-x: hidden;
// overflow-y: scroll;
margin-top: 40px;
max-width: none;
justify-content: center;
display: flex;
flex-flow: row wrap;
margin-bottom: 60px;
}
#glyphCheatSheet .column {
width: 146px;
height: 146px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
position: relative;
border: 2px solid rgba(0, 0, 0, .25);
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
margin: 10px 5px;
display: block;
}
#main .nerd-font-cheat-sheet .column:hover {
background: rgba(0, 0, 0, .25);
border: 2px solid #0fbfcf;
color: #0fbfcf !important;
cursor: pointer;
}
#main .nerd-font-cheat-sheet .column:hover .codepoint {
border-color: #0fbfcf;
}
#main .nerd-font-cheat-sheet .column .codepoint:hover {
background: #767260;
text-decoration: underline;
}
#main .nerd-font-cheat-sheet .column:hover .class-name {
color: #0fbfcf;
}
#main .nerd-font-cheat-sheet .column .class-name {
color: antiquewhite;
font-family: sans-serif;
font-weight: bold;
position: relative;
text-align: center;
width: 100%;
word-break: break-word;
font-size: 13px;
}
#main .nerd-font-cheat-sheet .column .codepoint {
border: 2px dashed;
padding: 0px 10px;
position: absolute;
bottom: 0px;
right: 0px;
font-size: 14px;
border-radius: 3px;
border-bottom: none;
border-right: none;
background: rgba(0, 0, 0, .25);
border-color: #565346;
font-weight: bold;
border-top-right-radius: unset;
border-bottom-left-radius: unset;
}
#main .nerd-font-cheat-sheet .column .class-name,
#main .nerd-font-cheat-sheet .column .codepoint {
font-family: 'mono';
display: inline-block;
text-align: left;
}
#main .nerd-font-cheat-sheet .nf {
font-size: 3.25em;
text-align: left;
}
#main .nerd-font-cheat-sheet .nfold {
font-size: 3.25em;
color: #8810b0;
text-align: left;
}
#main .nerd-font-cheat-sheet .glyph-popout-copy-clipboard {
background: #585547;
border: 2px solid #0fbfcf;
display: block;
position: absolute;
border-bottom-left-radius: 5px;
right: 0px;
border-right: unset;
border-top: unset;
top: 0px;
width: 76px;
z-index: 5;
pointer-events: auto;
}
#main .nerd-font-cheat-sheet span.glyph-popout-copy-clipboard span {
font-size: 12px;
font-weight: bold;
display: block;
height: 18px;
padding: 0px 5px;
}
#main .nerd-font-cheat-sheet span.glyph-popout-copy-clipboard span:first-child {
writing-mode: vertical-lr;
height: 54px;
transform: rotate(180deg);
background: #0fbfcf;
color: white;
text-decoration: none;
text-transform: uppercase;
float: left;
width: 20px;
line-height: 13px;
}
#main .nerd-font-cheat-sheet span.glyph-popout-copy-clipboard span:not(:first-child) {
text-align: left;
font-size: 14px;
padding-left: 28px;
}
#main .nerd-font-cheat-sheet span.glyph-popout-copy-clipboard span:not(:first-child):hover {
background: #767260;
text-decoration: underline;
border-radius: 2px;
border-style: dashed;
border-color: #0fbfcf;
width: 100%;
}
.corner-red {
position: absolute;
right: 0;
top: 0;
width: 0px;
height: 0px;
border-top: 65px solid #e11e2d;
border-left: 65px solid transparent;
z-index: 11;
pointer-events: none;
}
.corner-text {
position: absolute;
right: 0%;
top: 10%;
color: white;
font-size: 8pt;
font-weight: bold;
font-family: 'mono';
text-align: center;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-sand-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 12;
}
/* HACK - replicate FA stack */
.fa-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: 2.5em
}
.fa-stack-1x,
.fa-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%
}
.fa-stack-1x {
line-height: inherit
}
.fa-stack-2x {
font-size: 2em
}
// #forkongithub .nf {
// font-size: 1.25rem;
// }
/* for any ASCII :) */
/*
#forkongithub span {
font-size: 1.75rem;
}
#forkongithub a {
display: inline-block;
}
*/
/* color scheme */
.nf1 {
color: #E2DB74
}
.nf2 {
color: #49a7e9
}
.nf3 {
color: #66FF99
}
.nf4 {
color: #Ff66CC
}
.nf5 {
color: #00ffff
}
.nf6 {
color: #f09f17
}
.nf7 {
color: #DD1B16
}
/* Example Usage */
.nerd-fonts-example-usage {
font-size: 2rem;
display: block;
}
/* Release Changelog section */
#release summary {
text-align: center;
font-size: 1.25em;
cursor: pointer;
padding: 0px 0px 20px 0px;
}
#all-contributors .container>div>div {
min-height: 160px;
width: 130px;
}
#all-contributors a {
display: inline-block;
}
/* hack fix for emoji key styling */
#all-contributors a[title] {
text-decoration: none;
}
/* features section */
.feature-sections {}
.feature-section {
background: #ffffff55;
padding: 10px 20px;
margin-bottom: 20px;
}
.feature-section .faux-logo {
text-align: center;
}
.feature-section h2,
.feature-section h3,
.feature-section h4 {
font-weight: bold;
}
.feature-section h2,
.feature-section h3 {
text-align: left;
}
.feature-section h2,
.feature-section h3,
.feature-section h4:not(.nerd-font-button) {
padding: 10px 0px;
margin: 0px;
color: #1c1c1c;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.feature-section h3,
.feature-section h4 {
font-size: 20px;
padding-top: 0px;
font-size: 20px;
padding-top: 0px;
}
.feature-section h4 img {
max-height: 100px;
}
.feature-section div p {
text-align: left;
}
.sectioninner3 {
line-height: 29px;
word-spacing: 3px;
top: inherit;
left: inherit;
margin-left: 0px;
font-weight: bold;
padding-top: .75em;
}
.sectioninner3 div {
background-color: #2e2e2e;
font-weight: bold;
padding-top: .75em;
}
/* individual pages */
.section-page-wrapper .section {
position: relative;
display: block;
width: 100%;
min-height: 0px;
padding: 180px 0;
background: url(/assets/img/bgnoise.png);
}
.section-page-wrapper .section:first-of-type {
padding-top: 90px;
}
.section-page-wrapper .sectiondivider {
width: 270px;
height: 270px;
padding: 15px;
position: relative;
top: 0px;
left: 50%;
margin-left: -135px;
}
// Github url button
#github {
text-decoration: none;
color: #000000;
background-color: #ffffff;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border-radius: 25%;
font-size: 2.5em;
box-shadow: 2px 2px 5px rgba(0, 0, 0, .8);
transition: all .3s ease-in-out;
position: fixed;
bottom: 0.7rem;
right: 0.7rem;
z-index: 10;
}
.icon-backdrop {
/* position: absolute;
opacity: 0.20;
font-size: 2rem;
line-height: 1.43em;
word-spacing: 1rem;
overflow: hidden;
word-break: break-all;
font-family: 'NerdFontsSymbols Nerd Font';
padding: 0px 20px 10px 20px; */
position: absolute;
opacity: 0.15;
font-size: 2em;
line-height: 1.43em;
word-spacing: 1rem;
overflow: hidden;
word-break: break-all;
font-family: 'NerdFontsSymbols Nerd Font';
padding: 0px 20px 10px 20px;
height: 444px;
}
.rainbow {
/* fe2 and ff2 with 66601e */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(.9, #66601e), color-stop(1, #f22));
background-image: gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #66601e), color-stop(1, #f22));
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/* Downloads page */
#downloads {
.item {
// max-width: 400px !important;
// border: 2px solid white;
padding: 10px;
margin: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
// max-width: 600px;
// min-width: 400px;
width: 595px;
.download-icon {
content: "";
font-size: 32px;
font-family: 'NerdFontsSymbols Nerd Font';
display: inline-block;
// position: relative;
// top: -40px;
padding-right: 10px;
padding-top: 5px;
}
img {
vertical-align: top !important;
}
.font-preview {
text-decoration: none;
background-size: contain;
height: 110px;
background-repeat: no-repeat;
background-position-x: 34px;
}
.font-preview:before {
content: "";
font-size: 32px;
font-family: 'NerdFontsSymbols Nerd Font';
}
}
.nerd-font-buttons-wrapper {
display: flex;
flex-wrap: wrap;
}
.button-empty-spacer {
height: 42px;
width: 100%;
}
.nerd-font-button {
border-width: 2px;
border-style: solid;
flex-shrink: 1;
flex-grow: 1;
}
}
#downloads ul {
position: relative;
//list-style: none;
margin-left: 0;
padding-left: 1.2em;
font-size: 14px;
margin-top: 10px;
}
#downloads li {
line-height: 24px;
margin-bottom: 0px;
max-width: 400px;
}
#downloads h3 span {
font-family: 'NerdFontsSymbols Nerd Font';
}
/* kramdown Rouge syntax hacks */
.lineno {
visibility: hidden;
}
/*
super tiny size (phones)
point at which nav wraps
without decrease font size
*/
@media only screen and (max-width: 326px) {
nav {
font-size: 9px;
}
}
/* tiny size (phones) */
@media only screen and (max-width: 380px) {
nav ul li {
min-width: initial;
line-height: 20px;
}
li.p-downloads a:after {
content: '';
}
.section:first-of-type {
padding-top: 70px;
}
#features .sectioninner2 {
font-size: .7em;
}
#main .nerd-font-cheat-sheet .column {
width: 102px;
height: 98px;
}
#main .nerd-font-cheat-sheet {
max-height: 306px;
padding-top: 0px;
}
}
/* mid size (tablets, landscapes) */
@media only screen and (max-width: 679px) {
nav {
font-size: 10px;
}
li.p-downloads a:after {
content: '';
}
nav ul li {
min-width: 50px;
line-height: 40px;
}
.section:first-of-type {
padding-top: 70px;
}
#features .sectioninner2 {
font-size: .7em;
}
}
/* anything not desktop */
@media only screen and (max-width: 767px) {
.container h1 {
font-size: 30px;
}
.container h2 {
font-size: 24px;
}
.container h3 {
font-size: 20px;
}
.container h4 {
font-size: 18px;
}
.section {
padding: 130px 0;
}
.section-page-wrapper .sectiondivider,
.sectiondivider {
width: 200px;
height: 200px;
padding: 15px;
margin-left: -100px;
}
.section-page-wrapper .sectiondivider .fa-stack,
.sectiondivider .fa-stack {
font-size: 100px;
margin-top: -14px;
}
.section-page-wrapper .sectiondivider h5,
.sectiondivider h5 {
font-size: 15px;
bottom: 30px;
width: 170px
}
#features .sectioninner2 {
font-size: .7em;
}
.columned {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sectioninner3 {
line-height: 16px;
font-size: 11px;
}
}
@media only screen and (max-width: 785px) {
nav ul li {
min-width: 50px;
}
}
/* util */
.text-left {
text-align: left;
}