Docs: update docs design

docs/archetypes/default.md

@@ -2,5 +2,7 @@
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 draft: true
+icon: "{{ .Icon }}"
+isShownInList: true
 ---
 

docs/assets/scss/_styles_project.scss

@@ -1,36 +1,24 @@
-// blockquotes and callouts
-
-body {
-  .alert {
-    // Override Docsy styles
-    padding: 0.4rem 0.4rem 0.4rem 1rem;
-    border-top: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-    border-right: 1px solid #eee;
-    border-radius: 0.25em;
-    border-left-width: 0.5em; // fallback in case calc() is missing
-    background: #fff;
-    color: #000;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-  }
-  // Set minimum width and radius for alert color
-  .alert {
-      border-left-width: calc(max(0.5em, 4px));
-      border-top-left-radius: calc(max(0.5em, 4px));
-      border-bottom-left-radius: calc(max(0.5em, 4px));
-  }
-  .alert.callout.caution {
-    border-left-color: #f0ad4e;
-  }
-  .alert.callout.note {
-    border-left-color: #428bca;
-  }
-  .alert.callout.warning {
-    border-left-color: #d9534f;
-  }
-
-  h1:first-of-type + .alert.callout {
-    margin-top: 1.5em;
-  }
-}
+@import "./theme/code";
+@import "./theme/main-container";
+@import "./theme/content";
+@import "./theme/nav";
+@import "./theme/sidebar-toc";
+@import "./theme/sidebar-tree";
+@import "./theme/taxonomy";
+@import "./theme/navbar";
+@import "./theme/tables";
+@import "./theme/text";
+@import "./theme/shortcodes/cards-pane";
+@import "./theme/support/utilities";
+@import "./theme/buttons";
+@import "header";
+@import "footer";
+@import "sidebar";
+@import "toc";
+@import "alert";
+@import "banner";
+@import "main-content";
+@import "page-card";
+@import "tabbed-pane";
+@import "prism";
+@import "page-info";

docs/assets/scss/_variables_project.scss

@@ -0,0 +1,8 @@
+$google_font_name: "Noto Sans";
+$google_font_family: "Noto+Sans:400,600,700";
+
+$font-family-monospace: "IBM Plex Mono", monospace !default;
+
+$dark: #FAFAFA;
+$table-border-color: #E5E7E7;
+$table-cell-padding: 10px 20px !default;

docs/assets/scss/alert.scss

@@ -0,0 +1,74 @@
+.alert {
+  // Override Docsy styles
+  padding: 16px 20px;
+  background-color: #FAFAFA;
+  border-left-width: 4px; // fallback in case calc() is missing
+  color: #000;
+  border-radius: 0px 1px 1px 0px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.alert.callout.caution {
+  border-left-color: #F6A855;
+}
+
+.alert.callout.note {
+  border-left-color: #70A0FF;
+}
+
+.alert.callout.warning {
+  border-left-color: #FF6673;
+}
+
+.alert.callout.tip {
+  border-left-color: #84E194;
+}
+
+.alert.callout strong {
+  display: block;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 6px;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.alert.callout.caution strong {
+  color: #B25C00;
+}
+
+.alert.callout.note strong {
+  color: #386EDC;
+}
+
+.alert.callout.warning strong {
+  color: #D92635;
+}
+
+.alert.callout.tip strong {
+  color: #178229;
+}
+
+.alert.callout p {
+  margin-top: 0;
+  margin-bottom: 6px;
+}
+
+.alert.callout p:last-child {
+  margin-bottom: 0;
+}
+
+h1:first-of-type+.alert.callout {
+  margin-top: 1.5em;
+}
+
+code {
+  color: inherit;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  word-break: normal;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0.25rem;
+}

docs/assets/scss/banner.scss

@@ -0,0 +1,86 @@
+.banner {
+  position: relative;
+  margin-bottom: 26px;
+  padding: 36px 42px;
+  background-color: #F4FBFB;
+  border: 1px solid #C6F1F1;
+  border-radius: 4px;
+  margin-top: 40px;
+
+  @media screen and (max-width: 1340px) {
+    padding: 18px 20px;
+  }
+
+  &__title {
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 1.375;
+    color: #253737;
+
+    @media screen and (max-width: 767px) {
+      font-size: 24px;
+    }
+  }
+
+  &__content-wrapper {
+    @media screen and (max-width: 1340px) {
+      max-width: 50%;
+    }
+
+    @media screen and (max-width: 562px) {
+      max-width: none;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+
+  &__content {
+    margin-top: 8px !important;
+    margin-bottom: 24px !important;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 1.625;
+    color: #2B383B;
+  }
+
+  &__link {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 17px 30px;
+    font-weight: 800;
+    font-size: 14px;
+    line-height: 1;
+    text-align: center;
+    color: #253737;
+    background: linear-gradient(86.5deg, #84E1A3 2.87%, #74E2CF 100%);
+    border-radius: 84px;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus {
+      color: #253737;
+      background: linear-gradient(86.5deg, #90E4C8 2.87%, #81E4E4 100%);
+    }
+
+    @media screen and (max-width: 414px) {
+      width: 100%;
+    }
+  }
+
+  &__mascot {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    @media screen and (max-width: 1024px) {
+      width: 250px;
+      right: 3%;
+    }
+
+    @media screen and (max-width: 562px) {
+      display: none;
+    }
+  }
+}

docs/assets/scss/footer.scss

@@ -0,0 +1,52 @@
+.footer {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  padding: 52px 80px;
+  min-height: auto;
+  background-color: #FAFAFA;
+
+  &__inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    @media screen and (max-width: 767px) {
+      flex-direction: column;
+      gap: 20px;
+    }
+  }
+
+  p {
+    margin: 0;
+    color: #253737;
+  }
+
+  &__socials {
+    display: flex;
+    gap: 1.25rem;
+
+    a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 100%;
+      width: 40px;
+      height: 40px;
+      background-color: #2b383b;
+      transition: all 0.2s ease;
+
+      svg {
+        width: 22px;
+      }
+
+      &:hover,
+      &:focus {
+        background-color: #415559;
+      }
+    }
+  }
+}