diff options
| -rw-r--r-- | db.json | 3 | ||||
| -rw-r--r-- | index.js | 1 | ||||
| -rw-r--r-- | public/assets/ok.css | 73 | ||||
| -rw-r--r-- | templates/index.liquid | 21 |
4 files changed, 67 insertions, 31 deletions
@@ -1604,7 +1604,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 @@ -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> |