Tidy up interfaces.

Author: Gadgetoid

common/layout.html

@@ -6,7 +6,7 @@
 		<meta name="description" content="{{description}}" />
 		<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
 		<link href='{{resource_url}}prettify/prettify.css' rel='stylesheet' />
-		<link href="{{resource_url}}pinout.scss.css?v=20251207v1" rel="stylesheet">
+		<link href="{{resource_url}}pinout.scss.css?v=20251207v2" rel="stylesheet">
 		<link href="{{resource_url}}print.css" rel="stylesheet" media="print">
 		<link rel="shortcut icon" href="{{resource_url}}pinout-logo.png" type="image/png">
 		<meta name="generator" content="Pinout.xyz @ https://github.com/pinout-xyz/pinout.xyz, timestamp: {{v}}"/>

generate-html.py

@@ -707,8 +707,18 @@ def sanitize_type(t):
             })
 
 
+def interfaces_sort(iface):
+    name = iface['name'].lower()
+    if name == "ground":
+        return "6"  # Put after 5v5
+    if name == "1-wire":
+        return "7"  # Put after the moved "Ground"
+    return iface['name']
+
+
 def interfaces_menu(current):
     interfaces = [overlay for overlay in overlays if overlay['class'] == 'interface']
+    interfaces.sort(key=interfaces_sort)
 
     html = ''
 

phatstack/index.html

@@ -4,7 +4,7 @@
     <title>pHAT Stack Configurator</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
