Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter

scss/_layout.scss

Index: scss/_layout.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_layout.scss
@@ -0,0 +1,94 @@
+/*******************************************************************************
+ * Layout
+ ******************************************************************************/
+
+html
+{
+  background-color: #F3F3F3;

[juliandoucette, 2017/12/21 22:06:52]

Detail: See comment re greys on this page in forms.scss.

[juliandoucette, 2017/12/22 13:32:23]

Acknowledged.

+}
+
+body
+{
+  @media (min-width: $phablet-breakpoint)
+  {
+    display: table;
+    width: 100%;
+    min-height: 100vh;
+  }
+}
+
+.align-center

[saroyanm, 2017/12/21 16:07:59]

Detail: this is only used on the form element, so maybe we can apply style
directly to the form.

+{
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* .outer-container
+ ******************************************************************************/
+
+.outer-container

[juliandoucette, 2017/12/21 22:06:53]

NIT: This has more to do with vertical alignment than horizontal containment. As
a result, perhaps you could name it differently to avoid confusion about what
this does?

+{
+  @media (min-width: $phablet-breakpoint)
+  {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}
+
+/* .phone-width
+ ******************************************************************************/
+
+@media (max-width: $phablet-breakpoint)
+{
+  .phone-width { width: 100% }
+}
+

[juliandoucette, 2017/12/21 22:06:52]

Where's .phablet-width?

+/* #header
+ ******************************************************************************/
+
+#header
+{
+  margin-bottom: $small-space;
+
+  @media (min-width: $phablet-breakpoint)
+  {
+    margin-bottom: $medium-space;
+    text-align: center;
+  }
+}
+
+#title
+{
+  display: inline-table;

[juliandoucette, 2017/12/21 22:06:52]

Not sure why this is necessary? It seems to work similarly without display
inline-table and table-cell below?

+  font-size: 1.5em;
+  font-weight: 300;

[juliandoucette, 2017/12/21 22:06:52]

Detail: We decided to go with 400 for adblockplus.org - I suspect we should do
the same here too.

+
+  @media (min-width: $phablet-breakpoint)
+  {
+    font-size: 2em;
+  }
+
+  img,
+  span
+  {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  img
+  {
+    height: 1.5em;
+
+    @media (min-width: $phablet-breakpoint)
+    {
+      height: 2em;
+    }
+  }
+
+  span
+  {
+    padding: 0 $x-small-space;
+  }
+
+  strong { font-weight: 700; }

[juliandoucette, 2017/12/21 22:06:53]

NIT/suggest: stronger

Work it, make it, do it, makes us...

+}