Footer icons, style polish

davidhariri · Apr 7, 2024 · 0a20617 · 0a20617
1 parent a87874a
commit 0a20617
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 11 deletions.
diff --git a/posts/service-health.md b/posts/service-health.md
@@ -14,6 +14,10 @@ We had [a full outage](https://status.ada.support/incidents/3n5rs1zqzmkh) last w
 
 In response to last week, we've been combing through our services and double checking our monitors, alerts, bottle-necks, and failure modes. I'll use this space to collect my list of things a high quality, high availability service should have:
 
+<blockquote class="callout note">
+This list is particularly useful for deploying WSGI services on <a href="https://kubernetes.io/">Kubernetes</a>. You can get some of this list by paying a bit more for a PaaS like <a href="https://fly.io/">Fly</a> or <a href="https://vercel.com/">Vercel</a>.
+</blockquote>
+
 1. Automated Integration Tests: We make use of [`pytest`](https://docs.pytest.org/en/8.0.x/), [dependency injection](https://www.youtube.com/watch?v=2ejbLVkCndI) and [`mocking`](https://pypi.org/project/requests-mock/) to test the _functionality_ of our code. We strive to not write ["change detection tests"](https://testing.googleblog.com/2015/01/testing-on-toilet-change-detector-tests.html).
 2. Synthetic End-to-end Testing: We use [DataDog Synthetics](https://www.datadoghq.com/product/synthetics/) for this. It's a great way to test the _availability_ of our services from multiple locations around the world.
 3. Fast CI/CD with [GitHub Actions](https://github.com/features/actions), [Docker](https://www.docker.com/), [Kubernetes](https://kubernetes.io/) and [ArgoCD](https://argoproj.github.io/argo-cd/)

diff --git a/posts/youtube-sub-download.md b/posts/youtube-sub-download.md
@@ -27,7 +27,7 @@ I did a quick search in the sources panel of my browsers dev tools for `UCYO_jab
 4. Scroll to the bottom. Keep scrolling until it has loaded all of your subscriptions.
 5. Open the console in the dev tools (if it's not already) and paste this script in and press **return** on your keyboard.
 
-```javascript
+```js
 var opmlData = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<opml version=\"1.0\">\n<body>\n<outline text=\"YouTube Subscriptions\" title=\"YouTube Subscriptions\">\n" + JSON.stringify(ytInitialData.contents).match(/"channelId":\s*"([^"]+)",\s*"title":\s*{\s*"simpleText":\s*"([^"]+)"\s*}/g).map(match => /"channelId":\s*"([^"]+)"/.exec(match)[1]).map(cid => `<outline type="rss" xmlUrl="https://www.youtube.com/feeds/videos.xml?channel_id=${cid}" />`).join('\n') + "\n</outline>\n</body>\n</opml>";
 var blob = new Blob([opmlData], { type: 'text/xml' });
 var a = document.createElement('a');

diff --git a/static/Email.svg b/static/Email.svg
diff --git a/static/Push Pin.svg b/static/Push Pin.svg
diff --git a/static/RSS.svg b/static/RSS.svg
diff --git a/static/styles.css b/static/styles.css
@@ -1,10 +1,11 @@
 :root {
     --text-color: #1e1e1d;
-    --description-color: #d1cec4;
+    --description-color: #b8b6b2;
     --bg-color: #faf9f4;
     --bg-set-in-color: #e9e8e1;
     --link-color: #008ed5;
     --link-visited-color: #9f50d7;
+    --inline-code-color: #e34361;
     --pic-frame: white;
     --hr-color: #e6e3d8;
 
@@ -19,11 +20,12 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --text-color: #d1d0cc;
-    --description-color: #393837;
+    --description-color: #4d4b4a;
     --bg-color: #1e1e1d;
     --bg-set-in-color: #141413;
     --link-color: #3da1d4;
     --link-visited-color: #b17dd5;
+    --inline-code-color: #f56a81;
     --pic-frame: var(--description-color);
     --hr-color: var(--description-color);
 
@@ -51,6 +53,14 @@ body {
   font-family: "Inter", sans-serif;
 }
 
+body * {
+  position: relative;
+}
+
+p, ol, ul, ol, blockquote {
+  line-height: 1.6;
+}
+
 p {
   margin-top: 0.5rem;
 }
@@ -100,7 +110,8 @@ hr {
   outline: none;
 }
 
-ul li {
+ul li,
+ol li {
   margin-bottom: 0.4rem;
 }
 
@@ -111,6 +122,74 @@ img {
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
+blockquote {
+    margin: 0.5rem 0;
+    padding: 0 1rem;
+    color: var(--description-color);
+    border-left: 0.25rem solid var(--description-color);
+}
+
+blockquote a,
+blockquote a:visited {
+  color: inherit;
+  text-decoration: underline;
+}
+
+blockquote.callout {
+  padding-top: 1.5rem;
+}
+
+blockquote.callout:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -2px;
+  left: 9px;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: currentColor;
+  mask: url('Push%20Pin.svg') no-repeat center / contain;
+}
+
+blockquote.callout.note::before {
+  background-image: url('Push%20Pin.svg');
+}
+
+pre {
+    line-height: 175%;
+    padding: 1rem;
+}
+
+span.icon:before {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.25rem;
+  margin-top: -2px; /* Nudged up by 2px */
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: currentColor;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+span.icon.rss:before {
+  mask-image: url('RSS.svg');
+}
+
+span.icon.email:before {
+  mask-image: url('Email.svg');
+}
+
+p code {
+  font-family: 'Fira Code', monospace;
+  color: var(--inline-code-color);
+  font-size: 0.9rem;
+  background-color: var(--bg-set-in-color);
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.4rem;
+}
+
 .post_preview {
   margin: 0 0 2rem 0;
   box-shadow: 0 1px 0 var(--hr-color);
@@ -120,10 +199,6 @@ img {
   margin-top: 0.4rem;
 }
 
-pre {
-    line-height: 175%;
-    padding: 1rem;
-}
 
 .codehilite {
     border-radius: 0.25rem;

diff --git a/templates/base.html b/templates/base.html
@@ -43,9 +43,8 @@
     </nav>
     {% block body %}{% endblock %}
     <footer>
-      &copy; 2024 <a href="mailto:[email protected]">David Hariri</a><br />
-      <a href="/feed/">Subscribe via RSS</a><br />
-      <a href="https://dhariricom.pirsch.io/?domain=dhariri.com&interval=7d&scale=day" target="_blank">Site Analytics</a>
+      &copy; 2024 <a href="mailto:[email protected]"><span class="icon email"></span>David Hariri</a><br />
+      <a href="/feed/">Subscribe via <span class="icon rss">RSS</span></a><br />
       {% block footer %}{% endblock %}
     </footer>
   </body>