made dev-info and hardware-info

css/index.css

@@ -1,3 +1,13 @@
+
+/* ==========================================
+!! Stylesheet guide: !!
+
+1. UNIVERSIAL CONTENT
+2. /Coffee
+3. /dev-info
+4. /hardwa-reinfo
+============================================= */
+
 /* IMPORTS */
 @import url(fonts.css);
 @import url(picker.css);
@@ -7,6 +17,9 @@
 @import url(themes/macchiato.css);
 @import url(themes/mocha.css);
 
+/* ==========================================
+1. UNIVERSIAL CONTENT
+============================================= */
 *,
 *::before,
 *::after {
@@ -273,8 +286,9 @@ body::before {
 
 
 
-/* start of code from security.girlsnetwork.dev/coffee */
-
+/* ==========================================
+2. /coffee
+============================================= */
 .teapot {
   font-size: 6vh;
 }
@@ -370,3 +384,179 @@ body.message-page {
     color: var(--text);
     border: 1px solid var(--surface-1);
 }
+
+/* ============================================================
+   3. /dev-info - https://git.gay/doughmination/clove-is-a-dev/src/branch/main/css/main.css
+   ============================================================ */
+/* Let only the dev-info page scroll; link hub stays locked */
+html:has(.dev-info),
+body:has(.dev-info) {
+  height: auto;
+  min-height: 100dvh;
+  overflow-y: auto;
+}
+
+
+body:has(.dev-info) .hub {
+  max-width: 860px;
+}
+
+.dev-info {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 0 auto;
+  padding-bottom: 4.5rem;
+}
+
+/* Simple Icons rendered via CSS mask so colour is theme-driven.
+   Markup: <span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/SLUG')"></span> */
+.tech-icon {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  transition: transform 0.15s ease, filter 0.15s ease;
+}
+
+/* The icon shape — masked so the label (::after) stays visible */
+.tech-icon::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: currentColor;
+  -webkit-mask: var(--si) center / contain no-repeat;
+  mask: var(--si) center / contain no-repeat;
+}
+
+.tech-icon:hover {
+  transform: translateY(-2px) scale(1.12);
+  filter: drop-shadow(0 4px 8px currentColor);
+}
+
+/* Hover label — pulls text from aria-label, tinted to match the icon */
+.tech-icon::after {
+  content: attr(aria-label);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  background: var(--crust);
+  border: 1px solid currentColor;
+  color: var(--text);
+  font-size: 0.72rem;
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  z-index: 10;
+}
+
+.tech-icon:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Catppuccin accent classes — pull from the active flavour's vars */
+.tech-icon.rosewater {
+  color: var(--rosewater);
+}
+
+.tech-icon.pink {
+  color: var(--pink);
+}
+
+.tech-icon.mauve {
+  color: var(--mauve);
+}
+
+.tech-icon.red {
+  color: var(--red);
+}
+
+.tech-icon.maroon {
+  color: var(--maroon);
+}
+
+.tech-icon.peach {
+  color: var(--peach);
+}
+
+.tech-icon.yellow {
+  color: var(--yellow);
+}
+
+.tech-icon.green {
+  color: var(--green);
+}
+
+.tech-icon.teal {
+  color: var(--teal);
+}
+
+.tech-icon.sky {
+  color: var(--sky);
+}
+
+.tech-icon.sapphire {
+  color: var(--saphire);
+}
+
+.tech-icon.blue {
+  color: var(--blue);
+}
+
+.tech-icon.lavender {
+  color: var(--lavender);
+}
+
+.hardware-list {
+  text-align: left; 
+}
+
+/* ============================================================
+   4. /hardware-info
+   ============================================================ */
+
+.pcpp-part-list {
+    width: 100%;
+
+.pcpp-part-list {
+    max-width: 700px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 14px; /* THIS is your “bigger gap between entries” */
+}
+
+.pcpp-row {
+    display: grid;
+    grid-template-columns: 160px 1fr;
+    align-items: center;
+    column-gap: 24px;
+}
+
+.pcpp-type {
+    text-align: right;
+    font-weight: 600;
+    color: var(--subtext-1);
+    white-space: nowrap; 
+}
+
+.pcpp-item {
+    text-align: left;
+    word-break: keep-all;
+}
+
+.pcpp-item a {
+    text-decoration: none;
+    color: var(--text);
+}
+
+.pcpp-item a:hover {
+    text-decoration: underline;
+}

css/picker.css

@@ -340,3 +340,4 @@ kbd {
   color: var(--subtext-0);
   text-align: center;
 }
+

index.html

@@ -99,7 +99,6 @@
 
             </div>
         </header>
-        <div id="contrib"></div>
     </main>
 
     <aside class="button-wall" aria-label="88x31 buttons">