diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.liquid | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/templates/index.liquid b/templates/index.liquid index e69de29..492dbcd 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<html> +<head> + <title>OKFOCUS</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> + <meta name="apple-mobile-web-app-status-bar-style" content="black"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <meta name="keywords" content="OKFocus, " /> + <meta name="description" content="OKFocus" /> + <meta property="og:title" content="OKFocus" /> + <meta property="og:type" content="website" /> + <meta property="og:image" content="/icon.jpg" /> + <meta property="og:url" content="http://" /> + <meta property="og:site_name" content="OKFocus" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> + <link rel="image_src" href="/icon.jpg" /> + <link rel="shortcut icon" href="/favicon.ico" /> + <link rel="apple-touch-icon" href="/icon.jpg" /> + <link rel="apple-touch-icon-precomposed" href="/icon.jpg" /> + <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,700,700italic|Roboto:400,300italic,300,500italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> + <style> + html { + box-sizing: border-box; + } + + *, + *:before, + *:after { + box-sizing: inherit; + padding: 0; + margin: 0; + } + + a, + a:visited { + color: blue; + } + + body { + font-family: 'Roboto Mono', monospace; + font-size: 11px; + } + + div, + span { + display: inline-block; + float: left; + } + + .top { + background: yellow; + width: 100%; + height: 80vh; + } + + .bottom { + height: 20vh; + background: #eee; + } + + .five { + width: 100%; + } + + .headings { + font-size:10px; + font-weight: 700; + } + .texts { + font-weight:400; + padding:5px 0 0 0; + } + .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:5px 0; + } + + .press .headings span:last-child:before { + content: "PRESS"; + } + .five .description { + width: 50%; + -webkit-column-count: 3; + font-size:12px; + } + .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:last-child{ + width: calc(51.5555555555% - 2px); + } + </style> +</head> + +<body> + +{% for project in projects %} + <div class="item"> + <div class="top" style="background-image:url({{ project.image.uri }})"> + </div> + <div class="bottom {% if project.press %}press{% else %}nopress{% endif %}"> + <div class="headings five"> + <span>YEAR</span> + <span>CLIENT</span> + <span>TITLE</span> + <span>NATURE OF WORK</span> + <span>BRIEF</span> + <span> </span> + </div> + <div class="five texts"> + <span>{{ project.year }}</span> + <span>{{ project.client }}</span> + <span>{{ project.title }}</span> + <span> + <ul> + {% assign categories = project.NatureOfWork | split "\n" %} + {% for category in categories %} + <li> + {{ category }} + </li> + {% endfor %} + </ul> + </span> + <span class="description"> + {{ project.brief }} + </span> + <span> + <ul> + {% for link in project.links %} + <li> + <a href="{{ link.url }}">{{ link.name }}</a> + </li> + {% endfor %} + </ul> + </span> + </div> + </div> + </div> +{% endfor %} + +</body> +<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> +{% if meta.production %} +<script src="/assets/js/app.min.js"></script> +{% else %} +<script src="/assets/js/app.js"></script> +{% endif %} +</html> |