New retro design for most of the site

1 files changed, 11 insertions, 10 deletions

diff --git a/src/components/TechnologyBadge.astro b/src/components/TechnologyBadge.astro
index 204bef6..ad32c6e 100644
--- a/src/components/TechnologyBadge.astro
+++ b/src/components/TechnologyBadge.astro
@@ -112,20 +112,24 @@ const tech = technologies[code] as Technology;
 
 <style define:vars={{ colour: tech.colour }}>
   span {
-    /*display: inline-block;*/
     background-color: var(--colour);
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.15) 100%);
     font-weight: bold;
     text-transform: uppercase;
-    border-radius: 0.5em;
+    border-radius: 20px;
     padding: 0.5em 1em;
+    border: 1px solid rgba(0,0,0,0.2);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2);
 
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
   }
 
   .text-dark {
     color: #000;
+    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
   }
 
   .text-light {
@@ -133,16 +137,13 @@ const tech = technologies[code] as Technology;
   }
 
   .pill-small {
-    padding: 0.35em 0.5em;
-    border-radius: 0.25em;
-
-    font-size: 0.75em;
+    padding: 2px 8px;
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
   }
 
   .pill-large {
-    padding: 0.35 0.75em;
-    border-radius: 0.5em;
-
-    font-size: 0.75em;
+    padding: 4px 12px;
+    font-size: 0.85rem;
   }
 </style>