assets/components/networks/network.vue

@@ -67,34 +67,33 @@
                         class="logo"
                     >
                 </a>
+
+                <span
+                    v-show="expanded"
+                    class="expand collapse-header noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
             </div>
 
             <div class="content-inner">
-                <template v-if="sites.length">
+                <Sites
-                    <span
+                    v-if="sites.length"
-                        v-show="expanded"
+                    :sites="sites"
-                        class="expand collapse-header noselect"
+                    class="compact"
-                        @click="expanded = false"
+                    :class="{ expanded }"
-                    ><Icon icon="arrow-up3" /></span>
+                />
 
-                    <Sites
+                <span
-                        :sites="sites"
+                    v-show="!expanded"
-                        class="compact"
+                    class="expand expand-header noselect"
-                        :class="{ expanded }"
+                    @click="expanded = true"
-                    />
+                ><Icon icon="arrow-down3" /></span>
 
-                    <span
+                <span
-                        v-show="!expanded"
+                    v-show="expanded"
-                        class="expand expand-header noselect"
+                    class="expand expand-header noselect"
-                        @click="expanded = true"
+                    @click="expanded = false"
-                    ><Icon icon="arrow-down3" /></span>
+                ><Icon icon="arrow-up3" /></span>
-
-                    <span
-                        v-show="expanded"
-                        class="expand expand-header noselect"
-                        @click="expanded = false"
-                    ><Icon icon="arrow-up3" /></span>
-                </template>
 
                 <Releases :releases="releases" />
             </div>
@@ -265,21 +264,23 @@ export default {
 
 .collapse-header {
     width: 100%;
-    display: none;
+    display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0;
     background: $profile;
+    color: $highlight;
 
     .icon {
-        width: 100%;
         fill: $highlight;
-        padding: .5rem 0;
     }
 
-    &:hover .icon {
+    &:hover {
         background: $highlight-hint;
-        fill: $text-contrast;
+        color: $text-contrast;
+
+        .icon {
+            fill: $text-contrast;
+        }
     }
 }
 
@@ -303,8 +304,7 @@ export default {
         }
     }
 
-    .expand-header,
+    .expand-header {
-    .collapse-header {
         display: flex;
     }
 

assets/components/sites/sites.vue

@@ -76,16 +76,4 @@ 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));
-    }
-}
 </style>

assets/components/tags/photos.vue

@@ -55,6 +55,7 @@ export default {
 .photos {
     background: $profile;
     display: flex;
+    justify-content: center;
     padding: 0 1rem;
     overflow: hidden;
 

assets/components/tags/tag.vue

@@ -136,6 +136,7 @@ export default {
     background: $profile;
     color: $text-contrast;
     display: none;
+    justify-content: center;
     padding: .5rem 1rem;
 
     .title {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "traxxx",
-  "version": "1.49.3",
+  "version": "1.49.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.49.3",
+    "version": "1.49.2",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {

public/css/style.css

@@ -690,16 +690,6 @@
   /* 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); */
@@ -817,22 +807,24 @@
 }
 .collapse-header[data-v-e2e12602] {
   width: 100%;
-  display: none;
+  display: -webkit-box;
+  display: flex;
   -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);
-    padding: .5rem 0;
+}
+.collapse-header[data-v-e2e12602]:hover {
+    background: rgba(255, 255, 255, 0.075);
+    color: #fff;
 }
 .collapse-header:hover .icon[data-v-e2e12602] {
-    background: rgba(255, 255, 255, 0.075);
+      fill: #fff;
-    fill: #fff;
 }
 .sites.compact[data-v-e2e12602] {
   display: none;
@@ -852,8 +844,7 @@
 .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;
 }
@@ -1260,6 +1251,8 @@
   background: #222;
   display: -webkit-box;
   display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
   padding: 0 1rem;
   overflow: hidden;
 }
@@ -1323,6 +1316,8 @@
   background: #222;
   color: #fff;
   display: none;
+  -webkit-box-pack: center;
+          justify-content: center;
   padding: .5rem 1rem;
 }
 .header .title[data-v-7f130e7f] {