From 33714c9ca4ef846e74396b24f2a831102dc78dc2 Mon Sep 17 00:00:00 2001
From: Shan Carter <shanjcarter@gmail.com>
Date: Tue, 24 Oct 2017 10:57:05 -0700
Subject: [PATCH] Tweaking mobile styles

---
 examples/article.html                    |  2 +
 src/components/d-article.js              |  1 -
 src/components/d-title.js                | 51 +---------------------
 src/distill-components/distill-footer.js |  2 +-
 src/styles/d-article.css                 |  4 ++
 src/styles/d-byline.css                  | 20 +++++++--
 src/styles/d-title.css                   | 55 ++++++++++++++++++++++++
 src/styles/styles-base.css               |  6 ++-
 src/styles/styles.js                     |  3 +-
 9 files changed, 88 insertions(+), 56 deletions(-)
 create mode 100644 src/styles/d-title.css
diff --git a/examples/article.html b/examples/article.html
index 7a5b58a..1d40d46 100644
--- a/examples/article.html
+++ b/examples/article.html
@@ -2,9 +2,11 @@
 
 <head>
   <script src="../dist/template.v2.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
+  <distill-header></distill-header>
 <d-front-matter>
   <script id='distill-front-matter' type="text/json">{
     "title": "Why Momentum Really Works",
diff --git a/src/components/d-article.js b/src/components/d-article.js
index db5f06a..e8b12bd 100644
--- a/src/components/d-article.js
+++ b/src/components/d-article.js
@@ -1,6 +1,5 @@
 import { Template } from '../mixins/template';
 import { Controller } from '../controller';
-import style from '../styles/d-article.css';
 
 const isOnlyWhitespace = /^\s*$/;
 
diff --git a/src/components/d-title.js b/src/components/d-title.js
index 8fb35d8..e0cb177 100644
--- a/src/components/d-title.js
+++ b/src/components/d-title.js
@@ -1,50 +1,3 @@
-import { Template } from '../mixins/template';
-
-const T = Template('d-title', `
-<style>
-
-  :host {
-    padding: 4rem 0 1.5rem;
-    contain: content;
-    display: block;
-  }
-
-  ::slotted(h1) {
-    grid-column: text;
-    font-size: 60px;
-    font-weight: 700;
-    line-height: 1.05em;
-    margin: 0 0 1rem;
-  }
-
-  ::slotted(p) {
-    font-weight: 300;
-    font-size: 1.5rem;
-    line-height: 1.2em;
-    grid-column: text;
-  }
-
-  .status {
-    margin-top: 0px;
-    font-size: 12px;
-    color: #009688;
-    opacity: 0.8;
-    grid-column: kicker;
-  }
-  .status span {
-    line-height: 1;
-    display: inline-block;
-    padding: 6px 0;
-    border-bottom: 1px solid #80cbc4;
-    font-size: 11px;
-    text-transform: uppercase;
-  }
-</style>
-
-<!-- <div class="status"><span>✓ Peer Reviewed</span></div> -->
-<slot></slot>
-`);
-
-export class Title extends T(HTMLElement) {
-
+export class Title extends HTMLElement {
+  static get is() { return 'd-title'; }
 }
diff --git a/src/distill-components/distill-footer.js b/src/distill-components/distill-footer.js
index 04ce57a..b1f9f0a 100644
--- a/src/distill-components/distill-footer.js
+++ b/src/distill-components/distill-footer.js
@@ -7,7 +7,7 @@ const T = Template('distill-footer', `
 :host {
   color: rgba(255, 255, 255, 0.5);
   font-weight: 300;
-  padding: 60px 0;
+  padding: 2rem 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
   text-align: left;
diff --git a/src/styles/d-article.css b/src/styles/d-article.css
index 1757650..79707c9 100644
--- a/src/styles/d-article.css
+++ b/src/styles/d-article.css
@@ -3,6 +3,7 @@ d-article {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 2rem;
   color: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
 }
 
 d-article > * {
@@ -168,11 +169,14 @@ d-article span.equation-mimic {
 d-article > d-code,
 d-article section > d-code  {
   display: block;
+  overflow-x: scroll;
+
 }
 
 d-article > d-math[block],
 d-article section > d-math[block]  {
   display: block;
+  overflow-x: scroll;
 }
 
 d-article .citation {
diff --git a/src/styles/d-byline.css b/src/styles/d-byline.css
index c1602ee..1596fa7 100644
--- a/src/styles/d-byline.css
+++ b/src/styles/d-byline.css
@@ -7,14 +7,28 @@ d-byline {
   min-height: 1.8em;
 }
 
+
 d-byline .byline {
-  grid-template-columns: 2fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
   grid-column: text;
 }
 
-d-byline .authors-affiliations {
-  grid-template-columns: 1fr 1fr;
+@media(min-width: 768px) {
+  d-byline .byline {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
 
+d-byline .authors-affiliations {
+  grid-column-end: span 2;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 1em;
+}
+
+@media(min-width: 768px) {
+  d-byline .authors-affiliations {
+    margin-bottom: 0;
+  }
 }
 
 d-byline h3 {
diff --git a/src/styles/d-title.css b/src/styles/d-title.css
new file mode 100644
index 0000000..598c960
--- /dev/null
+++ b/src/styles/d-title.css
@@ -0,0 +1,55 @@
+d-title {
+  padding: 2rem 0 1.5rem;
+  contain: content;
+  overflow: hidden;
+}
+
+@media(min-width: 768px) {
+  d-title {
+    padding: 4rem 0 1.5rem;
+  }
+}
+
+d-title h1 {
+  grid-column: text;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.05em;
+  margin: 0 0 1rem;
+}
+
+@media(min-width: 768px) {
+  d-title h1 {
+    font-size: 60px;
+  }
+}
+
+d-title p {
+  font-weight: 300;
+  font-size: 1.2rem;
+  line-height: 1.7em;
+  grid-column: text;
+}
+
+@media(min-width: 768px) {
+  d-title p {
+    font-size: 1.5rem;
+  }
+}
+
+d-title .status {
+  margin-top: 0px;
+  font-size: 12px;
+  color: #009688;
+  opacity: 0.8;
+  grid-column: kicker;
+}
+
+d-title .status span {
+  line-height: 1;
+  display: inline-block;
+  padding: 6px 0;
+  border-bottom: 1px solid #80cbc4;
+  font-size: 11px;
+  text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css
index b92cbd9..da6d929 100644
--- a/src/styles/styles-base.css
+++ b/src/styles/styles-base.css
@@ -1,5 +1,5 @@
 html {
-  font-size: 16px;
+  font-size: 14px;
 	line-height: 1.6em;
   /* font-family: "Libre Franklin", "Helvetica Neue", sans-serif; */
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
@@ -9,6 +9,10 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
+@media(min-width: 768px) {
+  font-size: 16px;
+}
+
 body {
   margin: 0;
 }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c883308..63f7927 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3,9 +3,10 @@ import layout from './styles-layout.css';
 import print from './styles-print.css';
 import byline from './d-byline.css';
 import article from './d-article.css';
+import title from './d-title.css';
 import math from './d-math.css';
 
-export const styles = base + layout + byline + article + math + print;
+export const styles = base + layout + title + byline + article + math + print;
 
 export function makeStyleTag(dom) {
 
