HTML tag overhaul.

pinout-xyz · Jun 17, 2024 · 8d5dffd · 8d5dffd
1 parent 08cccec
commit 8d5dffd
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 225 deletions.
diff --git 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,36 +19,41 @@ 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;
 }
 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,21 +62,30 @@ 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;
 }
 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,49 +110,65 @@ 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;}
 
 .labels tbody tr:hover, .labels tbody tr:hover:before {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
@@ -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"""            <tr aria-label="Physical pin {index + 1}" class="{row_class}">
 <th>{pin_index}</th>
-<td>{name}</td>
-<td>{canonical_function}</td>
+<td><a href="#">{name}</a></td>
+<td><a href="#">{canonical_function}</a></td>
 </tr>""".replace("\n", "")
         pins_html += "\n"
 

diff --git a/index.html b/index.html