refactor: add styles for featured sponsors

Author: thetutlage

css/base_variables.css

@@ -1,5 +1,6 @@
 :root {
-  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   --font-display: var(--font-sans);
   --font-mono: 'Fira code', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 
@@ -49,6 +50,10 @@
   --past-sponsor-margin-bottom: 6px;
   --past-sponsor-margin-right: 6px;
 
+  --featured-sponsor-container-width: 100%;
+  --featured-sponsor-margin-bottom: 12px;
+  --featured-sponsor-margin-right: 0;
+
   --prose-font-size: 15px;
   --prose-line-height: 25px;
 
@@ -157,6 +162,15 @@
     --prose-h4-font-size: 17px;
     --prose-h4-line-height: 20px;
     --sidebar-width: 250px;
+
+    --featured-sponsor-margin-right: 12px;
+    --featured-sponsor-container-width: calc(50% - var(--featured-sponsor-margin-right));
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --featured-sponsor-container-width: calc(33% - var(--featured-sponsor-margin-right));
   }
 }
 

css/sponsors.css

@@ -54,3 +54,21 @@
   align-items: center;
   padding: 24px 0;
 }
+
+.sponsors_list .sponsor_item.featured_sponsor,
+.sponsors_list .sponsor_item.featured_sponsor_empty_box {
+  width: var(--featured-sponsor-container-width);
+  margin-bottom: var(--featured-sponsor-margin-bottom);
+  margin-right: var(--featured-sponsor-margin-right);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sponsors_list .sponsor_item.featured_sponsor_empty_box {
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--neutral-gray-10);
+}