-    <link href="https://pinout.xyz/resources/pinout.scss.css?v=20251207v1" rel="stylesheet">
+    <link href="https://pinout.xyz/resources/pinout.scss.css?v=20251207v2" rel="stylesheet">
     <style type="text/css">
     body {
         font-family: 'Roboto Slab', sans-serif;

resources/pinout.scss

@@ -357,20 +357,17 @@ Left Column
 
 #interfaces {
     grid-area: interfaces;
-    background: $color-purple;
-    padding: 0px 0px 2px 2px;
-    line-height: 2px;
+    padding: 0;
     text-align: center;
-    font-size: .7em;
 
     div {
         background: darken($color-purple,5%);
         line-height: 1.45em;
         grid-column: 1;
         color: #FFF;
         align-content: center;
-        padding: 6px;
-        margin-top: 2px;
+        padding: 8px;
+        margin-bottom: 2px;
 
         a, a:hover, a:visited, a:active {
             color: #FFF;
@@ -382,30 +379,34 @@ Left Column
 
     ul {
         grid-column: 2;
-    }
-
-    ul, li {
         list-style:none;
-        margin:0;
-        padding:0;
+        margin: 0;
+        padding: 0;
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: right;
+        gap: 2px;
     }
 
     li {
         display: contents;
         a {
-            display: inline-block;
-            padding: 6px 7px 6px 7px;
-            margin-top: 2px;
-            margin-right: 2px;
-            background: darken($color-purple,5%);
+            padding: 8px;
+            background: darken($color-purple, 5%);
             color: #FFF;
             line-height: 1.45em;
+            flex: 1;
+            white-space: pre;
+            font-size: .7em;
 
-            &:hover {color: darken($color-purple,5%);background:mix($color-purple,#FFF,20%);}
+            &:hover {
+                color: darken($color-purple,5%);
+                background: mix($color-purple,#FFF,20%);}
         }
 
         &.selected a {
-            background:darken($color-purple,10%);
+            background: darken($color-purple,10%);
             color: #FFF;
             text-decoration: underline;
         }
@@ -557,11 +558,12 @@ GPIO nav
     .bottom .overlay-ground a:hover {
         background: linear-gradient(270deg, #268BD2 28px, $overlay-pin-bg-hover 28px);
     }
+
     .top .overlay-ground a:hover {
         background: linear-gradient(90deg, #268BD2 28px, $overlay-pin-bg-hover 28px);
     }
 
-    .overlay-ground:hover .pin:after {
+    .overlay-ground a:hover .pin:after {
         background: #268BD2;
     }
 
@@ -673,10 +675,6 @@ code {
 }
 
 @media screen and (min-width: 540px) {
-    #interfaces {
-        font-size: .8em;
-    }
-
     #gpio {
         a {
             font-size:.8em;
@@ -694,7 +692,7 @@ code {
         display: grid;
     }
 
-    .facets .facet li, #interfaces ul a {
+    .facets .facet li {
         font-size: .8em;
     }
     section {
@@ -744,15 +742,18 @@ code {
     #interfaces {
         grid-column: 2;
         display: grid;
-        grid-template-columns: 200px auto;
-        text-align: right;
         div {
-            padding: 6px 6px 6px 13px;
+            padding: 8px 25px 8px 15px;
+            margin-bottom: 0;
+            margin-right: 2px;
             text-align: left;
             a {
                 display: block;
             }
         }
+        li a {
+            font-size: .8em;
+        }
     }
 
     #interfaces {
@@ -802,7 +803,6 @@ code {
         }
     }
     #interfaces {
-        background: #175853;
         div, li a {
             background: #1a6a64;
         }

resources/pinout.scss.css

@@ -324,20 +324,17 @@ Left Column
 
 #interfaces {
   grid-area: interfaces;
-  background: #6c71c4;
-  padding: 0px 0px 2px 2px;
-  line-height: 2px;
+  padding: 0;
   text-align: center;
-  font-size: 0.7em;
 }
 #interfaces div {
   background: rgb(89.8033980583, 95.4223300971, 188.6966019417);
   line-height: 1.45em;
   grid-column: 1;
   color: #FFF;
   align-content: center;
-  padding: 6px;
-  margin-top: 2px;
+  padding: 8px;
+  margin-bottom: 2px;
 }
 #interfaces div a, #interfaces div a:hover, #interfaces div a:visited, #interfaces div a:active {
   color: #FFF;
@@ -347,23 +344,25 @@ Left Column
 }
 #interfaces ul {
   grid-column: 2;
-}
-#interfaces ul, #interfaces li {
   list-style: none;
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: right;
+  gap: 2px;
 }
 #interfaces li {
   display: contents;
 }
 #interfaces li a {
-  display: inline-block;
-  padding: 6px 7px 6px 7px;
-  margin-top: 2px;
-  margin-right: 2px;
+  padding: 8px;
   background: rgb(89.8033980583, 95.4223300971, 188.6966019417);
   color: #FFF;
   line-height: 1.45em;
+  flex: 1;
+  white-space: pre;
+  font-size: 0.7em;
 }
 #interfaces li a:hover {
   color: rgb(89.8033980583, 95.4223300971, 188.6966019417);
@@ -495,7 +494,7 @@ GPIO nav
 #gpio .top .overlay-ground a:hover {
   background: linear-gradient(90deg, #268BD2 28px, rgb(245, 243, 237) 28px);
 }
-#gpio .overlay-ground:hover .pin:after {
+#gpio .overlay-ground a:hover .pin:after {
   background: #268BD2;
 }
 #gpio .bottom .overlay-ground .pin:after {
@@ -630,9 +629,6 @@ code {
 }
 
 @media screen and (min-width: 540px) {
-  #interfaces {
-    font-size: 0.8em;
-  }
   #gpio a {
     font-size: 0.8em;
   }
@@ -645,7 +641,7 @@ code {
   .board #interfaces {
     display: grid;
   }
-  .facets .facet li, #interfaces ul a {
+  .facets .facet li {
     font-size: 0.8em;
   }
   section {
@@ -689,20 +685,25 @@ code {
   #interfaces {
     grid-column: 2;
     display: grid;
-    grid-template-columns: 200px auto;
-    text-align: right;
   }
   .boards-page #interfaces div,
   .board #interfaces div,
   #interfaces div {
-    padding: 6px 6px 6px 13px;
+    padding: 8px 25px 8px 15px;
+    margin-bottom: 0;
+    margin-right: 2px;
     text-align: left;
   }
   .boards-page #interfaces div a,
   .board #interfaces div a,
   #interfaces div a {
     display: block;
   }
+  .boards-page #interfaces li a,
+  .board #interfaces li a,
+  #interfaces li a {
+    font-size: 0.8em;
+  }
   #interfaces {
     font-size: 1em;
   }
@@ -746,9 +747,6 @@ code {
   #crumbtrail p, #crumbtrail a, #crumbtrail a:hover, #crumbtrail a:active {
     color: #fff;
   }
-  #interfaces {
-    background: #175853;
-  }
   #interfaces div, #interfaces li a {
     background: #1a6a64;
   }

src/en/template/localised.yaml

@@ -27,7 +27,7 @@ strings:
 - github_repository: 'GitHub Repository'
 - board_schematic : 'Schematic'
 - buy_now: 'Buy Now'
-- browse_addons: 'Browse pinouts for HATs, pHATs and add-ons'
-- return_home: 'Return to the Raspberry Pi GPIO Pinout'
+- browse_addons: 'Click here to browse pinouts for HATs & pHATs'
+- return_home: 'Click here to return to the Raspberry Pi GPIO Pinout'
 - boards_title: 'Raspberry Pi HATs, pHATs & Add-ons'
 - boards_subtitle: 'Click on a HAT, pHAT or add-on for more details and to see which pins it uses!'