Included renewable energy info in footer

_template.pug

@@ -113,9 +113,12 @@ html(lang="en")
 
           img.ui.centered.mini.image(src="/assets/images/icon.svg" aria-hidden="true" role="img")
 
-          .ui.horizontal.inverted.small.divided.link.list
+          .ui.inverted.small.link.list
             a.item(href="https://git.kuschku.de/justjanne/quasseldroid-ng/").
               Free & Open Source
+            p.item.renewable
+              img(src="/assets/images/sprout.svg" aria-hidden="true" role="img")
+              span This website is hosted with 100% renewable energy.
 
     script(src="/assets/js/intersectionobserver.min.js")
     script

assets/css/style.css

-body:not(.noscript) img[data-src]{filter:blur(2px) !important}.following.bar{position:fixed !important;top:0 !important;z-index:900 !important;left:0 !important;padding:2em 0 !important;width:100% !important;box-shadow:0 0 0 0 transparent !important;border-bottom:1px solid transparent !important;transition:padding 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, border 0.5s ease !important}body:not(.index) .following.bar{position:sticky !important}.ui.logo{opacity:.9 !important;float:none !important;margin:0 .35714286em 0 0 !important;height:1em !important}.secondary.menu .item{line-height:1.6rem !important}.secondary.menu .item>i.icon{height:1.6rem !important}.following.bar{padding:1em 0 !important}body:not(.index) .following.bar,body.noscript .following.bar,.following.bar.qd{background:#0a70c0 !important}.masthead{position:relative !important;overflow:hidden !important;text-align:center !important;color:rgba(255,255,255,0.9) !important;margin-bottom:0 !important;border-bottom:none !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 810'%3E%3Cpath fill='%23124e99' fill-opacity='.25' d='M334.24 0L539.8 205.54 745.32 0h-411.1z'/%3E%3Cpath fill='%23124e99' fill-opacity='.3' d='M1366.24 0l-516 516 44.04 44.04L1440 14.32V0h-73.76z'/%3E%3Cpath fill='%230291e7' fill-opacity='.64' d='M745.33 0L539.8 205.54 850.23 516l516-516h-620.9z'/%3E%3Cpath fill='%230291e7' fill-opacity='.57' d='M1440 14.32L894.28 560.04l128.08 128.08 150.1-150.1L1440 270.5V14.32z'/%3E%3Cpath fill='%230291e7' fill-opacity='.28' d='M1440 270.48l-267.55 267.55L1440 805.58v-535.1z'/%3E%3Cpath fill='%23124e99' fill-opacity='.71' d='M1022.36 688.12L1144.24 810H1440v-4.42l-267.55-267.55-150.1 150.1z'/%3E%3Cpath fill='%230291e7' fill-opacity='.46' d='M0 0v455.43L354.57 810h789.67l-810-810H0z'/%3E%3Cpath fill='%23124e99' fill-opacity='.68' d='M0 455.43v80.96L273.6 810h80.97L0 455.43z'/%3E%3Cpath fill='%230291e7' fill-opacity='.4' d='M0 536.4V810h273.6L0 536.4z'/%3E%3C/svg%3E") center center no-repeat,linear-gradient(148deg, #124E99 7%, #105a94 20%, #0a70c0 27%, #0291E7 60%, #0271B3 100%) !important;background-size:cover, cover !important;padding:10rem 0 !important;max-height:100vh !important}@media (max-width: 500px){.masthead .segment{min-height:100vh !important}}@media (max-width: 1024px){.masthead .segment{padding:6rem 0 0 !important}}.masthead:after{content:"" !important;bottom:-100px;position:absolute !important;left:0 !important;right:0 !important;background:#fff;width:120%;height:200px;transform:rotate(-4deg)}.introduction h1.header{font-size:4.5rem !important}.ui.grid .row+.ui.divider{margin-top:3rem !important;margin-bottom:3rem !important}#image_container .phone{display:inline-block !important;max-height:33vw !important;max-width:355px !important;vertical-align:middle !important}#image_container .tablet{display:inline-block !important;max-height:33vw !important;max-width:633px !important;vertical-align:middle !important}body:not(.noscript) .responsive.placeholder:not(.loaded){filter:blur(20px)}body:not(.noscript) .responsive.placeholder:not(.loaded) img{opacity:0}.responsive.placeholder{position:relative;background-size:100% 100%;transition:filter 100ms}.responsive.placeholder img{position:absolute;width:100%;height:100%;top:0;left:0;transition:opacity 50ms}.vertical.segment{box-shadow:none !important}.introduction{perspective:500px !important;text-shadow:0 0 10px rgba(0,0,0,0.2) !important;margin-left:auto !important;margin-right:auto !important;margin-bottom:6rem !important}.introduction .ui.header{font-weight:normal !important}@media (max-width: 1024px){.introduction{margin-bottom:2rem !important}.introduction h1.header{font-size:3rem !important}.introduction h2{font-size:1.4rem !important}}.image{overflow:hidden !important}.pusher{display:flex;flex-direction:column;min-height:100vh}.pusher .stripe{padding:5rem 0 !important;border-radius:0 !important;margin:0 !important}@media (max-width: 1024px){.pusher .stripe{padding:2rem 0 !important}}.pusher .stripe.alternate.stripe{background-color:#F2F3F5 !important}.pusher .stripe h1{font-size:40px !important}.pusher .stripe h2{font-size:26px !important}.pusher .stripe .column>p{font-size:16px !important;line-height:1.6 !important;margin:1em 0 !important}.pusher .intro.segment h1+p{font-size:22px !important}.pusher>.full.height{flex-grow:1}.pusher>.footer{clear:both !important;margin:0 !important;border-radius:0 !important;padding:4em 0 !important}.pusher>.footer .grid{display:block !important}.pusher>.footer .grid .column{margin-left:2rem !important;margin-right:2rem !important}@media (max-width: 359px){.ui.menu .item{font-size:0.9rem !important}}@media (max-width: 500px){.ui.menu .item>span.text{display:none !important}.ui.menu .item>i.icon{margin-right:0 !important}}@media (max-width: 800px), (max-height: 540px){#image_container img.tablet{display:none !important}#image_container img.phone{max-width:calc(50vw + 100px) !important;max-height:100vh !important;margin-bottom:calc(-33vh) !important}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem !important}}@media (min-width: 800px) and (max-height: 800px){#image_container img.tablet{display:none !important}#image_container img.phone{max-width:calc(30vw + 100px) !important;max-height:100vh !important;margin-bottom:calc(-33vh) !important}.introduction{display:inline-block !important;margin:0 !important}.masthead.segment .ui.container{display:flex;align-items:center;justify-content:space-evenly}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem !important}}@media (max-height: 500px){.masthead.segment{max-height:initial !important}#image_container img.tablet{display:none !important}#image_container img.phone{max-width:calc(50vw + 100px) !important;max-height:100vh !important;margin-bottom:calc(-22vh) !important}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem !important}.introduction,.introduction+.row{display:inline-block !important;margin-left:4rem !important;margin-right:4rem !important}}i.icon{font-family:'IconFont'}i.icon.download:before{content:"\e800"}i.icon.github:before{content:"\f09b"}
+body:not(.noscript) img[data-src]{filter:blur(2px) !important}.following.bar{position:fixed !important;top:0 !important;z-index:900 !important;left:0 !important;padding:2em 0 !important;width:100% !important;box-shadow:0 0 0 0 transparent !important;border-bottom:1px solid transparent !important;transition:padding 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, border 0.5s ease !important}body:not(.index) .following.bar{position:sticky !important}.ui.logo{opacity:.9 !important;float:none !important;margin:0 .35714286em 0 0 !important;height:1em !important}.secondary.menu .item{line-height:1.6rem !important}.secondary.menu .item>i.icon{height:1.6rem !important}.following.bar{padding:1em 0 !important}body:not(.index) .following.bar,body.noscript .following.bar,.following.bar.qd{background:#0a70c0 !important}.masthead{position:relative !important;overflow:hidden !important;text-align:center !important;color:rgba(255,255,255,0.9) !important;margin-bottom:0 !important;border-bottom:none !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 810'%3E%3Cpath fill='%23124e99' fill-opacity='.25' d='M334.24 0L539.8 205.54 745.32 0h-411.1z'/%3E%3Cpath fill='%23124e99' fill-opacity='.3' d='M1366.24 0l-516 516 44.04 44.04L1440 14.32V0h-73.76z'/%3E%3Cpath fill='%230291e7' fill-opacity='.64' d='M745.33 0L539.8 205.54 850.23 516l516-516h-620.9z'/%3E%3Cpath fill='%230291e7' fill-opacity='.57' d='M1440 14.32L894.28 560.04l128.08 128.08 150.1-150.1L1440 270.5V14.32z'/%3E%3Cpath fill='%230291e7' fill-opacity='.28' d='M1440 270.48l-267.55 267.55L1440 805.58v-535.1z'/%3E%3Cpath fill='%23124e99' fill-opacity='.71' d='M1022.36 688.12L1144.24 810H1440v-4.42l-267.55-267.55-150.1 150.1z'/%3E%3Cpath fill='%230291e7' fill-opacity='.46' d='M0 0v455.43L354.57 810h789.67l-810-810H0z'/%3E%3Cpath fill='%23124e99' fill-opacity='.68' d='M0 455.43v80.96L273.6 810h80.97L0 455.43z'/%3E%3Cpath fill='%230291e7' fill-opacity='.4' d='M0 536.4V810h273.6L0 536.4z'/%3E%3C/svg%3E") center center no-repeat,linear-gradient(148deg, #124E99 7%, #105a94 20%, #0a70c0 27%, #0291E7 60%, #0271B3 100%) !important;background-size:cover, cover !important;padding:10rem 0 !important;max-height:100vh !important}@media (max-width: 500px){.masthead .segment{min-height:100vh !important}}@media (max-width: 1024px){.masthead .segment{padding:6rem 0 0 !important}}.masthead:after{content:"" !important;bottom:-100px;position:absolute !important;left:0 !important;right:0 !important;background:#fff;width:120%;height:200px;transform:rotate(-4deg)}.introduction h1.header{font-size:4.5rem !important}.ui.grid .row+.ui.divider{margin-top:3rem !important;margin-bottom:3rem !important}#image_container .phone{display:inline-block !important;max-height:33vw !important;max-width:355px !important;vertical-align:middle !important}#image_container .tablet{display:inline-block !important;max-height:33vw !important;max-width:633px !important;vertical-align:middle !important}body:not(.noscript) .responsive.placeholder:not(.loaded){filter:blur(20px)}body:not(.noscript) .responsive.placeholder:not(.loaded) img{opacity:0}.responsive.placeholder{position:relative;background-size:100% 100%;transition:filter 100ms}.responsive.placeholder img{position:absolute;width:100%;height:100%;top:0;left:0;transition:opacity 50ms}.vertical.segment{box-shadow:none !important}.introduction{perspective:500px !important;text-shadow:0 0 10px rgba(0,0,0,0.2) !important;margin-left:auto !important;margin-right:auto !important;margin-bottom:6rem !important}.introduction .ui.header{font-weight:normal !important}@media (max-width: 1024px){.introduction{margin-bottom:2rem !important}.introduction h1.header{font-size:3rem !important}.introduction h2{font-size:1.4rem !important}}.image{overflow:hidden !important}.pusher{display:flex;flex-direction:column;min-height:100vh}.pusher .stripe{padding:5rem 0 !important;border-radius:0 !important;margin:0 !important}@media (max-width: 1024px){.pusher .stripe{padding:2rem 0 !important}}.pusher .stripe.alternate.stripe{background-color:#F2F3F5 !important}.pusher .stripe h1{font-size:40px !important}.pusher .stripe h2{font-size:26px !important}.pusher .stripe .column>p{font-size:16px !important;line-height:1.6 !important;margin:1em 0 !important}.pusher .intro.segment h1+p{font-size:22px !important}.pusher>.full.height{flex-grow:1}.pusher>.footer{clear:both !important;margin:0 !important;border-radius:0 !important;padding:4em 0 !important}.pusher>.footer .grid{display:block !important}.pusher>.footer .grid .column{margin-left:2rem !important;margin-right:2rem !important}.pusher>.footer .renewable{font-size:0.8em}.pusher>.footer .renewable img{max-height:1em;vertical-align:top;margin-right:4px}.pusher>.footer .renewable span{color:#7CB342}@media (max-width: 359px){.ui.menu .item{font-size:0.9rem !important}}@media (max-width: 500px){.ui.menu .item>span.text{display:none !important}.ui.menu .item>i.icon{margin-right:0 !important}}@media (max-width: 800px), (max-height: 540px){#image_container img.tablet{display:none !important}#image_container img.phone{max-width:calc(50vw + 100px) !important;max-height:100vh !important;margin-bottom:calc(-33vh) !important}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem !important}}@media (min-width: 800px) and (max-height: 800px){#image_container img.tablet{display:none !important}#image_container img.phone{max-width:calc(30vw + 100px) !important;max-height:100vh !important;margin-bottom:calc(-33vh) !important}.introduction{display:inline-block !important;margin:0 !important}.masthead.segment .ui.container{display:flex;align-items:center;justify-content:space-evenly}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem !important}}@media (max-height: 500px){.masthead.segment{max-height:initial !important}#image_container img.tablet{display:none !important}#image_container img.phone{max-width:calc(50vw + 100px) !important;max-height:100vh !important;margin-bottom:calc(-22vh) !important}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1rem !important}.introduction,.introduction+.row{display:inline-block !important;margin-left:4rem !important;margin-right:4rem !important}}i.icon{font-family:'IconFont'}i.icon.download:before{content:"\e800"}i.icon.github:before{content:"\f09b"}

assets/css/style.sass

@@ -175,6 +175,17 @@ body:not(.noscript)
         margin-left: 2rem !important
         margin-right: 2rem !important
 
+    .renewable
+      font-size: 0.8em
+
+      img
+        max-height: 1em
+        vertical-align: top
+        margin-right: 4px
+
+      span
+        color: #7CB342
+
 .ui.menu .item
   @media (max-width: 359px)
     font-size: 0.9rem !important

assets/images/sprout.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1">
+    <path fill="#7CB342" d="M2,22V20C2,20 7,18 12,18C17,18 22,20 22,20V22H2M11.3,9.1C10.1,5.2 4,6.1 4,6.1C4,6.1 4.2,13.9 9.9,12.7C9.5,9.8 8,9 8,9C10.8,9 11,12.4 11,12.4V17C11.3,17 11.7,17 12,17C12.3,17 12.7,17 13,17V12.8C13,12.8 13,8.9 16,7.9C16,7.9 14,10.9 14,12.9C21,13.6 21,4 21,4C21,4 12.1,3 11.3,9.1Z"/>
+</svg>
\ No newline at end of file