From 6618b035e8b2519025cb61e9148ff165ecf89b95 Mon Sep 17 00:00:00 2001
From: Sven <sven.hoehn@posteo.de>
Date: Fri, 7 Apr 2017 12:44:59 +0200
Subject: [PATCH] embed SVG Icons in the footer.

---
 static/img/icons/Heart.svg | 18 ++++++++
 templates/base.html        | 90 ++++++++++++++++++++++++++++++++++----
 templates/index.html       | 18 ++++----
 3 files changed, 109 insertions(+), 17 deletions(-)

diff --git a/static/img/icons/Heart.svg b/static/img/icons/Heart.svg
index 2a45a784..759d0541 100644
--- a/static/img/icons/Heart.svg
+++ b/static/img/icons/Heart.svg
@@ -7,3 +7,21 @@
 		c1.308-1.536,3.312-2.508,5.4-2.508c3.696,0,6.6,2.904,6.6,6.6c0,4.536-4.08,8.232-10.26,13.848L13,24.01z"/>
 </g>
 </svg>
+
+
+
+Open SVG
+Paste markup
+Demo
+Contribute
+About
+Powered by the incredible SVGO
+
+
+IMAGE
+CODE
+216 bytes - 47.95% saving
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
+  <path d="M13 24.01l-1.74-1.584C5.08 16.822 1 13.126 1 8.59c0-3.696 2.904-6.6 6.6-6.6 2.088 0 4.092.972 5.4 2.508 1.308-1.536 3.312-2.508 5.4-2.508 3.696 0 6.6 2.904 6.6 6.6 0 4.536-4.08 8.232-10.26 13.848L13 24.01z"/>
+</svg>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 57e048cb..f0f206e6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -30,7 +30,7 @@
 			<div class="container d-flex justify-content-between">
 				<nav class="navbar navbar-toggleable-md align-items-md-start">
 					<button class="navbar-toggler navbar-toggler-left pt-4" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-						<svg class="icon i_hamburger"><use xlink:href="{{ static_url("img/icons.svg#hamburger") }}"></use></svg>
+						<svg class="icon i_hamburger"><use xlink:href="#hamburger"/></svg>
 						<div class="visible-md-up menu-text">Menu</div>
 					</button>
 					
@@ -57,7 +57,7 @@
 				</nav>
 				<div class="align-self-start hidden-md-down">
 					<a class="btn btn-red900 btn-sm mt-5" href="/donate">
-						<svg class="icon i_heart"><use xlink:href="{{ static_url("img/icons.svg#heart") }}"></use></svg>
+						<svg class="icon i_heart"><use xlink:href="#heart"/></svg>
 						<small style="vertical-align: .30rem;">{{ _("Donate") }}</small>
 					</a>
 				</div>
@@ -146,25 +146,25 @@
 
 						<div class="col-md-12 col-lg-4 pt-md-6 pt-lg-1 text-center">
 							<a class="btn btn-primary btn-lg" href="//www.ipfire.org/donate">
-								<svg class="icon i_heart"><use xlink:href="{{ static_url("img/icons.svg#heart") }}"></use></svg>
+								<svg class="icon i_heart"><use xlink:href="#heart"/></svg>
 								{{ _("Donate") }}
 							</a>
 
 							<div class="btn-toolbar justify-content-around col-md-6 offset-md-3">
 								<a class="btn btn-sm" href="http://www.ipfire.org/news.rss">
-									<svg class="icon i_rss"><use xlink:href="{{ static_url("img/icons.svg#rss") }}"></use></svg>
+									<svg class="icon i_rss"><use xlink:href="#rss""/></svg>
 								</a>
 								<a class="btn btn-sm" href="https://twitter.com/ipfire">
-									<svg class="icon i_twitter"><use xlink:href="{{ static_url("img/icons.svg#twitter") }}"></use></svg>
+									<svg class="icon i_twitter"><use xlink:href="#twitter"/></svg>
 								</a>
 								<a class="btn btn-sm" href="https://www.facebook.com/IPFire.org">
