Skip to content

Commit

Permalink
Remove excess padding from footer on docs pages & remove temp scss fo…
Browse files Browse the repository at this point in the history 
…r navigation
  • Loading branch information
@petesfrench
petesfrench committed Jan 18, 2024
1 parent fd40e6d commit 5e56093
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 125 deletions.
12 changes: 2 additions & 10 deletions static/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,12 @@ $breakpoint-medium: 619px;
}
}

// TODO: to be removed when fixed in Vanilla
// https://github.com/canonical/vanilla-framework/issues/4947
body:not(.docs) .p-navigation__banner {
padding-left: 0;
}


.u-hide--x-large {
@media only screen and (min-width: $grid-max-width) {
display: none;
Expand Down Expand Up @@ -287,12 +288,3 @@ html {
.github-buttons {
margin-bottom: $sp-medium;
}

// TODO: to be removed when properly fixed on Vanilla side
// https://github.com/canonical/vanilla-framework/issues/4898
@media screen and (min-width: $breakpoint-navigation-threshold) {
// align navigation items with grid in docs layout
.l-docs__subgrid .p-navigation__row {
padding-left: 0.5rem;
}
}
232 changes: 117 additions & 115 deletions templates/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,133 +1,135 @@
{% macro footer_contents() %}
<footer class="p-strip--dark footer">
<div class="p-section">
<div class="row u-vertically-center">
<div class="col-7">
<h2>Join the community</h2>
</div>
<div class="col-5">
<ul class="p-inline-list u-no-margin--bottom">
<li class="p-inline-list__item">
<a href="https://github.com/juju" class="p-icon--github p-icon--github-white"></a>
</li>
<li class="p-inline-list__item">
<a href="https://twitter.com/ubuntu" class="p-icon--twitter"></a>
</li>
<li class="p-inline-list__item">
<a href="https://www.youtube.com/@UbuntuOS" class="p-icon--youtube"></a>
</li>
</ul>
</div>
<div class="p-section">
<div class="row u-vertically-center">
<div class="col-7">
<h2>Join the community</h2>
</div>
<div class="col-5">
<ul class="p-inline-list u-no-margin--bottom">
<li class="p-inline-list__item">
<a href="https://github.com/juju" class="p-icon--github p-icon--github-white"></a>
</li>
<li class="p-inline-list__item">
<a href="https://twitter.com/ubuntu" class="p-icon--twitter"></a>
</li>
<li class="p-inline-list__item">
<a href="https://www.youtube.com/@UbuntuOS" class="p-icon--youtube"></a>
</li>
</ul>
</div>
</div>
</div>

<div class="p-section">
<div class="u-fixed-width"><hr class="p-rule is-dark"></div>
<div class="row">
<div class="col-3">
<h2 class="p-heading--5">Juju</h2>
<ul class="p-list">
<li class="p-list__item">
<a href="/#what-is-juju">What is Juju?</a>
</li>
<li class="p-list__item">
<a href="https://charmhub.io">What is Charmhub?</a>
</li>
<li class="p-list__item">
<a href="/docs/juju/reference">What are Charms?</a>
</li>
<li class="p-list__item">
<a href="/docs/sdk">What is the Charm SDK?</a>
</li>
</ul>
</div>
<div class="col-3">
<h2 class="p-heading--5">Charms</h2>
<ul class="p-list">
<li class="p-list__item">
<a href="https://charmhub.io/?base=all&filter=databases,big-data">Data</a>
</li>
<li class="p-list__item">
<a href="https://ubuntu.com/kubernetes">Charmed Kubernetes</a>
</li>
<li class="p-list__item">
<a href="https://ubuntu.com/openstack">Charmed OpenStack</a>
</li>
<li class="p-list__item">
<a class="p-heading--5" href="https://charmhub.io/">All operators&nbsp;&rsaquo;</a>
</li>
</ul>
</div>
<div class="col-3">
<h2 class="p-heading--5">Compare</h2>
<ul class="p-list">
<li class="p-list__item">
<a href="/blog/operators-and-charmed-operators">Operators & Charms</a>
</li>
<li class="p-list__item">
<a href="/blog/beyond-helm-and-kustomize-the-future-of-kubernetes-apps">Helm alternative</a>
</li>
<li class="p-list__item">
<a href="/blog/beyond-helm-and-kustomize-the-future-of-kubernetes-apps">Kustomize alternative</a>
</li>
<li class="p-list__item">
<a href="/blog/ansible-vs-terraform-vs-juju-fight-or-cooperation">Ansible alternative</a>
</li>
<li class="p-list__item">
<a href="/blog/juju-vs-infrastructure-as-code-tools">Terraform alternative</a>
</li>
</ul>
</div>
<div class="col-3">
<h2 class="p-heading--5">Blog</h2>
<ul class="p-list">
<li class="p-list__item">
<a href="/blog/ubuntu-and-canonical-at-kubecon-europe-2021">Best Practices for creating charms</a>
</li>
<li class="p-list__item">
<a href="/model-driven-operations-manifesto">Model Driven Operations Manifesto</a>
</li>
<li class="p-list__item">
<a href="/blog/beyond-helm-and-kustomize-the-future-of-kubernetes-apps">Why Helm and Kustomize aren’t enough: the future of Kubernetes apps</a>
</li>
<li class="p-list__item">
<a class="p-heading--5" href="/blog">Read all of our blogs&nbsp;&rsaquo;</a>
</li>
</ul>
</div>
<div class="p-section">
<div class="u-fixed-width"><hr class="p-rule is-dark"></div>
<div class="row">
<div class="col-3">
<h2 class="p-heading--5">Juju</h2>
<ul class="p-list">
<li class="p-list__item">
<a href="/#what-is-juju">What is Juju?</a>
</li>
<li class="p-list__item">
<a href="https://charmhub.io">What is Charmhub?</a>
</li>
<li class="p-list__item">
<a href="/docs/juju/reference">What are Charms?</a>
</li>
<li class="p-list__item">
<a href="/docs/sdk">What is the Charm SDK?</a>
</li>
</ul>
</div>
<div class="col-3">
<h2 class="p-heading--5">Charms</h2>
<ul class="p-list">
<li class="p-list__item">
<a href="https://charmhub.io/?base=all&filter=databases,big-data">Data</a>
</li>
<li class="p-list__item">
<a href="https://ubuntu.com/kubernetes">Charmed Kubernetes</a>
</li>
<li class="p-list__item">
<a href="https://ubuntu.com/openstack">Charmed OpenStack</a>
</li>
<li class="p-list__item">
<a class="p-heading--5" href="https://charmhub.io/">All operators&nbsp;&rsaquo;</a>
</li>
</ul>
</div>
<div class="col-3">
<h2 class="p-heading--5">Compare</h2>
<ul class="p-list">
<li class="p-list__item">
<a href="/blog/operators-and-charmed-operators">Operators & Charms</a>
</li>
<li class="p-list__item">
<a href="/blog/beyond-helm-and-kustomize-the-future-of-kubernetes-apps">Helm alternative</a>
</li>
<li class="p-list__item">
<a href="/blog/beyond-helm-and-kustomize-the-future-of-kubernetes-apps">Kustomize alternative</a>
</li>
<li class="p-list__item">
<a href="/blog/ansible-vs-terraform-vs-juju-fight-or-cooperation">Ansible alternative</a>
</li>
<li class="p-list__item">
<a href="/blog/juju-vs-infrastructure-as-code-tools">Terraform alternative</a>
</li>
</ul>
</div>
<div class="col-3">
<h2 class="p-heading--5">Blog</h2>
<ul class="p-list">
<li class="p-list__item">
<a href="/blog/ubuntu-and-canonical-at-kubecon-europe-2021">Best Practices for creating charms</a>
</li>
<li class="p-list__item">
<a href="/model-driven-operations-manifesto">Model Driven Operations Manifesto</a>
</li>
<li class="p-list__item">
<a href="/blog/beyond-helm-and-kustomize-the-future-of-kubernetes-apps">Why Helm and Kustomize aren’t enough: the future of Kubernetes apps</a>
</li>
<li class="p-list__item">
<a class="p-heading--5" href="/blog">Read all of our blogs&nbsp;&rsaquo;</a>
</li>
</ul>
</div>
</div>
</div>

<div class="p-section">
<div class="u-fixed-width"><hr class="p-rule is-dark"></div>
<div class="row">
<div class="col-3">
<p>&copy; {{ current_year }} Canonical Ltd.</p>
</div>
<div class="col-3">
<p>
<a class="js-revoke-cookie-manager" href="">Manage your tracker settings</a>
<br>
<a href="https://www.ubuntu.com/legal">Legal Information</a>
</p>
</div>
<div class="col-6">
<p>
Ubuntu and Canonical are registered trademarks.<br>
All other trademarks are the property of their respective owners.
</p>
</div>
<div class="p-section">
<div class="u-fixed-width"><hr class="p-rule is-dark"></div>
<div class="row">
<div class="col-3">
<p>&copy; {{ current_year }} Canonical Ltd.</p>
</div>
<div class="col-3">
<p>
<a class="js-revoke-cookie-manager" href="">Manage your tracker settings</a>
<br>
<a href="https://www.ubuntu.com/legal">Legal Information</a>
</p>
</div>
<div class="col-6">
<p>
Ubuntu and Canonical are registered trademarks.<br>
All other trademarks are the property of their respective owners.
</p>
</div>
</div>
</footer>
</div>
{% endmacro%}

{% if is_docs %}
<div class="p-strip--dark footer l-docs__subgrid">
<div class="l-docs__main">
{{ footer_contents() }}
<footer class="footer">
{{ footer_contents() }}
</footer>
</div>
</div>
{% else %}
{{ footer_contents() }}
<footer class="p-strip--dark footer">
{{ footer_contents() }}
</footer>
{% endif %}

0 comments on commit 5e56093

Please sign in to comment.