Created
September 4, 2018 18:02
-
-
Save jnpkr/51e7304d3ec82694ccda70ac57557ff3 to your computer and use it in GitHub Desktop.
Less useless CSS styling for Airmail 3
This file contains hidden or 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
/* Normalize.css */ | |
/* Contents of this file must be inlined to your newsletter in production */ | |
h1 a, | |
h2 a, | |
h3 a, | |
h4 a, | |
h5 a, | |
h6 a, | |
li a, | |
p a { | |
/* Set sexy underline styling for links except images */ | |
text-decoration: none; | |
color: #2837b8 !important; | |
border-bottom: #d3d6f0 1px solid; | |
} | |
h1 { | |
/* Mail.ru <h1> styling fix */ | |
font-size: 2em; | |
line-height: initial; | |
margin: 0.67em 0; | |
padding: 0; | |
} | |
table { | |
/* Null tables spaces */ | |
border-spacing: 0; | |
border-collapse: collapse; | |
} | |
table td { | |
padding: 0; | |
} | |
table th { | |
padding: 0; | |
font-weight: normal; | |
} | |
img { | |
/* Flexible images fix + prevent any borders for images */ | |
max-width: 100%; | |
border: 0; | |
outline: 0; | |
/* Set image's ALT text styling */ | |
color: #2837b8; | |
font-size: 14px; | |
} | |
ol, | |
ul { | |
/* We don't touch horizontal margins to prevent hiding bullets in Oultook */ | |
margin-top: 1em; | |
margin-bottom: 2em; | |
} | |
ol li, | |
ul li { | |
line-height: 1.6em; | |
margin: 0.5em 0; | |
} | |
p { | |
line-height: 1.6em; | |
margin: 1em 0; | |
} | |
span.code { | |
/* Monospace emphasis for code examples */ | |
font-family: consolas, courier, monospace; | |
color: gray; | |
} | |
/* Extra.css */ | |
/* Contents of this file must be placed between <style> tags in <head> of your newsletter in production */ | |
@media screen and (max-width: 600px) { | |
u + .body { | |
/* iOS Gmail viewport fix */ | |
/* Make sure that your body element has .body class */ | |
width: 100vw !important; | |
} | |
} | |
a[x-apple-data-detectors=true] { | |
/* Set default text color inheritance for auto-detected iOS links like date, time, address, etc */ | |
color: inherit !important; | |
text-decoration: inherit !important; | |
border-bottom: none !important; | |
} | |
body { | |
/* Set native platform font styling */ | |
font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; | |
font-size: 16px; | |
color: black; | |
} | |
.webkit { | |
/* Webkit and Microsoft font-size fix */ | |
width: 100%; | |
table-layout: fixed; | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; | |
} | |
/* Custom Styles */ | |
html { | |
margin: 1em !important; | |
} | |
body { | |
font-size: 14px; | |
color: #333; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
line-height: 1.3; | |
} | |
h5, h6 { | |
font-size: 1em; | |
} | |
ul, ol, li { | |
margin-top: 0; | |
} | |
ol li, | |
ul li { | |
margin: 0.125em 0; | |
} | |
blockquote | |
{ | |
border-left: 4px solid #ddd; | |
padding-left: 1em; | |
margin-left: 0; | |
font-style: italic; | |
color: #555; | |
} | |
hr | |
{ | |
border: 0; | |
height: 0; | |
border-bottom: 1px dotted #ccc; | |
} | |
ul ul, | |
ol ul, | |
ul ol, | |
ol ol { | |
margin-bottom: 0; | |
} | |
pre, code { | |
font-family: Consolas, monaco, monospace; | |
line-height: 1.3; | |
padding: .25em; | |
background-color: #eee; | |
border-radius: 3px; | |
} | |
pre code { | |
background: none; | |
padding: none; | |
} | |
pre { | |
display: block; | |
background-color: #f5f5f5; | |
padding: .5em; | |
} | |
table { | |
line-height: 1.3; | |
min-width: 100%; | |
margin-bottom: 2em; | |
padding: 0; | |
table-layout: fixed; | |
empty-cells: hide; | |
} | |
th { | |
font-weight: bold; | |
} | |
table th, | |
table td { | |
padding: .5em 1em; | |
} | |
table thead { | |
border-bottom: solid 2px #ccc; | |
} | |
table tbody tr > td { | |
border-top: solid 1px #ddd; | |
} | |
table tr:nth-child(even) { | |
background: #f9f9f9; | |
} | |
h1 a, | |
h2 a, | |
h3 a, | |
h4 a, | |
h5 a, | |
h6 a, | |
li a, | |
p a { | |
color: #1499ff !important; | |
} | |
dt { | |
margin-top: .75em; | |
font-weight: bold; | |
line-height: 1.3; | |
} | |
dt:first-child { | |
margin-top: 0; | |
} | |
dd { | |
margin-left: 0; | |
line-height: 1.6; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment