Add a social widget

dannycolin · dannycolin · commit 824a5dbb1d60 · 2025-05-18T15:32:52.000-04:00
This patch adds a social widget bar on the left side of the screen
diff --git a/_includes/socials.html b/_includes/socials.html
@@ -0,0 +1,14 @@
+<nav id="widget-socials-container">
+  <ul id="widget-socials">
+    {%- for social in site.data.socials -%}
+    <li>
+      <a href="{{ social.url }}"
+         title="{{ social.name }}"
+         rel="me"
+         target="_blank">
+        {% include icons/{{ social.icon }} %}
+      </a>
+    </li>
+    {%- endfor -%}
+  </ul>
+</nav>
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -3,6 +3,7 @@
   {% include head.html %}
   <body id="www-bugzilla-org" class="homepage">
     {% include header.html %}
+    {% include socials.html %}
     <main>
       {{ content }}
     </main>
diff --git a/_sass/_global.scss b/_sass/_global.scss
@@ -157,6 +157,45 @@ h4 { font-size: var(--font-size-h4) }
   content: '▾'
 }
 
+#widget-socials-container {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  left: 8px;
+  position: fixed;
+  z-index: 2000;
+}
+
+#widget-socials {
+  backdrop-filter: blur(5px);
+  background-color: var(--widget-background-color);
+  border: 1px solid var(--widget-border-color);
+  border-radius: 4px;
+  color: var(--widget-color);
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  & li {
+    border-radius: 4px;
+    margin: 4px;
+    padding: 4px;
+
+    &:hover {
+      background-color: var(--widget-link-hover-background-color);
+    }
+
+    & a {
+      color: var(--widget-link-color);
+    }
+
+    &:hover a,
+    & a:hover {
+      color: var(--widget-link-hover-color);
+    }
+  }
+}
+
 .dropdown:not(.show) .dropdown-menu {
   display: none;
 }
@@ -303,7 +342,7 @@ blockquote {
   flex-wrap: wrap;
 }
 
-#socials li a { 
+#socials li a {
   padding: 6px 2px;
   display: block;
   color: var(--application-header-foreground-color);
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -124,6 +124,14 @@
     --disabled-control-foreground-color: rgb(160, 161, 162);
     --scrollbar-color: rgb(190, 191, 192) var(--application-background-color);
 
+    /** Social Widget */
+    --widget-color: rgb(30, 31, 32);
+    --widget-background-color: rgba(255, 255, 255, 0.2);
+    --widget-link-color: rgb(30, 31, 32);
+    --widget-link-hover-color: rgb(210, 211, 212);
+    --widget-link-hover-background-color: rgb(var(--accent-color-blue-3));
+    --widget-border-color: rgb(60, 61, 62);
+
     /** Button */
     --primary-button-foreground-color: rgb(255, 255, 255);
     --primary-button-background-color: rgb(var(--accent-color-blue-3));
@@ -237,6 +245,14 @@
     --disabled-control-foreground-color: rgb(110, 111, 112);
     --scrollbar-color: rgb(70, 71, 72) var(--application-background-color);
 
+    /** Social Widget */
+    --widget-color: rgb(255, 255, 255);
+    --widget-background-color: rgba(30, 31, 32, 0.2);
+    --widget-link-color: rgb(210, 211, 212);
+    --widget-link-hover-color: rgb(30, 31, 32);
+    --widget-link-hover-background-color: rgb(var(--accent-color-blue-1));
+    --widget-border-color: rgb(200, 201, 202);
+
     /** Button */
     --secondary-button-background-color: rgb(70, 71, 72);
     --secondary-button-border-color: rgb(70, 71, 72);
