Skip to content

Instantly share code, notes, and snippets.

@TristanBrotherton
Created July 22, 2015 00:28
Show Gist options
  • Select an option

  • Save TristanBrotherton/31c103fd9a6133c446c6 to your computer and use it in GitHub Desktop.

Select an option

Save TristanBrotherton/31c103fd9a6133c446c6 to your computer and use it in GitHub Desktop.
// Color variables (appears count calculates by raw css)
@color0: #eb4102; // Appears 15 times
@color1: #606060; // Appears 5 times
@color2: #505050; // Appears 5 times
@color3: #f4f4f4; // Appears 5 times
@color4: #cccccc; // Appears 4 times
@color5: #ffffff; // Appears 4 times
@color6: #808080; // Appears 3 times
@color7: #dee0e2; // Appears 2 times
@color8: #bbbbbb; // Appears 2 times
// Width variables (appears count calculates by raw css)
@width0: 260px; // Appears 2 times
@width4: 600px; // Appears 4 times
@width5: 100%; // Appears 11 times
// Height variables (appears count calculates by raw css)
@height0: 100%; // Appears 3 times
#outlook {
a {
padding:0;
}
}
.ReadMsgBody {
width:@width5;
}
.ExternalClass {
width:@width5;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: @height0;
}
body, table, td, p, a, li, blockquote {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
table {
border-collapse:collapse !important;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
td {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
img {
-ms-interpolation-mode:bicubic;
border:0;
height:auto;
line-height:@height0;
outline:none;
text-decoration:none;
}
body {
background-color:@color7;
height:@height0 !important;
margin:0;
margin:0;
min-width:@width5 !important;
padding:0;
padding:0;
width:@width5 !important;
width:@width5 !important;
}
#bodyTable {
background-color:@color7;
height:@height0 !important;
margin:0;
padding:0;
width:@width5 !important;
}
#bodyCell {
border-top:4px solid @color8;
height:@height0 !important;
margin:0;
padding:0;
padding:10px !important;
padding:20px;
width:@width5 !important;
}
#templateContainer {
border:1px solid @color8;
max-width:@width4 !important;
width:@width4;
width:@width5 !important;
}
h1 {
color:#202020 !important;
display:block;
font-family:Helvetica;
font-size:24px !important;
font-size:26px;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
line-height:@height0;
line-height:@height0 !important;
margin-bottom:10px;
margin-left:0;
margin-right:0;
margin-top:0;
text-align:left;
}
h2 {
color:#404040 !important;
display:block;
font-family:Helvetica;
font-size:20px;
font-size:20px !important;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
line-height:@height0;
line-height:@height0 !important;
margin-bottom:10px;
margin-left:0;
margin-right:0;
margin-top:0;
text-align:left;
}
h3 {
color:@color1 !important;
display:block;
font-family:Helvetica;
font-size:16px;
font-size:18px !important;
font-style:italic;
font-weight:normal;
letter-spacing:normal;
line-height:@height0;
line-height:@height0 !important;
margin-bottom:10px;
margin-left:0;
margin-right:0;
margin-top:0;
text-align:left;
}
h4 {
color:@color6 !important;
display:block;
font-family:Helvetica;
font-size:14px;
font-size:16px !important;
font-style:italic;
font-weight:normal;
letter-spacing:normal;
line-height:@height0;
line-height:@height0 !important;
margin-bottom:10px;
margin-left:0;
margin-right:0;
margin-top:0;
text-align:left;
}
#templatePreheader {
background-color:@color3;
border-bottom:1px solid @color4;
display:none !important;
}
.preheaderContent {
color:@color6;
font-family:Helvetica;
font-size:10px;
line-height:125%;
text-align:left;
a {
&:link {
color:@color1;
font-weight:normal;
text-decoration:underline;
}
&:visited {
color:@color1;
font-weight:normal;
text-decoration:underline;
}
.yshortcuts {
color:@color1;
font-weight:normal;
text-decoration:underline;
}
}
}
#templateHeader {
background-color:@color3;
border-bottom:1px solid @color4;
border-top:1px solid @color5;
}
.headerContent {
color:@color2;
font-family:Helvetica;
font-size:20px;
font-size:20px !important;
font-weight:bold;
line-height:125% !important;
line-height:@height0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
text-align:left;
vertical-align:middle;
a {
&:link {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
&:visited {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
.yshortcuts {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
}
}
#headerImage {
height:auto;
height:auto !important;
max-width:@width4;
max-width:@width4 !important;
width:@width5 !important;
}
#templateBody {
background-color:@color3;
border-bottom:1px solid @color4;
border-top:1px solid @color5;
}
.bodyContent {
color:@color2;
font-family:Helvetica;
font-size:16px;
font-size:18px !important;
line-height:125% !important;
line-height:150%;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
text-align:left;
a {
&:link {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
&:visited {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
.yshortcuts {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
}
img {
display:inline;
height:auto;
max-width:560px;
}
}
.templateColumnContainer {
display:block !important;
width:200px;
width:@width5 !important;
}
#templateColumns {
background-color:@color3;
border-bottom:1px solid @color4;
border-top:1px solid @color5;
}
.leftColumnContent {
color:@color2;
font-family:Helvetica;
font-size:14px;
font-size:16px !important;
line-height:125% !important;
line-height:150%;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
padding-top:0;
text-align:left;
a {
&:link {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
&:visited {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
.yshortcuts {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
}
img {
display:inline;
height:auto;
max-width:@width0;
}
}
.centerColumnContent {
color:@color2;
font-family:Helvetica;
font-size:14px;
font-size:16px !important;
line-height:125% !important;
line-height:150%;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
padding-top:0;
text-align:left;
a {
&:link {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
&:visited {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
.yshortcuts {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
}
}
.rightColumnContent {
color:@color2;
font-family:Helvetica;
font-size:14px;
font-size:16px !important;
line-height:125% !important;
line-height:150%;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
padding-top:0;
text-align:left;
a {
&:link {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
&:visited {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
.yshortcuts {
color:@color0;
font-weight:normal;
text-decoration:underline;
}
}
img {
display:inline;
height:auto;
max-width:@width0;
}
}
#templateFooter {
background-color:@color3;
border-top:1px solid @color5;
}
.footerContent {
color:@color6;
font-family:Helvetica;
font-size:10px;
font-size:14px !important;
line-height:115% !important;
line-height:150%;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
text-align:left;
a {
display:block !important;
}
}
.footerContent a:link, .footerContent a:visited, .footerContent a .yshortcuts, .footerContent a span {
color:@color1;
font-weight:normal;
text-decoration:underline;
}
@media {
only {
screen {
and {
(max-width {
&:480px) {
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;
}
}
}
}
}
}
.columnImage {
height:auto !important;
max-width:480px !important;
width:@width5 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment