Some little CSS tweaks.

pinout-xyz · Sep 15, 2024 · d549052 · d549052
1 parent 95cd655
commit d549052
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/assets/pinout.css b/assets/pinout.css
@@ -165,6 +165,19 @@ header li:nth-child(4) a, header li:nth-child(4) a:visited, header li:nth-child(
     border-bottom: 0;
 }
 
+table {
+    font-family: ui-monospace,
+    Menlo, Monaco,
+    "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono",
+    "Oxygen Mono",
+    "Ubuntu Monospace",
+    "Source Code Pro",
+    "Fira Mono",
+    "Droid Sans Mono",
+    "Courier New", monospace;
+}
+
 .labels {
     border-collapse: collapse;
 }
@@ -178,11 +191,9 @@ header li:nth-child(4) a, header li:nth-child(4) a:visited, header li:nth-child(
     display: contents;
 }
 
-
 tr.ground td {color: #22222266;}
-tr.ground:hover td {color: #fff;}
-
-.labels tbody tr:hover, .labels tbody tr:hover:before {color: #fff;}
+tr.ground:hover td, .labels tbody tr:hover {color: #000;}
+.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;}
 
@@ -215,17 +226,18 @@ tr:hover i {color: inherit;}
 .labels tbody tr.uart:before   {background-color: #6c71c4aa;}
 .labels tbody tr.ground:before {background-color: #555555aa;}
 
-.labels tbody tr:hover.gpio td   {background-color: #859900cc; border-color: #859900ee;}
-.labels tbody tr:hover.pwm td    {background-color: #002b36cc; border-color: #002b36ee;}
-.labels tbody tr:hover.supply td {background-color: #dc322fcc; border-color: #dc322fee;}
-.labels tbody tr:hover.power td  {background-color: #df8b2ccc; border-color: #df8b2cee;}
-.labels tbody tr:hover.i2s td    {background-color: #2aa198cc; border-color: #2aa198ee;}
-.labels tbody tr:hover.gpclk td  {background-color: #df8f8ecc; border-color: #df8f8eee;}
-.labels tbody tr:hover.i2c td    {background-color: #268bd2cc; border-color: #268bd2ee;}
-.labels tbody tr:hover.spi td    {background-color: #d33682cc; border-color: #d33682ee;}
-.labels tbody tr:hover.uart td   {background-color: #6c71c4cc; border-color: #6c71c4ee;}
-.labels tbody tr:hover.ground td {background-color: #555555cc; border-color: #555555ee;}
+.labels tbody tr:hover.gpio td   {background-color: #85990033; border-color: #859900ee;}
+.labels tbody tr:hover.pwm td    {background-color: #002b3633; border-color: #002b36ee;}
+.labels tbody tr:hover.supply td {background-color: #dc322f33; border-color: #dc322fee;}
+.labels tbody tr:hover.power td  {background-color: #df8b2c33; border-color: #df8b2cee;}
+.labels tbody tr:hover.i2s td    {background-color: #2aa19833; border-color: #2aa198ee;}
+.labels tbody tr:hover.gpclk td  {background-color: #df8f8e33; border-color: #df8f8eee;}
+.labels tbody tr:hover.i2c td    {background-color: #268bd233; border-color: #268bd2ee;}
+.labels tbody tr:hover.spi td    {background-color: #d3368233; border-color: #d33682ee;}
+.labels tbody tr:hover.uart td   {background-color: #6c71c433; border-color: #6c71c4ee;}
+.labels tbody tr:hover.ground td {background-color: #55555533; border-color: #555555ee;}
 
+.labels tbody tr:hover:before {font-weight: bold;}
 .labels tbody tr.gpio:hover:before  {background-color: #859900cc;border-color: #859900;}
 .labels tbody tr.pwm:hover:before   {background-color: #002b36cc;border-color: #002b36;}
 .labels tbody tr.supply:hover:before{background-color: #dc322fcc;border-color: #dc322f;}
@@ -245,8 +257,8 @@ section, footer {
     body {
         display: grid;
         grid-template-columns: 480px auto;
-        grid-gap: 20px;
-        margin: 20px;
+        grid-gap: 20px 40px;
+        margin: 10px;
     }
     section, footer {
         margin: 0;
@@ -297,4 +309,5 @@ section, footer {
     .labels tbody tr:before {
         border-color: #000000;
     }
+    tr.ground:hover td, .labels tbody tr:hover {color: #fff;}
 }
diff --git a/template.html b/template.html
@@ -11,7 +11,7 @@
 <link rel="manifest" href="manifest.json">
 <title>Raspberry Pi Pico GPIO Pinout</title>
 <meta name="description" content="An interactive, accessible and beautiful GPIO Pinout guide for the Raspberry Pi Pico" />
-<link rel="stylesheet" href="pinout.css?v=20230610" type="text/css" media="screen" />
+<link rel="stylesheet" href="pinout.css?v=20240915" type="text/css" media="screen" />
 </head>
 <body>
     <nav>