You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@shiro.apache.org by bm...@apache.org on 2021/09/03 19:59:46 UTC
[shiro-site] 03/06: [Bootstrap 5] Port footer
This is an automated email from the ASF dual-hosted git repository.
bmarwell pushed a commit to branch jbake
in repository https://gitbox.apache.org/repos/asf/shiro-site.git
commit 09ea12088bfb06788a821bae315a5ffb89b98fea
Author: Benjamin Marwell <bm...@apache.org>
AuthorDate: Fri Sep 3 20:55:06 2021 +0200
[Bootstrap 5] Port footer
- fix underlined space before tagline
- remove duplicate copyright-footer css class
---
.../fonts/bootstrap-icons.woff | Bin 0 -> 120468 bytes
.../fonts/bootstrap-icons.woff2 | Bin 0 -> 90528 bytes
jbake/assets/css/base.css | 54 +++++++++++++++++----
jbake/templates/footer.ftl | 40 +++++++--------
jbake/templates/header.ftl | 5 +-
5 files changed, 68 insertions(+), 31 deletions(-)
diff --git a/jbake/assets/bootstrap-icons-1.5.0/fonts/bootstrap-icons.woff b/jbake/assets/bootstrap-icons-1.5.0/fonts/bootstrap-icons.woff
new file mode 100644
index 0000000..8cd8946
Binary files /dev/null and b/jbake/assets/bootstrap-icons-1.5.0/fonts/bootstrap-icons.woff differ
diff --git a/jbake/assets/bootstrap-icons-1.5.0/fonts/bootstrap-icons.woff2 b/jbake/assets/bootstrap-icons-1.5.0/fonts/bootstrap-icons.woff2
new file mode 100644
index 0000000..3e587fd
Binary files /dev/null and b/jbake/assets/bootstrap-icons-1.5.0/fonts/bootstrap-icons.woff2 differ
diff --git a/jbake/assets/css/base.css b/jbake/assets/css/base.css
index 5bd3da6..f49237e 100644
--- a/jbake/assets/css/base.css
+++ b/jbake/assets/css/base.css
@@ -20,16 +20,14 @@ body {
padding:0 10px 0 10px;
}
-#footer {
- width: 100%;
+#custom-footer {
min-height: 60px;
background-color: #e8e8e8;
- padding: 10px 0px 0px 0px;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
- #footer {
+ #custom-footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
@@ -81,17 +79,55 @@ body {
margin-left: 50px;
}
-.copyright-footer {
- margin-left: 50px;
-}
-
@media screen and (min-width: 1024px) {
.footer-shield {
position: absolute;
width: 103px;
height: 113px;
- right: -80px;
+ right: 80px;
top: -80px;
background:url('/img/footer-shield.png') no-repeat;
}
}
+
+
+.social-icon {
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ font-size: 14px;
+ border-radius: 7px;
+ margin-right: 11px;
+ cursor: pointer
+}
+
+.social-twitter {
+ background-color: #55acee
+}
+
+.social-facebook {
+ background-color: #3b5999
+}
+
+.social-linkedin {
+ background-color: #0077B5
+}
+
+.social-google {
+ background-color: #dd4b39
+}
+
+.social-instagram {
+ background-color: #dd4b39
+}
+
+.social-icon i {
+ transition: 0.4s all
+}
+
+.social-icon:hover i {
+ transform: scale(1.1)
+}
diff --git a/jbake/templates/footer.ftl b/jbake/templates/footer.ftl
index f2ecdd3..fa3a552 100644
--- a/jbake/templates/footer.ftl
+++ b/jbake/templates/footer.ftl
@@ -4,28 +4,30 @@
<div class="footer-padding"></div>
- <div id="footer" class="footer">
- <div class="col-md-5">
- <div class="copyright-footer">
- <a href="https://www.apache.org/foundation/contributing.html">Donate to the ASF</a> |
- <a href="https://www.apache.org/licenses/LICENSE-2.0.html">License</a>
- <p>Copyright © 2008-${.now?string('yyyy')} The Apache Software Foundation</p>
+ <div class="container-fluid" id="custom-footer">
+ <footer class="row justify-content-between align-items-center border-top">
+ <div class=" col-md-5">
+ <div class="copyright-footer d-flex flex-wrap justify-content-start">
+ <a href="https://www.apache.org/foundation/contributing.html">Donate to the ASF</a> |
+ <a href="https://www.apache.org/licenses/LICENSE-2.0.html">License</a>
+ <p class="text-muted">Copyright © 2008-${.now?string('yyyy')} The Apache Software Foundation</p>
+ </div>
</div>
- </div>
-
- <div class="social col-md-2">
- <a class="btn btn-primary" style="background-color: #55acee;" href="#!" role="button"><i class="fab fa-twitter"> </i></a>
- <a class="btn btn-primary" style="background-color: #3b5998;" href="#!" role="button"><i class="fab fa-facebook-f"> </i></a>
- <a class="btn btn-primary" style="background-color: #0082ca;" href="#!" role="button"><i class="fab fa-linkedin-in"> </i></a>
- </div>
-
- <div class="col-md-2"></div>
- <div class="col-md-2 editThisPage" id="editThisPage">
- <#if (content.file)??><input type="hidden" id="ghEditPage" value="${content.file}"></input></#if>
- <div class="footer-shield"></div>
- </div>
+
+ <div class="d-flex col-md-1">
+ <a class="btn"><span class="social-icon social-twitter"><i class="bi bi-twitter"></i></span></a>
+ <a class="btn"><span class="social-icon social-facebook"><i class="bi bi-facebook"></i></span></a>
+ <a class="btn"><span class="social-icon social-linkedin"><i class="bi bi-linkedin"></i></span></a>
+ </div>
+
+ <ul class="d-flex justify-content-end col-md-5" style="position: relative">
+ <#if (content.file)??><input type="hidden" id="ghEditPage" value="${content.file}"></input></#if>
+ <div class="footer-shield"></div>
+ </ul>
+ </footer>
</div>
+
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
diff --git a/jbake/templates/header.ftl b/jbake/templates/header.ftl
index a150927..f38c386 100644
--- a/jbake/templates/header.ftl
+++ b/jbake/templates/header.ftl
@@ -42,6 +42,7 @@
<!-- Le styles -->
<link href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/bootstrap.min.css" rel="stylesheet">
+ <link href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>bootstrap-icons-1.5.0/bootstrap-icons.css" rel="stylesheet">
<link href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/asciidoctor.css" rel="stylesheet">
<link href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/base.css" rel="stylesheet">
<link href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/prettify.css" rel="stylesheet">
@@ -62,9 +63,7 @@
<div class="masthead">
<p class="lead">
- <a href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>/index.html">
- <img src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>/img/apache-shiro-logo.png" style="height:100px; width:auto; vertical-align: bottom; margin-top: 20px;">
- </a>
+ <a href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>/index.html"><img src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>img/apache-shiro-logo.png" style="height:100px; width:auto; vertical-align: bottom; margin-top: 20px;"></a>
<span class="tagline">Simple. Java. Security.</span>
<a class="pull-right" href="https://www.apache.org/events/current-event.html">
<img style="padding-top: 8px" src="https://www.apache.org/events/current-event-125x125.png"/>