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] {