mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2024-12-19 20:12:52 +02:00
Minor mobile CSS fixes and re-organized CSS
This commit is contained in:
Ryan L McIntyre
parent
359002b1da
commit
fb691961cb
@ -297,121 +297,3 @@ nav ul li:hover, nav ul li.active {
|
||||
.longlist { font-size: 14px !important; }
|
||||
.longlist li { margin-bottom: 3px; }
|
||||
|
||||
/* ----- fork on github banner ----- */
|
||||
#forkongithub a {
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
font-family:arial,sans-serif;
|
||||
text-align:center;
|
||||
font-weight:700;
|
||||
font-size:1rem;
|
||||
line-height:2rem;
|
||||
position:relative;
|
||||
transition:.5s;
|
||||
padding:5px 40px;
|
||||
}
|
||||
#forkongithub a::before, #forkongithub a::after {
|
||||
content:""; width:100%; display:block; position:absolute;
|
||||
top:1px; left:0; height:1px; background:#fff;
|
||||
}
|
||||
#forkongithub a::after { bottom:1px; top:auto; }
|
||||
@media screen and (min-width:800px) {
|
||||
#forkongithub {
|
||||
position:fixed;
|
||||
display:block;
|
||||
top:0;
|
||||
right:0;
|
||||
width:200px;
|
||||
overflow:hidden;
|
||||
height:209px;
|
||||
z-index:99;
|
||||
}
|
||||
#forkongithub a {
|
||||
width:200px;
|
||||
position:absolute;
|
||||
top:60px;
|
||||
right:-60px;
|
||||
transform:rotate(45deg);
|
||||
-webkit-transform:rotate(45deg);
|
||||
-ms-transform:rotate(45deg);
|
||||
-moz-transform:rotate(45deg);
|
||||
-o-transform:rotate(45deg);
|
||||
box-shadow:4px 4px 10px rgba(0,0,0,0.8);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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:60px;
|
||||
line-height:40px;
|
||||
}
|
||||
.section:first-of-type {
|
||||
padding-top: 70px;
|
||||
}
|
||||
#features .sectioninner2 {
|
||||
font-size: .7em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
super tiny size (phones)
|
||||
point at which nav wraps
|
||||
without decrease font size
|
||||
*/
|
||||
@media only screen and (max-width: 326px) {
|
||||
nav { font-size: 9px; }
|
||||
}
|
||||
|
||||
/* 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; }
|
||||
.sectiondivider {
|
||||
width:200px;
|
||||
height:200px;
|
||||
padding:15px;
|
||||
top:-100px;
|
||||
margin-left:-100px;
|
||||
}
|
||||
|
||||
.sectiondivider .fa-stack {
|
||||
font-size: 100px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -236,8 +236,69 @@ p {
|
||||
margin-left:-135px;
|
||||
}
|
||||
|
||||
/* ----- fork on github banner ----- */
|
||||
#forkongithub a {
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
font-family:arial,sans-serif;
|
||||
text-align:center;
|
||||
font-weight:700;
|
||||
font-size:1rem;
|
||||
line-height:2rem;
|
||||
position:relative;
|
||||
transition:.5s;
|
||||
padding:5px 40px;
|
||||
}
|
||||
#forkongithub a::before, #forkongithub a::after {
|
||||
content:""; width:100%; display:block; position:absolute;
|
||||
top:1px; left:0; height:1px; background:#fff;
|
||||
}
|
||||
#forkongithub a::after { bottom:1px; top:auto; }
|
||||
@media screen and (min-width:800px) {
|
||||
#forkongithub {
|
||||
position:fixed;
|
||||
display:block;
|
||||
top:0;
|
||||
right:0;
|
||||
width:200px;
|
||||
overflow:hidden;
|
||||
height:209px;
|
||||
z-index:99;
|
||||
}
|
||||
#forkongithub a {
|
||||
width:200px;
|
||||
position:absolute;
|
||||
top:60px;
|
||||
right:-60px;
|
||||
transform:rotate(45deg);
|
||||
-webkit-transform:rotate(45deg);
|
||||
-ms-transform:rotate(45deg);
|
||||
-moz-transform:rotate(45deg);
|
||||
-o-transform:rotate(45deg);
|
||||
box-shadow:4px 4px 10px rgba(0,0,0,0.8);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
@ -249,9 +310,66 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
/* gitter adjust sidecar on mobile */
|
||||
/* 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:60px;
|
||||
line-height:40px;
|
||||
}
|
||||
.section:first-of-type {
|
||||
padding-top: 70px;
|
||||
}
|
||||
#features .sectioninner2 {
|
||||
font-size: .7em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
/* 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;
|
||||
}
|
||||
/* gitter adjust sidecar on mobile */
|
||||
.gitter-open-chat-button {
|
||||
bottom: 116px;
|
||||
padding: 1em 1em;
|
||||
@ -259,14 +377,6 @@ p {
|
||||
right: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* anything not desktop */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.sectioninner3 {
|
||||
line-height: 21px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/* util */
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user