Skip to content

Commit

Permalink
simplify our media queries
Browse files Browse the repository at this point in the history 
 - centre align the images and titles
  • Loading branch information
Blundell committed Oct 25, 2017
1 parent 91e7557 commit 5f07ce0
Showing 1 changed file with 50 additions and 48 deletions.
98 changes: 50 additions & 48 deletions enews/enews-java/html-generator/src/main/java/com/novoda/enews/HtmlGenerator.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,123 +19,125 @@ public String generate(Stream<Article> articleStream) {
head();
shareBar.injectCssInto(this);
style();
text("#newsletter-body {"
// + " display: flex;"
// + " flex-direction: column;" Not supported in email clients
// + " align-items: center;"
text("" +
"* {"
+ " margin: 0;"
+ " padding: 0;"
+ "}"
+ "#newsletter-body {"
+ " padding: 5px;"
+ "}"
+ "#title a {"
+ " text-decoration: none;"
+ " color: #26A3DB;"
+ "}"
+ "#title p {"
+ " font: 300 1.2em/1.8 Open Sans, regular;"
+ "#intro {"
+ " font: 300 1.2em/1.8 Open Sans, Helvetica, Verdana, sans-serif, regular;"
+ " color: #6d6d6d;"
+ " text-align: justify;"
+ "}"
+ "ul {"
+ " -webkit-padding-start: 0px;"
+ "}"
+ "li {"
+ " list-style-type: none;"
+ " padding-top: 20px;"
+ " padding-bottom: 20px;"
+ "}"
+ "li a {"
+ " text-decoration: none;"
+ " color: black;"
+ "}"
+ "#content { "
+ "#article {"
+ "width: 70%;"
+ "margin: 0 auto;"
+ "}"
+ "#article-image { "
+ " object-fit: cover;"
+ "}"
+ "#article-title {"
+ " color: #000000;"
+ " font-weight: bold;"
+ " font-family: Open Sans, Helvetica, Verdana, sans-serif;"
+ " line-height: 1.5;"
+ "}"
+ "#article-text {"
+ " color: #000000;"
+ " font-weight: regular;"
+ " font-family: Open Sans, Helvetica, Verdana, sans-serif;"
+ " line-height: 1.5;"
+ "}"
// Mobile Small
+ " @media only screen and (min-width: 320px) {"
+ "#newsletter-body {"
+ "width:360px;"
+ "}"
+ "#header-image { "
+ " background: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_PhoneSmall.png);"
+ " width:360px; height:190px"
+ " background-image: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_PhoneSmall.png);"
+ " width: 360px; height: 190px;"
+ "}"
+ "#intro {"
+ "max-width: 360px;"
+"}"
+ "#article-image { "
+ " width: 360px; height: 202px;"
+ "}"
+ "#article-title {"
+ " font: bold 18px/1.5 Open Sans, Helvetica, Verdana, sans-serif;"
+ " max-width: 360px;"
+ " font-size: 18px;"
+ "}"
+ "#article-text {"
+ " font: 200 14px/1.5 Open Sans, regular;"
+ " max-width: 360px;"
+ " font-size: 14px;"
+ "}"
+ "}"
// Mobile Large
+ " @media only screen and (min-width: 425px) {"
+ "#newsletter-body {"
+ "width:425px;"
+ "}"
+ "#header-image { "
+ " background: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_PhoneLarge.png);"
+ " width:425px; height:188px"
+ " background-image: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_PhoneLarge.png);"
+ " width: 360px; height: 190px;"
+ "}"
+ "#intro {"
+ "max-width: 360px;"
+"}"
+ "#article-image { "
+ " width: 360px; height: 202px;"
+ "}"
+ "#article-title {"
+ " font: bold 18px/1.5 Open Sans, Helvetica, Verdana, sans-serif;"
+ " max-width: 360px;"
+ " font-size: 18px;"
+ "}"
+ "#article-text {"
+ " font: 200 14px/1.5 Open Sans, regular;"
+ " max-width: 360px;"
+ " font-size: 14px;"
+ "}"
+ "}"
// Tablet
+ " @media only screen and (min-width: 768px) {"
+ "#newsletter-body {"
+ "width:600px;"
+ "}"
+ "#header-image { "
+ " background: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_Tablet.png);"
+ " width:600px; height:180px"
+ " background-image: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_Tablet.png);"
+ " width: 600px; height: 180px;"
+ "}"
+ "#intro {"
+ "max-width: 600px;"
+"}"
+ "#article-image { "
+ " width: 480px; height: 268px;"
+ "}"
+ "#article-title {"
+ " font: bold 20px/1.5 Open Sans, Helvetica, Verdana, sans-serif;"
+ " max-width: 480px;"
+ " font-size: 20px;"
+ "}"
+ "#article-text {"
+ " font: 200 16px/1.5 Open Sans, regular;"
+ " max-width: 480px;"
+ " font-size: 16px;"
+ "}"
+ "}"
// Laptop
+ " @media only screen and (min-width: 1024px) {"
+ "#newsletter-body {"
+ "width:800px;"
+ "}"
+ "#header-image { "
+ " background: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_desktop.png);"
+ " width:800px; height:253px"
+ " background-image: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_desktop.png);"
+ " width: 800px; height: 253px;"
+ "}"
+ "#intro {"
+ "max-width: 800px;"
+"}"
+ "#article-image { "
+ " width: 480px; height: 268px;"
+ "}"
+ "#article-title {"
+ " font: bold 20px/1.5 Open Sans, Helvetica, Verdana, sans-serif;"
+ " max-width: 480px;"
+ " font-size: 20px;"
+ "}"
+ "#article-text {"
+ " font: 200 16px/1.5 Open Sans, regular;"
+ " max-width: 480px;"
+ " font-size: 16px;"
+ "}"
+ "}"
+ ""
Expand All @@ -148,9 +150,8 @@ public String generate(Stream<Article> articleStream) {
.div()
.id("title")
.a().href("https://twitter.com/novoda").target("_blank")
.img()
.div()
.id("header-image")
.src("https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/blank.gif")
.end()
.end()
.p()
Expand Down Expand Up @@ -187,6 +188,7 @@ void makeList() {
li()
.a().href(article.getPageLink())
.div()
.id("article")
.img()
.id("article-image")
.src(article.getImage())
Expand Down

0 comments on commit 5f07ce0

Please sign in to comment.