Make page responsive

src/static/style/style.css

@@ -4,10 +4,11 @@
 body {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto 1fr;
     grid-template-areas: 
         "header header"
-        "nav main";
+        "nav nav"
+        "main main";
     min-height: 100vh;
 }
 
@@ -39,17 +40,18 @@ a.brand img {
 }
 
 aside.menu {
-    @apply bg-gray-700 text-white p-2 w-72 select-none;
+    @apply bg-gray-700 text-white p-2 w-full select-none;
     grid-area: nav;
     box-shadow: -3px 0 10px 2px black;
 }
 
-.center {
-    @apply mx-auto;
+main {
+    @apply py-8 mx-5;
+    grid-area: main;
 }
 
-.menu .menu-view {
-    @apply sticky top-0;
+.center {
+    @apply mx-auto;
 }
 
 .menu .menu-title {
@@ -68,11 +70,6 @@ aside.menu {
     @apply bg-blue-500 text-white;
 }
 
-main {
-    @apply py-8 mx-40;
-    grid-area: main;
-}
-
 .content {
     @apply prose max-w-full;
 }
@@ -87,13 +84,13 @@ main {
 
 .artifacts-list {
     display: grid;
-    grid-template-columns: max-content auto;
-    gap: 0.5rem 0.5rem;
+    grid-template-columns: auto;
+    gap: 0.2rem 0.5rem;
     align-items: center;
 }
 
 .artifacts-list .artifact-link {
-    @apply text-white bg-blue-600 rounded-sm p-1 px-2 no-underline font-normal;
+    @apply text-white bg-blue-600 rounded-sm p-1 px-2 no-underline font-normal mt-2;
     height: min-content;
 }
 
@@ -165,4 +162,41 @@ main {
     @apply text-gray-600 text-lg;
 }
 
+@screen md {
+
+    body {
+        grid-template-areas: 
+            "header header"
+            "header header"
+            "nav main";
+    }
+
+    aside.menu {
+        @apply w-56;
+    }
+
+    .menu .menu-view {
+        @apply sticky top-0;
+    }
+}
+
+@screen xl {
+    .artifacts-list {
+        grid-template-columns: max-content auto;
+        gap: 0.5rem 0.5rem;
+    }
+
+    .artifacts-list .artifact-link {
+        @apply mt-0;
+    }
+
+    main {
+        @apply mx-40;
+    }
+
+    aside.menu {
+        @apply w-72;
+    }
+}
+
 @tailwind utilities;

src/static/style/style.min.css

@@ -1868,10 +1868,11 @@ video {
 body {
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto auto 1fr;
   grid-template-areas: 
         "header header"
-        "nav main";
+        "nav nav"
+        "main main";
   min-height: 100vh;
 }
 
@@ -1931,22 +1932,24 @@ aside.menu {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  width: 18rem;
+  width: 100%;
   grid-area: nav;
   box-shadow: -3px 0 10px 2px black;
 }
 
+main {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  grid-area: main;
+}
+
 .center {
   margin-left: auto;
   margin-right: auto;
 }
 
-.menu .menu-view {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0px;
-}
-
 .menu .menu-title {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.75rem;
@@ -1983,14 +1986,6 @@ aside.menu {
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-main {
-  margin-left: 10rem;
-  margin-right: 10rem;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  grid-area: main;
-}
-
 .content {
   color: #374151;
   max-width: 65ch;
@@ -2582,9 +2577,8 @@ main {
 
 .artifacts-list {
   display: grid;
-  grid-template-columns: -webkit-max-content auto;
-  grid-template-columns: max-content auto;
-  gap: 0.5rem 0.5rem;
+  grid-template-columns: auto;
+  gap: 0.2rem 0.5rem;
   align-items: center;
 }
 
@@ -2593,6 +2587,7 @@ main {
   background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
   border-radius: 0.125rem;
   font-weight: 400;
+  margin-top: 0.5rem;
   padding: 0.25rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2719,6 +2714,46 @@ main {
   color: rgba(75, 85, 99, var(--tw-text-opacity));
 }
 
+@media (min-width: 768px) {
+  body {
+    grid-template-areas: 
+            "header header"
+            "header header"
+            "nav main";
+  }
+
+  aside.menu {
+    width: 14rem;
+  }
+
+  .menu .menu-view {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .artifacts-list {
+    grid-template-columns: -webkit-max-content auto;
+    grid-template-columns: max-content auto;
+    gap: 0.5rem 0.5rem;
+  }
+
+  .artifacts-list .artifact-link {
+    margin-top: 0px;
+  }
+
+  main {
+    margin-left: 10rem;
+    margin-right: 10rem;
+  }
+
+  aside.menu {
+    width: 18rem;
+  }
+}
+
 .space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));