nils/nilsschulte.de
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

center image with css (url#center)

Browse Source
This commit is contained in:
Nils Schulte 2019-12-01 17:50:17 +01:00
parent e4719c4dd8
commit c103c817ea
2 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
content/posts/led-circle.md
View File

@ -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.

30
static/css/style.css
View File

@ -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';
@ -24,9 +23,6 @@
url('../fonts/raleway-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
#background {
position: fixed;
z-index: -1;
@ -61,7 +57,6 @@ body {
display: flex;
flex-flow: row;
text-align: center;
font-size: 20px;
}
@ -88,7 +83,6 @@ body > header h1 {
display: flex;
flex-flow: column;
align-items: center;
}
@ -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;
}