feat: Rework some pages

2 files changed, 103 insertions, 6 deletions

diff --git a/scss/main.scss b/scss/main.scss
index bb7d7f0..b3ba649 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -19,8 +19,31 @@ $headings-margin-bottom: 0;
 @import "bootstrap/scss/_nav.scss";
 @import "bootstrap/scss/_navbar.scss";
 @import "bootstrap/scss/_grid.scss";
+@import "tree.scss";
+
+// overwrite to reduce the ammount of css generated by loading all utilities
+$utilities: (
+    "order": (
+      responsive: true,
+      property: order,
+      values: (
+        first: -1,
+        0: 0,
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 5,
+        last: 6,
+      ),
+    ),
+);
+
+@import "bootstrap/scss/utilities/_api.scss";
 
 body {
+    // prevents wierd font resizing on overflow
+    -webkit-text-size-adjust: 100%;
     font-family: $font-family-monospace;
     font-size: $base-font-size;
     margin: 0;
@@ -63,23 +86,27 @@ body {
 }
 
 .logs {
-  >div:nth-child(odd) {
+  >div {
     background: #f8f9fa;
   }
 
   >div {
-    padding: 10px;
+    padding: 5px;
+    margin: $spacer;
+  }
+
+  @include media-breakpoint-down(md) {
+    >div {
+      margin: $spacer 0 $spacer 0;
+    }
   }
 
   pre {
-    white-space: break-spaces;
+    font-size: $base-font-size;
     margin: 0;
   }
 }
 
-.logs pre::first-line {
-  font-weight: bold;
-}
 .logs>div>div:first-child {
   margin-bottom: 15px;
 }
@@ -87,3 +114,14 @@ body {
   margin-top: 15px;
 }
 
+#about {
+  padding: 0 $spacer $spacer $spacer;
+  > p:first-child {
+    margin-top: 0
+  }
+
+  @include media-breakpoint-down(md) { 
+    padding: $spacer;
+    max-width: calc(100% - calc(2 * #{$spacer}));
+  }
+}
diff --git a/scss/tree.scss b/scss/tree.scss
new file mode 100644
index 0000000..bbca162
--- /dev/null
+++ b/scss/tree.scss
@@ -0,0 +1,59 @@
+// TODO: refer to sourcehut code AGPL
+.tree-list {
+  display: grid;
+  // mode name
+  grid-template-columns: auto 1fr fit-content(40em) auto auto;
+  font-family: $font-family-monospace;
+
+  svg {
+    color: #777;
+  }
+
+  .size {
+    text-align: right;
+  }
+
+  .name.blob a {
+    color: $gray-900;
+  }
+
+  .mode, .commit, .commit a, .date, .size {
+    color: $gray-700;
+  }
+
+  .name.blob {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .commit {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  & > div {
+    padding: 0.1rem 0.5rem;
+    background: transparent;
+
+    &.id {
+      text-align: right;
+    }
+
+    &.comments {
+      text-align: center;
+    }
+
+    @for $i from 1 through 5 {
+      &:nth-child(5n+#{$i}) {
+        grid-column-start: $i;
+      }
+
+      // Striped rows
+      &:nth-child(10n+#{$i}) {
+        background: rgba(0,0,0,.05);
+      }
+    }
+  }
+}