From 68a7002b43791d1ec4ecba0e00e30383cee14f3a Mon Sep 17 00:00:00 2001 From: FireIsGood Date: Thu, 13 Jun 2024 00:39:44 -0700 Subject: [PATCH] Docs: Fix long words breaking the site on small screens (#2521) * Add overflow wrap for long words * Fix specific case of overflowing text --- docs/content/documentation/content/shortcodes.md | 2 +- docs/sass/_base.scss | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/content/documentation/content/shortcodes.md b/docs/content/documentation/content/shortcodes.md index fd652249..6976b8ea 100644 --- a/docs/content/documentation/content/shortcodes.md +++ b/docs/content/documentation/content/shortcodes.md @@ -59,7 +59,7 @@ This will create a shortcode `books` with the argument `path` pointing to a `.to titles and descriptions. They will flow with the rest of the document in which `books` is called. Shortcodes are rendered before the page's Markdown is parsed so they don't have access to the page's table of contents. -Because of that, you also cannot use the [`get_page`](@/documentation/templates/overview.md#get-page)/[`get_section`](@/documentation/templates/overview.md#get-section)/[`get_taxonomy`](@/documentation/templates/overview.md#get-taxonomy)/[`get_taxonomy_term`](@/documentation/templates/overview.md#get-taxonomy-term) global functions. It might work while +Because of that, you also cannot use the [`get_page`](@/documentation/templates/overview.md#get-page) / [`get_section`](@/documentation/templates/overview.md#get-section) / [`get_taxonomy`](@/documentation/templates/overview.md#get-taxonomy) / [`get_taxonomy_term`](@/documentation/templates/overview.md#get-taxonomy-term) global functions. It might work while running `zola serve` because it has been loaded but it will fail during `zola build`. ## Using shortcodes diff --git a/docs/sass/_base.scss b/docs/sass/_base.scss index e6796e22..8f37b740 100644 --- a/docs/sass/_base.scss +++ b/docs/sass/_base.scss @@ -18,6 +18,9 @@ body { display: flex; flex-direction: column; min-height: 100vh; + + // Stop long words from breaking mobile + overflow-wrap: break-word; } img {