2019-11-06 09:12:21 +03:00
/* eslint indent: warn, no-irregular-whitespace: warn */
2020-11-13 16:18:47 +03:00
const iff = ( cond , yes , no ) => ( cond ? yes : no ) ;
2020-11-11 15:56:11 +03:00
module . exports = ( { post , site , templateSettings } ) => {
2019-11-06 14:03:28 +03:00
const date = new Date ( ) ;
2019-11-06 12:16:50 +03:00
return ` <!doctype html>
2019-11-04 13:53:42 +03:00
< html >
2019-11-05 12:36:40 +03:00
< head >
< meta name = "viewport" content = "width=device-width" / >
< meta http - equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< title > $ { post . title } < / t i t l e >
< style >
/ * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
GLOBAL RESETS
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
/*All the styling goes here*/
img {
border : none ;
- ms - interpolation - mode : bicubic ;
max - width : 100 % ;
}
body {
background - color : # fff ;
font - family : - apple - system , BlinkMacSystemFont , 'Segoe UI' , Roboto , Helvetica , Arial , sans - serif , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' ;
- webkit - font - smoothing : antialiased ;
font - size : 18 px ;
line - height : 1.4 ;
margin : 0 ;
padding : 0 ;
- ms - text - size - adjust : 100 % ;
- webkit - text - size - adjust : 100 % ;
color : # 15212 A ;
}
table {
border - collapse : separate ;
mso - table - lspace : 0 pt ;
mso - table - rspace : 0 pt ;
width : 100 % ;
}
table td {
font - family : - apple - system , BlinkMacSystemFont , 'Segoe UI' , Roboto , Helvetica , Arial , sans - serif , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' ;
font - size : 18 px ;
vertical - align : top ;
color : # 15212 A ;
}
/ * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BODY & CONTAINER
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
. body {
background - color : # fff ;
width : 100 % ;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
. container {
display : block ;
margin : 0 auto ! important ;
/* makes it centered */
max - width : 600 px ;
}
/* This should also be a block element, so that it will fill 100% of the .container */
. content {
box - sizing : border - box ;
display : block ;
margin : 0 auto ;
max - width : 600 px ;
}
/ * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
POST CONTENT
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
hr {
position : relative ;
display : block ;
width : 100 % ;
margin : 3 em 0 ;
padding : 0 ;
height : 1 px ;
border : 0 ;
border - top : 1 px solid # e5eff5 ;
}
p ,
ul ,
ol ,
dl ,
blockquote {
margin : 0 0 1.5 em 0 ;
2019-11-22 13:40:56 +03:00
line - height : 1.6 em ;
2019-11-05 12:36:40 +03:00
}
ol ,
ul {
padding - left : 1.3 em ;
padding - right : 1.5 em ;
}
ol ol ,
ul ul ,
ul ol ,
ol ul {
margin : 0.5 em 0 1 em ;
}
ul {
list - style : disc ;
}
ol {
list - style : decimal ;
}
ul ,
ol {
max - width : 100 % ;
}
li {
margin : 0.5 em 0 ;
padding - left : 0.3 em ;
line - height : 1.6 em ;
}
dt {
float : left ;
margin : 0 20 px 0 0 ;
width : 120 px ;
2019-11-06 06:21:35 +03:00
color : # 15212 A ;
2019-11-05 12:36:40 +03:00
font - weight : 500 ;
text - align : right ;
}
dd {
margin : 0 0 5 px 0 ;
text - align : left ;
}
blockquote {
2019-11-06 06:21:35 +03:00
margin : 2 em 0 ;
2019-11-22 13:40:56 +03:00
padding : 0 25 px 0 25 px ;
2021-01-15 17:01:57 +03:00
border - left : $ { templateSettings . accentColor || '#15212A' } 2 px solid ;
2021-01-15 17:41:27 +03:00
font - size : 17 px ;
font - weight : 500 ;
line - height : 1.6 em ;
2019-11-05 12:36:40 +03:00
letter - spacing : - 0.2 px ;
}
blockquote p {
margin : 0.8 em 0 ;
2021-01-15 17:41:27 +03:00
font - size : 1 em ;
2019-11-05 12:36:40 +03:00
}
blockquote small {
display : inline - block ;
margin : 0.8 em 0 0.8 em 1.5 em ;
font - size : 0.9 em ;
opacity : 0.8 ;
}
blockquote cite {
font - weight : bold ;
}
blockquote cite a {
font - weight : normal ;
}
a {
2019-11-06 06:21:35 +03:00
color : # 15212 A ;
2019-11-05 12:36:40 +03:00
text - decoration : none ;
}
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
margin - top : 0 ;
font - family : - apple - system , BlinkMacSystemFont , 'Segoe UI' , Roboto , Helvetica , Arial , sans - serif , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' ;
2019-11-06 06:21:35 +03:00
line - height : 1.15 em ;
2019-11-05 12:36:40 +03:00
font - weight : 600 ;
text - rendering : optimizeLegibility ;
}
h1 {
margin : 1.5 em 0 0.5 em 0 ;
2019-11-13 16:11:54 +03:00
font - size : 42 px ;
2019-11-05 12:36:40 +03:00
font - weight : 600 ;
}
h2 {
margin : 1.5 em 0 0.5 em 0 ;
2019-11-06 06:21:35 +03:00
font - size : 32 px ;
2019-11-05 12:36:40 +03:00
line - height : 1.22 em ;
}
h3 {
margin : 1.5 em 0 0.5 em 0 ;
2019-11-06 06:21:35 +03:00
font - size : 26 px ;
2019-11-05 12:36:40 +03:00
line - height : 1.25 em ;
}
h4 {
2019-11-06 06:21:35 +03:00
margin : 1.8 em 0 0.5 em 0 ;
2019-11-05 12:36:40 +03:00
font - size : 21 px ;
line - height : 1.3 em ;
}
h5 {
2019-11-06 06:21:35 +03:00
margin : 2 em 0 0.5 em 0 ;
2019-11-05 12:36:40 +03:00
font - size : 19 px ;
2019-11-06 06:21:35 +03:00
line - height : 1.4 em ;
2019-11-05 12:36:40 +03:00
}
h6 {
2019-11-06 06:21:35 +03:00
margin : 2 em 0 0.5 em 0 ;
2019-11-05 12:36:40 +03:00
font - size : 19 px ;
2019-11-06 06:21:35 +03:00
line - height : 1.4 em ;
2019-11-05 12:36:40 +03:00
font - weight : 700 ;
}
strong {
font - weight : 700 ;
}
figure {
margin : 0 0 1.5 em ;
padding : 0 ;
}
figcaption {
text - align : center ;
font - family : - apple - system , BlinkMacSystemFont , 'Segoe UI' , Roboto , Helvetica , Arial , sans - serif , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' ;
font - size : 14 px ;
2019-11-20 20:27:52 +03:00
padding - top : 5 px ;
2020-01-21 15:21:45 +03:00
line - height : 1.5 em ;
2019-11-05 12:36:40 +03:00
}
2019-11-06 06:21:35 +03:00
code {
font - size : 0.9 em ;
}
2019-11-05 12:36:40 +03:00
pre {
white - space : pre - wrap ;
2019-11-06 06:21:35 +03:00
background : # 15212 A ;
padding : 15 px ;
border - radius : 3 px ;
line - height : 1.2 em ;
color : # ffffff ;
}
p code {
background : # F2F7FA ;
word - break : break - all ;
padding : 1 px 7 px ;
border - radius : 3 px ;
2019-11-05 12:36:40 +03:00
}
figure blockquote p {
font - size : 1 em ;
}
2019-11-06 06:21:35 +03:00
. site - icon {
2019-11-13 16:11:54 +03:00
padding - bottom : 10 px ;
2019-11-05 12:36:40 +03:00
padding - top : 20 px ;
2019-11-06 06:21:35 +03:00
text - align : center ;
border - radius : 3 px ;
}
. site - icon img {
width : 48 px ;
height : 48 px ;
border - radius : 3 px ;
}
. site - info {
2019-11-13 16:11:54 +03:00
padding - top : 50 px ;
2019-11-22 13:40:56 +03:00
border - bottom : 1 px solid # e5eff5 ;
2019-11-05 12:36:40 +03:00
}
. site - url {
2019-11-06 06:21:35 +03:00
color : # 15212 A ;
font - size : 16 px ;
letter - spacing : - 0.1 px ;
font - weight : 700 ;
text - transform : uppercase ;
text - align : center ;
2019-11-13 16:11:54 +03:00
padding - bottom : 50 px ;
2019-11-05 12:36:40 +03:00
}
. post - title {
2019-11-20 20:27:52 +03:00
padding - bottom : 10 px ;
2019-11-13 16:11:54 +03:00
font - size : 42 px ;
line - height : 1.1 em ;
2019-11-05 12:36:40 +03:00
font - weight : 600 ;
2019-11-06 06:21:35 +03:00
text - align : center ;
2019-11-05 12:36:40 +03:00
}
. post - title - link {
2019-11-06 06:21:35 +03:00
color : # 15212 A ;
2019-11-22 13:40:56 +03:00
display : block ;
text - align : center ;
margin - top : 50 px ;
2019-11-05 12:36:40 +03:00
}
2019-11-06 06:21:35 +03:00
. post - meta ,
. view - online {
2019-11-13 16:11:54 +03:00
padding - bottom : 50 px ;
2019-11-05 12:36:40 +03:00
white - space : nowrap ;
color : # 738 a94 ;
font - size : 13 px ;
letter - spacing : 0.2 px ;
text - transform : uppercase ;
2019-11-06 06:21:35 +03:00
text - align : center ;
2019-11-05 12:36:40 +03:00
}
. view - online {
text - align : right ;
}
. view - online - link {
word - wrap : none ;
white - space : nowrap ;
2019-11-06 11:39:10 +03:00
color : # 15212 A ;
2019-11-05 12:36:40 +03:00
}
2019-11-06 06:21:35 +03:00
. feature - image {
padding - bottom : 30 px ;
width : 100 % ;
}
2019-11-05 12:36:40 +03:00
. post - content {
max - width : 600 px ! important ;
font - family : Georgia , serif ;
font - size : 18 px ;
line - height : 1.5 em ;
2019-11-06 06:21:35 +03:00
color : # 23323 D ;
2019-11-20 20:27:52 +03:00
padding - bottom : 20 px ;
2019-11-22 13:40:56 +03:00
border - bottom : 1 px solid # e5eff5 ;
2019-11-06 06:21:35 +03:00
}
2020-11-11 15:56:11 +03:00
. post - content - sans - serif {
max - width : 600 px ! important ;
font - size : 17 px ;
line - height : 1.5 em ;
color : # 23323 D ;
padding - bottom : 20 px ;
border - bottom : 1 px solid # e5eff5 ;
}
2020-11-23 17:50:02 +03:00
. post - content a ,
. post - content - sans - serif a {
2019-11-06 06:21:35 +03:00
color : # 08121 A ;
text - decoration : underline ;
2019-11-05 12:36:40 +03:00
}
. kg - bookmark - card {
width : 100 % ;
background : # ffffff ;
}
2019-11-06 06:21:35 +03:00
. kg - bookmark - card a {
text - decoration : none ;
}
2019-11-05 12:36:40 +03:00
. kg - card + . kg - bookmark - card {
margin - top : 0 ;
}
2020-01-21 15:21:45 +03:00
. kg - image - card img {
display : block ;
margin : 0 auto ;
2020-08-18 17:33:40 +03:00
height : auto ! important ;
2020-01-21 15:21:45 +03:00
}
2019-11-05 12:36:40 +03:00
. kg - bookmark - container {
display : flex ;
min - height : 148 px ;
color : # 15212 A ;
font - family : - apple - system , BlinkMacSystemFont , "Segoe UI" , Roboto , Oxygen , Ubuntu , Cantarell , "Open Sans" , "Helvetica Neue" , sans - serif ;
text - decoration : none ;
border - radius : 3 px ;
border : 1 px solid # e5eff5 ;
}
. kg - bookmark - content {
flex - grow : 1 ;
padding : 20 px ;
}
. kg - bookmark - title {
color : # 15212 A ;
font - size : 15 px ;
line - height : 1.5 em ;
font - weight : 600 ;
}
. kg - bookmark - description {
display : - webkit - box ;
overflow - y : hidden ;
margin - top : 12 px ;
max - height : 40 px ;
color : # 738 a94 ;
font - size : 13 px ;
line - height : 1.5 em ;
font - weight : 400 ;
- webkit - line - clamp : 2 ;
- webkit - box - orient : vertical ;
}
. kg - bookmark - thumbnail {
min - width : 140 px ;
max - width : 180 px ;
2020-08-24 20:17:22 +03:00
background - repeat : no - repeat ;
background - size : cover ;
background - position : center ;
border - radius : 0 2 px 2 px 0 ;
2019-11-05 12:36:40 +03:00
}
. kg - bookmark - thumbnail img {
2020-08-24 20:17:22 +03:00
display : none ;
2019-11-05 12:36:40 +03:00
}
. kg - bookmark - metadata {
display : flex ;
flex - wrap : wrap ;
align - items : center ;
margin - top : 14 px ;
color : # 15212 A ;
font - size : 13 px ;
font - weight : 400 ;
}
. kg - bookmark - icon {
margin - right : 8 px ;
width : 22 px ;
height : 22 px ;
}
. kg - bookmark - author {
line - height : 1.5 em ;
}
. kg - bookmark - author : after {
content : "•" ;
margin : 0 6 px ;
}
. kg - bookmark - publisher {
overflow : hidden ;
max - width : 240 px ;
line - height : 1.5 em ;
text - overflow : ellipsis ;
white - space : nowrap ;
}
2019-11-20 20:27:52 +03:00
. kg - gallery - container {
margin - top : - 20 px ;
}
2019-11-05 12:36:40 +03:00
. kg - gallery - image img {
width : 100 % ! important ;
2019-11-07 13:17:20 +03:00
height : auto ! important ;
2019-11-20 20:27:52 +03:00
padding - top : 20 px ;
2019-11-05 12:36:40 +03:00
}
2020-04-29 18:44:10 +03:00
. kg - video - preview {
background - color : # 1 d1f21 ;
background - image : radial - gradient ( circle at center , # 5 b5f66 , # 1 d1f21 ) ;
display : block ;
text - decoration : none ! important ;
}
. kg - video - preview table {
background - size : cover ;
2020-04-30 14:07:49 +03:00
min - height : 200 px ; /* for when images aren't loaded */
2020-04-29 18:44:10 +03:00
}
. kg - video - play - button {
height : 2 em ;
width : 3 em ;
margin : 0 auto ;
border - radius : 10 px ;
padding : 1 em 0.8 em 0.6 em 1 em ;
font - size : 1 em ; /* change this to resize */
background - color : rgba ( 0 , 0 , 0 , 0.85 ) ;
}
. kg - video - play - button div {
2020-05-01 15:22:40 +03:00
display : block ;
width : 0 ;
height : 0 ;
margin : 0 auto ;
2020-04-30 14:07:49 +03:00
line - height : 0 px ; /* fix for Yahoo Mail */
2020-04-29 18:44:10 +03:00
border - color : transparent transparent transparent white ;
border - style : solid ;
border - width : 0.8 em 0 0.8 em 1.5 em ;
}
2019-11-05 12:36:40 +03:00
/ * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HEADER , FOOTER , MAIN
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
. main {
background : # ffffff ;
border - radius : 3 px ;
width : 100 % ;
}
. wrapper {
box - sizing : border - box ;
2019-11-13 16:11:54 +03:00
padding : 0 20 px ;
2019-11-05 12:36:40 +03:00
}
. content - block {
padding - bottom : 10 px ;
padding - top : 10 px ;
}
. footer {
2019-11-06 11:39:10 +03:00
color : # 738 a94 ;
2019-11-05 12:36:40 +03:00
margin - top : 20 px ;
text - align : center ;
font - size : 13 px ;
2020-11-13 18:58:56 +03:00
padding - bottom : 10 px ;
padding - top : 10 px ;
padding - left : 30 px ;
padding - right : 30 px ;
line - height : 1.5 em ;
}
. footer a {
color : # 738 a94 ;
text - decoration : underline ;
2019-11-05 12:36:40 +03:00
}
/ * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BUTTONS
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
. btn {
box - sizing : border - box ;
width : 100 % ;
}
. btn > tbody > tr > td {
padding - bottom : 15 px ;
}
. btn table {
width : auto ;
}
. btn table td {
background - color : # ffffff ;
border - radius : 5 px ;
text - align : center ;
}
. btn a {
background - color : # ffffff ;
border : solid 1 px # 3498 db ;
border - radius : 5 px ;
box - sizing : border - box ;
color : # 3498 db ;
cursor : pointer ;
display : inline - block ;
font - size : 14 px ;
font - weight : bold ;
margin : 0 ;
padding : 12 px 25 px ;
text - decoration : none ;
text - transform : capitalize ;
}
. btn - primary table td {
background - color : # 3498 db ;
}
. btn - primary a {
background - color : # 3498 db ;
border - color : # 3498 db ;
color : # ffffff ;
}
/ * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OTHER STYLES THAT MIGHT BE USEFUL
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
. last {
margin - bottom : 0 ;
}
. first {
margin - top : 0 ;
}
. align - center {
text - align : center ;
}
. align - right {
text - align : right ;
}
. align - left {
text - align : left ;
}
. clear {
clear : both ;
}
. mt0 {
margin - top : 0 ;
}
. mb0 {
margin - bottom : 0 ;
}
. preheader {
color : transparent ;
display : none ;
height : 0 ;
max - height : 0 ;
max - width : 0 ;
opacity : 0 ;
overflow : hidden ;
mso - hide : all ;
visibility : hidden ;
width : 0 ;
}
/ * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RESPONSIVE AND MOBILE FRIENDLY STYLES
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
@ media only screen and ( max - width : 620 px ) {
2020-05-01 13:06:52 +03:00
table . body {
2019-11-22 13:40:56 +03:00
width : 100 % ;
min - width : 100 % ;
}
2020-05-01 13:06:52 +03:00
table . body p ,
table . body ul ,
table . body ol ,
table . body td ,
table . body span {
2019-11-04 13:53:42 +03:00
font - size : 16 px ! important ;
2019-11-05 12:36:40 +03:00
}
2020-05-01 13:06:52 +03:00
table . body pre {
2019-11-06 10:53:29 +03:00
white - space : pre - wrap ! important ;
word - break : break - word ! important ;
}
2020-05-01 13:06:52 +03:00
table . body . wrapper ,
table . body . article {
2019-11-13 16:11:54 +03:00
padding : 0 10 px ! important ;
2019-11-05 12:36:40 +03:00
}
2020-05-01 13:06:52 +03:00
table . body . content {
2019-11-04 13:53:42 +03:00
padding : 0 ! important ;
2019-11-05 12:36:40 +03:00
}
2020-05-01 13:06:52 +03:00
table . body . container {
2019-11-04 13:53:42 +03:00
padding : 0 ! important ;
width : 100 % ! important ;
2019-11-05 12:36:40 +03:00
}
2020-05-01 13:06:52 +03:00
table . body . main {
2019-11-04 13:53:42 +03:00
border - left - width : 0 ! important ;
border - radius : 0 ! important ;
border - right - width : 0 ! important ;
2019-11-05 12:36:40 +03:00
}
2020-05-01 13:06:52 +03:00
table . body . btn table {
2019-11-04 13:53:42 +03:00
width : 100 % ! important ;
2019-11-05 12:36:40 +03:00
}
2020-05-01 13:06:52 +03:00
table . body . btn a {
2019-11-04 13:53:42 +03:00
width : 100 % ! important ;
2019-11-05 12:36:40 +03:00
}
2020-05-01 13:06:52 +03:00
table . body . img - responsive {
2019-11-04 13:53:42 +03:00
height : auto ! important ;
max - width : 100 % ! important ;
width : auto ! important ;
}
2019-11-06 10:53:29 +03:00
2020-05-01 13:06:52 +03:00
table . body . site - icon img {
2019-11-06 10:53:29 +03:00
width : 40 px ! important ;
height : 40 px ! important ;
}
2020-05-01 13:06:52 +03:00
table . body . site - url a {
2019-11-06 10:53:29 +03:00
font - size : 14 px ! important ;
padding - bottom : 15 px ! important ;
}
2020-05-01 13:06:52 +03:00
table . body . post - meta {
2019-11-06 10:53:29 +03:00
white - space : normal ! important ;
font - size : 12 px ! important ;
line - height : 1.5 em ;
}
2020-05-01 13:06:52 +03:00
table . body . view - online - link ,
table . body . footer ,
table . body . footer a {
2019-11-06 10:53:29 +03:00
font - size : 12 px ! important ;
}
2020-05-01 13:06:52 +03:00
table . body . post - title a {
2019-11-06 10:53:29 +03:00
font - size : 32 px ! important ;
2019-11-13 16:11:54 +03:00
line - height : 1.15 em ! important ;
2019-11-06 10:53:29 +03:00
}
2020-05-01 13:06:52 +03:00
table . body . kg - bookmark - card {
2019-11-06 10:53:29 +03:00
width : 90 vw ! important ;
}
2020-05-01 13:06:52 +03:00
table . body . kg - bookmark - thumbnail {
2019-11-06 10:53:29 +03:00
display : none ! important ;
}
2020-04-29 18:44:10 +03:00
2020-05-01 13:06:52 +03:00
table . body . kg - bookmark - metadata span {
2019-11-06 10:53:29 +03:00
font - size : 13 px ! important ;
}
2020-05-01 13:06:52 +03:00
table . body . kg - embed - card {
2019-11-06 10:53:29 +03:00
max - width : 90 vw ! important ;
}
2020-05-01 13:06:52 +03:00
table . body h1 {
2019-11-06 10:53:29 +03:00
font - size : 32 px ! important ;
line - height : 1.3 em ! important ;
}
2020-05-01 13:06:52 +03:00
table . body h2 {
2019-11-06 10:53:29 +03:00
font - size : 26 px ! important ;
line - height : 1.22 em ! important ;
}
2020-05-01 13:06:52 +03:00
table . body h3 {
2019-11-06 10:53:29 +03:00
font - size : 21 px ! important ;
line - height : 1.25 em ! important ;
}
2020-05-01 13:06:52 +03:00
table . body h4 {
2019-11-06 10:53:29 +03:00
font - size : 19 px ! important ;
line - height : 1.3 em ! important ;
}
2020-05-01 13:06:52 +03:00
table . body h5 {
2019-11-06 10:53:29 +03:00
font - size : 16 px ! important ;
line - height : 1.4 em ! important ;
}
2020-05-01 13:06:52 +03:00
table . body h6 {
2019-11-06 10:53:29 +03:00
font - size : 16 px ! important ;
line - height : 1.4 em ! important ;
}
2020-05-01 13:06:52 +03:00
table . body blockquote {
2019-11-22 13:40:56 +03:00
font - size : 17 px ! important ;
2019-11-06 10:53:29 +03:00
line - height : 1.6 em ! important ;
2019-11-22 13:40:56 +03:00
margin - bottom : 0 ! important ;
padding - left : 15 px ! important ;
}
2020-05-01 13:06:52 +03:00
table . body blockquote + * {
2019-11-22 13:40:56 +03:00
margin - top : 1.5 em ! important ;
2019-11-06 10:53:29 +03:00
}
2020-04-29 18:44:10 +03:00
2020-05-01 13:06:52 +03:00
table . body hr {
2019-11-06 10:53:29 +03:00
margin : 2 em 0 ! important ;
}
2020-05-01 13:06:52 +03:00
table . body figcaption ,
table . body figcaption a {
2019-11-06 14:35:03 +03:00
font - size : 13 px ! important ;
}
2019-11-05 12:36:40 +03:00
}
/ * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PRESERVE THESE STYLES IN THE HEAD
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
@ media all {
. ExternalClass {
2019-11-04 13:53:42 +03:00
width : 100 % ;
2019-11-05 12:36:40 +03:00
}
. ExternalClass ,
. ExternalClass p ,
. ExternalClass span ,
. ExternalClass font ,
. ExternalClass td ,
. ExternalClass div {
2019-11-04 13:53:42 +03:00
line - height : 100 % ;
2019-11-05 12:36:40 +03:00
}
. apple - link a {
2019-11-04 13:53:42 +03:00
color : inherit ! important ;
font - family : inherit ! important ;
font - size : inherit ! important ;
font - weight : inherit ! important ;
line - height : inherit ! important ;
text - decoration : none ! important ;
2019-11-05 12:36:40 +03:00
}
# MessageViewBody a {
2019-11-04 13:53:42 +03:00
color : inherit ;
text - decoration : none ;
font - size : inherit ;
font - family : inherit ;
font - weight : inherit ;
line - height : inherit ;
}
2019-11-05 12:36:40 +03:00
. btn - primary table td : hover {
background - color : # 34495 e ! important ;
}
. btn - primary a : hover {
background - color : # 34495 e ! important ;
border - color : # 34495 e ! important ;
2019-11-04 13:53:42 +03:00
}
2019-11-05 12:36:40 +03:00
}
2020-08-20 18:14:43 +03:00
2020-11-11 15:56:11 +03:00
$ { templateSettings . showBadge ? `
2020-08-20 18:14:43 +03:00
. footer - powered {
text - align : center ;
2020-11-16 14:31:37 +03:00
padding - top : 70 px ;
2020-08-20 18:14:43 +03:00
padding - bottom : 40 px ;
}
. gh - powered {
width : 142 px ;
height : 30 px ;
}
` : ''}
/* ----- ENDIF THE BROWSER ----- */
2019-11-05 12:36:40 +03:00
< / s t y l e >
< / h e a d >
< body class = "" >
2019-11-06 06:21:35 +03:00
< span class = "preheader" > $ { post . excerpt ? post . excerpt : ` ${ post . title } – ` } < / s p a n >
2019-11-22 13:40:56 +03:00
< table role = "presentation" border = "0" cellpadding = "0" cellspacing = "0" class = "body" width = "100%" >
2020-05-01 15:40:02 +03:00
<!-- Outlook doesn ' t respect max - width so we need an extra centered table -- >
<!-- [ if mso ] >
< tr >
< td >
< center >
< table border = "0" cellpadding = "0" cellspacing = "0" width = "600" >
< ! [ endif ] -- >
2019-11-05 12:36:40 +03:00
< tr >
< td > & nbsp ; < / t d >
< td class = "container" >
< div class = "content" >
<!-- START CENTERED WHITE CONTAINER -- >
2019-11-22 13:40:56 +03:00
< table role = "presentation" border = "0" cellpadding = "0" cellspacing = "0" class = "main" width = "100%" >
2019-11-05 12:36:40 +03:00
<!-- START MAIN CONTENT AREA -- >
< tr >
< td class = "wrapper" >
2019-11-22 13:40:56 +03:00
< table role = "presentation" border = "0" cellpadding = "0" cellspacing = "0" width = "100%" >
2020-08-20 18:14:43 +03:00
2020-11-11 15:56:11 +03:00
$ { templateSettings . showSiteHeader ? `
2019-11-05 12:36:40 +03:00
< tr >
2019-11-22 13:40:56 +03:00
< td class = "site-info" width = "100%" align = "center" >
2019-11-06 06:21:35 +03:00
< table role = "presentation" border = "0" cellpadding = "0" cellspacing = "0" >
2020-03-12 07:22:33 +03:00
$ { site . iconUrl ? `
2019-11-06 06:21:35 +03:00
< tr >
2020-03-12 07:22:33 +03:00
< td class = "site-icon" > < a href = "${site.url}" > < img src = "${site.iconUrl}" border = "0" > < / a > < / t d >
2019-11-06 06:21:35 +03:00
< / t r >
` : ` ` }
< tr >
2019-11-22 13:40:56 +03:00
< td class = "site-url" > < div style = "width: 100% !important;" > < a href = "${site.url}" > $ { site . title } < / a > < / d i v > < / t d >
2019-11-06 06:21:35 +03:00
< / t r >
< / t a b l e >
< / t d >
2019-11-05 12:36:40 +03:00
< / t r >
2020-08-20 18:14:43 +03:00
` : ''}
2019-11-05 12:36:40 +03:00
< tr >
< td class = "post-title" > < a href = "${post.url}" class = "post-title-link" > $ { post . title } < / a > < / t d >
< / t r >
< tr >
2019-11-22 13:40:56 +03:00
< td align = "center" >
< table role = "presentation" border = "0" cellpadding = "0" cellspacing = "0" width = "100%" >
2019-11-05 12:36:40 +03:00
< tr >
< td class = "post-meta" >
2020-04-29 18:44:10 +03:00
By $ { post . authors } –
$ { post . published _at } –
2019-11-06 06:21:35 +03:00
< a href = "${post.url}" class = "view-online-link" > View online → < / a >
2019-11-05 12:36:40 +03:00
< / t d >
< / t r >
< / t a b l e >
< / t d >
< / t r >
2020-02-03 20:49:41 +03:00
$ { post . feature _image ? `
< tr >
< td class = "feature-image" > < img src = "${post.feature_image}" > < / t d >
< / t r >
` : ` ` }
2019-11-05 12:36:40 +03:00
< tr >
2020-11-11 15:56:11 +03:00
< td class = "${(templateSettings.bodyFontCategory === 'sans_serif') ? `post-content-sans-serif` : `post-content` }" >
2019-11-05 12:36:40 +03:00
<!-- POST CONTENT START -- >
$ { post . html }
<!-- POST CONTENT END -- >
< / t d >
< / t r >
< / t a b l e >
< / t d >
< / t r >
<!-- END MAIN CONTENT AREA -- >
2019-11-06 06:21:35 +03:00
< tr >
2020-11-16 14:31:37 +03:00
< td class = "wrapper" align = "center" >
< table role = "presentation" border = "0" cellpadding = "0" cellspacing = "0" width = "100%" style = "padding-top: 40px; padding-bottom: 30px;" >
2020-11-13 16:18:47 +03:00
$ { iff ( ! ! templateSettings . footerContent , ` <tr><td class="footer"> ${ templateSettings . footerContent } </td></tr> ` , '' ) }
2019-11-06 06:21:35 +03:00
< tr >
2020-02-03 20:49:41 +03:00
< td class = "footer" > $ { site . title } & copy ; $ { date . getFullYear ( ) } – < a href = "%recipient.unsubscribe_url%" > Unsubscribe < / a > < / t d >
2019-11-06 06:21:35 +03:00
< / t r >
2020-08-20 18:14:43 +03:00
2020-11-11 15:56:11 +03:00
$ { templateSettings . showBadge ? `
2020-08-20 18:14:43 +03:00
< tr >
< td class = "footer-powered" > < a href = "https://ghost.org/" > < img src = "https://static.ghost.org/v3.0.0/images/powered.png" border = "0" width = "142" height = "30" class = "gh-powered" alt = "Publish with Ghost" > < / a > < / t d >
< / t r >
` : '' }
2019-11-06 06:21:35 +03:00
< / t a b l e >
< / t d >
< / t r >
2019-11-05 12:36:40 +03:00
< / t a b l e >
<!-- END CENTERED WHITE CONTAINER -- >
< / d i v >
< / t d >
< td > & nbsp ; < / t d >
< / t r >
2020-05-01 15:40:02 +03:00
<!-- [ if mso ] >
< / t a b l e >
< / c e n t e r >
< / t d >
< / t r >
< ! [ endif ] -- >
2019-11-04 13:53:42 +03:00
< / t a b l e >
2019-11-05 12:36:40 +03:00
< / b o d y >
2019-11-06 12:16:50 +03:00
< / h t m l > ` ;
2020-04-29 18:44:10 +03:00
} ;