Merge pull request #22 from felixfontein/theme-cleanup

Upgrade Hugo and Docsy, convert config to YAML, add light/dark mode support, simplify theme use

Author: felixfontein

.gitignore

@@ -3,4 +3,5 @@ resources/
 node_modules/
 package-lock.json
 .hugo_build.lock
-.DS_Store
+.DS_Store
+/_vendor/

assets/scss/_styles_project.scss

@@ -1,338 +1,25 @@
-.td-footer {
-  background-color: #0d0e11;
-  border-top: 2px solid #2c2e34;
-}
-
-.td-navbar {
-  background: #0d0e11;
-  border-bottom: 2px solid #2c2e34;
-}
-
-.td-sidebar-nav .td-sidebar-link__page {
-  color: #d6d4d4;
-}
-
-.td-sidebar-nav__section-title a {
-  color: #ffffff;
-}
-
-.td-toc #TableOfContents a {
-  color: #8e9ead;
-  
-  &:hover {
-    color: #2380f2;
+/*
+Project-specific styles. For details, see:
+https://www.docsy.dev/docs/content/lookandfeel/#project-style-files
+*/
+
+// Dark mode enhancements
+@import 'td/color-adjustments-dark';
+@import 'td/code-dark';
+@import 'td/gcs-search-dark';
+@import 'td/extra/buttons';
+@import 'td/extra/main-container';
+
+// CSS classes that are only visible in light or dark mode
+
+[data-bs-theme="light"] {
+  .dark-mode-only {
+    display: none;
   }
 }
 
-.td-content pre {
-  background-color: #1f2327;
-}
-
-.alert {
-  background: #000000;
-}
-
-.list-style-none {
-  list-style: none;
-}
-
-.padding-left-right-20 {
-  padding: 0 20px;
-}
-
-h4 > i {
-  padding-right: 10px;
-}
-
-p i {
-  padding-left: 6px;
-}
-
-a {
-  text-decoration: none;
-}
-
-.button {
-  border: none;
-  width: 120px;
-  height: 50px;
-  border-radius: 7px;
-  font-weight: 500;
-  font-size: 0.95rem;
-}
-
-.button:hover {
-  cursor: pointer;
-}
-
-// .background-gradient-color {
-//   background: linear-gradient(
-//       270deg,
-//       rgba(35, 128, 242, 0.5) 15.55%,
-//       rgba(35, 128, 242, 0) 99.31%
-//     ),
-//     rgba(49, 227, 222, 0.7);
-// }
-
-.main-content {
-  max-width: Max(70%, 1080px);
-  padding-bottom: 50px;
-}
-
-.flex {
-  display: flex;
-}
-
-.flex-column {
-  flex-direction: column;
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-.vertical-align-center {
-  margin: 0 auto;
-}
-
-.justify-content-space-around {
-  justify-content: space-around;
-}
-
-.justify-content-space-between {
-  justify-content: space-between;
-}
-
-.justify-content-center {
-  justify-content: center;
-}
-
-.gap-sm {
-  gap: 20px;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-bold {
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.text-underline {
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 10px;
-}
-
-.text-white {
-  color: white;
-}
-
-.text-black {
-  color: black;
-}
-
-.padding-bottom-20 {
-  padding-bottom: 20px;
-}
-
-.padding-bottom-10 {
-  padding-bottom: 10px;
-}
-
-.btn-container {
-  display: flex;
-  gap: 15px;
-  margin-top: 20px;
-}
-
-.btn-primary {
-  background-color: #2380f2;
-  color: white;
-}
-
-.btn-secondary {
-  background-color: #f1f1f1;
-  color: #476581;
-}
-
-.breaking-word-all {
-  word-break: break-all;
-}
-
-.font-weight-300 {
-  font-weight: 300;
-}
-
-.hero-container {
-  padding: 100px 3% 100px;
-}
-
-.hero-text {
-  font-size: 3rem;
-  color: #f8f8f8;
-}
-
-.hero-tags {
-  padding: 7px 20px;
-  color: #9ca3af;
-  background-color: #14151a;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  // overflow-wrap: break-word;
-  // word-wrap: break-word;
-  display: inline-block;
-  margin-bottom: 10px;
-}
-
-.hero-text-secondary {
-  width: 65%;
-  margin-top: 10px;
-  color: white;
-  font-weight: 300;
-  font-size: larger;
-}
-
-.feature-section {
-  padding: 100px 3% 25px;
-  font-size: larger;
-}
-
-.feature-section > .main-content {
-  margin: 0 auto;
-}
-
-.feature-item {
-  width: 45%;
-}
-
-.feature-item > p {
-  font-weight: 300;
-}
-
-.feature-item-sm > h4 {
-  display: inline-block;
-  height: 1rem;
-}
-
-.feature-item-sm > p {
-  font-weight: 100;
-}
-
-.feature-item-sm > span {
-  margin: auto 1em 1em 0;
-  text-align: right;
-}
-
-.feature-item-sm {
-  width: 18em;
-  height: 15em;
-  background-color: #ffffff;
-  padding: 0 0.5em 0 0.5em;
-  display: flex;
-  flex-direction: column;
-  border-radius: 0 1.25em 0 1.25em;
-}
-
-.use-case-section {
-  background-color: ghostwhite;
-}
-
-.banner {
-  padding: 120px 0px 70px;
-  font-weight: 500;
-  font-size: 1.5rem;
-  margin: 0 auto;
-}
-
-.banner-link {
-  text-decoration: underline;
-  color: #2380f2;
-}
-
-// .footer {
-//   padding: 50px 20%;
-//   color: white;
-//   background-color: black;
-//   font-weight: 300;
-// }
-
-// .footer-info-text {
-//   font-size: 0.85rem;
-//   padding-top: 10px;
-// }
-
-// .footer-link-text {
-//   color: white;
-//   text-decoration: underline;
-// }
-
-.img-container {
-  width: 300px;
-  height: 100px;
-  object-fit: cover;
-  margin: 0 auto;
-}
-
-.media-section {
-  display: flex;
-}
-
-.text-wrapping {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -ms-word-break: break-all;
-  word-break: break-word;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
-}
-
-@media only screen and (max-width: 786px) {
-  .media-section {
+[data-bs-theme="dark"] {
+  .light-mode-only {
     display: none;
   }
-
-  .hero-container {
-    width: 90%;
-  }
-
-  .hero-text-secondary {
-    width: 70%;
-  }
-
-  .feature-container {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    padding-bottom: 1em;
-  }
-
-  .feature-section-mobile {
-    padding: 100px 3% 0px;
-  }
-
-  .feature-section {
-    padding: 100px 3% 0px;
-    font-size: initial;
-  }
-
-  .feature-item {
-    width: 80%;
-    margin: 0 auto;
-  }
-
-  .feature-item-sm {
-    margin: 0 auto;
-    width: 80%;
-    height: auto;
-  }
 }
-
-// @media (min-width: 768px) {
-//     .td-navbar-cover {
-//         background: #0d0e11 !important;
-//     }
-// }

assets/scss/_variables_project.scss

@@ -1,9 +1,6 @@
 /*
-
-Add styles or override variables from the theme here.
-
+Projects can override this file. For details, see:
+https://www.docsy.dev/docs/content/lookandfeel/#project-style-files
 */
 
-// Theme colors
-$body-bg: #0d0e11;
-$body-color: #ffffff
+$lighten-amount-for-dark-color-variant: 28% !default;