Commit 5b9d7ca9bb4a61d94b54a1fc968703c840a856d9
typography, padding and box-shadow tweaks, for much readability
Oli Evans committed on 4/23/2017, 9:56:54 AMParent: 3f6e125416ef2ddd9ea60d2239f3313132e89378
Files changed
| styles/feed-event.mcss | changed |
| styles/message.mcss | changed |
| styles/feed-event.mcss | ||
|---|---|---|
| @@ -1,11 +1,12 @@ | ||
| 1 | 1 … | FeedEvent { |
| 2 | 2 … | display: flex |
| 3 | 3 … | flex-direction: column |
| 4 | 4 … | background: white |
| 5 … | + box-shadow: 0 0 4px 1px rgba(0,0,0,0.1) | |
| 5 | 6 … | max-width: 700px |
| 6 | 7 … | width: 100% |
| 7 | - margin: 10px auto | |
| 8 … | + margin: 0 auto 25px | |
| 8 | 9 … | |
| 9 | 10 … | -new { |
| 10 | 11 … | box-shadow: 0px 0px 2px #ffc800; |
| 11 | 12 … | background: #fffdf7; |
| @@ -36,7 +37,11 @@ | ||
| 36 | 37 … | } |
| 37 | 38 … | |
| 38 | 39 … | div.meta { |
| 39 | 40 … | font-size: 100% |
| 40 | - padding: 10px | |
| 41 … | + padding: 10px 20px | |
| 42 … | + opacity: 0.4 | |
| 43 … | + :hover { | |
| 44 … | + opacity: 0.8 | |
| 45 … | + } | |
| 41 | 46 … | } |
| 42 | 47 … | } |
| styles/message.mcss | |||
|---|---|---|---|
| @@ -1,12 +1,11 @@ | |||
| 1 | 1 … | Message { | |
| 2 | 2 … | display: flex | |
| 3 | 3 … | flex-direction: column | |
| 4 | - box-shadow: #dadada 1px 2px 8px | ||
| 5 | - border: 1px solid #f5f5f5 | ||
| 6 | 4 … | background: white | |
| 7 | 5 … | position: relative | |
| 8 | - font-size: 130% | ||
| 6 … | + font-size: 120% | ||
| 7 … | + line-height: 1.4 | ||
| 9 | 8 … | flex-shrink: 0 | |
| 10 | 9 … | ||
| 11 | 10 … | (highlight) { | |
| 12 | 11 … | background-color: yellow | |
| @@ -53,9 +52,10 @@ | |||
| 53 | 52 … | header { | |
| 54 | 53 … | div.main { | |
| 55 | 54 … | a.avatar { | |
| 56 | 55 … | img { | |
| 57 | - width: 35px | ||
| 56 … | + width: 40px | ||
| 57 … | + height: 40px | ||
| 58 | 58 … | } | |
| 59 | 59 … | } | |
| 60 | 60 … | } | |
| 61 | 61 … | } | |
| @@ -65,10 +65,9 @@ | |||
| 65 | 65 … | border-color: #ffe794 | |
| 66 | 66 … | } | |
| 67 | 67 … | ||
| 68 | 68 … | header { | |
| 69 | - margin: 15px 15px | ||
| 70 | - margin-bottom: 5px; | ||
| 69 … | + margin: 10px 20px 0 | ||
| 71 | 70 … | display: flex | |
| 72 | 71 … | ||
| 73 | 72 … | div.mini { | |
| 74 | 73 … | flex: 1 | |
| @@ -80,8 +79,9 @@ | |||
| 80 | 79 … | ||
| 81 | 80 … | a.avatar { | |
| 82 | 81 … | img { | |
| 83 | 82 … | width: 50px | |
| 83 … | + height: 50px | ||
| 84 | 84 … | } | |
| 85 | 85 … | } | |
| 86 | 86 … | ||
| 87 | 87 … | div.main { | |
| @@ -132,15 +132,15 @@ | |||
| 132 | 132 … | padding: 4px | |
| 133 | 133 … | } | |
| 134 | 134 … | ||
| 135 | 135 … | span.likes { | |
| 136 | - color: #ffffff; | ||
| 137 | - background: linear-gradient(45deg, #859c88, #87d47d); | ||
| 138 | - padding: 5px 8px; | ||
| 139 | - border-radius: 10px; | ||
| 140 | - display: inline-block; | ||
| 141 | - vertical-align: top; | ||
| 142 | - margin: -2px 0; | ||
| 136 … | + margin-right: 10px; | ||
| 137 … | + color: #286bc3; | ||
| 138 … | + font-weight: 200; | ||
| 139 … | + strong { | ||
| 140 … | + color: #286bc3; | ||
| 141 … | + font-weight: 200; | ||
| 142 … | + } | ||
| 143 | 143 … | } | |
| 144 | 144 … | ||
| 145 | 145 … | span.private { | |
| 146 | 146 … | display: inline-block; | |
| @@ -200,27 +200,26 @@ | |||
| 200 | 200 … | } | |
| 201 | 201 … | } | |
| 202 | 202 … | ||
| 203 | 203 … | footer { | |
| 204 | - margin: 10px 10px; | ||
| 205 | - border-top: 1px solid #eee; | ||
| 206 | - padding-top: 10px; | ||
| 207 | - margin-top: 5px; | ||
| 208 | - padding-left: 5px; | ||
| 204 … | + margin: 5px 10px 20px; | ||
| 209 | 205 … | ||
| 210 | 206 … | div.actions { | |
| 211 | 207 … | a { | |
| 212 | - margin-right: 10px; | ||
| 213 | 208 … | color: #9a9a9a; | |
| 214 | - font-weight: bold; | ||
| 215 | - padding: 5px | ||
| 209 … | + font-weight: 200; | ||
| 210 … | + padding: 5px 10px; | ||
| 211 … | + border-radius:2px; | ||
| 216 | 212 … | ||
| 217 | 213 … | :hover { | |
| 218 | 214 … | background: #cbeeff; | |
| 219 | 215 … | color: #3b7ba2; | |
| 220 | 216 … | text-decoration: none; | |
| 221 | 217 … | border-color: #8eafc1; | |
| 222 | 218 … | } | |
| 223 | 219 … | } | |
| 220 … | + a + a { | ||
| 221 … | + margin-left: 15px; | ||
| 222 … | + } | ||
| 224 | 223 … | } | |
| 225 | 224 … | } | |
| 226 | 225 … | } | |
Built with git-ssb-web