feat: add _custom.scss

This commit is contained in:
Henk Verlinde 2023-09-13 12:32:53 +02:00
parent 8ce76fd28b
commit ad2d80eb9e
4 changed files with 69 additions and 4 deletions

View File

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

View File

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

View File

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