Mobile responsive.

pinout-xyz · Jun 17, 2024 · 36cb246 · 36cb246
1 parent cd21030
commit 36cb246
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 16 deletions.
diff --git a/assets/pinout.css b/assets/pinout.css
@@ -1,12 +1,8 @@
 body {
-    display: grid;
-    place-items: top;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     padding: 0;
+    margin: 0;
     color: #222;
-    grid-template-columns: 480px auto;
-    grid-gap: 20px;
-    margin: 20px;
 }
 footer {
     display: grid;
@@ -20,25 +16,38 @@ footer p {
     text-align: center;
 }
 aside {
+    margin-top: 20px; /* mobile, removed >= 640px */
     grid-template-rows: auto 1fr;
+    grid-template-columns: auto 196px;
+    display: grid;
 }
 aside nav {
     display: grid;
     grid-template-columns: 50% 50%;
+    grid-column: 1 / 3;
+}
+aside section img {
+    margin-top: 20px;
 }
 aside h2 {
     font-size: 120%;
 }
-aside ul, aside li {
+ul, li {
     margin: 0;
     padding: 0;
 }
 aside li {
-    margin-left: 20px;
     font-size: 80%;
 }
-article img {
+section img {
     max-width: 100%;
+    height: auto;
+}
+article section {
+    margin: 0 20px 0 20px;
+}
+article section li {
+    margin: 0 0 15px 0;
 }
 a, a:hover {
     color: #859900;
@@ -54,6 +63,7 @@ header, body > nav {
     display: grid;
 }
 header {
+    margin-top: 20px; /* mobile, removed >= 640px */
     grid-template-columns: auto auto;
 }
 header h1 {
@@ -203,10 +213,42 @@ tr:hover i {color: inherit;}
 .labels tbody tr.uart:hover:before  {background-color: #6c71c4cc;border-color: #6c71c4;}
 .labels tbody tr.ground:hover:before{background-color: #555555cc;border-color: #555555;}
 
+section, footer {
+    margin: 20px; /* mobile, removed >= 640px */
+}
+
+@media (min-width: 640px) {
+    body {
+        display: grid;
+        grid-template-columns: 480px auto;
+        grid-gap: 20px;
+        margin: 20px;
+    }
+    section, footer {
+        margin: 0;
+    }
+    aside {
+        margin-top: 0;
+        grid-row: 2;
+    }
+    aside li {
+        margin-left: 20px;
+    }
+    article p:nth-child(1) {
+        margin-top: 0;
+    }
+    body > header {
+        margin-top: 0;
+        grid-row: 1;
+        grid-column: 2;
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #000000;
         color: #eee;
+        margin: 20px;
     }
     .labels .ground td {color: #eeeeee66;}
     header, body > nav {

diff --git a/template.html b/template.html
@@ -23,10 +23,6 @@
             <li><a href="#">Pi 1</a></li>
         </ul> 
     </nav>
-    <header>
-        <h1>Raspberry Pi 5 Pinout</h1>
-        <ul><li title="Please donate to support continued work on these websites! Thank you.">Donate</li><li><a href="https://ko-fi.com/gadgetoid" title="Buy me a coffee on Ko-Fi">Ko-Fi</a></li><li><a href="https://github.com/sponsors/Gadgetoid" title="Sponsor me on GitHub">GitHub</a></li><li><a href="https://www.patreon.com/gadgetoid" title="Sponsor me on Patreon">Patreon</a></li></ul>
-    </header>
     <aside>
         <nav>
             {pinout_table}
@@ -44,26 +40,33 @@ <h2>Legend</h2>
                 <li class="gpclk"><i aria-label="Clock icon" class="fa-solid fa-clock"></i> GPCLK<small> - General-purpose Clock</small></li>
             </ul>
         </section>
+        <section>
+            <img src="//pinout.xyz/resources/pi-orientation.png" width="196" height="297">
+        </section>
     </aside>
+    <header>
+        <h1>Raspberry Pi 5 Pinout</h1>
+        <ul><li title="Please donate to support continued work on these websites! Thank you.">Donate</li><li><a href="https://ko-fi.com/gadgetoid" title="Buy me a coffee on Ko-Fi">Ko-Fi</a></li><li><a href="https://github.com/sponsors/Gadgetoid" title="Sponsor me on GitHub">GitHub</a></li><li><a href="https://www.patreon.com/gadgetoid" title="Sponsor me on Patreon">Patreon</a></li></ul>
+    </header>
     <article>
         <section>
             <p>This GPIO Pinout is an interactive reference to the Raspberry Pi GPIO pins, and a guide to the Raspberry Pi's GPIO interfaces.</p>
-            <h4>Support Pinout.xyz</h4>
+            <h3>Support Pinout.xyz</h3>
             <p>If you love Pinout, please help me fund new features and improvements via:</p>
             <ul>
                 <li>GitHub at <a href="https://github.com/sponsors/gadgetoid">GitHub.com/sponsors/gadgetoid</a></li>
                 <li>Patreon at <a href="https://www.patreon.com/gadgetoid">Patreon.com/gadgetoid</a></li>
                 <li>Ko-Fi at <a href="https://ko-fi.com/gadgetoid">Ko-fi.com/gadgetoid</a></li>
             </ul>
             <p>Every $1 makes all the difference! Thank you.</p>
-            <h4>What do these numbers mean?</h4>
+            <h3>What do these numbers mean?</h3>
             <ul>
             <li>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.</li>
             <li>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".</li>
             </ul>
-            <h4>What's the orientation of this pinout?</h4>
+            <h3>What's the orientation of this pinout?</h3>
             <p>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.</p>
-            <h2>Graphical Pinout</h2>
+            <h3>Graphical Pinout</h3>
             <p>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!</p>
             <p><img alt="Graphical Raspberry Pi GPIO Pinout" src="https://raw.githubusercontent.com/pinout-xyz/Pinout.xyz/master/resources/raspberry-pi-pinout.png" /></p>
         </section>