mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2025-02-18 13:07:28 +02:00
a6d13d97c4
[why] Some browsers (i.e. Safari) show the invisible text's highlighted when searched for. The current size does not match the preview image's size so the highlight box seems too small. Interesting, Firefox and Chromium do not show the invisibe text box as hit, which I personally always find very disruptive (when I search something on a page and the brower finds it but nothing is highlighted... where the heck did it find it?), but obviously Safari does this right :-D [how] Just increase the (invisible) text size some bit to roughly fit. Signed-off-by: Fini Jastrow <ulf.fini.jastrow@desy.de>
752 lines
12 KiB
SCSS
752 lines
12 KiB
SCSS
p {
|
|
line-height: 1.75em;
|
|
}
|
|
|
|
#main .nerd-font-button {
|
|
margin: 0px;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
padding: 8px 18px;
|
|
}
|
|
|
|
.nerd-font-invisible-text {
|
|
opacity: 0.0;
|
|
font-size: 36px;
|
|
}
|
|
|
|
input.nerd-font-input {
|
|
cursor: inherit;
|
|
}
|
|
|
|
.highlight {
|
|
display: 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: #69e8ff;
|
|
color: #69e8ff;
|
|
}
|
|
|
|
&.tertiary--inverse {
|
|
background: #69e8ff;
|
|
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: #69e8ff !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: #69e8ff;
|
|
}
|
|
|
|
#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: #cc63ff;
|
|
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: 29.5px;
|
|
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: 140px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
}
|
|
|
|
.nerd-font-buttons-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.button-empty-spacer {
|
|
height: 42px;
|
|
width: 100%;
|
|
}
|
|
|
|
.nerd-font-button {
|
|
border-style: none;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 1em;
|
|
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: 17px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 785px) {
|
|
nav ul li {
|
|
min-width: 50px;
|
|
}
|
|
}
|
|
|
|
/* util */
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|