Docs: Modernize footer design and improve visual hierarchy #40969
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,78 @@ | ||
| <footer class="bd-footer py-5 mt-5 bg-primary-subtle"> | ||
| <div class="container py-5 px-4 px-md-3"> | ||
| <div class="row g-4"> | ||
| <!-- Brand Column --> | ||
| <div class="col-lg-3 mb-3"> | ||
| <div class="mb-4"> | ||
| <a class="d-inline-flex align-items-center text-primary text-decoration-none" href="/" aria-label="Bootstrap"> | ||
| {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }} | ||
| <span class="fs-4 fw-semibold">Bootstrap</span> | ||
| </a> | ||
| </div> | ||
| <ul class="list-unstyled small text-body-secondary"> | ||
| <li class="mb-3">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/" class="text-decoration-none text-primary">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors" class="text-decoration-none text-primary">our contributors</a>.</li> | ||
| <li class="mb-3">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener" class="text-decoration-none text-primary">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener" class="text-decoration-none text-primary">CC BY 3.0</a>.</li> | ||
| <li class="mb-3">Currently v{{ .Site.Params.current_version }}</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <!-- Links Column --> | ||
| <div class="col-6 col-lg-2 offset-lg-1"> | ||
| <h5 class="fw-semibold mb-4">Links</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-3"><a href="/" class="text-decoration-none text-body-secondary hover-primary">Home</a></li> | ||
| <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/" class="text-decoration-none text-body-secondary hover-primary">Docs</a></li> | ||
| <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/examples/" class="text-decoration-none text-body-secondary hover-primary">Examples</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.icons }}" class="text-decoration-none text-body-secondary hover-primary">Icons</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.themes }}" class="text-decoration-none text-body-secondary hover-primary">Themes</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.blog }}" class="text-decoration-none text-body-secondary hover-primary">Blog</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.swag }}" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Swag Store</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <!-- Guides Column --> | ||
| <div class="col-6 col-lg-2"> | ||
| <h5 class="fw-semibold mb-4">Guides</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/" class="text-decoration-none text-body-secondary hover-primary">Getting started</a></li> | ||
| <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/examples/starter-template/" class="text-decoration-none text-body-secondary hover-primary">Starter template</a></li> | ||
| <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/" class="text-decoration-none text-body-secondary hover-primary">Webpack</a></li> | ||
| <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/" class="text-decoration-none text-body-secondary hover-primary">Parcel</a></li> | ||
| <li class="mb-3"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/" class="text-decoration-none text-body-secondary hover-primary">Vite</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <!-- Projects Column --> | ||
| <div class="col-6 col-lg-2"> | ||
| <h5 class="fw-semibold mb-4">Projects</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Bootstrap 5</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Bootstrap 4</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.github_org }}/icons" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Icons</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.github_org }}/rfs" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">RFS</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.github_org }}/examples" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Examples repo</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <!-- Community Column --> | ||
| <div class="col-6 col-lg-2"> | ||
| <h5 class="fw-semibold mb-4">Community</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap/issues" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Issues</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Discussions</a></li> | ||
| <li class="mb-3"><a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Corporate sponsors</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Open Collective</a></li> | ||
| <li class="mb-3"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Stack Overflow</a></li> | ||
|
There was a problem hiding this comment. For the links style, it should be handled in the corresponding (S)CSS file, not by repeating classes all over the file. |
||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <style> | ||
|
There was a problem hiding this comment. This page can't use |
||
| /* Add these styles to your CSS */ | ||
| .hover-primary:hover { | ||
| color: var(--bs-primary) !important; | ||
| transition: color 0.2s ease-in-out; | ||
| } | ||
| </style> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The comments added in this PR can be removed.