Browse Source

adding a footer for blog section.

pull/1/head
urbasius 8 months ago
parent
commit
ec8a851f15
  1. 28
      css/media-queries.css
  2. 104
      css/style.css
  3. 1
      grav-theme-disrootblog
  4. BIN
      images/d-white.png
  5. 3
      templates/partials/base.html.twig
  6. 21
      templates/partials/footer.html.twig

28
css/media-queries.css

@ -0,0 +1,28 @@
@media only screen and (max-width: 830px) {
/* Footer
------------------------------------*/
footer {
letter-spacing: 0.5px;
margin-bottom: 0px;
height: 100%;
}
footer div#footer-links ul li {
padding-left: 5px;
padding-right: 5px;
}
/* Icons */
footer #footer-icons { display: none; }
footer #footer-logo { display: none; }
/* Go To Top Button */
#go-top { margin-left: -22px; }
#go-top a {
width: 54px;
height: 54px;
font-size: 18px;
line-height: 54px;
}
}

104
css/style.css

@ -1719,6 +1719,110 @@ p.form-allowed-tags {
/* 11. Footer
/* -------------------------------------------------------------------------------- */
footer {
background-color: #50162D;
color: #FFFFFF;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #b9a2ab;
font-weight: 600;
line-height: 8px;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
height: 82px;
}
footer #footer-logo {
height: 45px;
width: 15%;
background: url("../images/d-white.png") no-repeat left center;
background-size: 40px 40px;
margin-left: 30px;
opacity: 0.7;
display: inline-block;
}
footer .dot {
height: 5px;
width: 5px;
background-color: #b9a2ab;
border-radius: 50%;
display: inline-block;
margin-bottom: 2px;
}
footer #footer-links {
text-align: center;
width: 60%;
}
footer ul.footer-links {
display: flex;
justify-content: center;
align-items: center;
padding-left: 0;
margin-bottom: 24px;
margin-top: 12px;
word-break: normal;
}
footer ul.footer-icons {
display: flex;
justify-content: end;
margin-right: 30px;
align-items: center;
}
footer div#footer-links ul li {
padding-left: 20px;
padding-right: 20px;
margin: 0;
padding-top: 13px;
font-weight: 600;
}
footer #footer-links a {
color: #b9a2ab;
}
footer #footer-links a:hover {
color: #FFFFFF;
}
footer #footer-icons {
width: 25%;
background: transparent;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 24px;
margin-top: 12px;
}
footer #footer-icons ul li {
margin: 0;
padding-right: 10px;
padding-top: 10px;
text-align: right;
}
footer #footer-icons ul li .fa-fw {
color: white;
opacity: 0.7;
}
footer #footer-icons ul li .fa-fw:hover {
color: white;
opacity: 1;
}
footer a, footer a:visited { color: #FFFFFF; }
footer a:hover, footer a:focus { color: #1F5C60; }
.footer { background: #FFF; }
.footer-inner { padding: 50px 0; }

1
grav-theme-disrootblog

@ -0,0 +1 @@
/var/www//grav-theme-disrootblog

BIN
images/d-white.png

After

Width: 350  |  Height: 271  |  Size: 7.7 KiB

3
templates/partials/base.html.twig

@ -10,9 +10,12 @@
<!--link rel='stylesheet' id='lingonberry_googleFonts-css' href='//fonts.googleapis.com/css?family=Lato%3A400%2C700%2C400italic%2C700italic%7CRaleway%3A600%2C500%2C400&#038;ver=4.3.1' type='text/css' media='all' /-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
{% block stylesheets %}
{% do assets.addCss('theme://css/widget.css') %}
{% do assets.addCss('theme://css/style.css') %}
{% do assets.addCss('theme://css/media-queries.css') %}
{% do assets.addCss('theme://css/content.css') %}
{% do assets.addCss('theme://css/sidebar.css') %}
{% do assets.addCss('theme://css/lightbox.css') %}

21
templates/partials/footer.html.twig

@ -1,5 +1,26 @@
{% set base_url = page.parent.url %}
<div class="footer section">
<div class="footer-inner section-inner">
{% include 'partials/tagcloud.html.twig' %}
</div>
</div>
<footer>
<div id="footer-logo" ><a href="{{ base_url }}/contact"></a></div>
<div id="footer-links">
<ul class="footer-links">
<li>Copyleft Disroot.org</li>
<li><span class="dot"></span></li>
<li><a href="{{ base_url }}/tos">Terms Of Service</a></li>
<li><span class="dot"></span></li>
<li><a href="{{ base_url }}/privacy_policy">Privacy Policy</a></li>
</ul>
</div>
<div id="footer-icons">
<ul class="footer-icons">
<li><a href="https://hub.disroot.org/channel/disroot"><i class="fa fa-hubzilla fa-fw fa-3x"></i></a></li>
<li><a href="https://social.weho.st/@disroot"><i class="fa fa-mastodon fa-fw fa-3x"></i></a></li>
<li><a href="{{ base_url }}/blog.atom"><i class="fa fa-rss-square fa-fw fa-3x"></i></a></li>
</ul>
</div>
</footer>
Loading…
Cancel
Save