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> <footer>
<div class="grid"> <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>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>
<div class="unit two-thirds align-right center-on-mobiles"> <div class="unit one-third align-right center-on-mobiles">
<p> <p>
Proudly hosted by Proudly hosted by
<a href="https://github.com"> <a href="https://github.com">
<img src="{{ 'img/footer-logo.png' | relative_url }}" width="100" height="30" alt="GitHub • Social coding"> <img src="{{ 'img/footer-logo.png' | relative_url }}" width="100" height="30" alt="GitHub • Social coding">
</a> </a>
</p> </p>
</div>
<div class="unit two-thirds align-right center-on-mobiles">
<p> <p>
Jekyll is funded thanks to its Jekyll is funded thanks to its <a href="https://github.com/jekyll/jekyll#sponsors">sponsors!</a>
<a href="https://github.com/jekyll/jekyll#sponsors">
sponsors!
</a>
</p> </p>
</div> </div>
</div> </div>

View File

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