Improved sidebar design, added sfw and theme toggles.

assets/components/actors/actors.vue

@@ -33,6 +33,13 @@
 						replace
 					><Icon icon="question5" /></router-link>
 				</li>
+				<li class="gender">
+					<router-link
+						:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
+						:class="{ selected: gender === 'all' }"
+						class="gender-link all"
+					>all</router-link>
+				</li>
 			</ul>
 
 			<ul class="letters nolist">
@@ -143,8 +150,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'theme';
-
 .gender-link {
     &.selected .gender .icon  {
         fill: var(--text-light);
@@ -173,7 +178,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .actors {
     display: flex;
@@ -253,13 +258,15 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint0) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    }
-
+@media(max-width: $breakpoint) {
     .genders {
         flex-direction: column;
     }
 }
+
+@media(max-width: $breakpoint-micro) {
+    .tiles {
+        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    }
+}
 </style>