Skip to content

Instantly share code, notes, and snippets.

@jnpkr
Created September 4, 2018 18:02
Show Gist options
  • Save jnpkr/51e7304d3ec82694ccda70ac57557ff3 to your computer and use it in GitHub Desktop.
Save jnpkr/51e7304d3ec82694ccda70ac57557ff3 to your computer and use it in GitHub Desktop.
Less useless CSS styling for Airmail 3
/* 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