diff options
| author | “Ryder <“r@okfoc.us”> | 2016-03-28 13:06:36 -0400 |
|---|---|---|
| committer | “Ryder <“r@okfoc.us”> | 2016-03-28 13:06:36 -0400 |
| commit | 05983e8091b99cef6d7baebe2b72ac3c19d41151 (patch) | |
| tree | a97f8a9b971438c6f1baa66f8cfc7ea889e7c28f | |
| parent | 1ac9385f0e106a67c9cac159a88f1ef53ecc8f79 (diff) | |
css
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | public/assets/js/app.js | 5 | ||||
| -rw-r--r-- | templates/index.liquid | 64 |
3 files changed, 52 insertions, 18 deletions
diff --git a/package.json b/package.json index 635e23d..d09219a 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "dotenv": "^2.0.0", + "flickity": "^1.2.1", "object-assign": "^2.0.0", "okcms": "git+ssh://git@github.com:okfocus/okcms.git#v0.1.18" }, diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 84919fd..bf0616d 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -9,3 +9,8 @@ $(function() { $("html").addClass("desktop"); } }); + +$('.gallery').flickity({ + cellAlign: 'left', + contain: true +});
\ No newline at end of file diff --git a/templates/index.liquid b/templates/index.liquid index 492dbcd..0d625b3 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -53,50 +53,73 @@ 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; + /*height: 80vh;*/ + flex: 1 auto; } .bottom { - height: 20vh; + /*height: 20vh;*/ + flex: 0 auto; background: #eee; + overflow: hidden; + padding:5px 0; } .five { width: 100%; } - + .headings { - font-size:10px; - font-weight: 700; + font-size: 10px; + font-weight: 700; } + .texts { - font-weight:400; - padding:5px 0 0 0; + font-weight: 400; + padding: 5px 0 0 0; } + .five span { - width:calc(12% - 8px); - margin:0 4px; + width: calc(12% - 8px); + margin: 0 4px; } - - .press .headings span:nth-child(5){ + + .press .headings span:nth-child(5) { width: calc(40% - 8px); } + .headings span { border-bottom: 1px solid; - padding:5px 0; + padding: 0 0 2px 0; } .press .headings span:last-child:before { content: "PRESS"; } + .five .description { width: 50%; -webkit-column-count: 3; - font-size:12px; - } + font-size: 12px; + } + .press .five .description { width: calc(40% - 8px); -webkit-column-count: 2; @@ -110,9 +133,9 @@ ul li { list-style-type: none; } - - .nopress span:last-child{ - width: calc(51.5555555555% - 2px); + + .nopress span:last-child { + width: calc(52% - 8px); } </style> </head> @@ -121,7 +144,12 @@ {% for project in projects %} <div class="item"> - <div class="top" style="background-image:url({{ project.image.uri }})"> + <div class="top"> + <div class="gallery"> + <div class="cell" style="background-image:url({{ project.image.uri }})">...</div> + <div class="cell">...</div> + <div class="cell">...</div> + </div> </div> <div class="bottom {% if project.press %}press{% else %}nopress{% endif %}"> <div class="headings five"> |