From c103c817eafd51f764cac992c1f266d792101523 Mon Sep 17 00:00:00 2001
From: Nils Schulte <git@nilsschulte.de>
Date: Sun, 1 Dec 2019 17:50:17 +0100
Subject: [PATCH] center image with css (url#center)

---
 content/posts/led-circle.md |  6 ++--
 static/css/style.css        | 60 +++++++++++++++++++++++--------------
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/content/posts/led-circle.md b/content/posts/led-circle.md
index 89af260..b58f281 100644
--- a/content/posts/led-circle.md
+++ b/content/posts/led-circle.md
@@ -1,9 +1,9 @@
 ---
 title: "Building a animated RGB-LED Thingy"
 date: 2019-12-01T16:53:22+01:00
-draft: true
+draft: false
 summary:  "quick and dirty diy-christmas present(s)"
-images: [/static/img/led-cricle-rainbow.png]
+images: ["/static/img/led-cricle-rainbow.png"]
 ---
 
 This year for chrismas i set myself the challange to not buy anything new to give away as presents.
@@ -13,7 +13,7 @@ I ended up desgning something with my 3D-Printer and the fillament techincaly di
 
 Anyways this is what i came up with:
 
-{{< figure src="img/led-cricle-rainbow.png">}}
+![rainbow anim](/img/led-cricle-rainbow.png#center)
 
 Its a 3D-Printed enclosure with some paper glued to as a diffuser for LED lights. The Brains is an ESP32 running micropython (which i praised in my last [post]({{< ref "/posts/dabbling-micropython.md" >}})).
 Right now it just plays 2 "animations" which you can switch with a button on the bottom side of the case. A secound button changes the brightness.
diff --git a/static/css/style.css b/static/css/style.css
index ef648d7..8a7b03b 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -13,7 +13,6 @@
          url('../fonts/raleway-v14-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
          url('../fonts/raleway-v14-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   }
-  
   /* raleway-700 - latin */
   @font-face {
     font-family: 'Raleway';
@@ -23,17 +22,14 @@
          url('../fonts/raleway-v14-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
          url('../fonts/raleway-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   }
-  
-  
-  
 
-#background {  
+#background {
     position: fixed;
     z-index: -1;
     background-color: rgb(47, 41, 41);/*rgb(153, 34, 13);*/
     width: 100%;
     height: 100%;
-} 
+}
 
 @keyframes backgroundFallin {
     00% {height: 0%;}
@@ -57,26 +53,25 @@
 }
 
 body {
-    font-family: 'Raleway';
+	font-family: 'Raleway';
 	display: flex;
 	flex-flow: row;
-    text-align: center;
-
-    font-size: 20px;
+	text-align: center;
+	font-size: 20px;
 }
 
 body > header {
-    width: 100%;
-    position: absolute;
-    text-align: center;
-    align-content: center;
+	width: 100%;
+	position: absolute;
+	text-align: center;
+	align-content: center;
 	display: flex;
-    flex-flow: row;
+	flex-flow: row;
 }
 
 body > header h1 {
 	display: flex;
-    flex-flow: row;
+	flex-flow: row;
 	margin: 0;
 }
 
@@ -87,9 +82,8 @@ body > header h1 {
 	overflow: hidden;
 
 	display: flex;
-    flex-flow: column;
-    
-    align-items: center;
+	flex-flow: column;
+	align-items: center;
 }
 
 #main > nav, #main > main, #main > footer {
@@ -99,7 +93,7 @@ body > header h1 {
 
 #main > main {
 	flex: 1;
-    margin-right: 25px;
+	margin-right: 25px;
 }
 
 #main > footer {
@@ -188,13 +182,33 @@ table, th, td {
     border-color: #4c4c4c;
     border-collapse: collapse;
     border: 1px solid black;
-    
 }
 
-article img, article video {
+article video, article img {
 	max-width: 100%;
 }
 
+article img[src$='#center'] {
+    display: block;
+    margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
+                            whatever floats your boat, but keep the
+                            horizontal 'auto' for this to work */
+    /* whatever else styles you fancy here */
+}
+
+article img[src$='#floatleft'] {
+    float:left;
+    margin: 0.7rem;      /* this margin is totally up to you */
+    /* whatever else styles you fancy here */
+}
+
+article img[src$='#floatright'] {
+    float:right;
+    margin: 0.7rem;      /* this margin is totally up to you */
+    /* whatever else styles you fancy here */
+}
+
+
 article .footnotes {
 	font-size: 0.75em;
 }
@@ -226,4 +240,4 @@ p code, li code {
     margin:auto;
     max-height: 60%;
     max-width: 60%;
-}
\ No newline at end of file
+}