From ad2d80eb9e936681ba6c14594effcbd15661302f Mon Sep 17 00:00:00 2001 From: Henk Verlinde 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