-									<svg class="icon i_facebook"><use xlink:href="{{ static_url("img/icons.svg#facebook") }}"></use></svg>
+									<svg class="icon i_facebook"><use xlink:href="#facebook"/></svg>
 								</a>
 								<a class="btn btn-sm" href="https://google.com/+IpfireOrg4Ever">
-									<svg class="icon i_gplus"><use xlink:href="{{ static_url("img/icons.svg#gplus") }}"></use></svg>
+									<svg class="icon i_gplus"><use xlink:href="#gplus"/></svg>
 								</a>
 								<a class="btn btn-sm" href="https://youtube.com/user/ipfireproject">
-									<svg class="icon i_youtube"><use xlink:href="{{ static_url("img/icons.svg#youtube") }}"></use></svg>
+									<svg class="icon i_youtube"><use xlink:href="#youtube"/></svg>
 								</a>
 							</div>
 						</div>
@@ -196,5 +196,79 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 		<script src="{{ static_url("js/site.js") }}"></script>
+		
+		<!-- Hidden icon data -->
+		<svg aria-hidden="true" style="display:none">
+<symbol id="heart" viewBox="0 0 26 26">
+     <path d="M13 24.01l-1.74-1.584C5.08 16.822 1 13.126 1 8.59c0-3.696 2.904-6.6 6.6-6.6 2.088 0 4.092.972 5.4 2.508 1.308-1.536 3.312-2.508 5.4-2.508 3.696 0 6.6 2.904 6.6 6.6 0 4.536-4.08 8.232-10.26 13.848L13 24.01z"/>
+  </symbol>
+  
+  <symbol id="arrow_down" viewBox="0 0 26 26">
+  	<path d="M3.82 5.44L13 14.786l9.18-9.348L25 8.32 13 20.56 1 8.318 3.82 5.44z"/>
+  </symbol>
+  
+  <symbol id="download" viewBox="0 0 26 26">
+	  <path d="M22.882 9.47h-5.647V1h-8.47v8.47H3.118L13 19.354l9.882-9.882zM3.118 22.177V25h19.765v-2.824H3.118z"/>
+  </symbol>
+
+<symbol id="facebook" viewBox="0 0 26 26">
+  <path d="M19.667 1.276V5h-2.37c-.888 0-1.482.137-1.778.552-.297.276-.445.827-.445 1.517v2.76h4.444l-.593 4.274h-3.853V25h-4.74V14.104h-4V9.827h4V6.653c0-1.792.592-3.172 1.63-4.137C13 1.552 14.483 1 16.258 1c1.48 0 2.665.14 3.407.276"/>
+</symbol>
+
+
+<symbol id="hamburger" viewBox="0 0 26 26">
+  <path d="M1 24.01h24v-3.67H1v3.67zm0-9.175h24v-3.67H1v3.67zM1 1.99v3.67h24V1.99H1z"/>
+</symbol>
+
+
+<symbol id="rss" viewBox="0 0 26 26">
+  <path d="M4.362 18.275c1.857 0 3.362 1.505 3.362 3.362 0 1.82-1.512 3.362-3.362 3.362C2.542 25 1 23.457 1 21.637c0-1.858 1.505-3.363 3.362-3.363zM1 1c13.256 0 24 10.744 24 24h-4.365C20.635 14.157 11.843 5.365 1 5.365V1zm0 8.73c8.434 0 15.27 6.836 15.27 15.27h-4.365c0-6.023-4.882-10.905-10.905-10.905V9.73z"/>
+</symbol>
+
+
+<symbol id="security" viewBox="0 0 26 26">
+  <path d="M14.2 20.2h1.2c.663 0 1.2.537 1.2 1.2H25v2.4h-8.4c0 .663-.537 1.2-1.2 1.2h-4.8c-.663 0-1.2-.537-1.2-1.2H1v-2.4h8.4c0-.663.537-1.2 1.2-1.2h1.2v-1.992c-3.516-1.452-6-5.208-6-9.204v-4.8L13 1l7.2 3.204v4.8c0 3.996-2.484 7.752-6 9.204V20.2zM13 3.4L8.2 5.428V9.4H13v-6zm0 6v7.2c2.292-.564 4.8-3.528 4.8-6V9.4H13z"/>
+</symbol>
+
+<symbol id="shield" viewBox="0 0 26 26">
+  <path d="M13 1L3.182 5.364v6.545c0 6.054 4.19 11.715 9.818 13.09 5.63-1.375 9.818-7.036 9.818-13.09V5.363L13 1zm0 11.99h7.636c-.578 4.494-3.578 8.497-7.636 9.752V13H5.364V6.782L13 3.39v9.6z"/>
+</symbol>	
+
+<symbol id="github" viewBox="0 0 26 26">
+  <path d="M13 1C6.208 1 .702 6.506.702 13.298c0 5.436 3.53 10.047 8.412 11.683.615.1.812-.282.812-.614v-2.078c-3.407.738-4.132-1.648-4.132-1.648-.566-1.427-1.365-1.808-1.365-1.808-1.12-.762.085-.738.085-.738 1.23.086 1.882 1.267 1.882 1.267 1.07 1.87 2.878 1.317 3.58 1.022.11-.8.43-1.34.774-1.648-2.73-.307-5.595-1.365-5.595-6.05 0-1.366.467-2.46 1.267-3.334-.124-.307-.555-1.586.122-3.246 0 0 1.033-.332 3.382 1.254.97-.27 2.03-.406 3.074-.406s2.103.135 3.074.406c2.35-1.586 3.382-1.254 3.382-1.254.676 1.66.246 2.94.123 3.247.798.874 1.266 1.97 1.266 3.334 0 4.698-2.878 5.73-5.62 6.038.443.38.85 1.13.85 2.275v3.37c0 .332.196.726.823.615 4.88-1.648 8.398-6.247 8.398-11.683C25.298 6.505 19.792 1 13 1z"/>
+</symbol>
+
+
+<symbol id="gplus" viewBox="0 0 26 26">
+  <path d="M16 13.147c0 1.47-.3 2.745-.9 3.824-.7 1.08-1.5 1.96-2.6 2.648-1.1.588-2.4.882-3.9.882-1 0-2-.196-2.9-.588-1-.392-1.8-.882-2.5-1.57-.7-.685-1.2-1.47-1.6-2.45-.4-.894-.604-1.864-.6-2.843 0-1.08.2-1.96.6-2.942.4-.883.9-1.765 1.6-2.353.7-.686 1.5-1.275 2.5-1.667.9-.392 1.9-.588 2.9-.588 2 0 3.7.686 5.1 1.96l-2 1.96c-.8-.783-1.9-1.175-3.1-1.175-.8 0-1.6.294-2.4.686-.7.394-1.2.98-1.7 1.766-.4.686-.6 1.47-.6 2.353 0 .783.2 1.666.6 2.353.5.686 1 1.274 1.7 1.764.8.392 1.6.588 2.4.588.6 0 1.1-.098 1.6-.196.5-.197.9-.393 1.2-.59.3-.293.6-.587.8-.88.3-.295.4-.59.5-.786.1-.294.2-.588.3-.784H8.6v-2.55h7.2c.1.393.2.785.2 1.177m9-1.176v2.158h-2.2v2.06h-2.2v-2.06h-2.2V11.97h2.2V9.814h2.2v2.157H25"/>
+</symbol>
+
+
+<symbol id="speed" viewBox="0 0 26 26">
+  <path d="M13 18.188c-1.988 0-3.6-1.612-3.6-3.6 0-1.344.732-2.52 1.8-3.132l11.652-6.744-6.636 11.496c-.6 1.176-1.812 1.98-3.216 1.98zm0-15.6c2.172 0 4.2.6 5.964 1.584l-2.52 1.452C15.4 5.216 14.2 4.988 13 4.988c-5.302 0-9.6 4.298-9.6 9.6 0 2.652 1.068 5.052 2.808 6.78h.012c.468.468.468 1.224 0 1.692-.468.468-1.236.468-1.704.012-2.254-2.248-3.52-5.3-3.516-8.484 0-6.628 5.372-12 12-12zm12 12c0 3.312-1.344 6.312-3.516 8.484-.468.456-1.224.456-1.692-.012-.467-.466-.468-1.223-.002-1.69l.002-.002c1.803-1.795 2.814-4.236 2.808-6.78 0-1.2-.228-2.4-.648-3.48l1.452-2.52c.996 1.8 1.596 3.816 1.596 6z"/>
+</symbol>
+
+<symbol id="twitter" viewBox="0 0 26 26">
+  <path d="M25 5.158c-.733 1.055-1.464 1.96-2.488 2.716v.6c0 1.51-.147 2.868-.586 4.225-.306 1.414-.904 2.75-1.756 3.92-.76 1.235-1.697 2.352-2.78 3.318-1.025.904-2.34 1.66-3.95 2.26-1.465.606-3.22.907-4.977.907-2.634 0-5.267-.753-7.463-2.26h1.17c2.195 0 4.245-.605 6.148-2.113-1.17 0-2.05-.303-2.928-1.056-.878-.604-1.463-1.508-1.756-2.413h1.024c.44 0 .88 0 1.17-.152-1.023-.302-2.048-.903-2.78-1.81-.732-.903-1.17-1.96-1.17-3.166.733.3 1.464.604 2.342.604-.733-.453-1.318-1.056-1.61-1.81-.402-.794-.602-1.674-.586-2.563 0-.906.147-1.81.585-2.564 1.317 1.51 2.78 2.717 4.536 3.772 1.756.904 3.658 1.508 5.707 1.66-.147-.453-.147-.905-.147-1.358 0-1.358.44-2.564 1.464-3.62.878-.904 2.05-1.358 3.364-1.358 1.464 0 2.634.453 3.658 1.508 1.17-.15 2.195-.603 3.073-1.206-.292 1.206-1.023 2.112-2.048 2.867.968-.165 1.906-.47 2.783-.908"/>
+</symbol>
+
+<symbol id="youtube" viewBox="0 0 26 26">
+  <path d="M17.813 13.78c.256-.26.385-.39.385-.78s-.13-.65-.385-.78l-6.93-4.3c-.257-.13-.513-.26-.898 0-.257.132-.385.39-.385.782v8.596c0 .39.13.65.386.782.256.13.384.13.513.13.127 0 .255 0 .384-.13l6.93-4.3zM25 10.917v4.167c0 .39 0 1.042-.13 1.824 0 .78-.128 1.432-.255 1.953-.13.65-.513 1.173-.9 1.694-.512.39-1.024.65-1.668.78-2.052.263-5.004.393-8.983.393s-7.058-.13-8.984-.392c-.64-.13-1.155-.39-1.67-.78-.512-.392-.768-1.044-.897-1.694-.153-.645-.282-1.297-.385-1.953 0-.782 0-1.433-.13-1.824v-4.167c.13-.39.13-1.042.13-1.824.128-.78.257-1.433.386-1.952.13-.65.385-1.304.898-1.694.513-.522 1.027-.782 1.668-.782 1.924-.26 5.005-.392 8.985-.392 3.98 0 6.93.13 8.984.392.64 0 1.154.26 1.667.78.385.392.77 1.044.9 1.694.164.638.25 1.295.255 1.954.128.783.128 1.434.128 1.824z"/>
+</symbol>
+
+  <symbol id="couch" viewBox="0 0 26 26" enable-background="new 0 0 26 26">
+	  <g transform="translate(-1 -5)">
+		<defs>
+			<filter id="a" filterUnits="userSpaceOnUse" x="2" y="10.364" width="24" height="15.273">
+				<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
+			</filter>
+		</defs>
+	    <mask maskUnits="userSpaceOnUse" x="2" y="10.364" width="24" height="15.273" id="b">
+		    <path d="M.91 4.91h26.18v26.18H.91V4.91z" fill="#FFF" filter="url(#a)"/>
+	    </mask>
+	    <path d="M23.818 15.818c-1.2 0-2.182.982-2.182 2.182v3.273H6.364V18c0-1.2-.982-2.182-2.182-2.182S2 16.8 2 18v5.455c0 1.2.982 2.182 2.182 2.182h19.636c1.2 0 2.182-.982 2.182-2.182V18c0-1.2-.982-2.182-2.182-2.182zm-3.273-5.454H7.455c-1.2 0-2.182.982-2.182 2.182v2.345c1.265.448 2.182 1.648 2.182 3.077v2.215h13.09v-2.215c0-1.418.917-2.618 2.183-3.076v-2.344c0-1.2-.983-2.182-2.183-2.182z" mask="url(#b)"/>
+	</g>
+	</symbol>		
+		</svg>
 	</body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index 88e71fbe..ff119a91 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,7 +18,7 @@
 		
 		<div id="scrollto" class="page-scroll">
 			<a href="#features" class="btn btn-outline-primary rounded-circle">
