diff options
| -rw-r--r-- | templates/photo.liquid | 165 |
1 files changed, 163 insertions, 2 deletions
diff --git a/templates/photo.liquid b/templates/photo.liquid index de229fa..481e715 100644 --- a/templates/photo.liquid +++ b/templates/photo.liquid @@ -2,14 +2,175 @@ <html> <head> <title>Hansel and Gretel - Armory on Park</title> +<style> +* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } +body { + background: black; + color: white; + font-family: 'Futura-Medium', 'Futura', sans-serif; + text-align: center; +} +html, body, .viewport { + width: 100%; + height: 100%; + margin: 0; +} +.vbox { + display: -webkit-box; + display: -moz-box; + display: box; + + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; + + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: flex; + + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.hbox { + display: -webkit-box; + display: -moz-box; + display: -ms-box; + display: box; + + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -ms-box-orient: horizontal; + box-orient: horizontal; + + /* current syntax */ + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: flex; + + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.space-between { + /* previous syntax */ + -webkit-box-pack: justify; + -moz-box-pack: justify; + -ms-box-pack: justify; + box-pack: justify; + + /* current syntax */ + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; +} + +/* I went with a fixed height header & footer because it's a common case. + This could easily be altered to flex proportionally with the page. +*/ +header, footer { + height: 90px; +} + +.main { + /* previous syntax */ + -webkit-box-flex: 1; + -moz-box-flex: 1; + -ms-box-flex: 1; + box-flex: 1; + + /* current syntax */ + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; +} + +article { + /* previous syntax */ + -webkit-box-flex: 5; + -moz-box-flex: 5; + -ms-box-flex: 5; + box-flex: 5; + + /* current syntax */ + -webkit-flex: 5; + -moz-flex: 5; + -ms-flex: 5; + flex: 5; +} + +aside, nav { + /* previous syntax */ + -webkit-box-flex: 1; + -moz-box-flex: 1; + -ms-box-flex: 1; + box-flex: 1; + + /* current syntax */ + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; +} +footer { + display: flex; + flex-direction: row; +} +aside { + padding: 20px; + font-size: 12px; +} +#container { + width: 100%; + text-align: center; + padding: 20px; +} +#logo { + height: 70px; + margin: 10px; +} +#armory { + height: 40px; + margin-top: -15px; +} +a { + color: white; + text-decoration: underline; +} +</style> </head> -<body> +<body class='vbox viewport'> +<header> + <a href='/'><img src='/assets/img/logo.png' id='logo'></a> +</header> +<section class="main hbox space-between"> + <div id='container'></div> +</section> +<footer> + <aside> + <a href='/page/terms'>Terms and Conditions</a> + </aside> + <aside> + <a href='http://armoryonpark.org/'><img src='/assets/img/armory.png' id='armory'></a> + </aside> + <aside> + <a href='/page/privacy'>Privacy Policy</a> + </aside> +</footer> </body> <script> var hash = document.location.pathname.replace('/photo/','').replace(/\/.*/,'') var img = new Image img.src = 'https://marsupial.s3.amazonaws.com/armory/mail/' + hash + '.jpg' -document.body.appendChild(img) +document.querySelector('#container').appendChild(img) </script> </html> |