Add responsive grid layout

2 files changed, 24 insertions, 4 deletions

diff --git a/source/_assets/sass/_blog.scss b/source/_assets/sass/_blog.scss
index e69de29..c54a038 100644
--- a/source/_assets/sass/_blog.scss
+++ b/source/_assets/sass/_blog.scss
@@ -0,0 +1,22 @@
+#main-sidebar-container {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "main" "sidebar";
+  grid-row-gap: 1rem;
+}
+
+#main-sidebar-container article {
+  grid-area: main;
+}
+
+#main-sidebar-container aside {
+  grid-area: sidebar;
+}
+
+@media (min-width: 1024px) {
+  #main-sidebar-container {
+    grid-template-columns: 224px auto;
+    grid-template-areas: "sidebar main";
+    grid-column-gap: 1rem;
+  }
+}
diff --git a/source/_assets/sass/main.scss b/source/_assets/sass/main.scss
index de3587f..82c1a00 100644
--- a/source/_assets/sass/main.scss
+++ b/source/_assets/sass/main.scss
@@ -1,8 +1,6 @@
 @tailwind base;
 @tailwind components;
 
-// Code syntax highlighting,
-// powered by https://highlightjs.org
-@import '~highlight.js/styles/a11y-light.css';
-
 @import 'blog';
+
+@tailwind utilities;