Brand new design

Azuriom · Dec 4, 2023 · 75d942a · 75d942a
1 parent b0a9104
commit 75d942a
Show file tree

Hide file tree

Showing 50 changed files with 874 additions and 1,054 deletions.
diff --git a/assets/js/app.ts b/assets/js/app.ts
@@ -1,7 +1,8 @@
 import Cookies from 'js-cookie'
-import Typed from 'typed.js'
+import * as Bootstrap from 'bootstrap'
 
-import 'bootstrap'
+document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  .forEach((element) => new Bootstrap.Tooltip(element))
 
 document.querySelectorAll<HTMLElement>('.locale-selector [data-locale]')
   .forEach((element) => {
@@ -20,24 +21,6 @@ document.querySelectorAll<HTMLElement>('.locale-selector [data-locale]')
     })
   })
 
-document.querySelectorAll<HTMLElement>('[data-typed]')
-  .forEach((element) => {
-    const data = element.dataset.typed
-    if (!data) {
-      return
-    }
-
-    element.innerText = ''
-
-    new Typed(element, {
-      strings: data.split('|'),
-      typeSpeed: 100,
-      backSpeed: 25,
-      loop: true,
-      autoInsertCss: false,
-    })
-  })
-
 document.querySelectorAll('.azuriom-last-version')
   .forEach((element) => {
     fetch('https://api.github.com/repos/Azuriom/Azuriom/releases/latest')
@@ -60,8 +43,10 @@ function getPreferredTheme() {
 }
 
 function setCurrentTheme(theme: string) {
-  if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    document.documentElement.setAttribute('data-bs-theme', 'dark')
+  if (theme === 'auto') {
+    const themeColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+
+    document.documentElement.setAttribute('data-bs-theme', themeColor)
   } else {
     document.documentElement.setAttribute('data-bs-theme', theme)
   }
@@ -86,7 +71,9 @@ setCurrentTheme(getPreferredTheme())
 
 document.querySelectorAll('a[data-theme-value]')
   .forEach((element) => {
-    element.addEventListener('click', () => {
+    element.addEventListener('click', (ev) => {
+      ev.preventDefault()
+
       const theme = element.getAttribute('data-theme-value')
 
       if (theme) {

diff --git a/assets/scss/_global.scss b/assets/scss/_global.scss
@@ -1,131 +1,81 @@
 html,
 body {
-    height: 100%;
+  height: 100%;
 }
 
 body {
-    display: flex;
-    flex-direction: column;
-}
-
-::-webkit-scrollbar {
-    width: 10px;
-}
-
-::-webkit-scrollbar-track-piece {
-    background: #e1e1e1;
-    border: 3px solid transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--bs-primary);
-    border: 3px solid transparent;
-    border-radius: 5px;
-}
-
-.title-divider {
-    padding-bottom: 0.75rem;
-    margin-bottom: 1rem;
-    position: relative;
-
-    &::after {
-        content: '';
-        width: 60px;
-        height: 3px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: var(--bs-primary);
-    }
-}
-
-.title-divider-sm::after {
-    width: 30px;
-    height: 2px;
+  display: flex;
+  flex-direction: column;
 }
 
 .content {
-    margin-top: 5rem;
-    margin-bottom: 5rem;
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+
+  @include media-breakpoint-down(lg) {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
 }
 
 .page-wrapper {
-    flex: 1 0 auto;
+  flex: 1 0 auto;
 }
 
 .svg,
 .bi {
-    height: 1em;
-    width: 1em;
-    vertical-align: -.125em;
+  height: 1em;
+  width: 1em;
+  vertical-align: -.125em;
 }
 
 .navbar .nav-link {
-    font-weight: 600;
-
-    .svg {
-        height: 1.5em;
-        width: 1.5em;
-        vertical-align: -.395em;
-        border-radius: 3px;
-    }
-
-    .current-theme-icon:not(.active) {
-        display: none;
-    }
+  font-weight: 600;
+
+  .svg {
+    height: 1.5em;
+    width: 1.5em;
+    vertical-align: -.395em;
+    border-radius: 3px;
+  }
+
+  .current-theme-icon:not(.active) {
+    display: none;
+  }
 }
 
 .bg-primary-gradient {
-    background: linear-gradient(-75deg, #0096e6, #265bfb 55%, #0026e6);
+  background: linear-gradient(-75deg, #0096e6, #265bfb 55%, #0026e6);
 }
 
 .section-waves,
 .footer-waves {
-    margin-bottom: -1px;
+  margin-bottom: -1px;
 }
 
 .footer {
-    flex-shrink: 0;
+  flex-shrink: 0;
+  color: #cdd1d5;
+  background: #2b3035;
+
+  .bi-heart-fill {
+    color: #ff7273;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  a:hover {
     color: #fff;
-    background: #2b3035;
-    font-size: 0.95rem;
-    padding: 2.5rem 0 1.5rem;
-
-    .copyright {
-        padding-top: 1.5rem;
-        border-top: var(--bs-primary) solid 1px;
-    }
-
-    .bi-heart-fill {
-        color: #ff7273;
-    }
-
-    a,
-    a:hover {
-        color: #fff;
-    }
-
-    .links a::before {
-        content: ' ';
-        background-image: url('../svg/chevron-right.svg');
-        margin-right: 5px;
-        display: inline-block;
-        vertical-align: -0.2em;
-        height: 1.05rem;
-        width: 1.05rem;
-        transition: transform 0.2s ease-in-out;
-    }
-
-    .links a:hover::before {
-        transform: translate3d(5px, 0, 0);
-    }
+  }
 }
 
-.documentation-alert {
-    border-left: none !important;
+.alert.documentation-alert {
+  border: none;
 
-    img {
-        height: 4rem;
-        width: 4rem;
-    }
+  img {
+    height: 4rem;
+    width: 4rem;
+  }
 }