-				<svg class="icon i_arrow_down"><use xlink:href="{{ static_url("img/icons.svg#arrow_down") }}"></use></svg>
+				<svg class="icon i_arrow_down"><use xlink:href="#arrow_down"/></svg>
 			</a>
 		</div>
 	</section>
@@ -30,7 +30,7 @@
 			<div class="row mb-lg-6 mb-md-5">
 				<div class="col-md-6 col-lg-4 mb-6 pb-lg-5">
 					<div class="feature_icons">
-						<svg class="icon i_lg i_shield"><use xlink:href="{{ static_url("img/icons.svg#shield") }}"></use></svg>
+						<svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
 					</div>
 					<h4 class="pb-3">{{ _("Firewall") }}</h4>
 					<p>
@@ -48,7 +48,7 @@
 				
 				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
-						<svg class="icon i_lg i_speed"><use xlink:href="{{ static_url("img/icons.svg#speed") }}"></use></svg>
+						<svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
 					</div>
 					<h4 class="pb-3">{{ _("Performance") }}</h4>
 					<p>
@@ -65,7 +65,7 @@
 				
 				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
-						<svg class="icon i_lg i_couch"><use xlink:href="{{ static_url("img/icons.svg#couch") }}"></use></svg>
+						<svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
 					</div>
 					<h4 class="pb-3">{{ _("Easy to use") }}</h4>
 					<p class="mb-1">
