at the end of the day, it was inevitable
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
{#
|
||||
Content document comments.
|
||||
#}
|
||||
|
||||
{%- if (showUserComments != 'no') and (comments|length > 0) -%}
|
||||
|
||||
{%- if themeType == 'enhanced' -%}
|
||||
<br>
|
||||
<b>Comments</b>
|
||||
{%- endif -%}
|
||||
<div class="comments">
|
||||
{%- for comment in comments -%}
|
||||
<div class="comment">
|
||||
{%- if comment.title is not empty -%}
|
||||
<div class="comment-title">
|
||||
{{- comment.title -}}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div class="comment-info">
|
||||
By <span class="comment-author">
|
||||
{{- comment.author.firstName -}}
|
||||
{{- comment.author.lastName -}}
|
||||
</span>
|
||||
{%- if showUserComments == 'with_author_date' -%}
|
||||
on <span class="comment-date">
|
||||
{{- comment.createdAt|date('F d, Y H:i') -}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<div class="comment-body">
|
||||
{{- comment.content -}}
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,60 @@
|
||||
{#
|
||||
Content document element.
|
||||
#}
|
||||
|
||||
{%- set isEnhanced = themeType == 'enhanced' -%}
|
||||
{%- set showImage = isEnhanced and showImages and (document.image is not empty) -%}
|
||||
|
||||
<div class="document">
|
||||
{%- if isEnhanced -%}
|
||||
<div class="document-aside">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALAQMAAAB8oI5bAAAABlBMVEX///9ucHPxuGwkAAAAAXRSTlMAQObYZgAAABpJREFUCNdj+HyAoceBYZ4DiGwAo/1I5P8DALPlCueka/iaAAAAAElFTkSuQmCC">
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div class="document-main">
|
||||
<div class="document-body">
|
||||
<div class="document-headline">
|
||||
<a href="{{- document.permalink -}}">
|
||||
{{- document.title -}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
<span class="document-source">
|
||||
{{- document.source.title -}}
|
||||
{%- if showSourceCountry and document.source is not empty and document.source.country is not empty -%}
|
||||
({{ document.source.country }})
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{%- if document.author is not empty and document.author.name is not empty -%}
|
||||
<span class="document-author">
|
||||
{%- if not isEnhanced -%}
|
||||
-
|
||||
{%- endif -%}
|
||||
{{- document.author.name -}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
<span class="document-date">
|
||||
{%- if isEnhanced -%}
|
||||
|
|
||||
{%- else -%}
|
||||
-
|
||||
{%- endif -%}
|
||||
{{- document.published|date('F d, Y H:i') -}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="document-content">
|
||||
{{- document.content -}}
|
||||
</div>
|
||||
{%- include _root ~ '/Partial/Content/comments.html.twig' with {
|
||||
comments: document.comments,
|
||||
showUserComments: showUserComments,
|
||||
themeType: themeType
|
||||
} -%}
|
||||
</div>
|
||||
{%- if showImage -%}
|
||||
<div class="document-image">
|
||||
<img src="{{- document.image -}}">
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
{#
|
||||
Content component.
|
||||
#}
|
||||
{%- set isPlain = themeType == 'plain' -%}
|
||||
|
||||
<div class="content">
|
||||
{%- for feed in feeds -%}
|
||||
<div class="feed">
|
||||
<div class="feed-title">
|
||||
{%- if not isPlain -%}
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAQAAABUDBdwAAAAOElEQVQI12NgYPh/8//3/zAwlQEo0PwfAZxAAnb/T8Pk/9sxgMB/HyR5BoiaOiB3MlQeKrQaIg8Aiig6G17xrxEAAAAASUVORK5CYII=">
|
||||
{%- endif -%}
|
||||
{{- feed.name -}}
|
||||
{%- if isPlain -%}:{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="documents">
|
||||
{%- for document in feed.documents -%}
|
||||
{%- include _root ~ '/Partial/Content/document.html.twig' with {
|
||||
document: document,
|
||||
showImages: showImages,
|
||||
showSourceCountry: showSourceCountry,
|
||||
showUserComments: showUserComments,
|
||||
themeType: themeType
|
||||
} -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- if showSectionDivider and not loop.last and isPlain -%}
|
||||
<div class="feed-divider"></div>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
@@ -0,0 +1,145 @@
|
||||
{#
|
||||
|
||||
Content component styles.
|
||||
|
||||
#}
|
||||
{%- import _root ~ '/macros.css.twig' as macro -%}
|
||||
|
||||
.content .feed-title {
|
||||
{{- macro.renderFont(fonts.feedTitle) -}}
|
||||
margin-top: 5px;
|
||||
{%- if themeType == 'enhanced' -%}
|
||||
background: {{- colors.background.accent|raw -}};
|
||||
padding: 10px;
|
||||
color: {{- colors.text.header|raw -}};
|
||||
{%- endif -%}
|
||||
}
|
||||
|
||||
.content .feed-title img {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.content .feed-divider {
|
||||
margin: 1.8em 0.4em 1em;
|
||||
border-bottom: 1px solid black;
|
||||
display: block;
|
||||
color: rgb(55, 55, 57);
|
||||
}
|
||||
|
||||
.content .documents .document {
|
||||
{%- if themeType == 'plain'-%}
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
{%- else -%}
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
{%- endif -%}
|
||||
}
|
||||
|
||||
{%- if themeType == 'plain' -%}
|
||||
.content .documents .document:last-child {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if themeType == 'enhanced' -%}
|
||||
.content .documents .document-aside {
|
||||
padding: 10px 5px 2px 5px;
|
||||
}
|
||||
|
||||
.content .documents .document-main {
|
||||
padding: 0 5px 10px 0;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.content .documents .document-body {
|
||||
flex: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.content .documents .document-image {
|
||||
flex-basis: 170px;
|
||||
}
|
||||
|
||||
.content .documents .document-image img {
|
||||
width: 160px;
|
||||
}
|
||||
{%- endif -%}
|
||||
|
||||
.content .documents .document-headline a,
|
||||
.content .documents .document-headline a:hover,
|
||||
.content .documents .document-headline a:visited,
|
||||
.content .documents .document-headline a:active {
|
||||
{{- macro.renderFont(fonts.articleHeadline) -}}
|
||||
color: {{- colors.text.articleHeadline|raw -}};
|
||||
}
|
||||
|
||||
.content .documents .document-headline,
|
||||
.content .documents .document-info {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.content .documents .document-source {
|
||||
color: {{- colors.text.source|raw -}};
|
||||
{{- macro.renderFont(fonts.source) -}};
|
||||
}
|
||||
|
||||
.content .documents .document-author {
|
||||
color: {{- colors.text.author|raw -}};
|
||||
{{- macro.renderFont(fonts.author) -}};
|
||||
}
|
||||
|
||||
.content .documents .document-date {
|
||||
{%- if themeType == 'plain' -%}
|
||||
color: {{- colors.text.publishDate|raw -}};
|
||||
{%- else -%}
|
||||
color: {{- colors.text.articleContent|raw -}};
|
||||
{%- endif -%}
|
||||
{{- macro.renderFont(fonts.date) -}};
|
||||
}
|
||||
|
||||
.content .document .document-content {
|
||||
{{- macro.renderFont(fonts.articleContent) -}};
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.content .comments {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.content .comments .comment {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
{%- if themeType == 'enhanced' -%}
|
||||
.content .comments .comment-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
{%- endif -%}
|
||||
|
||||
.content .comments .comment-author {
|
||||
color: {{- colors.text.author|raw -}};
|
||||
{%- if themeType == 'plain' -%}
|
||||
{{- macro.renderFont(fonts.author) -}};
|
||||
{%- endif -%}
|
||||
}
|
||||
|
||||
.content .comments .comment-date {
|
||||
{%- if themeType == 'plain' -%}
|
||||
color: {{- colors.text.publishDate|raw -}};
|
||||
{{- macro.renderFont(fonts.date) -}};
|
||||
{%- else -%}
|
||||
color: {{- colors.text.articleContent|raw -}};
|
||||
{%- endif -%}
|
||||
}
|
||||
|
||||
.content .comments .comment-info {
|
||||
margin: 5px 0 ;
|
||||
}
|
||||
|
||||
.content .comments .comment-body {
|
||||
padding-left: 20px;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{#
|
||||
Footer component.
|
||||
#}
|
||||
<footer class='footer'>
|
||||
<ul class="footer__list">
|
||||
<li class="footer__item"><a href="https://www.socialhose.io" class="footer__link">SOCIALHOSE.IO<span class="logo-trademark">®</span></a></li>
|
||||
<li class="footer__item"><a href="https://www.socialhose.io/en/legal/privacy" class="footer__link">Privacy Policy</a></li>
|
||||
<li class="footer__item"><a href="https://www.socialhose.io/en/legal/acceptable-use" class="footer__link">Acceptable Use Policy</a></li>
|
||||
<li class="footer__item"><a href="https://www.socialhose.io/en/legal/terms" class="footer__link">Terms & Conditions</a></li>
|
||||
<li class="footer__item"><a href="https://www.socialhose.io" class="footer__link">Copyright © 2021 SOCIALHOSE.IO. All rights reserved.</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
@@ -0,0 +1,40 @@
|
||||
{#
|
||||
|
||||
Footer component styles.
|
||||
|
||||
#}
|
||||
|
||||
.footer {
|
||||
padding: 0 20px;
|
||||
{%- if themeType == 'plain' -%}
|
||||
border-top: 3px double #FFF;
|
||||
{%- endif -%}
|
||||
background: #e9e9ea;
|
||||
height: 54px;
|
||||
margin-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__item {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__link {
|
||||
text-shadow: 1px 2px 1px #FFF;
|
||||
line-height: 49px;
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
color: #373739;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer__link:hover {
|
||||
background: #D9D9D9;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{#
|
||||
|
||||
Header component.
|
||||
|
||||
#}
|
||||
|
||||
{% set enhanced = themeType == 'enhanced' %}
|
||||
|
||||
{%- if enhanced or header.imageUrl is not empty -%}
|
||||
<header class="email-header">
|
||||
<div class="email-header-logo">
|
||||
<a href="{{- header.logoLink -}}">
|
||||
<img src="{{- header.imageUrl -}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="email-header-info">
|
||||
{%- if enhanced -%}
|
||||
<div class="email-header-info-content">
|
||||
<div class="email-header-info-title">
|
||||
{{- header.title -}}
|
||||
</div>
|
||||
<div class="email-header-info-date">
|
||||
{{- 'now'|date('F d, Y H:i') -}}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</header>
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,56 @@
|
||||
{#
|
||||
|
||||
Header component styles.
|
||||
|
||||
#}
|
||||
{%- import _root ~ '/macros.css.twig' as macro -%}
|
||||
|
||||
{% set headerHeight = '105px' %}
|
||||
|
||||
.email-header {
|
||||
{%- if themeType == 'plain' -%}
|
||||
color: white;
|
||||
{%- if imageUrl != '' -%}height: {{- headerHeight -}};{%- endif -%}
|
||||
{%- else -%}
|
||||
height: {{- headerHeight -}};
|
||||
background: {{- colors.background.header|raw -}};
|
||||
{%- endif -%}
|
||||
}
|
||||
|
||||
.email-header-logo {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 75%;
|
||||
border: none;
|
||||
}
|
||||
.email-header-logo img {
|
||||
padding-top: 25px;
|
||||
padding-left: 26px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.email-header-info {
|
||||
text-align: right;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
border: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.email-header-info-title {
|
||||
{{- macro.renderFont(fonts.header) -}}
|
||||
color: {{- colors.text.header|raw -}};
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.email-header-info-date {
|
||||
color: {{- colors.background.accent|raw -}};
|
||||
}
|
||||
|
||||
.email-header-info-content {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{#
|
||||
|
||||
Table of contents document element.
|
||||
|
||||
#}
|
||||
<div class="document">
|
||||
<a href="{{- document.permalink -}}">
|
||||
{%- if tableOfContents == 'headline_source_date' -%}
|
||||
{{- document.title }} | <span class="source">{{ document.source.title }}</span> | {{ document.published|date('F d, Y H:i') -}}
|
||||
{%- elseif tableOfContents == 'source_headline_date' -%}
|
||||
<span class="source">{{- document.source.title }}</span> | {{ document.title }} | {{ document.published|date('F d, Y H:i') -}}
|
||||
{%- else -%}
|
||||
{{- document.title -}}
|
||||
{%- endif -%}
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
{#
|
||||
|
||||
Table of contents feed element.
|
||||
|
||||
#}
|
||||
|
||||
<div class="feed">
|
||||
<span class="feed-name">
|
||||
{{- feed.name -}}
|
||||
</span>
|
||||
|
||||
{%- if showArticlesCount -%}
|
||||
{%- if themeType == 'plain' -%}
|
||||
<span class="feed-document-count">({{- feed.documentsCount }} articles)</span>
|
||||
{%- else -%}
|
||||
<span class="feed-document-count">{{- feed.documentsCount }} articles</span>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if tableOfContents != 'simple' -%}
|
||||
<ul class="documents">
|
||||
{%- for document in feed.documents -%}
|
||||
<li>
|
||||
{%- include _root ~ '/Partial/TableOfContents/document.html.twig' with {
|
||||
tableOfContents: tableOfContents,
|
||||
document: document
|
||||
} -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
{#
|
||||
|
||||
Table of contents.
|
||||
|
||||
#}
|
||||
{%- if tableOfContents != 'no' -%}
|
||||
<div class="table-of-contents">
|
||||
<ul class="feeds">
|
||||
{%- for feed in feeds -%}
|
||||
<li>
|
||||
{%- include _root ~ '/Partial/TableOfContents/feed.html.twig' with {
|
||||
tableOfContents: tableOfContents,
|
||||
showArticlesCount: showArticlesCount,
|
||||
feed: feed,
|
||||
themeType: themeType
|
||||
} -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,122 @@
|
||||
{#
|
||||
|
||||
Table of contents component styles.
|
||||
|
||||
#}
|
||||
{%- import _root ~ '/macros.css.twig' as macro -%}
|
||||
|
||||
{%- if themeType == 'plain' -%}
|
||||
.table-of-contents {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.table-of-contents li:before {
|
||||
content: '• ';
|
||||
color: #636363;
|
||||
font-size: {{- fonts.tableOfContents.size -}}px;
|
||||
{%- if fonts.tableOfContents.style.bold -%}
|
||||
font-weight: bold;
|
||||
{%- endif -%}
|
||||
{%- if fonts.tableOfContents.style.italic -%}
|
||||
font-style: italic;
|
||||
{%- endif -%}
|
||||
text-decoration: none;
|
||||
}
|
||||
{%- else -%}
|
||||
.table-of-contents .feeds li {
|
||||
background: white;
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.table-of-contents .feeds > li {
|
||||
margin-bottom: 1px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.table-of-contents .feeds > li:before {
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAQAAABwz0azAAAAN0lEQVQIW2NIm5rmlGbHAAFp/4EQJgDmgODkNCcE53/aagSnDqgw7TuQcTrNB6LnZloz3DRkAAC1LiXJoeG8xgAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.table-of-contents .documents > li:before {
|
||||
content: '• ';
|
||||
color: #636363;
|
||||
margin-right: 10px;
|
||||
font-size: {{- fonts.articleContent.size -}}px;
|
||||
{%- if fonts.articleContent.style.bold -%}
|
||||
font-weight: bold;
|
||||
{%- endif -%}
|
||||
{%- if fonts.articleContent.style.italic -%}
|
||||
font-style: italic;
|
||||
{%- endif -%}
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
|
||||
.table-of-contents ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.table-of-contents .feeds {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-of-contents .feeds .feed,
|
||||
.table-of-contents .documents .document {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.table-of-contents .feeds .feed .feed-name,
|
||||
.table-of-contents .feeds .feed .feed-document-count {
|
||||
{{- macro.renderFont(fonts.tableOfContents) -}};
|
||||
}
|
||||
{%- if themeType == 'plain' -%}
|
||||
.table-of-contents .feeds .feed .feed-document-count:before {
|
||||
content: ' ';
|
||||
}
|
||||
{%- else -%}
|
||||
.table-of-contents .feeds .feed .feed-name {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.table-of-contents .feeds .feed .feed-name,
|
||||
.table-of-contents .feeds .feed .feed-document-count {
|
||||
width: 48%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
.table-of-contents .documents {
|
||||
padding: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.table-of-contents .documents .document .source {
|
||||
color: {{- colors.text.source|raw -}};
|
||||
}
|
||||
|
||||
.table-of-contents .documents .document a,
|
||||
.table-of-contents .documents .document a:hover,
|
||||
.table-of-contents .documents .document a:visited,
|
||||
.table-of-contents .documents .document a:active {
|
||||
{%- if themeType == 'plain' -%}
|
||||
color: {{- colors.text.articleHeadline|raw -}};
|
||||
{{- macro.renderFont(fonts.tableOfContents) -}};
|
||||
{%- else -%}
|
||||
color: {{- colors.text.articleContent|raw -}};
|
||||
{{- macro.renderFont(fonts.articleContent) -}};
|
||||
{%- endif -%}
|
||||
|
||||
}
|
||||
|
||||
{%- if themeType == 'plain' -%}
|
||||
.table-of-contents .documents .document a:after {
|
||||
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAAnRSTlMAAHaTzTgAAAArSURBVAgdBcGBAAAAAMOg/A3mdKgXqCpYECikqiHRLEmzKlkrI5YgEFRVOB2zIawhqiEzAAAAAElFTkSuQmCC);
|
||||
padding-left: 3px;
|
||||
}
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,223 @@
|
||||
{% set _root = _root|default('UserBundle:Notification:') %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="x-apple-disable-message-reformatting">
|
||||
<title>{%- block title -%}{%- endblock title -%}</title>
|
||||
{#
|
||||
|
||||
CSS normalization.
|
||||
|
||||
#}
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0 auto !important;
|
||||
padding: 0 !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
font-size: 14px;
|
||||
color: #737373;
|
||||
{%- if theme.type == 'enhanced' -%}
|
||||
background: {{- theme.options.colors.background.emailBody|raw -}};
|
||||
{%- endif -%}
|
||||
}
|
||||
|
||||
{# Stops email clients resizing small text. #}
|
||||
* {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
{# Stops Outlook from adding extra spacing to tables. #}
|
||||
table,
|
||||
td {
|
||||
mso-table-lspace: 0 !important;
|
||||
mso-table-rspace: 0 !important;
|
||||
}
|
||||
|
||||
{# Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. #}
|
||||
table {
|
||||
border-spacing: 0 !important;
|
||||
border-collapse: collapse !important;
|
||||
table-layout: fixed !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
table,
|
||||
td{
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
{# Uses a better rendering method when resizing images in IE. #}
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
border: 0 none;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a img{
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
{#
|
||||
|
||||
Email container
|
||||
|
||||
#}
|
||||
.email {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
{%- if theme.type == 'enhanced' -%}
|
||||
border: 4px solid {{ theme.options.colors.background.accent|raw -}};
|
||||
{%- endif -%}
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
.email {
|
||||
width: 920px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-body {
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.email-body-content {
|
||||
color: {{- theme.options.colors.text.articleContent|raw -}};
|
||||
}
|
||||
|
||||
{%- include _root ~ '/Partial/Header/style.css.twig' with {
|
||||
themeType: theme.type,
|
||||
imageUrl: theme.options.header.imageUrl,
|
||||
fonts: {
|
||||
header: theme.options.fonts.header,
|
||||
},
|
||||
colors: {
|
||||
background: {
|
||||
header: theme.options.colors.background.header,
|
||||
accent: theme.options.colors.background.accent
|
||||
},
|
||||
text: {
|
||||
header: theme.options.colors.text.header
|
||||
}
|
||||
}
|
||||
|
||||
} -%}
|
||||
{%- include _root ~ '/Partial/TableOfContents/style.css.twig' with {
|
||||
themeType: theme.type,
|
||||
fonts: {
|
||||
tableOfContents: theme.options.fonts.tableOfContents,
|
||||
articleContent: theme.options.fonts.articleContent
|
||||
},
|
||||
colors: {
|
||||
text: {
|
||||
source: theme.options.colors.text.source,
|
||||
articleHeadline: theme.options.colors.text.articleHeadline,
|
||||
articleContent: theme.options.colors.text.articleContent
|
||||
}
|
||||
}
|
||||
} -%}
|
||||
{%- include _root ~ '/Partial/Content/style.css.twig' with {
|
||||
themeType: theme.type,
|
||||
fonts: {
|
||||
feedTitle: theme.options.fonts.feedTitle,
|
||||
articleContent: theme.options.fonts.articleContent,
|
||||
articleHeadline: theme.options.fonts.articleHeadline,
|
||||
source: theme.options.fonts.source,
|
||||
author: theme.options.fonts.author,
|
||||
date: theme.options.fonts.date
|
||||
},
|
||||
colors: {
|
||||
background: {
|
||||
accent: theme.options.colors.background.accent
|
||||
},
|
||||
text: {
|
||||
header: theme.options.colors.text.header,
|
||||
articleContent: theme.options.colors.text.articleContent,
|
||||
articleHeadline: theme.options.colors.text.articleHeadline,
|
||||
source: theme.options.colors.text.source,
|
||||
author: theme.options.colors.text.author,
|
||||
publishDate: theme.options.colors.text.publishDate
|
||||
}
|
||||
}
|
||||
} -%}
|
||||
{%- include _root ~ '/Partial/Footer/style.css.twig' with {
|
||||
themeType: theme.type
|
||||
} -%}
|
||||
|
||||
</style>
|
||||
{%- block stylesheets -%}{%- endblock stylesheets -%}
|
||||
</head>
|
||||
|
||||
<body style="width: 100%; margin: 0; mso-line-height-rule: exactly;">
|
||||
<div class="email">
|
||||
{#
|
||||
Header
|
||||
#}
|
||||
{%- include _root ~ '/Partial/Header/index.html.twig' with {
|
||||
themeType: theme.type,
|
||||
header: theme.options.header
|
||||
} -%}
|
||||
|
||||
<section class="email-body">
|
||||
{#
|
||||
Summary
|
||||
#}
|
||||
{%- if theme.options.summary != '' -%}
|
||||
<div class="email-summary">
|
||||
{{- theme.options.summary|raw -}}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="email-body-content">
|
||||
{#
|
||||
Table of contents
|
||||
#}
|
||||
{%- include _root ~ '/Partial/TableOfContents/index.html.twig' with {
|
||||
feeds: feeds,
|
||||
tableOfContents: theme.options.content.showInfo.tableOfContents,
|
||||
showArticlesCount: theme.options.content.showInfo.articleCount,
|
||||
themeType: theme.type
|
||||
} -%}
|
||||
|
||||
{#
|
||||
Content.
|
||||
#}
|
||||
{%- include _root ~ '/Partial/Content/index.html.twig' with {
|
||||
feeds: feeds,
|
||||
showSectionDivider: theme.options.content.showInfo.sectionDivider,
|
||||
showImages: theme.options.content.showInfo.images,
|
||||
showSourceCountry: theme.options.content.showInfo.sourceCountry,
|
||||
showUserComments: theme.options.content.showInfo.userComments,
|
||||
themeType: theme.type
|
||||
} -%}
|
||||
</div>
|
||||
|
||||
{#
|
||||
Conclusion
|
||||
#}
|
||||
{%- if theme.options.conclusion != '' -%}
|
||||
<div class="email-conclusion">
|
||||
{{- theme.options.conclusion|raw -}}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</section>
|
||||
|
||||
{#
|
||||
Footer
|
||||
#}
|
||||
{%- include _root ~ '/Partial/Footer/index.html.twig' -%}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{%- macro renderFont(font) -%}
|
||||
font-family: {{- font.family|raw -}};
|
||||
font-size: {{- font.size -}}px;
|
||||
|
||||
{%- if (font.style.bold) -%}
|
||||
font-weight: bold;
|
||||
{%- endif -%}
|
||||
|
||||
{%- if (font.style.italic) -%}
|
||||
font-style: italic;
|
||||
{%- endif -%}
|
||||
|
||||
{%- if (font.style.underline) -%}
|
||||
text-decoration: underline;
|
||||
{%- endif -%}
|
||||
|
||||
{%- endmacro -%}
|
||||
Reference in New Issue
Block a user