mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2024-09-19 09:51:48 +02:00
10be9529a0
[why] Some code has been commented out. This can be removed. We can use git if we want to access the code again in the future. Furthermore the banner still is on the page, below the Sanky diagram (in the small screen rendering position). Signed-off-by: Fini Jastrow <ulf.fini.jastrow@desy.de>
745 lines
12 KiB
SCSS
745 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: 21px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* util */
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|