@@ -83,7 +83,7 @@
 
 				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
-						<svg class="icon i_lg i_security"><use xlink:href="{{ static_url("img/icons.svg#security") }}"></use></svg>
+						<svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
 					</div>
 					<h4 class="pb-3">{{ _("Network Security") }}</h4>
 					<p>
@@ -101,7 +101,7 @@
 				
 				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
-						<svg class="icon i_lg i_github"><use xlink:href="{{ static_url("img/icons.svg#github") }}"></use></svg>
+						<svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
 					</div>
 					<h4 class="pb-3">{{ _("Open Source") }}</h4>
 					<p>
@@ -117,7 +117,7 @@
 				
 				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
-						<svg class="icon i_lg i_heart"><use xlink:href="{{ static_url("img/icons.svg#heart") }}"></use></svg>
+						<svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
 					</div>
 					<h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
 					<p>
@@ -154,11 +154,11 @@
 					</h3>
 					<div class="btn-toolbar mb-6">
 						<a class="btn btn-primary mr-3" href="/download">
-							<svg class="icon i_sm i_download"><use xlink:href="{{ static_url("img/icons.svg#download") }}"></use></svg>
+							<svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
 							{{ _("Download") }}
 						</a>
 						<a class="btn btn-white ml-3" href="/donate">
-							<svg class="icon i_sm i_heart"><use xlink:href="{{ static_url("img/icons.svg#heart") }}"></use></svg>
+							<svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
 							{{ _("Donate") }}
 						</a>
 					</div>
-- 
2.39.2