Defined new breakpoint names.

assets/components/entities/entity.vue

@@ -168,7 +168,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .info {
 	display: flex;
@@ -231,7 +231,7 @@ export default {
 	display: none;
 }
 
-@media(max-width: $breakpoint0) {
+@media(max-width: $breakpoint-micro) {
 	.logo-parent,
 	.link-child .icon {
 		display: none;

assets/components/header/header.vue

@@ -178,7 +178,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .header {
     height: 3rem;
@@ -320,7 +320,7 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint2) {
+@media(max-width: $breakpoint-kilo) {
     .search-full {
         display: none;
     }
@@ -334,7 +334,7 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint0) {
+@media(max-width: $breakpoint-micro) {
     .nav {
         display: none;
     }
@@ -347,4 +347,10 @@ export default {
         padding: 0 0 0 .5rem;
     }
 }
+
+@media(max-width: $breakpoint-nano) {
+	.header-toggles {
+		display: none;
+	}
+}
 </style>

webpack.config.babel.js

@@ -67,6 +67,7 @@ export default {
 	resolve: {
 		alias: {
 			theme: path.join(__dirname, 'assets/css/_theme.scss'),
+			breakpoints: path.join(__dirname, 'assets/css/_breakpoints.scss'),
 			config: path.join(__dirname, `assets/js/config/${process.env.NODE_ENV || 'default'}.js`),
 		},
 	},