Last active
April 20, 2018 04:57
-
-
Save dinhquochan/87a2ccee953caab46f40b8ccf522f390 to your computer and use it in GitHub Desktop.
A Full and Comprehensive Style Test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.fv-content { | |
margin: 0 auto; | |
font-size: 1rem; | |
line-height: 1.6em; | |
font-family: Arial, Georgia, serif; | |
padding: 1vw 2vw 0; | |
} | |
@media (max-width: 1170px) { | |
.fv-content { | |
padding: 5vw 7vw 0; | |
} | |
} | |
@media (max-width: 800px) { | |
.fv-content { | |
font-size: 0.8rem; | |
} | |
} | |
/** | |
* 1. Global. | |
*/ | |
.fv-content blockquote, | |
.fv-content dl, | |
.fv-content h1, | |
.fv-content h2, | |
.fv-content h3, | |
.fv-content h4, | |
.fv-content h5, | |
.fv-content h6, | |
.fv-content ol, | |
.fv-content p, | |
.fv-content pre, | |
.fv-content ul { | |
min-width: 100%; | |
} | |
.fv-content hr { | |
position: relative; | |
margin: 4vw 0; | |
display: block; | |
width: 100%; | |
padding: 0; | |
height: 1px; | |
border: 0; | |
border-top: 1px solid #e3e9ed; | |
} | |
/** | |
* 2. Headings. | |
*/ | |
.fv-content h1, | |
.fv-content h2, | |
.fv-content h3, | |
.fv-content h4, | |
.fv-content h5, | |
.fv-content h6 { | |
margin-top: 0; | |
line-height: 1.15; | |
font-weight: 700; | |
text-rendering: optimizeLegibility; | |
} | |
.fv-content h1 { | |
margin: .5em 0 .2em; | |
font-size: 2.6rem; | |
font-weight: 700; | |
} | |
.fv-content h2 { | |
margin: .5em 0 .2em; | |
font-size: 2.0rem; | |
font-weight: 700; | |
} | |
.fv-content h3 { | |
margin: .5em 0 .2em; | |
font-size: 1.8rem; | |
font-weight: 700; | |
} | |
.fv-content h4 { | |
margin: .5em 0 .2em; | |
font-size: 1.8rem; | |
font-weight: 700; | |
} | |
.fv-content h5 { | |
margin: .5em 0 .2em; | |
font-size: 1.6rem; | |
font-weight: 700; | |
} | |
.fv-content h6 { | |
margin: .5em 0 .2em; | |
font-size: 1.6rem; | |
font-weight: 700; | |
} | |
/** | |
* 3. Elements. | |
*/ | |
.fv-content a { | |
color: #000; | |
box-shadow: inset 0 -1px 0 #3eb0ef; | |
} | |
.fv-content a:hover { | |
color: #3eb0ef; | |
} | |
.fv-content em, | |
.fv-content i, | |
.fv-content dfn | |
{ | |
font-style: italic; | |
} | |
.fv-content strong, | |
.fv-content b | |
{ | |
font-weight: 700; | |
} | |
.fv-content u, | |
.fv-content ins | |
{ | |
text-decoration: underline; | |
background-color: transparent; | |
} | |
.fv-content sup { | |
top: -.5em; | |
} | |
.fv-content sub { | |
bottom: -.25em; | |
} | |
.fv-content sup, | |
.fv-content sub { | |
position: relative; | |
font-size: 75%; | |
line-height: 0; | |
vertical-align: baseline; | |
} | |
.fv-content code, .fv-content kbd, .fv-content pre, .fv-content samp { | |
font-family: monospace,monospace; | |
font-size: 1em; | |
} | |
.fv-content code { | |
padding: 0 5px 2px; | |
line-height: 1em; | |
font-weight: 400!important; | |
background: #fdefef; | |
border-radius: 3px; | |
color: #630d0d; | |
} | |
.fv-content pre { | |
overflow-x: auto; | |
margin: 1.5em 0 3em; | |
padding: 20px; | |
max-width: 100%; | |
border: 1px solid #000; | |
color: #e5eff5; | |
background: #0e0f11; | |
border-radius: 5px; | |
} | |
.fv-content pre code { | |
color: #efefef; | |
background-color: transparent; | |
} | |
.fv-content blockquote { | |
margin: 0 0 1.5em; | |
padding: 0 1.5em; | |
border-left: 5px solid #3eb0ef; | |
} | |
.fv-content blockquote p:last-child { | |
margin-bottom: 0; | |
} | |
.fv-content blockquote p { | |
margin: 0 0 1em; | |
color: inherit; | |
font-size: inherit; | |
line-height: inherit; | |
font-style: italic; | |
} | |
.fv-content blockquote p:last-child { | |
margin-bottom: 0; | |
} | |
.fv-content blockquote cite { | |
font-weight: 700; | |
} | |
.fv-content abbr, .fv-content dfn { | |
cursor: help; | |
text-decoration: underline dotted; | |
border: 0; | |
} | |
.fv-content small { | |
font-size: 80%; | |
} | |
/** | |
* 4. Images. | |
*/ | |
.fv-content img, | |
.fv-content video { | |
display: block; | |
margin: 1.5em auto; | |
max-width: 95%; | |
} | |
/** | |
* 5. List. | |
*/ | |
.fv-content dt { | |
float: left; | |
margin: 0 20px 0 0; | |
width: 150px; | |
font-weight: 500; | |
text-align: right; | |
} | |
.fv-content dd { | |
margin: 0 0 5px; | |
text-align: left; | |
} | |
.fv-content li { | |
word-break: break-word; | |
list-style: inherit; | |
margin: .5em 0; | |
padding-left: .3em; | |
line-height: 1.6em; | |
} | |
.fv-content ol, | |
.fv-content ul { | |
padding-left: 1.3em; | |
padding-right: 1.5em; | |
} | |
.fv-content ol { | |
list-style: decimal; | |
} | |
.fv-content > ul { | |
list-style: disc; | |
} | |
.fv-content > ul > li > ul { | |
list-style: circle; | |
} | |
.fv-content > ul > li > ul > li ul { | |
list-style: square; | |
} | |
/** | |
* 6. Table. | |
*/ | |
.fv-content table { | |
display: inline-block; | |
overflow-x: auto; | |
margin: .5em 0 2.5em; | |
max-width: 100%; | |
width: auto; | |
border-spacing: 0; | |
border-collapse: collapse; | |
white-space: nowrap; | |
vertical-align: top; | |
-webkit-overflow-scrolling: touch; | |
} | |
.fv-content table tbody { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
.fv-content table th { | |
padding: 6px 12px; | |
border: 1px solid #e3ecf3; | |
} | |
.fv-content table th { | |
color: #15171a; | |
font-size: 1.2rem; | |
font-weight: 700; | |
letter-spacing: .2px; | |
text-align: left; | |
text-transform: uppercase; | |
background-color: #f4f8fb; | |
} | |
.fv-content table td, .fv-content table th { | |
padding: 6px 12px; | |
border: 1px solid #e3ecf3; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment