From 8d5dffd0d7fb1ec3ae5eda220a6eb2b2f710c079 Mon Sep 17 00:00:00 2001 From: Phil Howard Date: Mon, 17 Jun 2024 20:04:21 +0100 Subject: [PATCH] HTML tag overhaul. --- assets/pinout.css | 96 ++++++++++++++++++++------------- build.py | 8 +-- index.html | 131 ---------------------------------------------- template.html | 109 +++++++++++++++++++------------------- 4 files changed, 119 insertions(+), 225 deletions(-) delete mode 100644 index.html diff --git a/assets/pinout.css b/assets/pinout.css index de386c7..d070796 100644 --- a/assets/pinout.css +++ b/assets/pinout.css @@ -1,24 +1,16 @@ body { display: grid; - place-items: center; + place-items: top; font-family: Verdana, Geneva, Tahoma, sans-serif; - margin: 0; padding: 0; color: #222; -} -section { - display: grid; grid-template-columns: 480px auto; - grid-column-gap: 20px; + grid-gap: 20px; margin: 20px; } -article { -} -article p { - margin-top: 0; -} footer { display: grid; + grid-column: 1 / 3; align-items: center; margin: 20px 0; } @@ -27,23 +19,26 @@ footer p { margin: 0; text-align: center; } -nav { - text-align: center; - margin-top: 20px; -} aside { + grid-template-rows: auto 1fr; +} +aside nav { display: grid; grid-template-columns: 50% 50%; - grid-template-rows: auto 1fr; } -aside div { - grid-column: 1 / 3; +aside h2 { + font-size: 120%; } -article div img { - max-width: 100%; +aside ul, aside li { + margin: 0; + padding: 0; } -article div { - padding: 20px; +aside li { + margin-left: 20px; + font-size: 80%; +} +article img { + max-width: 100%; } a, a:hover { color: #859900; @@ -51,12 +46,14 @@ a, a:hover { a:hover { text-decoration: none; } -header { +header, body > nav { background: #eeeeee; display: block; line-height: 22px; padding: 20px; display: grid; +} +header { grid-template-columns: auto auto; } header h1 { @@ -65,14 +62,14 @@ header h1 { font-size: 20px; grid-column: 1; } -header ul { +header ul, nav ul { grid-column: 2; list-style: none; margin: 0; padding: 0; text-align: right; } -header li { +header li, nav li { display: inline-block; padding: 0 0 0 10px; white-space: pre; @@ -80,6 +77,15 @@ header li { header li:nth-child(2) a, header li:nth-child(2) a:visited, header li:nth-child(2) a:hover {color: #268bd2;} header li:nth-child(3) a, header li:nth-child(3) a:visited, header li:nth-child(3) a:hover {color: #d33682;} header li:nth-child(4) a, header li:nth-child(4) a:visited, header li:nth-child(4) a:hover {color: #dc322f;} + +.labels a, .a:visited { + color: inherit; + text-decoration: none; +} +.labels a:hover { + color: inherit; + text-decoration: underline; +} .labels.right { counter-reset: pin 0; } @@ -104,42 +110,41 @@ header li:nth-child(4) a, header li:nth-child(4) a:visited, header li:nth-child( line-height: 20px; color: #ffffffaa; } -table:nth-child(1) tr:nth-child(1):before { +/* Square pin-1 designator */ +.labels:nth-child(1) tr:nth-child(1):before { border-radius: 0%; } -td { +.labels td { height: 22px; line-height: 22px; text-align: left; overflow: hidden; font-size: 12px; - cursor: default; white-space: nowrap; position: relative; border-bottom: 1px solid #CCCCCC; padding: 0 0 0 5px; } -table tr:last-child td, table tr:last-child th { +.labels tr:last-child td, .labels tr:last-child th { border-bottom: 0; } -table { +.labels { border-collapse: collapse; } -tbody { +.labels tbody { display: grid; grid-template-columns: repeat(1, 25px auto auto); } -tbody tr { + +.labels tbody tr { display: contents; } - - tr.ground td {color: #22222266;} tr.ground:hover td {color: #fff;} @@ -147,6 +152,23 @@ tr.ground:hover td {color: #fff;} .labels.left tr td:last-child {border-left: 5px solid transparent;} .labels.right tr td:last-child {border-right: 5px solid transparent;} +/* Icon colours, helps diambiguate some of the similar looking icons +which don't pass the squint-test well */ +.gpio i {color: #859900aa;} +/*.pwm i {color: #002b36ee;}*/ /* TODO: Too dark for dark mode... */ +.power i {color: #dc322faa;} +.i2s i {color: #2aa198aa;} +.gpclk i {color: #df8f8eaa;} +.i2c i {color: #268bd2aa;} +.spi i {color: #d33682aa;} +.uart i {color: #6c71c4aa;} +.ground i {color: #555555aa;} + +.fa-solid {margin-right:5px;} + +tr:hover i {color: inherit;} + +/* Pin colours. Background for the pseudo element that forms the pin. */ .labels tbody tr.gpio:before {background-color: #859900aa;} .labels tbody tr.pwm:before {background-color: #002b36aa;} .labels tbody tr.power:before {background-color: #dc322faa;} @@ -182,8 +204,8 @@ tr.ground:hover td {color: #fff;} background-color: #000000; color: #eee; } - tr.ground td {color: #eeeeee66;} - header { + .labels .ground td {color: #eeeeee66;} + header, body > nav { background: #111111; } .filter label, @@ -197,7 +219,7 @@ tr.ground:hover td {color: #fff;} footer a:hover { color: #3ba6f1; } - td, th { + .labels td { border-bottom-color: #333333; } .labels tbody tr:before { diff --git a/build.py b/build.py index 13a2621..09c4307 100644 --- a/build.py +++ b/build.py @@ -92,15 +92,15 @@ def get_chip_signal(chip, signal): icon = "" if row_class == "power": - name = f"{icon} {name}" + name = f"{icon}{name}" elif canonical_function: - canonical_function = f"{icon} {canonical_function}" + canonical_function = f"{icon}{canonical_function}" pin_index = index * 2 + bank["pin_offset"] pins_html += f""" {pin_index} -{name} -{canonical_function} +{name} +{canonical_function} """.replace("\n", "") pins_html += "\n" diff --git a/index.html b/index.html deleted file mode 100644 index a0da889..0000000 --- a/index.html +++ /dev/null @@ -1,131 +0,0 @@ - - - - - - - - - - - -Raspberry Pi Pico GPIO Pinout - - - - -
- -
-
-

Raspberry Pi 5 Pinout

- -
-
-

This GPIO Pinout is an interactive reference to the Raspberry Pi GPIO pins, and a guide to the Raspberry Pi's GPIO interfaces. Pinout also includes hundreds of pinouts for Raspberry Pi add-on boards, HATs and pHATs.

-

Support Pinout.xyz

-

If you love Pinout, please help me fund new features and improvements:

- -

Every $1 makes all the difference! Thank you.

-

pHAT Stack

-

Pinout has teamed up with Pimoroni to create a prototype board compatibility tool, check it out here!

-

Explore HATs & pHATs

-

Check out Pinout's board explorer! Use it to find the pinout for your Raspberry Pi add-on board, or discover new boards. If you manufacture boards, we'd love to add yours too. You can contribute to Pinout.xyz at GitHub.com.

-

What do these numbers mean?

-
    -
  • GPIO - General Purpose Input/Output, aka "BCM" or "Broadcom". These are the big numbers, e.g. "GPIO 22". You'll use these with RPi.GPIO and GPIO Zero.
    • -
  • Physical - or "Board" correspond to the pin's physical location on the header. These are the small numbers next to the header, e.g. "Physical Pin 15".
    • -
  • WiringPi - for Gordon Henderson's Wiring Pi library. These are shown as a tooltip when you mouseover a pin.
    • -
  • Rev 1 Pi - alternate GPIO/BCM numbers for the original, 26-pin model "A" and "B" Pi.
    • -
-

What's the orientation of this pinout?

-

Pinout depicts pin 1 in the top left corner. Pin 1 is the only pin with a square solder pad, which may only be visible from the underside of your Pi. If you orient your Pi such that you are looking at the top with the GPIO on the right and HDMI port(s) on the left, your orientation will match Pinout.

-

Graphical Pinout

-

We've whipped up a simple graphical Raspberry Pi GPIO Pinout. Feel free to print, embed, share or hotlink this image and don't forget to credit us!

-

Graphical Raspberry Pi GPIO Pinout

-
- -
-
- - - diff --git a/template.html b/template.html index df7597a..9960809 100644 --- a/template.html +++ b/template.html @@ -14,60 +14,63 @@ -
-
+ +
+

Legend

+ +
+ +
+
+

This GPIO Pinout is an interactive reference to the Raspberry Pi GPIO pins, and a guide to the Raspberry Pi's GPIO interfaces.

+

Support Pinout.xyz

+

If you love Pinout, please help me fund new features and improvements via:

+ +

Every $1 makes all the difference! Thank you.

+

What do these numbers mean?

+
    +
  • GPIO - General Purpose Input/Output, aka "BCM" or "Broadcom". These are the big numbers, e.g. "GPIO 22". You'll use these with gpiod or GPIO Zero.
    • +
  • Physical - or "Board" correspond to the pin's physical location on the header. These are the small numbers next to the header, e.g. "Physical Pin 15".
    • +
+

What's the orientation of this pinout?

+

Pinout depicts pin 1 in the top left corner. Pin 1 is the only pin with a square solder pad, which may only be visible from the underside of your Pi. If you orient your Pi such that you are looking at the top with the GPIO on the right and HDMI port(s) on the left, your orientation will match Pinout.

+

Graphical Pinout

+

We've whipped up a simple graphical Raspberry Pi GPIO Pinout. Feel free to print, embed, share or hotlink this image and don't forget to credit us!

+

Graphical Raspberry Pi GPIO Pinout

+
+
+ \ No newline at end of file