Clean up styling of the brand (#21)

FAForever · Feb 6, 2025 · ef859ff · ef859ff
1 parent 9955c89
commit ef859ff
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 45 deletions.
diff --git a/src/_data/brand.yml b/src/_data/brand.yml
@@ -0,0 +1,13 @@
+faforever:
+  url: https://faforever.com
+
+discord:
+  url: https://discord.gg/mXahVSKGVb
+youtube:
+  url: https://www.youtube.com/channel/UChiCO27pbaXDR0d0JfxlIpw
+twitch:
+  url: https://www.twitch.tv/faflive
+twitter:
+  url: https://x.com/FAFOfficial_
+patreon:
+  url: https://www.patreon.com/faf
diff --git a/src/_includes/components/brand.html b/src/_includes/components/brand.html
@@ -1,7 +1,41 @@
 <div class="brand-container">
-    <img src="{{ "/assets/icons/ios/144.png" | relative_url }}" alt="Logo of FAForever" width="48" height=48/>
-  <p class="brand-text-container">
-    <span class="brand-text-name"> Forged Alliance Forever</span>
+  <img class="brand-logo" src="{{ "/assets/favicons/favicon-96x96.png" | relative_url }}" alt="Logo of FAForever" width="48" height=48/>
+  <div class="brand-text-container">
+    <a class="brand-text-name" href="{{ site.data.brand.faforever.url }}" target="_blank"> Forged Alliance Forever</a>
     <span class="brand-text-goal"> The community drive lobby for Supreme Commander: Forged Alliance</span>
-  </p>
+    <ul class="brand-social-media-list">
+      <li class="brand-social-media-list-item">
+        <a
+          href="{{ site.data.brand.discord.url }}"
+          target="_blank"
+          title="Discord">
+          <span class="svg-icon grey icon-discord"></span>
+        </a>
+      </li>
+      <li class="brand-social-media-list-item">
+        <a
+          href="{{ site.data.brand.youtube.url }}"
+          target="_blank"
+          title="YouTube">
+          <span class="svg-icon grey icon-youtube"></span>
+        </a>
+      </li>
+      <li class="brand-social-media-list-item">
+        <a
+          href="{{ site.data.brand.twitch.url }}"
+          target="_blank"
+          title="Twitch">
+          <span class="svg-icon grey icon-twitch"></span>
+        </a>
+      </li>
+      <li class="brand-social-media-list-item">
+        <a
+          href="{{ site.data.brand.twitter.url }}"
+          target="_blank"
+          title="Twitter/X">
+          <span class="svg-icon grey icon-twitter"></span>
+        </a>
+      </li>
+    </ul>
+  </div>
 </div>
diff --git a/src/_includes/footer.html b/src/_includes/footer.html
@@ -1,40 +1,6 @@
 <footer class="wrapper site-footer h-card">
   <data class="u-url" href="{{ "/" | relative_url }}"></data>
 
-  {% comment %} <div class="footer-col-wrapper">
-    <div class="footer-col">
-      <p class="feed-subscribe">
-        <a href="{{ site.feed.path | default: 'feed.xml' | absolute_url }}">
-          <svg class="svg-icon orange">
-            <use xlink:href="{{ 'assets/minima-social-icons.svg#rss' | relative_url }}"></use>
-          </svg>
-          <span>Subscribe</span>
-        </a>
-      </p>
-      {%- if site.author %}
-        <ul class="contact-list">
-          {% if site.author.name -%}
-            <li class="p-name">{{ site.author.name | escape }}</li>
-          {% endif -%}
-          {% if site.author.email -%}
-            <li>
-              <a class="u-email" href="mailto:{{ site.author.email }}">{{ site.author.email }}</a>
-            </li>
-          {%- endif %}
-        </ul>
-      {%- endif %}
-    </div>
-
-  </div>
-
-  <div class="social-links">
-    {%- include social.html -%}
-  </div> {% endcomment %}
-
-  <div class="footer-description">
-    <p>{{ site.description | escape }}</p>
-  </div>
-
   <div class="footer-navigation">
     <div>
       <h3>Archive</h3>
@@ -84,9 +50,5 @@ <h3>Contributing</h3>
 
   <div class="footer-links">
     {%- include components/brand.html -%}
-
-    <div class="social-links">
-      {%- include social.html -%}
-    </div>
   </div>
 </footer>
diff --git a/src/_sass/components/_brand.scss b/src/_sass/components/_brand.scss
@@ -1,13 +1,18 @@
 .brand-container {
   display: flex;
   flex-direction: row;
+  align-items: start;
   gap: 1em;
-  height: 48px;
 }
 
 .brand-logo {
   width: 48px;
   height: 48px;
+
+  filter: invert(100);
+  @media (prefers-color-scheme: light) {
+    filter: none();
+  }
 }
 
 .brand-text-container {
@@ -22,3 +27,33 @@
   font-size: 0.75rem;
   color: grey;
 }
+
+.brand-social-media-list {
+  margin: 0;
+  list-style: none;
+
+  display: flex;
+  flex-direction: row;
+  gap: 1ch;
+}
+
+.brand-social-media-list-item {
+  float: left;
+  border: 1px solid transparent;
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+
+  &:hover {
+    border: 1px solid $border-color-01;
+  }
+
+  a {
+    display: block;
+    padding: 4px;
+    &:hover {
+      border-color: $border-color-02;
+    }
+  }
+}
diff --git a/src/_sass/components/_socials.scss b/src/_sass/components/_socials.scss
@@ -1,6 +1,5 @@
 .social-media-list {
-  display: table;
-  margin: 0 auto;
+
   list-style: none;
   li {
     float: left;