You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2020/07/29 08:40:40 UTC
[camel-website] 01/06: CAMEL-15185: add footer design for hugo page
- desktop version
This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git
commit 2d5a8a37c88b68b149be3f5e8b7ab6cf3be02d4c
Author: Aemie <ae...@hotmail.co.uk>
AuthorDate: Wed Jul 8 10:14:46 2020 +0530
CAMEL-15185: add footer design for hugo page - desktop version
---
antora-ui-camel/src/css/footer.css | 71 ++++++++++++++++++++++++++++++++++----
antora-ui-camel/src/css/vars.css | 2 +-
layouts/partials/footer.html | 44 +++++++++++++++++------
3 files changed, 100 insertions(+), 17 deletions(-)
diff --git a/antora-ui-camel/src/css/footer.css b/antora-ui-camel/src/css/footer.css
index 3bae8e3..83ea640 100644
--- a/antora-ui-camel/src/css/footer.css
+++ b/antora-ui-camel/src/css/footer.css
@@ -19,12 +19,46 @@ footer .footer {
footer .footer p {
flex-basis: 100%;
- margin: 0.5rem 0;
+ margin: 3rem 0 0.5rem 0;
padding: 0 1rem;
}
+footer .footer p.remark::after {
+ content: '';
+ display: block;
+ position: relative;
+ height: 1px;
+ width: 25rem;
+ margin: 2rem auto 1rem auto;
+ background: var(--footer-font-color);
+}
+
footer .footer a {
- color: var(--footer-link-font-color);
+ color: var(--footer-font-color);
+}
+
+footer .footer .context {
+ display: inline-block;
+ margin: 0 0 1rem 0;
+}
+
+footer .footer .context a {
+ font-size: 18px;
+ text-transform: uppercase;
+}
+
+footer .footer .context a::after {
+ content: ' ';
+ display: inline-block;
+ border-radius: 50%;
+ width: 8px;
+ height: 8px;
+ margin: 0 1rem;
+ background: var(--footer-font-color);
+}
+
+footer .footer .context:last-child a::after {
+ display: none;
}
footer .footer figure.logo {
@@ -32,12 +66,11 @@ footer .footer figure.logo {
flex-grow: 1;
align-items: flex-start;
justify-content: center;
- text-align: center;
+ margin-inline-start: 0;
}
footer .footer figure.logo img {
width: 6rem;
- height: 100%;
}
footer .footer dl {
@@ -45,7 +78,11 @@ footer .footer dl {
flex-grow: 1;
align-items: flex-start;
justify-content: center;
- margin-left: 1rem;
+ margin: 3rem 0 0 1rem;
+}
+
+footer .footer dl:first-child {
+ margin-top: 0;
}
footer .footer dl dt {
@@ -69,7 +106,7 @@ footer .footer dl dd {
margin: 0;
}
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 874px) {
footer .footer figure.logo {
display: none;
}
@@ -90,3 +127,25 @@ footer .footer dl dd {
border-radius: 0.4rem 0.4rem 0 0;
height: 2rem;
}
+
+footer .footer .break-row-footer {
+ display: block;
+ flex-basis: 100%;
+ height: 0;
+}
+
+footer .footer .navbar-tools {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ line-height: 1.6;
+ padding: 0.5rem;
+ font-weight: bold;
+}
+
+footer .footer .navbar-tools .brand-icon {
+ height: 2em;
+ width: 1.75em;
+ margin: 0.35rem;
+ fill: var(--navbar-font-color);
+}
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index d8a0edf..40c2849 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -129,7 +129,7 @@
--frontpage-max-width: calc(1366 / var(--rem-base) * 1rem);
/* footer */
--footer-line-height: var(--doc-line-height);
- --footer-background: var(--color-smoke-90);
+ --footer-background: var(--color-smoke-50);
--footer-font-color: var(--color-gray-70);
--footer-link-font-color: var(--color-jet-80);
--footer-height: 23rem; /* empirically corresponding current design of the foooter */
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index a490a2c..72ca3cd 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,24 +6,35 @@
</div>
<footer>
<div class="footer">
- <figure class="logo">
- <img class="logo" src="/_/img/logo-d.svg" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
- </figure>
-
<dl>
+ <figure class="logo">
+ <img class="logo" src="/_/img/logo-d.svg" alt="Apache Camel Logo"
+ aria-label="white silhouette of a camel in front of a sand dune">
+ </figure>
<dt>Overview</dt>
<dd><a href="/blog/">Blog</a></dd>
- <dd><a href="/components/latest/">Components</a></dd>
- <dd><a href="/download/">Download</a></dd>
- <dd><a href="/manual/latest/getting-started.html">Getting started</a></dd>
+ <dd><a href="/docs/">Documentation</a></dd>
+ <dd><a href="/community/support/">Community</a></dd>
+ <dd><a href="/blog/">Download</a></dd>
+ </dl>
+
+ <dl>
+ <dt>Documentation</dt>
+ <dd><a href="/manual/latest/">User Manual</a></dd>
+ <dd><a href="/components/latest/index.html">Components</a></dd>
+ <dd><a href="/camel-k/latest/">Camel-K</a></dd>
+ <dd><a href="/camel-kafka-connector/latest/">Camel Kafka Connector</a></dd>
+ <dd><a href="/camel-quarkus/latest/">Camel Quarkus</a></dd>
+ <dd><a href="/camel-spring-boot/latest/">Camel Spring Boot</a></dd>
+ <dd><a href="/camel-karaf/latest/">Camel Karaf</a></dd>
<dd><a href="/manual/latest/faq/index.html">FAQ</a></dd>
</dl>
<dl>
<dt>Community</dt>
- <dd><a href="https://www.apache.org/foundation/policies/conduct">Code of conduct</a></d>
<dd><a href="/community/support/">Support</a></dd>
<dd><a href="/manual/latest/contributing.html">Contributing</a></dd>
+ <dd><a href="/manual/latest/mailing-lists.html">Mailing Lists</a></dd>
<dd><a href="/community/user-stories/">User stories</a></dd>
<dd><a href="/community/articles/">Articles</a></dd>
<dd><a href="/community/books/">Books</a></dd>
@@ -40,7 +51,7 @@
<dd><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
</dl>
- <p>
+ <p class="remark">
© 2004-{{ now.Format "2006" }} The <a href="https://apache.org">Apache Software Foundation</a>.<br>
Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
@@ -49,7 +60,20 @@
<a href="https://netlify.com">This site is powered by Netlify</a>
{{ end }}
</p>
-
+ <div class="resources">
+ <div class="context">
+ <a href="#">Privacy Policy</a>
+ </div>
+ <div class="context">
+ <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.apache.org/foundation/policies/conduct">Code of Conduct</a>
+ </div>
+ </div>
+ <div class="break-row-footer"></div>
+ <div id="social-media" class="navbar-tools">
+ <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon"><use href="{{ "_/img/brand-logos.svg#github" | relURL }}" /></svg></a>
+ <a rel="noopener noreferrer nofollow" href="https://gitter.im/apache/apache-camel" title="Chat on Gitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#gitter" | relURL }}" /></svg></a>
+ <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#twitter" | relURL }}" /></svg></a>
+ </div>
</div>
</footer>
<script src="{{ path.Join "_" (index .Site.Data "rev-manifest" "js/vendor/algoliasearch.js") | relURL }}"></script>