Skip to content

Instantly share code, notes, and snippets.

@dinhquochan
Last active April 20, 2018 04:57
Show Gist options
  • Save dinhquochan/87a2ccee953caab46f40b8ccf522f390 to your computer and use it in GitHub Desktop.
Save dinhquochan/87a2ccee953caab46f40b8ccf522f390 to your computer and use it in GitHub Desktop.
A Full and Comprehensive Style Test
.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