Docs: Fix long words breaking the site on small screens (#2521)

* Add overflow wrap for long words

* Fix specific case of overflowing text
This commit is contained in:
FireIsGood 2024-06-13 00:39:44 -07:00 committed by GitHub
parent c7f601f03e
commit 68a7002b43
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 1 deletions

View File

@ -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. 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. 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`. running `zola serve` because it has been loaded but it will fail during `zola build`.
## Using shortcodes ## Using shortcodes

View File

@ -18,6 +18,9 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
// Stop long words from breaking mobile
overflow-wrap: break-word;
} }
img { img {