diff options
Diffstat (limited to 'templates/index.liquid')
| -rw-r--r-- | templates/index.liquid | 64 |
1 files changed, 46 insertions, 18 deletions
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"> |