text

4 files changed, 67 insertions, 31 deletions

diff --git a/db.json b/db.json
index 8a90eef..d151a40 100644
--- a/db.json
+++ b/db.json
@@ -1597,7 +1597,8 @@
           "text": "Advertising Age, Creativity 50",
           "uri": "http://adage.com/article/creativity-50/ryder-ripps-jonathan-vingiano-founders-okfocus/235806/"
         }
-      ]
+      ],
+      "mobileBody": "Sed posuere consectetur est at lobortis. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue."
     }
   ]
 }
\ No newline at end of file
diff --git a/index.js b/index.js
index acb9f9a..93b5a66 100644
--- a/index.js
+++ b/index.js
@@ -22,6 +22,7 @@ var app = okcms.createApp({
       id: {type: 'string', hidden: true},
       title: {type: 'string'},
       body: {type: 'text'},
+      mobileBody: {type: 'text'},
       accolades: {type: 'link-list'},
       press: {type: 'link-list'},
       speakers: {type: 'text'},
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 667b20e..bd44d7f 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -109,7 +109,7 @@ h3 {
     justify-content: space-between;
     align-content: stretch;
     align-items: flex-start;
-    overflow:hidden;
+    overflow: hidden;
 }
 
 .intro div {
@@ -126,7 +126,7 @@ h3 {
     -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
     column-gap: 10px;
-    overflow:hidden;
+    overflow: hidden;
 }
 
 .intro.single .right {
@@ -134,6 +134,12 @@ h3 {
     background-size: cover;
 }
 
+.intro b {
+    display: inline-block;
+    width: 100%;
+    margin: 15px 0 5px 0;
+}
+
 .intro.cover .left span#cred {
     width: 100%;
     border-top: 1px solid;
@@ -145,10 +151,12 @@ h3 {
 }
 
 .intro.cover .right {
-    padding:0;
+    padding: 0;
     width: 75%;
-    height:100%;
+    height: 100%;
+    background: black;
 }
+
 .intro.cover .right iframe {
     width: 35%;
     height: 40%;
@@ -156,14 +164,15 @@ h3 {
     margin-top: 9%;
     margin-left: 33%;
 }
+
 .intro.cover .right span {
     background: url(img/dude.png)no-repeat center;
     background-size: cover;
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     position: relative;
-
 }
+
 .menu {
     position: fixed;
     height: calc(100vh - 24px);
@@ -758,11 +767,12 @@ ul li {
     height: 100%
 }
 
-.nopress span:nth-child(6) {
+.nopress span:nth-child(6),
+.textmobile {
     display: none;
 }
 
-@media (min-width: 1200px)  {
+@media (min-width: 1200px) {
     .texts {
         font-size: 13px;
         line-height: 16px;
@@ -776,22 +786,23 @@ ul li {
         padding: 1px 0 0 0;
     }
     .intro div.text,
-    h3, .left a {
+    h3,
+    .left a {
         font-size: 14px;
         line-height: 20px;
     }
 }
 
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 192dpi) {
     .intro div.text,
-    h3, .left a {
+    h3,
+    .left a {
         font-size: 13px;
         line-height: 18px;
     }
 }
 
-
-
 @media (min-width: 1500px) {
     .intro div.text,
     h3,
@@ -805,15 +816,24 @@ ul li {
     }
 }
 
-
-@media (max-height: 980px) {
+@media (max-height: 880px) {
     .intro div.text,
-    h3, .left a {
+    h3,
+    .left a {
         font-size: 14px;
         line-height: 20px;
     }
 }
 
+@media (max-height: 750px) {
+    .intro div.text,
+    h3,
+    .left a {
+        font-size: 12px;
+        line-height: 18px;
+    }
+}
+
 
 /*
     @media (min-width: 1600px) {
@@ -839,12 +859,26 @@ ul li {
     .intro.cover .right {
         height: 75%;
     }
-    .intro.cover .left span#cred {
+    .intro.cover .left span#cred,
+    .intro .text,
+    .intro.single .right, .intro.single h1 {
         display: none;
     }
+
     .intro .left {
         justify-content: center;
     }
+
+    .intro b {
+        display: inline-block;
+        width: 100%;
+        margin: 15px 0 5px 0;
+    }
+    .textmobile {
+        display: inline-block;
+        border-bottom: 1px solid;
+        padding-bottom:15px;
+    }
     nav {
         font-size: 11px;
         font-family: 'Roboto';
@@ -919,4 +953,7 @@ ul li {
     .top {
         margin-top: 30px;
     }
+    .intro.cover .right iframe {
+        margin-left: 53%;
+    }
 }
\ No newline at end of file
diff --git a/templates/index.liquid b/templates/index.liquid
index faa26e2..016184e 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -109,31 +109,28 @@ OKFocus, Bonafide Internet Legends © 2016
     </div>
 
     <div class="item intro single" data-id="introduction">
+
         <div class="left">
             <h1>
                 20 Years of Creating Stuff On The Computer.
                 <span>Introduction by E.C.D., Ryder Ripps</span>
             </h1>
-
+        <b class="textmobile">
+            {{ intro.mobileBody }}
+        </b>
             <h3>
-                Accolades –
-                <br>
+                <b>Accolades –</b>
                 {% for link in intro.accolades %}
                     <a href="{{ link.uri }}" target="_blank">{{ link.text }}</a>
                 {% endfor %}
-                <br><br>
-                Press –
-                <br>
+
+                <b>Press –</b>
                 {% for link in intro.press %}
                     <a href="{{ link.uri }}" target="_blank">{{ link.text }}</a>
                 {% endfor %}
-                <br><br>
-                Speaker At –
-                <br>
+                <b>Speaker At –</b>
                 {{ intro.speakers }}
-                <br><br>
-                Clients –
-                <br>
+                <b>Clients –</b>
                 {{ intro.clients }}
             </h3>
         </div>