From 514a9d5cc4a32fb8f1765a137203f88de9dd09b6 Mon Sep 17 00:00:00 2001
From: Gabriel Simmer <gabriel@gitgalaxy.com>
Date: Fri, 10 Jul 2020 21:15:13 +0100
Subject: [PATCH] Language pill styling.

---
 assets/stylesheet.css | 114 +++++++++++++++++++++++++++++++-----------
 index.html            |  24 ++++-----
 2 files changed, 96 insertions(+), 42 deletions(-)

diff --git a/assets/stylesheet.css b/assets/stylesheet.css
index cb73fc5..4aa8cc9 100644
--- a/assets/stylesheet.css
+++ b/assets/stylesheet.css
@@ -14,37 +14,61 @@
 * Language highlight colours. Should be or match the language/technology's
 * branding guidelines.
 */
+:root {
+  --background-colour: #fff;
+  --text-colour: #222;
+  --php: rgb(136, 146, 191);
+  --javascript: #83CD29;
+  --go: #00ADD8;
+  --flutter: #02569B;
+  --clojure: #62B132;
+  --rust: #DEA584;
+  --python: #4584B6;
+}
 
 .php {
-  color: rgb(136, 146, 191);
+  background-color: var(--php);
+  border-color: var(--php);
+  color: var(--background-colour);
 }
-
 .javascript {
-  color: #83cd29;
+  background-color: var(--javascript);
+  border-color: var(--javascript);
+  color: var(--background-colour);
 }
-
 .go {
-  color: #00ADD8;
+  background-color: var(--go);
+  border-color: var(--go);
+  color: var(--background-colour);
 }
-
 .flutter {
-  color: #02569B;
+  background-color: var(--flutter);
+  border-color: var(--flutter);
+  color: var(--background-colour);
 }
-
 .clojure {
-  color: #62B132;
+  background-color: var(--clojure);
+  border-color: var(--clojure);
+  color: var(--background-colour);
 }
-
 .rust {
-  color: #dea584;
+  background-color: var(--rust);
+  border-color: var(--rust);
+  color: var(--background-colour);
 }
-
 .python {
-  color: #4584b6;
+  background-color: var(--python);
+  border-color: var(--python);
+  color: var(--background-colour);
 }
 
