correct footer
This commit is contained in:
Nils Schulte
parent
8dcc8d15a6
commit
c29a492b77
20
content/posts/desk-automation-big-arcade-buttons.md
Normal file
20
content/posts/desk-automation-big-arcade-buttons.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "Big shiny arcade buttons"
|
||||
date: 2019-11-05T08:20:43+01:00
|
||||
draft: true
|
||||
summary: Adding buttons to my "smart desk"
|
||||
images: [/static/img/buttons-aus.jpg, /static/img/buttons-switches.jpg]
|
||||
---
|
||||
Last [post]({{< ref "/posts/desk-automation.md" >}}) i teased the next upgrade of my smart desk project which are some big arcade buttons to control the light even when my network is down. Well...
|
||||
|
||||
I finished that part over the last few days:
|
||||
|
||||
{{< figure src="/img/buttons-aus.jpg">}}
|
||||
|
||||
The buttons i did choose for the desk are thous big arcade buttons[^1] as they produce this satisfying click when pressed. They come with an integrated LED and resistor, but -as they are not supposed to be driven by a 3.3 volt microcontroller- they need 12 volt supplied to be fully lit up. For the controller i use a normal USB power supply so i tried to power the LEDs with 5 volts. That made them bright enough so i went with that...
|
||||
To up the 3.3V logic level from the GPIOs of the controller to 5V i just used a normal 2N2222 NPN-Transistor[^2]. Soldered together the switches + transistor + some cables the "thing" looks something like this:
|
||||
{{< figure src="/img/buttons-switches.jpg">}}
|
||||
|
||||
|
||||
[^1]: You can find them easily when you search ebay or any other site that sells electronics from china
|
||||
[^2]: [Sparkfun](https://learn.sparkfun.com/tutorials/transistors/applications-i-switches) describes the basic circuit quite good
|
||||
@ -1,8 +1,10 @@
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<footer><br>
|
||||
<a rel="source code" href="https://github.com/Schnilz/nilsschulte.de">source code</a> for this site<br>
|
||||
© {{ now.Format "2006" }} Nils Schulte
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" src="https://i.creativecommons.org/l/by/4.0/80x15.png"></a>
|
||||
<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png"></a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
@ -213,198 +213,3 @@ p code, li code {
|
||||
max-height: 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
/* Layout *
|
||||
|
||||
body {
|
||||
font-family: 'Fira Code', 'Nanum Gothic Coding', monospace;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
body > header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body > header h1 {
|
||||
width: 1.5em;
|
||||
font-size: 10em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body > header p {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#main {
|
||||
flex: auto;
|
||||
min-height: 100vh;
|
||||
max-width: 820px;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
#main > nav, #main > main, #main > footer {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#main > nav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main > main {
|
||||
flex: 1;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
#main > footer {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > header h1 {
|
||||
width: auto;
|
||||
font-size: 7em;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: block;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#main > main {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid gray;
|
||||
max-width: 25px;
|
||||
margin: 35px auto;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
background-color: black;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
|
||||
article img:not([src$=".jpg"]):not([src$=".jpeg"]) {
|
||||
/* prevent transparent images from showing the black background
|
||||
background-color: white;
|
||||
border: 5px solid white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* Homepage
|
||||
|
||||
#intro {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#intro h1 {
|
||||
font-size: 10em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#intro p {
|
||||
color: gray;
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#intro h1 {
|
||||
font-size: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography
|
||||
|
||||
article > header {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
article > header time {
|
||||
color: gray;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
article p, article li {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
article img, article video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
article .footnotes {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Fira Code', 'Nanum Gothic Coding', monospace;
|
||||
background-color: #272822;
|
||||
color: #f8f8f2;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
|
||||
tab-size: 2;
|
||||
-moz-tab-size: 2;
|
||||
}
|
||||
|
||||
p code, li code {
|
||||
color: #930d72;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
iframe[src*="youtube-nocookie.com"] {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
iframe[src*="youtube-nocookie.com"] {
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Article list
|
||||
|
||||
.article-list article > header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.article-list article h3 {
|
||||
display: inline-block;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.article-list article small {
|
||||
font-weight: normal;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user