diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/main.scss | 39 |
1 files changed, 32 insertions, 7 deletions
diff --git a/css/main.scss b/css/main.scss index 7d673f6..72500d2 100644 --- a/css/main.scss +++ b/css/main.scss | |||
@@ -112,7 +112,7 @@ strong { | |||
112 | 112 | ||
113 | .header-base { | 113 | .header-base { |
114 | display: flex; | 114 | display: flex; |
115 | flex-flow: row wrap; | 115 | flex-direction: row; |
116 | align-items: center; | 116 | align-items: center; |
117 | justify-content: space-between; | 117 | justify-content: space-between; |
118 | border-bottom: 1px solid $border; | 118 | border-bottom: 1px solid $border; |
@@ -128,16 +128,26 @@ strong { | |||
128 | // | 128 | // |
129 | 129 | ||
130 | .location { | 130 | .location { |
131 | color: $text-faint; | 131 | flex: 0 1 auto; |
132 | overflow: hidden; | ||
133 | white-space: nowrap; | ||
134 | text-overflow: ellipsis; | ||
135 | margin-right: .5em; | ||
136 | color: $text-faint; | ||
132 | 137 | ||
133 | &__prefix { | 138 | &__prefix { |
134 | color: $text-faint; | 139 | margin-right: .3em; |
140 | color: $text-faint; | ||
135 | 141 | ||
136 | &:hover { | 142 | &:hover { |
137 | color: $text-plus; | 143 | color: $text-plus; |
138 | } | 144 | } |
139 | } | 145 | } |
140 | 146 | ||
147 | &__slash { | ||
148 | margin: 0 .3em; | ||
149 | } | ||
150 | |||
141 | &__uripart { | 151 | &__uripart { |
142 | color: $text-plus; | 152 | color: $text-plus; |
143 | 153 | ||
@@ -156,6 +166,16 @@ strong { | |||
156 | 166 | ||
157 | // | 167 | // |
158 | 168 | ||
169 | .actions { | ||
170 | flex: 0 0 auto; | ||
171 | |||
172 | :visited { | ||
173 | color: $link-idle; | ||
174 | } | ||
175 | } | ||
176 | |||
177 | // | ||
178 | |||
159 | .wrap { | 179 | .wrap { |
160 | text-align: center; | 180 | text-align: center; |
161 | } | 181 | } |
@@ -227,9 +247,8 @@ strong { | |||
227 | 247 | ||
228 | &::after { | 248 | &::after { |
229 | order: 2; | 249 | order: 2; |
230 | flex: 0 99999 auto; | 250 | flex: 1 1 auto; |
231 | display: block; | 251 | display: block; |
232 | width: 100%; | ||
233 | height: 0; | 252 | height: 0; |
234 | margin: 0 .5em; | 253 | margin: 0 .5em; |
235 | border-bottom: 2px dotted $border; | 254 | border-bottom: 2px dotted $border; |
@@ -258,8 +277,8 @@ strong { | |||
258 | // | 277 | // |
259 | 278 | ||
260 | @media screen and (max-width: 800px) { | 279 | @media screen and (max-width: 800px) { |
261 | .location__uripart ~ * { | 280 | body { |
262 | display: none; | 281 | font-size: 1em; |
263 | } | 282 | } |
264 | 283 | ||
265 | .modal { | 284 | .modal { |
@@ -270,3 +289,9 @@ strong { | |||
270 | padding: 1em 1.3em; | 289 | padding: 1em 1.3em; |
271 | } | 290 | } |
272 | } | 291 | } |
292 | |||
293 | @media screen and (max-width: 500px) { | ||
294 | .location__prefix { | ||
295 | display: none; | ||
296 | } | ||
297 | } | ||