From 7d858db73caada1058e86c99b01600aba42bc7a4 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 14:00:43 -0400 Subject: trying to add flickity --- public/assets/ok.css | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 public/assets/ok.css (limited to 'public/assets/ok.css') diff --git a/public/assets/ok.css b/public/assets/ok.css new file mode 100644 index 0000000..11f6a58 --- /dev/null +++ b/public/assets/ok.css @@ -0,0 +1,179 @@ + html { + box-sizing: border-box; + } + + *, + *:before, + *:after { + box-sizing: inherit; + padding: 0; + margin: 0; + } + + a, + a:visited { + color: blue; + } + + body { + font-family: 'Roboto', sans-serif; + font-size: 11px; + } + + div, + span { + display: inline-block; + float: left; + } + + .item { + height: 100vh; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + } + + .top, + .bottom { + -webkit-flex: 1 auto; + flex: 1 auto; + } + + .top { + background: yellow; + width: 100%; + /*height: 80vh;*/ + flex: 1 auto; + } + /*! Flickity */ + + .flickity-enabled { + position: relative; + } + + .flickity-enabled:focus { + outline: none; + } + + .flickity-viewport { + overflow: hidden; + position: relative; + height: 100%; + } + + .flickity-slider { + position: absolute; + width: 100%; + height: 100%; + } + + ::-webkit-full-screen #okgallery { + width: 100%; + height: 100%; + } + + ::-webkit-full-screen #okgallery { + width: 100%; + height: 100%; + } + + .full-screen #okgallery { + width: 100%; + height: 100%; + } + + .cell { + width: 100vw; + display: inline-block; + flex: 1 auto; + height: 50vh; + } + + .bottom { + /*height: 20vh;*/ + flex: 0 auto; + background: #eee; + overflow: hidden; + padding: 5px 0; + } + + .five { + width: 100%; + } + + .headings { + font-family: 'Roboto Mono', monospace; + font-size: 8px; + font-weight: 700; + } + + .texts { + font-weight: 400; + padding: 3px 0 0 0; + font-weight: 400; + } + + .five span { + width: calc(12% - 8px); + margin: 0 4px; + } + + .press .headings span:nth-child(5) { + width: calc(40% - 8px); + } + + .headings span { + border-bottom: 1px solid; + padding: 0 0 2px 0; + } + + .press .headings span:last-child:before { + content: "PRESS"; + } + + .five .description { + width: 50%; + -webkit-column-count: 3; + /*text-align: justify;*/ + } + + .press .five .description { + width: calc(40% - 8px); + -webkit-column-count: 2; + } + + .press .texts span:last-child a { + width: 100%; + display: inline-block; + } + + ul li { + list-style-type: none; + } + + .nopress span:nth-child(5) { + width: calc(52% - 8px); + } + + .nopress span:last-child { + display: none; + } + + @media (min-width: 1200px) { + .texts { + font-size: 13px; + } + } + + @media (min-width: 1400px) { + .texts { + font-size: 14px; + } + } + + @media (min-width: 1600px) { + .texts { + font-size: 15px; + } + } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 12cf2423907cdac9a97ba6925377c73e0b94301d Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 14:16:48 -0400 Subject: iframe demo --- db.json | 7 +++++-- index.js | 1 + public/assets/ok.css | 44 +++++++++++++++----------------------------- templates/index.liquid | 6 ++++-- 4 files changed, 25 insertions(+), 33 deletions(-) (limited to 'public/assets/ok.css') diff --git a/db.json b/db.json index ac34d0e..cb0f96a 100644 --- a/db.json +++ b/db.json @@ -5,7 +5,7 @@ "year": 2016, "title": "Annapurna Pictures", "link": "http://annapurna.pictures/", - "NatureOfWork": "Design\r\nProgramming", + "NatureOfWork": "DesignProgramming", "brief": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\r\n", "image": { "uri": "https://ltho.s3.amazonaws.com/ebd3062e-1cf4-4a2d-a7f3-240f66e32258.png", @@ -16,7 +16,10 @@ ], "__index": "0", "dateCreated": "Sat, 26 Mar 2016 20:34:21 GMT", - "client": "Annapurna Pictures" + "client": "Annapurna Pictures", + "containImage": "true", + "iframe": "", + "video": "" }, { "id": "test-2", diff --git a/index.js b/index.js index eb51e75..8de3947 100644 --- a/index.js +++ b/index.js @@ -26,6 +26,7 @@ var app = okcms.createApp({ NatureOfWork: {type: 'tag-list'}, brief: {type: 'text'}, image: {type: 'image'}, + containImage: {type: 'flag'}, iframe: {type: 'string'}, video: {type: 'string'}, press: {type: 'link-list'}, diff --git a/public/assets/ok.css b/public/assets/ok.css index 11f6a58..dd3397e 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -8,6 +8,8 @@ box-sizing: inherit; padding: 0; margin: 0; + outline:0; + border:0; } a, @@ -18,6 +20,7 @@ body { font-family: 'Roboto', sans-serif; font-size: 11px; + background:#fff; } div, @@ -33,12 +36,7 @@ -webkit-flex-flow: column wrap; flex-flow: column wrap; } - - .top, - .bottom { - -webkit-flex: 1 auto; - flex: 1 auto; - } + .top { background: yellow; @@ -46,6 +44,7 @@ /*height: 80vh;*/ flex: 1 auto; } + /*! Flickity */ .flickity-enabled { @@ -59,41 +58,28 @@ .flickity-viewport { overflow: hidden; position: relative; - height: 100%; + width:100%; } - + .flickity-slider { position: absolute; width: 100%; - height: 100%; - } - - ::-webkit-full-screen #okgallery { - width: 100%; - height: 100%; - } - - ::-webkit-full-screen #okgallery { - width: 100%; - height: 100%; - } - - .full-screen #okgallery { - width: 100%; - height: 100%; } .cell { width: 100vw; - display: inline-block; - flex: 1 auto; - height: 50vh; + height: 70vh; /*THIS SHOULD BE DYNAMIC*/ + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + .cell.contain { + background-size: 20% ; + background-color: #eee; } - .bottom { /*height: 20vh;*/ flex: 0 auto; - background: #eee; overflow: hidden; padding: 5px 0; } diff --git a/templates/index.liquid b/templates/index.liquid index f045321..b2f9db1 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -32,8 +32,10 @@ {% for project in projects %}
-
-
+
+
-- cgit v1.2.3-70-g09d2 From 0519c7a18e77144a74cb0b6f8d600f9c4de2caee Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 14:34:51 -0400 Subject: arrows --- public/assets/js/app.js | 9 ++++++- public/assets/ok.css | 65 ++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 64 insertions(+), 10 deletions(-) (limited to 'public/assets/ok.css') diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 34f03b2..974d51e 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -13,6 +13,13 @@ $(function() { $('.top').flickity({ cellAlign: 'left', contain: true, - pageDots: false + pageDots: false, + wrapAround: true, + arrowShape: { + x0: 10, + x1: 35, y1: 25, + x2: 40, y2: 25, + x3: 15 +} }); \ No newline at end of file diff --git a/public/assets/ok.css b/public/assets/ok.css index dd3397e..ce46ed2 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -8,8 +8,9 @@ box-sizing: inherit; padding: 0; margin: 0; - outline:0; - border:0; + outline: 0; + border: 0; + -webkit-appearance: none; } a, @@ -20,7 +21,7 @@ body { font-family: 'Roboto', sans-serif; font-size: 11px; - background:#fff; + background: #fff; } div, @@ -36,7 +37,6 @@ -webkit-flex-flow: column wrap; flex-flow: column wrap; } - .top { background: yellow; @@ -44,7 +44,6 @@ /*height: 80vh;*/ flex: 1 auto; } - /*! Flickity */ .flickity-enabled { @@ -58,25 +57,73 @@ .flickity-viewport { overflow: hidden; position: relative; - width:100%; + width: 100%; } - + .flickity-slider { position: absolute; width: 100%; } + button { + height: 70vh; + /*THIS SHOULD BE DYNAMIC*/ + width: 10vw; + position: absolute; + top: 0; + background: transparent; + cursor: pointer; + } + + button svg { + opacity: 0; + transition: 150ms all; + transition-timing-function: cubic-bezier(0, 0, 1, 1); + transform: scale(0.3); + } + + button.next { + right: 0; + } + + button.previous { + left: 0; + } + + button.previous:hover svg, + button.next:hover svg { + opacity: 1; + transform: scale(0.2); + } + + button.next:active svg, + button.previous:active svg { + transform: scale(0.1); + } + /* + button.next:hover { + background: rgba(255, 255, 255, 0.5); + } + + button.previous:hover { + background: rgba(255, 255, 255, 0.5); + } + */ + .cell { width: 100vw; - height: 70vh; /*THIS SHOULD BE DYNAMIC*/ + height: 70vh; + /*THIS SHOULD BE DYNAMIC*/ background-position: center; background-size: cover; background-repeat: no-repeat; } + .cell.contain { - background-size: 20% ; + background-size: 20%; background-color: #eee; } + .bottom { /*height: 20vh;*/ flex: 0 auto; -- cgit v1.2.3-70-g09d2 From c59211fbd6fd35ee1a2682424c4622a2159d4248 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 14:45:16 -0400 Subject: mobile --- public/assets/ok.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'public/assets/ok.css') diff --git a/public/assets/ok.css b/public/assets/ok.css index ce46ed2..64d13a6 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -209,4 +209,24 @@ .texts { font-size: 15px; } + } + + @media (max-width:480px) { + .cell, + button { + height: 50vh; + } + .five span { + width: 100%; + border-bottom: 1px solid; + margin: 0; + padding: 3px; + } + .description { + width: 100%!important; + -webkit-column-count: 2!important; + } + .headings { + display: none; + } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From af7f0008df4125d3c5804650a6f8214ca126f608 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 14:48:42 -0400 Subject: more mobile --- public/assets/ok.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'public/assets/ok.css') diff --git a/public/assets/ok.css b/public/assets/ok.css index 64d13a6..ebbc46f 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -217,14 +217,19 @@ height: 50vh; } .five span { - width: 100%; + width: 50%; border-bottom: 1px solid; margin: 0; padding: 3px; + font-weight: 600; } - .description { + .five span.description { width: 100%!important; + font-weight: 400; -webkit-column-count: 2!important; + -webkit-column-gap: 3px; + -moz-column-gap: 3px; + column-gap: 3px; } .headings { display: none; -- cgit v1.2.3-70-g09d2 From 3a03c5ec9d819a8e6ed3e10d5dbc23a441369476 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 15:35:32 -0400 Subject: css --- public/assets/ok.css | 36 +++++++++++++++++++++++++++++++++--- templates/index.liquid | 5 ++++- 2 files changed, 37 insertions(+), 4 deletions(-) (limited to 'public/assets/ok.css') diff --git a/public/assets/ok.css b/public/assets/ok.css index ebbc46f..ca37a0b 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -22,6 +22,8 @@ font-family: 'Roboto', sans-serif; font-size: 11px; background: #fff; + counter-reset: section; + overflow:hidden; } div, @@ -37,12 +39,38 @@ -webkit-flex-flow: column wrap; flex-flow: column wrap; } - + + nav{ + position: fixed; + top:0; + left:0; + width:100%; + padding:5px; + z-index: 3; + } + + nav span { + border-bottom: 1px solid; + width: 100%; + } + /* + .texts span:first-child:after { + counter-increment: section; + content: "PG."counter(section); + width: 100%; + display: inline-block; + font-size: 9px; + font-family: 'Roboto Mono', monospace; + font-weight: 700; + margin-top: 7vh; + } + */ .top { - background: yellow; + background: #f7f7f7; width: 100%; /*height: 80vh;*/ flex: 1 auto; + margin-top: 20px; } /*! Flickity */ @@ -135,9 +163,10 @@ width: 100%; } - .headings { + .headings, nav { font-family: 'Roboto Mono', monospace; font-size: 8px; + text-transform: uppercase; font-weight: 700; } @@ -169,6 +198,7 @@ width: 50%; -webkit-column-count: 3; /*text-align: justify;*/ + column-gap: 5px; } .press .five .description { diff --git a/templates/index.liquid b/templates/index.liquid index b2f9db1..6957fac 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -29,12 +29,14 @@ + {% for project in projects %}
@@ -77,6 +79,7 @@
{% endfor %} +
{% if meta.production %} -- cgit v1.2.3-70-g09d2 From 46f5012175db09b85acbf265860e3763d00019ab Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 15:47:48 -0400 Subject: nav concept --- public/assets/ok.css | 31 +++++++++++++++++++++---------- templates/index.liquid | 5 ++++- 2 files changed, 25 insertions(+), 11 deletions(-) (limited to 'public/assets/ok.css') diff --git a/public/assets/ok.css b/public/assets/ok.css index ca37a0b..6677e82 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -23,7 +23,7 @@ font-size: 11px; background: #fff; counter-reset: section; - overflow:hidden; + overflow: hidden; } div, @@ -39,19 +39,28 @@ -webkit-flex-flow: column wrap; flex-flow: column wrap; } - - nav{ + + nav { position: fixed; - top:0; - left:0; - width:100%; - padding:5px; + top: 0; + left: 0; + width: 100%; + padding: 5px; z-index: 3; } - + nav span { border-bottom: 1px solid; - width: 100%; + width:100%; + } + + + nav span div:first-child { + float: left; + } + + nav span div:last-child { + float: right; } /* .texts span:first-child:after { @@ -65,6 +74,7 @@ margin-top: 7vh; } */ + .top { background: #f7f7f7; width: 100%; @@ -163,7 +173,8 @@ width: 100%; } - .headings, nav { + .headings, + nav { font-family: 'Roboto Mono', monospace; font-size: 8px; text-transform: uppercase; diff --git a/templates/index.liquid b/templates/index.liquid index 6957fac..758a3b1 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -30,7 +30,10 @@ {% for project in projects %}
-- cgit v1.2.3-70-g09d2 From b2b7f8b9a519b941263ee0a5dc175e0ad576fae1 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 15:59:26 -0400 Subject: nav stuff --- public/assets/ok.css | 21 +++++++-------------- templates/index.liquid | 1 + 2 files changed, 8 insertions(+), 14 deletions(-) (limited to 'public/assets/ok.css') diff --git a/public/assets/ok.css b/public/assets/ok.css index 6677e82..f7e57a9 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -51,29 +51,22 @@ nav span { border-bottom: 1px solid; - width:100%; + width: 100%; } - nav span div:first-child { float: left; } + nav span div:nth-child(2) { + border-left: 1px solid; + margin-left: 10px; + padding-left: 20px; + } + nav span div:last-child { float: right; } - /* - .texts span:first-child:after { - counter-increment: section; - content: "PG."counter(section); - width: 100%; - display: inline-block; - font-size: 9px; - font-family: 'Roboto Mono', monospace; - font-weight: 700; - margin-top: 7vh; - } - */ .top { background: #f7f7f7; diff --git a/templates/index.liquid b/templates/index.liquid index 758a3b1..d48e2ea 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -32,6 +32,7 @@ -- cgit v1.2.3-70-g09d2