Commit 851953a7 authored by Oliver Smith's avatar Oliver Smith

use grid in bottom buttons to fix display issues

It was reported in the chat with a screenshot, that the bottom buttons
don't look right. Fix it with more grid.
parent 709cd2f2
......@@ -176,6 +176,7 @@ footer {
grid-template-areas: "contribute . nav-bottom"
"contribute . copyright";
grid-template-columns: auto 1fr auto;
align-items: center;
background-image: url(/static/img/nexus5-bg-bottom.jpg);
}
......@@ -183,64 +184,62 @@ footer {
.nav-bottom {
grid-area: nav-bottom;
margin: 15px 30px 0px;
text-align: right;
}
.nav-bottom img {
width: 16px;
height: 16px;
margin-right: 10px;
}
.nav-bottom a {
/* GRID: ICON BUTTON */
.icon-button {
display: inline-grid;
grid-template-areas: "icon-button-icon icon-button-label";
grid-template-columns: auto auto;
padding: 0px 10px;
align-items: center;
background: white;
padding: 5px 10px;
margin-left: 10px;
text-decoration: none;
margin-left: 2px;
}
.copyright {
grid-area: copyright;
.icon-button img {
grid-area: icon-button-icon;
width: 16px;
height: 16px;
margin-right: 5px;
}
color: white;
margin: 5px 30px 15px;
font-size: 11pt;
text-align: right;
.icon-button span {
grid-area: icon-button-label;
text-decoration: underline;
}
.nav-bottom:hover img, .contribute:hover img {
/* obviously this changes the color to green */
.icon-button:hover img {
/* Obviously this changes the color to green */
filter: sepia(1) saturate(5) hue-rotate(80deg);
}
/* GRID: CONTRIBUTE */
.contribute {
grid-area: contribute;
display: grid;
grid-template-areas: "contrib-img contrib-span";
grid-template-columns: 60px 1fr;
grid-template-rows: 2px
1fr;
background: white;
padding: 10px 20px 0px;
margin: 15px 30px;
text-decoration: none;
font-size: 20pt;
height: 60px;
padding: 10px 20px;
margin: 0px 30px;
}
.contribute span {
text-decoration: none;
}
.contribute img {
grid-area: contrib-img;
width: 48px;
height: 48px;
margin-right: 10px;
}
.contribute span {
grid-area: contrib-span;
}
.copyright {
grid-area: copyright;
color: white;
margin: 5px 30px 15px;
font-size: 11pt;
text-align: right;
}
/* RESPONSIVENESS */
@media screen and (max-width: 800px) {
......@@ -267,30 +266,25 @@ footer {
/* FOOTER */
footer {
grid-template-areas: "nav-bottom"
"contribute"
grid-template-areas: "contribute"
"nav-bottom"
"copyright";
grid-template-columns: 100%;
}
.nav-bottom {
text-align: left;
text-align: center;
}
.nav-bottom a {
display: inline-block;
padding: 0px 10px;
margin: 0px 10px 15px 0px;
font-size: 12pt;
.nav-bottom .icon-button {
margin: 0px 2px 10px;
}
.nav-bottom .icon-button img {
margin-right: 10px;
}
.contribute {
margin: 0px 30px 0px;
margin: 15px auto 0px;
}
.copyright {
text-align: left;
margin: 15px 30px;
text-align: center;
}
}
@media screen and (max-width: 600px) {
......
......@@ -54,21 +54,25 @@
{% endblock %}
</main>
<footer class="footer">
<a href="https://wiki.postmarketos.org/wiki/Contributing" class="contribute">
<a href="https://wiki.postmarketos.org/wiki/Contributing" class="icon-button contribute">
<img src="/static/img/icons-numix/emote-love-symbolic.svg">
<span>Contribute</span>
</a>
<div class="nav-bottom">
<!-- scroll to top: the JS version is slightly nicer, as it does not change the URL.
but the non-JS version works as well. -->
<a href="#^" onclick="window.scrollTo(0,0); return false">
<img src="/static/img/icons-numix/go-top-symbolic.svg"
>back to top
<a href="#^" onclick="window.scrollTo(0,0); return false" class="icon-button">
<img src="/static/img/icons-numix/go-top-symbolic.svg">
<span>back to top</span>
</a>
<a href="/blog/feed.atom" class="icon-button">
<img src="/static/img/icons-numix/application-rss+xml-symbolic.svg">
<span>feed</span>
</a>
<a href="/privacy-policy.html" class="icon-button">
<img src="/static/img/icons-numix/changes-secure-symbolic.svg">
<span>privacy policy</span>
</a>
<a href="/blog/feed.atom"><img src="/static/img/icons-numix/application-rss+xml-symbolic.svg"
>feed</a>
<a href="/privacy-policy.html"><img src="/static/img/icons-numix/changes-secure-symbolic.svg"
>privacy policy</a>
</div>
<div class="copyright">
&copy; 2019 postmarketOS.org contributors
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment