Skip to content

Commit 5f07ce0

Browse files
author
Blundell
committed
simplify our media queries
 - centre align the images and titles
1 parent 91e7557 commit 5f07ce0

File tree

1 file changed

+50
-48
lines changed

1 file changed

+50
-48
lines changed

‎enews/enews-java/html-generator/src/main/java/com/novoda/enews/HtmlGenerator.java

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -19,123 +19,125 @@ public String generate(Stream<Article> articleStream) {
1919
head();
2020
shareBar.injectCssInto(this);
2121
style();
22-
text("#newsletter-body {"
23-
// + " display: flex;"
24-
// + " flex-direction: column;" Not supported in email clients
25-
// + " align-items: center;"
22+
text("" +
23+
"* {"
24+
+ " margin: 0;"
25+
+ " padding: 0;"
2626
+ "}"
27+
+ "#newsletter-body {"
28+
+ " padding: 5px;"
29+
+ "}"
2730
+ "#title a {"
2831
+ " text-decoration: none;"
2932
+ " color: #26A3DB;"
3033
+ "}"
31-
+ "#title p {"
32-
+ " font: 300 1.2em/1.8 Open Sans, regular;"
34+
+ "#intro {"
35+
+ " font: 300 1.2em/1.8 Open Sans, Helvetica, Verdana, sans-serif, regular;"
3336
+ " color: #6d6d6d;"
3437
+ " text-align: justify;"
3538
+ "}"
36-
+ "ul {"
37-
+ " -webkit-padding-start: 0px;"
38-
+ "}"
3939
+ "li {"
4040
+ " list-style-type: none;"
41+
+ " padding-top: 20px;"
42+
+ " padding-bottom: 20px;"
4143
+ "}"
4244
+ "li a {"
4345
+ " text-decoration: none;"
4446
+ " color: black;"
4547
+ "}"
46-
+ "#content { "
48+
+ "#article {"
49+
+ "width: 70%;"
50+
+ "margin: 0 auto;"
4751
+ "}"
4852
+ "#article-image { "
4953
+ " object-fit: cover;"
5054
+ "}"
5155
+ "#article-title {"
5256
+ " color: #000000;"
57+
+ " font-weight: bold;"
58+
+ " font-family: Open Sans, Helvetica, Verdana, sans-serif;"
59+
+ " line-height: 1.5;"
5360
+ "}"
5461
+ "#article-text {"
5562
+ " color: #000000;"
63+
+ " font-weight: regular;"
64+
+ " font-family: Open Sans, Helvetica, Verdana, sans-serif;"
65+
+ " line-height: 1.5;"
5666
+ "}"
5767
// Mobile Small
5868
+ " @media only screen and (min-width: 320px) {"
69+
+ "#newsletter-body {"
70+
+ "width:360px;"
71+
+ "}"
5972
+ "#header-image { "
60-
+ " background: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_PhoneSmall.png);"
61-
+ " width:360px; height:190px"
73+
+ " background-image: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_PhoneSmall.png);"
74+
+ " width: 360px; height: 190px;"
6275
+ "}"
63-
+ "#intro {"
64-
+ "max-width: 360px;"
65-
+"}"
6676
+ "#article-image { "
6777
+ " width: 360px; height: 202px;"
6878
+ "}"
6979
+ "#article-title {"
70-
+ " font: bold 18px/1.5 Open Sans, Helvetica, Verdana, sans-serif;"
71-
+ " max-width: 360px;"
80+
+ " font-size: 18px;"
7281
+ "}"
7382
+ "#article-text {"
74-
+ " font: 200 14px/1.5 Open Sans, regular;"
75-
+ " max-width: 360px;"
83+
+ " font-size: 14px;"
7684
+ "}"
7785
+ "}"
7886
// Mobile Large
7987
+ " @media only screen and (min-width: 425px) {"
88+
+ "#newsletter-body {"
89+
+ "width:425px;"
90+
+ "}"
8091
+ "#header-image { "
81-
+ " background: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_PhoneLarge.png);"
82-
+ " width:425px; height:188px"
92+
+ " background-image: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_PhoneLarge.png);"
93+
+ " width: 360px; height: 190px;"
8394
+ "}"
84-
+ "#intro {"
85-
+ "max-width: 360px;"
86-
+"}"
8795
+ "#article-image { "
8896
+ " width: 360px; height: 202px;"
8997
+ "}"
9098
+ "#article-title {"
91-
+ " font: bold 18px/1.5 Open Sans, Helvetica, Verdana, sans-serif;"
92-
+ " max-width: 360px;"
99+
+ " font-size: 18px;"
93100
+ "}"
94101
+ "#article-text {"
95-
+ " font: 200 14px/1.5 Open Sans, regular;"
96-
+ " max-width: 360px;"
102+
+ " font-size: 14px;"
97103
+ "}"
98104
+ "}"
99105
// Tablet
100106
+ " @media only screen and (min-width: 768px) {"
107+
+ "#newsletter-body {"
108+
+ "width:600px;"
109+
+ "}"
101110
+ "#header-image { "
102-
+ " background: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_Tablet.png);"
103-
+ " width:600px; height:180px"
111+
+ " background-image: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_Tablet.png);"
112+
+ " width: 600px; height: 180px;"
104113
+ "}"
105-
+ "#intro {"
106-
+ "max-width: 600px;"
107-
+"}"
108114
+ "#article-image { "
109115
+ " width: 480px; height: 268px;"
110116
+ "}"
111117
+ "#article-title {"
112-
+ " font: bold 20px/1.5 Open Sans, Helvetica, Verdana, sans-serif;"
113-
+ " max-width: 480px;"
118+
+ " font-size: 20px;"
114119
+ "}"
115120
+ "#article-text {"
116-
+ " font: 200 16px/1.5 Open Sans, regular;"
117-
+ " max-width: 480px;"
121+
+ " font-size: 16px;"
118122
+ "}"
119123
+ "}"
120124
// Laptop
121125
+ " @media only screen and (min-width: 1024px) {"
126+
+ "#newsletter-body {"
127+
+ "width:800px;"
128+
+ "}"
122129
+ "#header-image { "
123-
+ " background: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_desktop.png);"
124-
+ " width:800px; height:253px"
130+
+ " background-image: url(https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/Header_desktop.png);"
131+
+ " width: 800px; height: 253px;"
125132
+ "}"
126-
+ "#intro {"
127-
+ "max-width: 800px;"
128-
+"}"
129133
+ "#article-image { "
130134
+ " width: 480px; height: 268px;"
131135
+ "}"
132136
+ "#article-title {"
133-
+ " font: bold 20px/1.5 Open Sans, Helvetica, Verdana, sans-serif;"
134-
+ " max-width: 480px;"
137+
+ " font-size: 20px;"
135138
+ "}"
136139
+ "#article-text {"
137-
+ " font: 200 16px/1.5 Open Sans, regular;"
138-
+ " max-width: 480px;"
140+
+ " font-size: 16px;"
139141
+ "}"
140142
+ "}"
141143
+ ""
@@ -148,9 +150,8 @@ public String generate(Stream<Article> articleStream) {
148150
.div()
149151
.id("title")
150152
.a().href("https://twitter.com/novoda").target("_blank")
151-
.img()
153+
.div()
152154
.id("header-image")
153-
.src("https://s3-eu-west-1.amazonaws.com/novoda-public-image-bucket/blank.gif")
154155
.end()
155156
.end()
156157
.p()
@@ -187,6 +188,7 @@ void makeList() {
187188
li()
188189
.a().href(article.getPageLink())
189190
.div()
191+
.id("article")
190192
.img()
191193
.id("article-image")
192194
.src(article.getImage())

0 commit comments

Comments
 (0)