Improve rendering of site footer

This commit is contained in:
Ashwin Maroli 2025-01-02 22:28:17 +05:30
parent d20aef3c1c
commit dfa5f036f7
2 changed files with 18 additions and 25 deletions

View File

@ -1,23 +1,18 @@
<footer>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<div class="unit two-thirds center-on-mobiles">
<p>Jekyll is lovingly maintained by the <a href="{{ '/team/' | relative_url }}">core team</a> of volunteers. </p>
<p>The contents of this website are <br />&copy;&nbsp;{{ site.time | date: '%Y' }} under the terms of the <a href="{{ site.repository }}/blob/master/LICENSE">MIT&nbsp;License</a>.</p>
<p>The contents of this website are <br />&copy;&nbsp;{{ site.time | date: '%Y' }} under the terms of the <a href="{{ site.repository }}/blob/master/LICENSE">MIT License</a>.</p>
</div>
<div class="unit two-thirds align-right center-on-mobiles">
<div class="unit one-third align-right center-on-mobiles">
<p>
Proudly hosted by
<a href="https://github.com">
<img src="{{ 'img/footer-logo.png' | relative_url }}" width="100" height="30" alt="GitHub • Social coding">
</a>
</p>
</div>
<div class="unit two-thirds align-right center-on-mobiles">
<p>
Jekyll is funded thanks to its
<a href="https://github.com/jekyll/jekyll#sponsors">
sponsors!
</a>
Jekyll is funded thanks to its <a href="https://github.com/jekyll/jekyll#sponsors">sponsors!</a>
</p>
</div>
</div>

View File

@ -212,40 +212,38 @@ h6:hover .header-link {
/* Footer */
footer {
background-color: #212121;
font-size: 16px;
padding-bottom: 5px;
color: #c0c0c0;
margin-top: 40px;
padding-bottom: 5px;
font-size: 15px;
font-weight: 400;
color: #999999;
background-color: #212121;
a {
color: #fff;
color: #dddddd;
&:hover {
img { opacity: 1; }
}
}
.align-right {
p { display: inline-block; }
}
p { margin-block: 12px }
img {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
opacity: .8;
width: 84px;
height: auto;
margin-left: 2px;
padding: 1px;
@include transition(opacity .2s);
vertical-align: bottom;
opacity: 0.5;
@include transition(opacity 0.2s);
}
}
@media (max-width: 568px) {
footer {
.one-third p { margin-bottom: 0; }
.two-thirds p { margin-top: -20px; }
p { margin-block: 6px }
}
}