mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2024-09-19 09:51:48 +02:00
c88da986f0
[why] The previous fix broke the instances of the subtitle circle in all the other topics (Downloads, CheatSheet, Backers, ...) because it rendered the circle too wide horizontally, while the vertical size was ok. [how] The previous previous fix with a concrete circle hight and width and adequate line spacing for the filling font works better. The circle is not absolutely circular, but roughly it is. Unless there is a Web magician who can fix this in a better way I believe the not-really-circular in one place (all-icons-divider) is better than absurdly wide circles in all section subtitles. Fixes: #1384 Signed-off-by: Fini Jastrow <ulf.fini.jastrow@desy.de>
751 lines
12 KiB
SCSS
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: 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: 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: 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: 17px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 785px) {
|
|
nav ul li {
|
|
min-width: 50px;
|
|
}
|
|
}
|
|
|
|
/* util */
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|