Text-Align buttons change color on hover

6 files changed, 35 insertions, 27 deletions

diff --git a/themes/dj_blog/layouts/_default/single.html b/themes/dj_blog/layouts/_default/single.html
index 31579cf..b0af0c1 100644
--- a/themes/dj_blog/layouts/_default/single.html
+++ b/themes/dj_blog/layouts/_default/single.html
@@ -34,9 +34,10 @@
         	</div>
             <div class="article-meta-inf">
                 <a href="/about/" rel="me">by {{ .Site.Author.name }} </a>  
-                <text> &nbsp; · &nbsp; {{ .ReadingTime }} minutes reading time</text>  
-                <a href="javascript:void(0);"><img id="alignJustify" src="/images/justify.svg"></a>
-                <a href="javascript:void(0);"><img id="alignLeft" src="/images/left.svg"></a>
+                <text> &nbsp; · &nbsp; {{ .ReadingTime }} minutes reading time</text>
+                <a href="javascript:void(0);">{{ partial "left.svg" . }}</a>
+                <a href="javascript:void(0);">{{ partial "justify.svg" . }}</a>
+
             </div>
         	<div id="article-body">
         			{{ .Content }}
diff --git a/themes/dj_blog/layouts/partials/justify.svg b/themes/dj_blog/layouts/partials/justify.svg
new file mode 100644
index 0000000..b9c24fe
--- /dev/null
+++ b/themes/dj_blog/layouts/partials/justify.svg
@@ -0,0 +1,10 @@
+<svg id="alignJustify"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" width="512px" height="512px" viewBox="0 0 24 24"
+	 xml:space="preserve">
+	<g>
+		<path d="M1,4.9h22c0.221,0,0.4-0.18,0.4-0.4S23.221,4.1,23,4.1H1c-0.221,0-0.4,0.18-0.4,0.4S0.779,4.9,1,4.9z"/>
+		<path d="M23,9.1H1c-0.221,0-0.4,0.18-0.4,0.4S0.779,9.9,1,9.9h22c0.221,0,0.4-0.18,0.4-0.4S23.221,9.1,23,9.1z"/>
+		<path d="M23,14.059H1c-0.221,0-0.4,0.18-0.4,0.4s0.179,0.4,0.4,0.4h22c0.221,0,0.4-0.18,0.4-0.4S23.221,14.059,23,14.059z"/>
+		<path d="M23,19.1H1c-0.221,0-0.4,0.18-0.4,0.4s0.179,0.4,0.4,0.4h22c0.221,0,0.4-0.18,0.4-0.4S23.221,19.1,23,19.1z"/>
+	</g>
+</svg>
diff --git a/themes/dj_blog/layouts/partials/left.svg b/themes/dj_blog/layouts/partials/left.svg
new file mode 100644
index 0000000..4df1d17
--- /dev/null
+++ b/themes/dj_blog/layouts/partials/left.svg
@@ -0,0 +1,10 @@
+<svg id="alignLeft"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" width="512px" height="512px" viewBox="0 0 24 24" 
+	 xml:space="preserve">
+	<g>
+		<path d="M23,4.9H1c-0.221,0-0.4-0.18-0.4-0.4S0.779,4.1,1,4.1h22c0.221,0,0.4,0.18,0.4,0.4S23.221,4.9,23,4.9z"/>
+		<path d="M14.959,9.9H1c-0.221,0-0.4-0.18-0.4-0.4S0.779,9.1,1,9.1h13.959c0.221,0,0.4,0.18,0.4,0.4S15.18,9.9,14.959,9.9z"/>
+		<path d="M23,14.859H1c-0.221,0-0.4-0.18-0.4-0.4s0.179-0.4,0.4-0.4h22c0.221,0,0.4,0.18,0.4,0.4S23.221,14.859,23,14.859z"/>
+		<path d="M12.958,19.9H1c-0.221,0-0.4-0.18-0.4-0.4s0.179-0.4,0.4-0.4h11.958c0.221,0,0.4,0.18,0.4,0.4S13.179,19.9,12.958,19.9z"/>
+	</g>
+</svg>
diff --git a/themes/dj_blog/static/css/default.css b/themes/dj_blog/static/css/default.css
index a2e35fc..abc3236 100644
--- a/themes/dj_blog/static/css/default.css
+++ b/themes/dj_blog/static/css/default.css
@@ -285,9 +285,20 @@
 	margin-left: 12px;
 }
 #alignJustify, #alignLeft {
+	float: right;
 	margin-bottom: -6px;
 	margin-right: 3px;
 	height: 25px;
+	width: 25px;
+	fill: #808080;
+}
+
+#alignJustify:hover {
+	fill: #FF7400;
+} 
+
+#alignLeft:hover {
+	fill: #FF7400;
 }
 
 .article-meta-inf {
diff --git a/themes/dj_blog/static/images/justify.svg b/themes/dj_blog/static/images/justify.svg
deleted file mode 100644
index f94ee05..0000000
--- a/themes/dj_blog/static/images/justify.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" id="Layer_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 24 24" xml:space="preserve">
-<g>
-	<path d="M1,4.9h22c0.221,0,0.4-0.18,0.4-0.4S23.221,4.1,23,4.1H1c-0.221,0-0.4,0.18-0.4,0.4S0.779,4.9,1,4.9z" fill="#808080"/>
-	<path d="M23,9.1H1c-0.221,0-0.4,0.18-0.4,0.4S0.779,9.9,1,9.9h22c0.221,0,0.4-0.18,0.4-0.4S23.221,9.1,23,9.1z" fill="#808080"/>
-	<path d="M23,14.059H1c-0.221,0-0.4,0.18-0.4,0.4s0.179,0.4,0.4,0.4h22c0.221,0,0.4-0.18,0.4-0.4S23.221,14.059,23,14.059z" fill="#808080"/>
-	<path d="M23,19.1H1c-0.221,0-0.4,0.18-0.4,0.4s0.179,0.4,0.4,0.4h22c0.221,0,0.4-0.18,0.4-0.4S23.221,19.1,23,19.1z" fill="#808080"/>
-</g>
-</svg>
diff --git a/themes/dj_blog/static/images/left.svg b/themes/dj_blog/static/images/left.svg
deleted file mode 100644
index 0d2dbd5..0000000
--- a/themes/dj_blog/static/images/left.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" id="Layer_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 24 24" xml:space="preserve">
-<g>
-	<g>
-		<path d="M23,4.9H1c-0.221,0-0.4-0.18-0.4-0.4S0.779,4.1,1,4.1h22c0.221,0,0.4,0.18,0.4,0.4S23.221,4.9,23,4.9z" fill="#808080"/>
-	</g>
-	<g>
-		<path d="M14.959,9.9H1c-0.221,0-0.4-0.18-0.4-0.4S0.779,9.1,1,9.1h13.959c0.221,0,0.4,0.18,0.4,0.4S15.18,9.9,14.959,9.9z" fill="#808080"/>
-	</g>
-	<g>
-		<path d="M23,14.859H1c-0.221,0-0.4-0.18-0.4-0.4s0.179-0.4,0.4-0.4h22c0.221,0,0.4,0.18,0.4,0.4S23.221,14.859,23,14.859z" fill="#808080"/>
-	</g>
-	<g>
-		<path d="M12.958,19.9H1c-0.221,0-0.4-0.18-0.4-0.4s0.179-0.4,0.4-0.4h11.958c0.221,0,0.4,0.18,0.4,0.4S13.179,19.9,12.958,19.9z" fill="#808080"/>
-	</g>
-</g>
-</svg>