diff --git a/assets/components/networks/network.vue b/assets/components/networks/network.vue index 52633a57..667f4ad4 100644 --- a/assets/components/networks/network.vue +++ b/assets/components/networks/network.vue @@ -67,33 +67,34 @@ class="logo" > - -
- +
@@ -264,23 +265,21 @@ export default { .collapse-header { width: 100%; - display: flex; + display: none; justify-content: center; align-items: center; + padding: 0; background: $profile; - color: $highlight; .icon { + width: 100%; fill: $highlight; + padding: .5rem 0; } - &:hover { + &:hover .icon { background: $highlight-hint; - color: $text-contrast; - - .icon { - fill: $text-contrast; - } + fill: $text-contrast; } } @@ -304,7 +303,8 @@ export default { } } - .expand-header { + .expand-header, + .collapse-header { display: flex; } diff --git a/assets/components/sites/sites.vue b/assets/components/sites/sites.vue index fdfb7743..de660e49 100644 --- a/assets/components/sites/sites.vue +++ b/assets/components/sites/sites.vue @@ -76,4 +76,16 @@ export default { /* vertical grid-gap not compatible with bottom padding on scrolling containers */ margin: 0 0 1rem 0; } + +@media(max-width: $breakpoint3) { + .sites.expanded .tiles { + grid-template-columns: repeat(auto-fit, minmax(12rem, .5fr)); + } +} + +@media(max-width: $breakpoint0) { + .sites.expanded .tiles { + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + } +} diff --git a/assets/components/tags/photos.vue b/assets/components/tags/photos.vue index 15424ae5..e95aab29 100644 --- a/assets/components/tags/photos.vue +++ b/assets/components/tags/photos.vue @@ -55,7 +55,6 @@ export default { .photos { background: $profile; display: flex; - justify-content: center; padding: 0 1rem; overflow: hidden; diff --git a/assets/components/tags/tag.vue b/assets/components/tags/tag.vue index 7c827a15..6b5548f3 100644 --- a/assets/components/tags/tag.vue +++ b/assets/components/tags/tag.vue @@ -136,7 +136,6 @@ export default { background: $profile; color: $text-contrast; display: none; - justify-content: center; padding: .5rem 1rem; .title { diff --git a/public/css/style.css b/public/css/style.css index 5436baef..804ec14a 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -690,6 +690,16 @@ /* vertical grid-gap not compatible with bottom padding on scrolling containers */ margin: 0 0 1rem 0; } +@media (max-width: 1200px) { +.sites.expanded .tiles[data-v-7bebaa3e] { + grid-template-columns: repeat(auto-fit, minmax(12rem, 0.5fr)); +} +} +@media (max-width: 540px) { +.sites.expanded .tiles[data-v-7bebaa3e] { + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); +} +} /* $primary: #ff886c; */ /* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */ @@ -807,24 +817,22 @@ } .collapse-header[data-v-e2e12602] { width: 100%; - display: -webkit-box; - display: flex; + display: none; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; + padding: 0; background: #222; - color: rgba(255, 255, 255, 0.5); } .collapse-header .icon[data-v-e2e12602] { + width: 100%; fill: rgba(255, 255, 255, 0.5); -} -.collapse-header[data-v-e2e12602]:hover { - background: rgba(255, 255, 255, 0.075); - color: #fff; + padding: .5rem 0; } .collapse-header:hover .icon[data-v-e2e12602] { - fill: #fff; + background: rgba(255, 255, 255, 0.075); + fill: #fff; } .sites.compact[data-v-e2e12602] { display: none; @@ -844,7 +852,8 @@ .sites.compact.expanded[data-v-e2e12602] { display: grid; } -.expand-header[data-v-e2e12602] { +.expand-header[data-v-e2e12602], + .collapse-header[data-v-e2e12602] { display: -webkit-box; display: flex; } @@ -1251,8 +1260,6 @@ background: #222; display: -webkit-box; display: flex; - -webkit-box-pack: center; - justify-content: center; padding: 0 1rem; overflow: hidden; } @@ -1316,8 +1323,6 @@ background: #222; color: #fff; display: none; - -webkit-box-pack: center; - justify-content: center; padding: .5rem 1rem; } .header .title[data-v-7f130e7f] {