-.drupal {
-  color: #0077C0;
+.pill {
+  border: 1px solid;
+  font-size: 55%;
+  padding: 0 10px;
+  vertical-align: middle;
+  border-radius: 5px;
+  font-weight: bold;
 }
 
 /* Base Styles
@@ -52,10 +76,6 @@
 /* NOTE
 html is set to 62.5% so that all the REM measurements throughout Skeleton
 are based on 10px sizing. So basically 1.5rem = 15px :) */
-:root {
-  --background-colour: #fff;
-  --text-colour: #222;
-}
 * {
   box-sizing: border-box;
   text-rendering: optimizeLegibility;
@@ -65,7 +85,7 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
 }
 
 html {
-  font-size: 62.5%; 
+  font-size: 62.5%;
   -webkit-text-size-adjust: 100%;
 }
 body {
@@ -73,7 +93,7 @@ body {
   line-height: 1.6;
   font-weight: 400;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",  Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  color: var(--text-colour); 
+  color: var(--text-colour);
   background-color: var(--background-colour);
   margin: 20px 0;
 }
@@ -82,12 +102,43 @@ body {
   :root {
     --background-colour: #202225;
     --text-colour: #dcddde;
+    --flutter: #0175C2;
+    --python: #FFDE57;
+  }
+  .php {
+    background-color: var(--background-colour);
+    border-color: var(--php);
+    color: var(--php);
+  }
+  .javascript {
+    background-color: var(--background-colour);
+    border-color: var(--javascript);
+    color: var(--javascript);
+  }
+  .go {
+    background-color: var(--background-colour);
+    border-color: var(--go);
+    color: var(--go);
   }
   .flutter {
-    color: #0175c2;
+    background-color: var(--background-colour);
+    border-color: var(--go);
+    color: var(--go);
+  }
+  .clojure {
+    background-color: var(--background-colour);
+    border-color: var(--clojure);
+    color: var(--clojure);
+  }
+  .rust {
+    background-color: var(--background-colour);
+    border-color: var(--rust);
+    color: var(--rust);  
   }
   .python {
-    color: #ffde57;
+    background-color: var(--background-colour);
+    border-color: var(--python);
+    color: var(--python);  
   }
 }
 
@@ -187,12 +238,16 @@ h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: 2rem;
   font-weight: 300; }
-h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
-h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
-h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
-h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
-h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+h1 { font-size: 4.0rem; line-height: 1.2; font-weight: 500; }
+h2 { font-size: 3.6rem; line-height: 1.25; }
+h3 { font-size: 3.0rem; line-height: 1.3; font-weight: 500; }
+h4 { font-size: 2.4rem; line-height: 1.35; }
+h5 { font-size: 1.8rem; line-height: 1.5; }
+h6 { font-size: 1.5rem; line-height: 1.6; }
+
+.project h4, .experiment h4 {
+  margin-bottom: 0.05rem;
+}
 
 /* Larger than phablet */
 @media (min-width: 550px) {
@@ -231,7 +286,6 @@ input[type="button"] {
   font-size: 11px;
   font-weight: 600;
   line-height: 38px;
-  letter-spacing: .1rem;
   text-transform: uppercase;
   text-decoration: none;
   white-space: nowrap;
diff --git a/index.html b/index.html
index ab0e11d..b737ed1 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
         <div class="row">
             <div class="twelve columns">
                 <h1>Gabriel Simmer</h1>
-                <h2>Developer & Community Wrangler</h2>
+                <h3>Developer & Community Wrangler</h3>
                 <hr>
             </div>
         </div>
@@ -35,55 +35,55 @@
             <div class="six columns">
                 <h3>Projects</h3>
                 <div class="project">
-                    <h4>Platypus <span class="go">Go</span></h4>
+                    <h4>Platypus <span class="pill go">Go</span></h4>
                     <p>Large-scale server usage monitoring leveraging websockets. <github-repo>gmemstr/platypus</github-repo></p>
                 </div>
 
                 <div class="project">
-                    <h4>pogo <span class="go">Go</span></h4>
+                    <h4>pogo <span class="pill go">Go</span></h4>
                     <p>Self-hosted podcast content manager and RSS feed generator. <github-repo>gmemstr/pogo</github-repo></p>
                 </div>
                 
                 <div class="project">
-                    <h4>sliproad <span class="go">Go</span></h4>
+                    <h4>sliproad <span class="pill go">Go</span></h4>
                     <p>Tie together file storage providers in a single unified interface and API. <github-repo>gmemstr/sliproad</github-repo></p>
                 </div>
 
                 <div class="project">
-                    <h4>Deploy <span class="flutter">Flutter</span></h4>
+                    <h4>Deploy <span class="pill flutter">Flutter</span> <span class="pill">Dart</span></h4>
                     <p>CircleCI mobile client. <github-repo>gmemstr/deploy-app</github-repo></p>
                 </div>
 
                 <div class="project">
-                    <h4>Database Janitor <span class="php">PHP</span></h4>
+                    <h4>Database Janitor <span class="pill php">PHP</span></h4>
                     <p>Create sanitized database dumps. <github-repo>gmemstr/database-janitor</github-repo></p>
                 </div>
 
                 <div class="project">
-                    <h4>Drupal modules <span class="drupal">Drupal</span></h4>
+                    <h4>Drupal modules <span class="pill php">PHP</span></h4>
                     <p>Various Drupal modules created both for client sites and personal use. <a href="https://www.drupal.org/u/gmem">/u/gmem</a></p>
                 </div>
             </div>
             <div class="six columns">
                 <h3>Experiments</h3>
                 <div class="experiment">
-                    <h4>banana-clj <span class="clojure">Clojure</span></h4>
+                    <h4>banana-clj <span class="pill clojure">Clojure</span></h4>
                     <p>Encode your data as the word "banana". <github-repo>gmemstr/banana-clj</github-repo></p>
                 </div>
                 <div class="experiment">
-                    <h4>whalepod <span class="rust">Rust</span></h4>
+                    <h4>whalepod <span class="pill rust">Rust</span></h4>
                     <p>Quicky generate Dockerfiles based on a template. <github-repo>gmemstr/whalepod</github-repo></p>
                 </div>
                 <div class="experiment">
-                    <h4>circleci-api-scripts <span class="python">Python</span></h4>
+                    <h4>circleci-api-scripts <span class="pill python">Python</span></h4>
                     <p>Collection of scripts for interacting with the CircleCI APIs and collecting data. <github-repo>gmemstr/circleci-api-scripts</github-repo></p>
                 </div>
                 <div class="experiment">
-                    <h4>no-swears <span class="javascript">JavaScript</span></h4>
+                    <h4>no-swears <span class="pill javascript">JavaScript</span></h4>
                     <p>Small module for removing swear words from strings. <github-repo>gmemstr/no-swears</github-repo></p>
                 </div>
                 <div class="experiment">
-                    <h4>GTFO Terminal OCR <span class="python">Python</span></h4>
+                    <h4>GTFO Terminal OCR <span class="pill python">Python</span></h4>
                     <p>Analyze terminals from the "GTFO" game and extract information. <github-repo>gmemstr/gtfo-terminal-ocr</github-repo></p>
                 </div>
             </div>