chore: update styling

Signed-off-by: Rudraksh Tyagi <[email protected]>
layer5io · Jun 29, 2024 · 92f7a29 · 92f7a29
1 parent 9b4249f
commit 92f7a29
Showing 1 changed file with 164 additions and 106 deletions.
diff --git a/assets/scss/_content_project.scss b/assets/scss/_content_project.scss
@@ -2,115 +2,168 @@
 // Style Markdown content
 //
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family:
+    "Qanelas Soft",
+    sans-serif,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
 }
+
 .td-content {
-    order: 1;
-
-    p,
-    li,
-    td {
-      font-weight: $font-weight-body-text;
-    }
-
-    > h1 {
-      font-family: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-      font-weight: $font-weight-bold;
-      margin-bottom: 1rem;
-      color: $casper;
-    }
-
-    > h2 {
-      font-family: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-      margin-bottom: 1rem;
-      color: $casper;
-    }
-
-    > h2:not(:first-child) {
-      margin-top: 3rem;
-      color: $casper;
-    }
-
-    > h2 + h3 {
-      margin-top: 1rem;
-    }
-
-    > h3,
-    > h4,
-    > h5,
-    > h6 {
-      font-family: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-      margin-bottom: 1rem;
-      margin-top: 2rem;
-      color: $lightslategray;
-      & a {
-        color: $primary;
-        & :hover {
-          color: $white;
-        }
-      }
-    }
+  order: 1;
 
-    img {
-      @extend .img-fluid;
-    }
-
-    table {
-      @extend .td-table;
-    }
-
-    blockquote {
-      padding: 0 0 0 1rem;
-      margin-bottom: $spacer;
-      color: $gray-600;
-      border-left: 6px solid $secondary;
-    }
-
-    ul li,
-    ol li {
-      margin-bottom: 0.25rem;
-    }
-
-    strong {
-      font-weight: $font-weight-bold;
-    }
-
-    .footnotes,
-    > .alert,
-    > .highlight,
-    > .lead,
-    > .td-table,
-    > blockquote,
-    > dl dd,
-    > h1,
-    > h2,
-    > ol,
-    > p,
-    > pre,
-    > ul {
-      @extend .td-max-width-on-larger-screens;
-    }
-
-    .alert:not(:first-child) {
-      margin-top: 2 * $spacer;
-      margin-bottom: 2 * $spacer;
-    }
-
-    .lead {
-      margin-bottom: 1.5rem;
-    }
+  p,
+  li,
+  td {
+    font-weight: $font-weight-body-text;
+  }
+
+  >h1 {
+    font-family:
+      "Qanelas Soft",
+      sans-serif,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol";
+    font-weight: $font-weight-bold;
+    margin-bottom: 1rem;
+    color: $casper;
+  }
+
+  >h2 {
+    font-family:
+      "Qanelas Soft",
+      sans-serif,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol";
+    margin-bottom: 1rem;
+    color: $casper;
   }
-
-  .td-title {
+
+  >h2:not(:first-child) {
+    margin-top: 3rem;
+    color: $casper;
+  }
+
+  >h2+h3 {
     margin-top: 1rem;
-    margin-bottom: 0.5rem;
-
-    @include media-breakpoint-up(sm) {
-      font-size: 3rem;
+  }
+
+  >h3,
+  >h4,
+  >h5,
+  >h6 {
+    font-family:
+      "Qanelas Soft",
+      sans-serif,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol";
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+    color: $lightslategray;
+
+    & a {
+      color: $primary;
+
+      & :hover {
+        color: $white;
+      }
     }
   }
 
+  img {
+    width: 100%;
+    @extend .img-fluid;
+  }
+
+  table {
+    @extend .td-table;
+  }
+
+  blockquote {
+    padding: 0 0 0 1rem;
+    margin-bottom: $spacer;
+    color: $gray-600;
+    border-left: 6px solid $secondary;
+  }
+
+  ul li,
+  ol li {
+    margin-bottom: 0.25rem;
+  }
+
+  strong {
+    font-weight: $font-weight-bold;
+  }
+
+  .footnotes,
+  >.alert,
+  >.highlight,
+  >.lead,
+  >.td-table,
+  >blockquote,
+  >dl dd,
+  >h1,
+  >h2,
+  >ol,
+  >p,
+  >pre,
+  >ul {
+    @extend .td-max-width-on-larger-screens;
+  }
+
+  .alert:not(:first-child) {
+    margin-top: 2 * $spacer;
+    margin-bottom: 2 * $spacer;
+  }
+
+  .lead {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.td-title {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+
+  @include media-breakpoint-up(sm) {
+    font-size: 3rem;
+  }
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 8px;
@@ -147,7 +200,7 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 1rem;
   color: #cccccc;
   vertical-align: top;
-  border-color:rgba(0, 179, 159, 0.33);
+  border-color: rgba(0, 179, 159, 0.33);
 }
 
 .td-initial thead {
@@ -156,7 +209,12 @@ h1, h2, h3, h4, h5, h6 {
   unicode-bidi: isolate;
 }
 
-.td-initial thead, tbody, tfoot, tr, td, th {
+.td-initial thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
   border-color: rgba(0, 179, 159, 0.33);
   border-style: solid;
   border-width: 0;
@@ -179,7 +237,7 @@ h1, h2, h3, h4, h5, h6 {
   unicode-bidi: isolate;
   max-width: 300px;
   overflow-wrap: break-word;
-  padding: .5rem;
+  padding: 0.5rem;
   background-color: #00000000;
   border-bottom-width: 1px;
   box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
@@ -191,7 +249,7 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
   text-align: -internal-center;
   unicode-bidi: isolate;
-  padding: .5rem;
+  padding: 0.5rem;
   background-color: transparent;
   border-bottom-width: 1px;
   box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
@@ -200,4 +258,4 @@ h1, h2, h3, h4, h5, h6 {
 .table-container {
   overflow-x: auto;
   max-width: 100%;
-}
+}