Add extra styles for cover CTA/layouts and update 0.14.0 blog post (#2514)

Author: chalin

assets/scss/td/extra/_buttons.scss

@@ -0,0 +1,15 @@
+$td-cta-buttons-row-breakpoint: sm !default;
+
+.td-cta-buttons {
+  --td-cta-buttons-gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--td-cta-buttons-gap);
+
+  @if $td-cta-buttons-row-breakpoint {
+    @include media-breakpoint-up($td-cta-buttons-row-breakpoint) {
+      flex-direction: row;
+    }
+  }
+}

assets/scss/td/extra/_index.scss

@@ -1,8 +1,11 @@
 // Experimental extra styles that projects can test run. These styles might
 // eventually be merged into the core Docsy theme.
 
+@import 'buttons';
+@import 'main-container';
 @import 'navbar';
 
+// -----------------------------------------------------------------------------
 // Margin fix for nested lists [EXPERIMENTAL]
 
 body {

assets/scss/td/extra/_main-container.scss

@@ -0,0 +1,44 @@
+// Styles for docs-like pages without left sidebar
+
+.td-no-left-sidebar .td-main {
+  // Hide left sidebar
+  .td-sidebar {
+    display: none !important;
+  }
+
+  // Adjust right/ToC sidebar, when visible (i.e., at md and up).
+  .td-sidebar-toc {
+    @include media-breakpoint-up(md) {
+      @extend .col-md-2;
+      display: block !important;
+    }
+  }
+
+  // The <main> element sibling of the ToC sidebar
+  > div > main {
+    // Always 10 col wide (unless the ToC sidebar is hidden)
+    @extend .col-md-10;
+    @extend .col-xl-10;
+
+    @include media-breakpoint-up(md) {
+      padding-right: 3rem;
+    }
+
+    @include media-breakpoint-up(lg) {
+      // Center content on larger screens
+
+      .td-content,
+      .td-breadcrumbs {
+        max-width: 80%;
+        margin-left: auto;
+        margin-right: auto;
+
+        // Cancel .td-max-width-on-larger-screens
+        // TODO: generalize this?
+        > * {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}

docsy.dev/assets/scss/_styles_project.scss

@@ -10,9 +10,10 @@
 @import 'blog';
 @import 'navbar';
 
-// To keep the `td/extra` color adjustments, while dropping the text-decoration,
-// use the following class (on your body element), or copy the class styles to
-// your project's style file. This class isn't used, it's just an example.
+// EXAMPLE: To keep the `td/extra` color adjustments, while dropping the
+// text-decoration, use the following class (on your body element), or copy the
+// class styles to your project's style file. This class isn't used, it's just
+// an example.
 ._td-navbar-no-decoration {
   .td-navbar {
     .nav-link {

docsy.dev/content/en/_index.md

@@ -2,21 +2,36 @@
 title: Docsy
 description: A Hugo theme for creating great technical documentation sites
 params:
-  ui: { navbar_theme: dark}
+  ui: { navbar_theme: dark }
+  btn-lg: class="btn btn-lg btn-{1}" type="button"
 ---
 
-{{% blocks/cover title="Welcome to Docsy!" image_anchor="top" height="full" %}}
+{{% blocks/cover
+  title="Welcome to Docsy!"
+  image_anchor="top"
+  height="full td-below-navbar"
+%}}
+
+<!-- prettier-ignore -->
 {{% param description %}}
 {.display-6}
 
-<a class="btn btn-lg btn-primary me-3" href="about/">Learn More</a>
-<a class="btn btn-lg btn-secondary" href="docs/get-started/">Get started</a>
-{.p-initial .my-5}
+<!-- prettier-ignore -->
+<div class="td-cta-buttons my-5">
+  <button {{% _param btn-lg primary %}} href="about/">
+    Learn more
+  </button>
+  <button {{% _param btn-lg secondary %}} href="docs/get-started/">
+    Get started
+  </button>
+</div>
 
 {{% blocks/link-down color="info" %}}
+
 {{% /blocks/cover %}}
 
 {{% blocks/lead color="primary" %}}
+
 Docsy is a theme for the Hugo static site generator that's specifically designed
 for technical documentation sets. Our aim is to help you get a working
 documentation site up and running as easily as possible, so you can concentrate

docsy.dev/content/en/about/index.md

@@ -4,7 +4,7 @@ linkTitle: About
 menu: {main: {weight: 10}}
 ---
 
-{{% blocks/cover title="About Docsy" height="auto" %}}
+{{% blocks/cover title="About Docsy" height="auto td-below-navbar" %}}
 
 Docsy is a pre-configured Hugo theme that provides the core features and behaviors needed to create a technical documentation site. Use Docsy to set up your documentation website, including an optional Blog section, and then spend your time focusing on authoring technical content. Depending on how you choose to configure Docsy and whether you use a hosting service that supports continuous builds, you can even just add your Markdown or HTML content file into a folder on your source repository, and then sit back while it automatically gets added to your site - complete with updated menus.
 

docsy.dev/content/en/blog/2025/0.13.0.md

@@ -14,12 +14,12 @@ cSpell:ignore: docsy FOUC lookandfeel mhchem katex notoc lightdark
 
 {{% card header="Highlights" %}}
 
-- {{% _param FA_LG fire warning %}} <span>Docsy [0.13.0] includes the **_[most
+- {{% _param FAS_LG fire warning %}} <span>Docsy [0.13.0] includes the **_[most
   upvoted][]_ enhancement** [request of 2025][], and more.</span>
-- {{% _param FA_LG check success %}} <span>This release has new features and
+- {{% _param FAS_LG check success %}} <span>This release has new features and
   only
   [minor breaking changes](#breaking-changes).[^explain-report-format]</span>
-- {{% _param FA_LG robot info %}} <span>Read about
+- {{% _param FAS_LG robot info %}} <span>Read about
   [our experiences](#upgrading-and-ai) using AI to
   [upgrade Docsy projects](#upgrade).</span>
 
@@ -36,12 +36,12 @@ cSpell:ignore: docsy FOUC lookandfeel mhchem katex notoc lightdark
 
 Docsy [0.13.0] comes with the following notable features and fixes:
 
-- {{% _param FA compass "" %}} [Navigation and UX](#navigation-and-ux)
+- {{% _param FAS compass "" %}} [Navigation and UX](#navigation-and-ux)
   improvements including the **_most upvoted_ enhancement** [request of 2025][]:
   [Active TOC entry tracking](#active-toc-entry-tracking) ([#349], [#2289])
-- {{% _param FA code "" %}} [Alert shortcode](#alert-shortcode) rewrite for
+- {{% _param FAS code "" %}} [Alert shortcode](#alert-shortcode) rewrite for
   better Markdown support
-- {{% _param FA universal-access "" %}} [Accessibility](#accessibility)
+- {{% _param FAS universal-access "" %}} [Accessibility](#accessibility)
   enhancements for better color contrast and dark mode support
 
 ## Ready to upgrade? <a id="breaking-changes"></a> {#ready-to-upgrade}
@@ -54,10 +54,10 @@ Docsy [0.13.0] comes with the following notable features and fixes:
 - Optionally skim:
   - {{% _param NEW %}} New features
   - [Other notable changes](#other-notable-changes)
-- {{% _param FA rocket primary %}} Jump to
+- {{% _param FAS rocket primary %}} Jump to
   [Upgrade to 0.13.0](#upgrading-and-ai) once you are ready.
 
-## {{% _param FA compass "" %}} Navigation and UX improvements {#navigation-and-ux}
+## {{% _param FAS compass "" %}} Navigation and UX improvements {#navigation-and-ux}
 
 ### {{% _param NEW %}} Active TOC entry tracking {#active-toc-entry-tracking}
 
@@ -149,7 +149,7 @@ additional navigation items ([#2406]).
 
 [#2406]: https://github.com/google/docsy/pull/2406
 
-## {{% _param FA code "" %}} Alert shortcode improvements {#alert-shortcode}
+## {{% _param FAS code "" %}} Alert shortcode improvements {#alert-shortcode}
 
 As of Docsy 0.13.0, `alert` shortcode content is processed differently when
 called as Markdown (`{{%/* alert */%}}`): the inner Markdown is now passed
@@ -167,14 +167,14 @@ This change means that your alerts can now:
 For details and examples, including important formatting requirements, see
 [alert]. For implementation details, see PR [#941].
 
-## {{% _param FA universal-access info %}} Accessibility improvements {#accessibility}
+## {{% _param FAS universal-access info %}} Accessibility improvements {#accessibility}
 
 - <i class="fa-solid fa-palette fa-lg text-info px-1"></i> **Color contrast**
   has been improved throughout the theme, and Docsy now falls back to Bootstrap
   defaults for typography and color. This ensures better accessibility
   compliance out of the box. For details, see [#2285] and [Site colors][].
 
-- {{% _param FA palette info %}} **Color contrast** improvements for dark mode:
+- {{% _param FAS palette info %}} **Color contrast** improvements for dark mode:
   - TOC entry color contrast has been fixed when user preferences differ from
     system settings ([#2379]).
 
@@ -183,10 +183,10 @@ For details and examples, including important formatting requirements, see
     to pick colors with good color-contrast][].
     {{% _param BADGE EXPERIMENTAL info %}}
 
-- {{% _param FA moon info %}} **[Dark mode][]**:
-  - {{% _param FA bolt warning %}} [Flash Of Unstyled Content][] (FOUC) has been
-    fixed ([#2332]).
-  - {{% _param FA search info %}} **Google search** results page now supports
+- {{% _param FAS moon info %}} **[Dark mode][]**:
+  - {{% _param FAS bolt warning %}} [Flash Of Unstyled Content][] (FOUC) has
+    been fixed ([#2332]).
+  - {{% _param FAS search info %}} **Google search** results page now supports
     dark-mode ([#2387]). {{%_param BADGE EXPERIMENTAL info %}}
 
   > [!SECONDARY] Dark mode quick reference
@@ -253,17 +253,17 @@ For details and examples, including important formatting requirements, see
 [diagrams-formulae]:
   /docs/content/diagrams-and-formulae/#latex-support-with-katex
 
-## {{% _param FA rocket primary %}} Upgrade to 0.13.0 {#upgrade}
+## {{% _param FAS rocket primary %}} Upgrade to 0.13.0 {#upgrade}
 
 ### Prerequisites
 
-> {{% _param FA triangle-exclamation warning %}} **We recommend** that you
+> {{% _param FAS triangle-exclamation warning %}} **We recommend** that you
 > [Upgrade to Docsy 0.12.0][] first because it contains significant breaking
 > changes.
 
 ### Upgrade procedure and AI help {#upgrading-and-ai}
 
-> {{% _param FA robot info %}} Have you used AI to help you upgrade Docsy? It
+> {{% _param FAS robot info %}} Have you used AI to help you upgrade Docsy? It
 > can be a big help!
 
 The [0.12.0 upgrade guide][] was written with both human project maintainers and
@@ -319,10 +319,10 @@ currently _most upvoted_ enhancement requests include:
 <!-- prettier-ignore -->
 > [!INFO] Your opinion counts!
 >
-> - {{% _param FA thumbs-up success %}} If you'd like a feature or fix to be
+> - {{% _param FAS thumbs-up success %}} If you'd like a feature or fix to be
 >   considered for inclusion in an upcoming release, **upvote** (with a thumbs
 >   up) the associated issue or PR.
-> - {{% _param FA star warning %}} If you find Docsy useful, consider [starring
+> - {{% _param FAS star warning %}} If you find Docsy useful, consider [starring
 >   the repository][star-the-repo] to show your support.
 {._list-unstyled}