From ad2d80eb9e936681ba6c14594effcbd15661302f Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@henkverlinde.com>
Date: Wed, 13 Sep 2023 12:32:53 +0200
Subject: [PATCH] feat: add _custom.scss

---
 config/_default/module.toml                   |  7 ++-
 themes/{doks => my-doks-theme}/README.md      |  6 +-
 .../assets/scss/common/_custom.scss           | 60 +++++++++++++++++++
 .../layouts/index.html                        |  0
 4 files changed, 69 insertions(+), 4 deletions(-)
 rename themes/{doks => my-doks-theme}/README.md (55%)
 create mode 100644 themes/my-doks-theme/assets/scss/common/_custom.scss
 rename themes/{doks => my-doks-theme}/layouts/index.html (100%)

diff --git a/config/_default/module.toml b/config/_default/module.toml
index 39b2013..8e6abdb 100644
--- a/config/_default/module.toml
+++ b/config/_default/module.toml
@@ -30,6 +30,7 @@
 [[mounts]]
   source = "node_modules/@hyas/doks-core/assets"
   target = "assets"
+  excludeFiles = "scss/common/_custom.scss"
 
 [[mounts]]
   source = "node_modules/@hyas/doks-core/data"
@@ -72,7 +73,11 @@
   target = "layouts"
 
 [[mounts]]
-  source = "themes/doks/layouts"
+  source = "themes/my-doks-theme/assets" 
+  target = "assets"
+
+[[mounts]]
+  source = "themes/my-doks-theme/layouts"
   target = "layouts"
 
 [[mounts]]
diff --git a/themes/doks/README.md b/themes/my-doks-theme/README.md
similarity index 55%
rename from themes/doks/README.md
rename to themes/my-doks-theme/README.md
index ffd0c5e..9836851 100644
--- a/themes/doks/README.md
+++ b/themes/my-doks-theme/README.md
@@ -1,12 +1,12 @@
 # Customizations
 
-**Major** customizations for the [Doks Core](https://github.com/gethyas/doks-core) integration go here.
+Customizations for the [Doks Core](https://github.com/gethyas/doks-core) integration go here.
 
 ## Usage
 
-Copy the file(s) you'd like to override from `./node_modules/@hyas/doks-core/` and paste to `./themes/doks/`. Make sure to keep the folder structure.
+Copy the file(s) you'd like to override from `./node_modules/@hyas/doks-core/` and paste to `./themes/my-doks-theme/`. Make sure to keep the folder structure.
 
-Supported folders are: `archetypes`, `assets`, and `layouts`.
+Supported folders are: `archetypes`, `assets`, `data`, and `layouts`.
 
 ## Mounting settings
 
diff --git a/themes/my-doks-theme/assets/scss/common/_custom.scss b/themes/my-doks-theme/assets/scss/common/_custom.scss
new file mode 100644
index 0000000..c359137
--- /dev/null
+++ b/themes/my-doks-theme/assets/scss/common/_custom.scss
@@ -0,0 +1,60 @@
+// Put your custom SCSS code here
+
+.col-main-section {
+  flex: 0 0 auto;
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;;
+
+  @include media-breakpoint-up(md) {
+    padding-left: 2rem;
+    padding-right: 2rem;;
+  }
+
+  @include media-breakpoint-up(xl) {
+    max-width: 100rem;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .col-xl {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .showcase .col-main-section {
+    max-width: 80rem;
+  }
+}
+
+.showcase .card {
+  height: auto;
+  margin: 1rem;
+}
+
+.showcase .card-img-overlay {
+  position: absolute;
+  inset: auto 0 0;
+  padding: var(--bs-card-img-overlay-padding);
+  border-radius: 0;
+  background-color: hsla(224deg, 14%, 16%, 0.95);
+  transition-timing-function: cubic-bezier(0,0,.2,1);
+  transition-duration: .3s;
+  transition-property: opacity;
+  opacity: 0;
+
+  .card-title {
+    margin-top: 0;
+    color: var(--sl-color-gray-2);
+  }
+
+  .card-text {
+    color: var(--sl-color-gray-2);
+  }
+}
+
+.showcase .card:hover .card-img-overlay {
+  opacity: 1;
+}
diff --git a/themes/doks/layouts/index.html b/themes/my-doks-theme/layouts/index.html
similarity index 100%
rename from themes/doks/layouts/index.html
rename to themes/my-doks-theme/layouts/index.html