feat: add _custom.scss

themes/my-doks-theme/README.md

@@ -0,0 +1,13 @@
+# Customizations
+
+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/my-doks-theme/`. Make sure to keep the folder structure.
+
+Supported folders are: `archetypes`, `assets`, `data`, and `layouts`.
+
+## Mounting settings
+
+If needed, you can change the mountings settings in `./config/_default/module.toml`. See also the Hugo docs: [Module Config: mounts](https://gohugo.io/hugo-modules/configuration/#module-config-mounts).

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

themes/my-doks-theme/layouts/index.html

@@ -0,0 +1,59 @@
+{{ define "main" }}
+<section class="section container-fluid mt-n3 pb-3">
+  <div class="row justify-content-center">
+    <div class="col-lg-12 text-center">
+      <h1>{{ .Title }}</h1>
+    </div>
+    <div class="col-lg-9 col-xl-8 text-center">
+      <p class="lead">{{ .Params.lead | safeHTML }}</p>
+      <a class="btn btn-primary btn-cta rounded-pill btn-lg my-3" href="/docs/{{ if site.Data.doks.docsVersioning }}{{ site.Data.doks.docsVersion }}/{{ end }}guides/example-guide/" role="button">{{ i18n "get-started" }}</a>
+      {{ .Content }}
+    </div>
+  </div>
+</section>
+{{ end }}
+
+{{ define "sidebar-prefooter" }}
+  {{ if site.Data.doks.backgroundDots -}}
+  <div class="d-flex justify-content-start">
+    <div class="bg-dots"></div>
+  </div>
+  {{ end -}}
+  {{ if eq $.Site.Language.LanguageName "English" }}
+  <section class="section section-md section-features">
+    <div class="container">
+      <div class="row justify-content-center text-center">
+        <div class="col-lg-5">
+          <h2 class="h4">Update content</h2>
+          <p>Edit <code>content/_index.md</code> to see this page change.</p>
+        </div>
+        <div class="col-lg-5">
+          <h2 class="h4">Add new content</h2>
+          <p>Add Markdown files to <code>content</code> to create new pages.</p>
+        </div>
+        <div class="col-lg-5">
+          <h2 class="h4">Configure your site</h2>
+          <p>Edit your config in <code>config/_default/hyas/doks.toml</code>.</p>
+        </div>
+        <div class="col-lg-5">
+          <h2 class="h4">Read the docs</h2>
+          <p>Learn more in the <a href="https://getdoks.org/">Docs</a>.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  {{ end }}
+{{ end }}
+
+{{ define "sidebar-footer" }}
+{{ if site.Data.doks.sectionFooter -}}
+<section class="section section-md container-fluid bg-light">
+  <div class="row justify-content-center text-center">
+    <div class="col-lg-7">
+      <h2 class="mt-2">Start building with Doks today</h2>
+      <a class="btn btn-primary rounded-pill px-4 my-2" href="/docs/{{ if site.Data.doks.docsVersioning }}{{ site.Data.doks.docsVersion }}/{{ end }}prologue/introduction/" role="button">{{ i18n "get-started" }}</a>
+    </div>
+  </div>
+</section>
+{{ end -}}
+{{ end }}