Move blog specific scss to new location and update the media queries …

…to use the helper variables

sass/helpers/_media.scss

@@ -2,4 +2,5 @@
  * Defines some variables for media queries
  */
 
-$mobile: 767px
+$mobile: 767px;
+$tablet: 1023px;

sass/_blog.scss → sass/pages/_blog.scss

@@ -1,4 +1,6 @@
-article.post {
+@use "../helpers/media";
+
+article .post {
     width: 100%;
     word-break: break-word;
 
@@ -88,7 +90,8 @@ article.post {
         background-color: #000;
         border-radius: 16px;
 
-        @media (width <= 767px) {
+        /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */
+        @media (width <=media.$mobile) {
             grid-template-columns: auto;
             grid-template-rows: 10rem auto;
         }
@@ -133,7 +136,9 @@ article.post {
     }
 
     aside {
-        @media (width <= 1023px) {
+
+        /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */
+        @media (width <=media.$tablet) {
             display: none;
         }
 
@@ -195,4 +200,4 @@ h3 a {
 
 .footnote-definition>p {
     display: inline;
-}
+}

sass/pages/_index.scss

@@ -1 +1,2 @@
-@use "index_page";
+@use "index_page";
+@use "blog";

sass/style.scss

@@ -11,7 +11,6 @@
 
 
 // Old structure
-@use 'blog';
 @use 'pagination';
 @use 'taxonomies';
 @use 'projects';