feat: add _custom.scss

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]]

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
 

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;
+}