Adjust footer style and links

parent 39c2d7c2
......@@ -28,4 +28,5 @@ social:
twitter: poul_polimi
github: Politecnico-Open-unix-Labs
youtube: POuLpolimi
rss: '/feed.xml'
email: https://list.poul.org/postorius/lists/mailinglist.poul.org/
<div class="footer">
<div class="footer content bg-darker">
<div class="container">
<p class="copy">&copy; {{ site.time | date: '%Y' }} <a href="https://www.poul.org">POuL</a><a href="https://gitlab.poul.org/Depau/poul-home">Source code</a><a href="#" id="fix-sotto-storto-link" onclick="fixSottoStortoCit(); return false;">Fix rotation</a></p>
......@@ -6,30 +6,50 @@
<ul class="noList">
{% if site.social.facebook %}
<li><a href="https://www.facebook.com/{{ site.social.facebook }}">
<svg id="facebook-square" class="custom-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="height: 30px; width: 30px;"><circle class="outer-shape" cx="50" cy="50" r="48" style="opacity: 1;"></circle>
<path class="inner-shape" style="opacity: 1;" transform="translate(25,25) scale(0.5)" d="M82.667,1H17.335C8.351,1,1,8.351,1,17.336v65.329c0,8.99,7.351,16.335,16.334,16.335h65.332 C91.652,99.001,99,91.655,99,82.665V17.337C99,8.353,91.652,1.001,82.667,1L82.667,1z M84.318,50H68.375v42.875H50V50h-8.855V35.973 H50v-9.11c0-12.378,5.339-19.739,19.894-19.739h16.772V22.3H72.967c-4.066-0.007-4.57,2.12-4.57,6.078l-0.023,7.594H86.75 l-2.431,14.027V50z"></path>
</svg>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x link-icon"></i>
</span>
</a></li>
{% endif %}
{% if site.social.twitter %}
<li><a href="https://twitter.com/{{ site.social.twitter }}">
<svg id="twitter" class="custom-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="height: 30px; width: 30px;"><circle class="outer-shape" cx="50" cy="50" r="48" style="opacity: 1;"></circle>
<path class="inner-shape" style="opacity: 1;" transform="translate(25,25) scale(0.5)" d="M99.001,19.428c-3.606,1.608-7.48,2.695-11.547,3.184c4.15-2.503,7.338-6.466,8.841-11.189 c-3.885,2.318-8.187,4-12.768,4.908c-3.667-3.931-8.893-6.387-14.676-6.387c-11.104,0-20.107,9.054-20.107,20.223 c0,1.585,0.177,3.128,0.52,4.609c-16.71-0.845-31.525-8.895-41.442-21.131C6.092,16.633,5.1,20.107,5.1,23.813 c0,7.017,3.55,13.208,8.945,16.834c-3.296-0.104-6.397-1.014-9.106-2.529c-0.002,0.085-0.002,0.17-0.002,0.255 c0,9.799,6.931,17.972,16.129,19.831c-1.688,0.463-3.463,0.71-5.297,0.71c-1.296,0-2.555-0.127-3.783-0.363 c2.559,8.034,9.984,13.882,18.782,14.045c-6.881,5.424-15.551,8.657-24.971,8.657c-1.623,0-3.223-0.096-4.796-0.282 c8.898,5.738,19.467,9.087,30.82,9.087c36.982,0,57.206-30.817,57.206-57.543c0-0.877-0.02-1.748-0.059-2.617 C92.896,27.045,96.305,23.482,99.001,19.428z"></path>
</svg>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x link-icon"></i>
</span>
</a></li>
{% endif %}
{% if site.social.youtube %}
<li><a href="https://www.youtube.com/user/{{ site.social.youtube }}/videos">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x link-icon"></i>
</span>
</a></li>
{% endif %}
{% if site.social.github %}
<li><a href="https://github.com/{{ site.social.github }}">
<svg id="github" class="custom-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="height: 30px; width: 30px;"><circle class="outer-shape" cx="50" cy="50" r="48" style="opacity: 1;"></circle>
<path class="inner-shape" style="opacity: 1;" transform="translate(25,25) scale(0.5)" d="M50,1C22.938,1,1,22.938,1,50s21.938,49,49,49s49-21.938,49-49S77.062,1,50,1z M79.099,79.099 c-3.782,3.782-8.184,6.75-13.083,8.823c-1.245,0.526-2.509,0.989-3.79,1.387v-7.344c0-3.86-1.324-6.699-3.972-8.517 c1.659-0.16,3.182-0.383,4.57-0.67c1.388-0.287,2.855-0.702,4.402-1.245c1.547-0.543,2.935-1.189,4.163-1.938 c1.228-0.75,2.409-1.723,3.541-2.919s2.082-2.552,2.847-4.067s1.372-3.334,1.818-5.455c0.446-2.121,0.67-4.458,0.67-7.01 c0-4.945-1.611-9.155-4.833-12.633c1.467-3.828,1.308-7.991-0.478-12.489l-1.197-0.143c-0.829-0.096-2.321,0.255-4.474,1.053 c-2.153,0.798-4.57,2.105-7.249,3.924c-3.797-1.053-7.736-1.579-11.82-1.579c-4.115,0-8.039,0.526-11.772,1.579 c-1.69-1.149-3.294-2.097-4.809-2.847c-1.515-0.75-2.727-1.26-3.637-1.532c-0.909-0.271-1.754-0.439-2.536-0.503 c-0.782-0.064-1.284-0.079-1.507-0.048c-0.223,0.031-0.383,0.064-0.478,0.096c-1.787,4.53-1.946,8.694-0.478,12.489 c-3.222,3.477-4.833,7.688-4.833,12.633c0,2.552,0.223,4.889,0.67,7.01c0.447,2.121,1.053,3.94,1.818,5.455 c0.765,1.515,1.715,2.871,2.847,4.067s2.313,2.169,3.541,2.919c1.228,0.751,2.616,1.396,4.163,1.938 c1.547,0.543,3.014,0.957,4.402,1.245c1.388,0.287,2.911,0.511,4.57,0.67c-2.616,1.787-3.924,4.626-3.924,8.517v7.487 c-1.445-0.43-2.869-0.938-4.268-1.53c-4.899-2.073-9.301-5.041-13.083-8.823c-3.782-3.782-6.75-8.184-8.823-13.083 C9.934,60.948,8.847,55.56,8.847,50s1.087-10.948,3.231-16.016c2.073-4.899,5.041-9.301,8.823-13.083s8.184-6.75,13.083-8.823 C39.052,9.934,44.44,8.847,50,8.847s10.948,1.087,16.016,3.231c4.9,2.073,9.301,5.041,13.083,8.823 c3.782,3.782,6.75,8.184,8.823,13.083c2.143,5.069,3.23,10.457,3.23,16.016s-1.087,10.948-3.231,16.016 C85.848,70.915,82.88,75.317,79.099,79.099L79.099,79.099z"></path>
</svg>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x link-icon"></i>
</span>
</a></li>
{% endif %}
{% if site.social.rss %}
<li><a href="{{ site.social.rss }}">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x link-icon"></i>
</span>
</a></li>
{% endif %}
{% if site.social.email %}
<li><a href="mailto:{{ site.social.email }}">
<svg id="mail" class="custom-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="height: 30px; width: 30px;"><circle class="outer-shape" cx="50" cy="50" r="48" style="opacity: 1;"></circle>
<path class="inner-shape" style="opacity: 1;" transform="translate(25,25) scale(0.5)" d="M50,1C22.938,1,1,22.938,1,50s21.938,49,49,49s49-21.938,49-49S77.062,1,50,1z M25.5,25.5h49 c0.874,0,1.723,0.188,2.502,0.542L50,57.544L22.998,26.041C23.777,25.687,24.626,25.499,25.5,25.5L25.5,25.5z M19.375,68.375v-36.75 c0-0.128,0.005-0.256,0.014-0.383l17.96,20.953L19.587,69.958C19.448,69.447,19.376,68.916,19.375,68.375L19.375,68.375z M74.5,74.5 h-49c-0.541,0-1.072-0.073-1.583-0.212l17.429-17.429L50,66.956l8.653-10.096l17.429,17.429C75.572,74.427,75.041,74.5,74.5,74.5 L74.5,74.5z M80.625,68.375c0,0.541-0.073,1.072-0.211,1.583L62.652,52.195l17.96-20.953c0.008,0.127,0.014,0.255,0.014,0.383 L80.625,68.375L80.625,68.375z"></path>
</svg>
<li><a href="{{ site.social.email }}">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope fa-stack-1x link-icon"></i>
</span>
</a></li>
{% endif %}
</ul>
......
......@@ -983,12 +983,12 @@ FOOTER STYLING
padding: 2rem 0;
clear: both; }
.footer .container {
border-top: 4px solid #d9d9d9;
padding-top: .5em;
max-width: 90%; }
.footer .copy, .footer .footer-links {
font-size: .8em; }
.footer .footer-links ul li {
font-size: .6em; }
.footer .copy {
font-size: .8em;
margin-bottom: 1rem; }
.footer-links ul {
text-align: center; }
......@@ -999,16 +999,8 @@ FOOTER STYLING
width: 30px;
height: 30px;
transition: all 0.2s ease-in-out; }
.footer-links ul li a svg {
display: block;
width: 100%;
height: 100%; }
.footer-links ul li a svg .outer-shape {
fill: #ffc500; }
.footer-links ul li a svg .inner-shape {
fill: white; }
.footer-links ul li:hover a svg .outer-shape {
fill: #cc9e00; }
.footer-links ul li a .link-icon {
color: #101010; }
/***************
PAGINATION STYLING
......@@ -1056,6 +1048,10 @@ POST LIST STYLING
background-color: #212121;
color: #fff; }
.bg-darker {
background-color: #101010;
color: #fff; }
.bg-blueish-gray {
background-color: #292d32;
color: #fff; }
......@@ -1089,6 +1085,10 @@ GLOBAL STYLES
background: #212121; }
.bg-dark + .content:after {
background: #212121; }
.content.bg-darker:after {
background: #101010; }
.bg-darker + .content:after {
background: #101010; }
.content.bg-blueish-gray:after {
background: #292d32; }
.bg-blueish-gray + .content:after {
......@@ -1218,13 +1218,18 @@ POST NAV STYLING
/***************
FOOTER STYLES
***************/
.footer-links {
float: right; }
.footer .copy {
float: left; }
.footer .container {
padding: 1rem 0;
max-width: 800px; }
.footer {
height: 5em;
margin-top: 100px; }
.footer-links {
float: right; }
.footer .copy {
float: left; }
.footer .container {
padding: 1rem 0;
max-width: 800px; }
.footer.content:after {
height: 5em; }
/***************
CONTACT PAGE STYLING
***************/
......
......@@ -39,6 +39,15 @@ body.sotto-dritto {
background: $bg_dark;
}
.content.bg-darker:after {
background: $bg_darker;
}
.bg-darker + .content:after {
background: $bg_darker;
}
.content.bg-blueish-gray:after {
background: $blueish_gray;
}
......@@ -254,6 +263,9 @@ FOOTER STYLES
***************/
.footer {
height: 5em;
margin-top: 100px;
&-links {
float: right;
}
......@@ -266,6 +278,10 @@ FOOTER STYLES
padding: 1rem 0;
max-width: 800px;
}
&.content:after {
height: 5em;
}
}
......
......@@ -395,16 +395,16 @@ FOOTER STYLING
clear: both;
.container {
border-top: 4px solid darken(white, 15%);
padding-top: .5em;
max-width: 90%;
}
.copy, .footer-links {
font-size: .8em;
.footer-links ul li {
font-size: .6em;
}
.copy {
font-size: .8em;
margin-bottom: 1rem;
}
......@@ -421,30 +421,9 @@ FOOTER STYLING
height: 30px;
transition: all 0.2s ease-in-out;
svg {
display: block;
width: 100%;
height: 100%;
.outer-shape {
fill: $accent-color;
}
.inner-shape {
fill: white;
}
}
}
&:hover {
a {
svg {
.outer-shape {
fill: darken($accent-color, 10%);
}
}
}
.link-icon {
color: $bg_darker;
}
}
}
}
......@@ -522,6 +501,11 @@ POST LIST STYLING
color: $white;
}
.bg-darker {
background-color: $bg_darker;
color: $white;
}
.bg-blueish-gray {
background-color: $blueish_gray;
color: $white;
......
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