Commit 84e7089dcecb5f534a64c17d398045e5425f2550
update styling so zines are not so huge
Zach committed on 6/27/2018, 12:17:37 PMParent: 623ff906a993e064e9317ffbb5d9040bb68b975e
Files changed
| building/aesthetic/stylesheets/main.css | changed |
| building/components/shelving.js | changed |
| zines/read-me-zine.txt | deleted |
| zines/read-me.txt | added |
| building/aesthetic/stylesheets/main.css | ||
|---|---|---|
| @@ -12,8 +12,9 @@ | ||
| 12 | 12 … | display: grid; |
| 13 | 13 … | width: 80%; |
| 14 | 14 … | margin: auto; |
| 15 | 15 … | grid-template-columns: 1fr 1fr; |
| 16 … | + grid-template-rows: repeat(auto-fill, minmax(max-content, 1fr)); | |
| 16 | 17 … | grid-gap: 2em; |
| 17 | 18 … | } |
| 18 | 19 … | |
| 19 | 20 … | #branch-placard{ |
| @@ -34,8 +35,9 @@ | ||
| 34 | 35 … | margin: none; |
| 35 | 36 … | } |
| 36 | 37 … | |
| 37 | 38 … | #zine-shelves li { |
| 39 … | + grid-row: auto / span 3; | |
| 38 | 40 … | max-width: 100%; |
| 39 | 41 … | list-style-type: none; |
| 40 | 42 … | margin-left: none; |
| 41 | 43 … | } |
| @@ -54,13 +56,23 @@ | ||
| 54 | 56 … | |
| 55 | 57 … | } |
| 56 | 58 … | |
| 57 | 59 … | .zine-card img{ |
| 58 | - width: 90%; | |
| 60 … | + max-height: 550px; | |
| 61 … | + max-width: 90%; | |
| 59 | 62 … | margin: auto; |
| 60 | 63 … | height: auto; |
| 61 | 64 … | } |
| 62 | 65 … | |
| 66 … | +#zine-info { | |
| 67 … | + width: 100%; | |
| 68 … | + padding: 1em; | |
| 69 … | +} | |
| 70 … | + | |
| 71 … | +#zine-info h1{ | |
| 72 … | + padding: 0.25em; | |
| 73 … | +} | |
| 74 … | + | |
| 63 | 75 … | .title{ |
| 64 | 76 … | width: 100%; |
| 65 | 77 … | background: var(--title-bg); |
| 66 | 78 … | } |
| building/components/shelving.js | ||
|---|---|---|
| @@ -33,17 +33,19 @@ | ||
| 33 | 33 … | } |
| 34 | 34 … | |
| 35 | 35 … | function renderInfo (zine, state) { |
| 36 | 36 … | var trimmedUrl = _.trimEnd(zine.url, '/') |
| 37 | - var info = state.info[trimmedUrl] | |
| 37 … | + var info = _.entries(state.info[trimmedUrl]) | |
| 38 | 38 … | if (info) { |
| 39 | 39 … | return html` |
| 40 | - <div> | |
| 41 | - <h2>Info From this Zine!</p> | |
| 42 | - <p><strong>Creation Date:</strong>${info['creation date']}</p> | |
| 43 | - <p><strong>Sharing Notes:</strong> ${info.sharing}</p> | |
| 44 | - <p><strong>Other Notes:</strong> ${info.notes}</p> | |
| 45 | - </div> | |
| 46 | - ` | |
| 40 … | + <div id='zine-info'> | |
| 41 … | + <h1>Info From Zine</h1> | |
| 42 … | + ${info.map(pair => { | |
| 43 … | + return html`<p><strong>${pair[0]}:</strong> ${pair[1]}</p>` | |
| 44 … | + }) | |
| 45 … | + } | |
| 46 … | + </div> | |
| 47 … | + ` | |
| 48 … | + | |
| 47 | 49 … | } |
| 48 | 50 … | } |
| 49 | 51 … | } |
Built with git-ssb-web