WIP: show forges logos on landing page

Plenty more logos to add, and shuffle order around.

Author: To1ne

assets/sass/front-page.scss

@@ -200,90 +200,25 @@ $monitor-height: 271px;
 }
 
 #companies-projects {
-  padding-top: 20px;
-  clear: both;
   border-top: solid 1px var(--base-border-color);
 
   ul {
     @extend .unstyled !optional;
 
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+
     li {
-      display: block;
-      float: left;
-      width: 108px;
-      height: 65px;
-      margin: 0 4px 25px 5px;
     }
 
     a {
-      display: block;
-      width: 108px;
-      height: 65px;
-      text-indent: -9999px;
-      background-repeat: no-repeat;
-      background-position: 0 0;
       opacity: 0.85;
       transition-duration: 0.3s;
       transition-property: opacity;
 
       &:hover {
         opacity: 1;
       }
-
-      &.google {
-        @include background-image-2x($baseurl + "images/company-project-logos/google", 108px, 65px);
-      }
-
-      &.microsoft {
-        @include background-image-2x($baseurl + "images/company-project-logos/microsoft", 108px, 65px);
-      }
-
-      &.netflix {
-        @include background-image-2x($baseurl + "images/company-project-logos/netflix", 108px, 65px);
-      }
-
-      &.linked-in {
-        @include background-image-2x($baseurl + "images/company-project-logos/linked-in", 108px, 65px);
-      }
-
-      &.linux {
-        @include background-image-2x($baseurl + "images/company-project-logos/linux", 108px, 65px);
-      }
-
-      &.perl {
-        @include background-image-2x($baseurl + "images/company-project-logos/perl", 108px, 65px);
-      }
-
-      &.postgresql {
-        @include background-image-2x($baseurl + "images/company-project-logos/postgresql", 108px, 65px);
-      }
-
-      &.android {
-        @include background-image-2x($baseurl + "images/company-project-logos/android", 108px, 65px);
-      }
-      &.rails {
-        @include background-image-2x($baseurl + "images/company-project-logos/rails", 108px, 65px);
-      }
-
-      &.qt {
-        @include background-image-2x($baseurl + "images/company-project-logos/qt", 108px, 65px);
-      }
-
-      &.gnome {
-        @include background-image-2x($baseurl + "images/company-project-logos/gnome", 108px, 65px);
-      }
-
-      &.eclipse {
-        @include background-image-2x($baseurl + "images/company-project-logos/eclipse", 108px, 65px);
-      }
-
-      &.kde {
-        @include background-image-2x($baseurl + "images/company-project-logos/kde", 108px, 65px);
-      }
-
-      &.x {
-        @include background-image-2x($baseurl + "images/company-project-logos/x", 108px, 65px);
-      }
     }
   }
 }
@@ -360,12 +295,10 @@ a.icon {
   }
   #companies-projects {
     ul {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
+      // TODO
     }
     li {
-      margin: 0.7rem 0.4rem;
+      // TODO
     }
   }
 }

layouts/partials/site-root.html

@@ -58,22 +58,13 @@ <h3>Community</h3>
 </div>
 
 <section id="companies-projects">
-  <h3 class="text-center"> Companies &amp; Projects Using Git </h3>
+  <h3 class="text-center">Products providing Git hosting</h3>
   <ul>
-    <li><a href="https://github.com/google" class="google">Google</a></li>
-    <li><a href="https://github.com/Microsoft" class="microsoft">Microsoft</a></li>
-    <li><a href="https://github.com/linkedin" class="linked-in">LinkedIn</a></li>
-    <li><a href="https://github.com/netflix" class="netflix">Netflix</a></li>
-    <li><a href="https://perl5.git.perl.org/perl.git" class="perl">Perl</a></li>
-    <li><a href="https://git.postgresql.org/gitweb/" class="postgresql">PostgreSQL</a></li>
-
-    <li><a href="https://android-review.googlesource.com/#/q/status:open,n,z" class="android">Android</a></li>
-    <li><a href="https://git.kernel.org/cgit/linux/kernel/git/torvalds/linux.git" class="linux">Linux</a></li>
-    <li><a href="https://github.com/rails/rails" class="rails">Ruby on Rails</a></li>
-    <li><a href="https://code.qt.io/cgit/" class="qt">Qt</a></li>
-    <li><a href="https://gitlab.gnome.org/GNOME" class="gnome">Gnome</a></li>
-    <li><a href="https://git.eclipse.org/c/" class="eclipse">Eclipse</a></li>
-    <li><a href="https://invent.kde.org/explore/groups" class="kde">KDE</a></li>
-    <li><a href="https://cgit.freedesktop.org/xorg/xserver/" class="x">X</a></li>
-</ul>
+    <li><a href="https://gitlab.com">{{ partial "svg" "company-project-logos/gitlab" }}</a></li>
+    <li><a href="https://github.com">{{ partial "svg" "company-project-logos/github" }}</a></li>
+    <li><a href="https://forgejo.org">{{ partial "svg" "company-project-logos/forgejo" }}</a></li>
+    <li><a href="https://codeberg.org">{{ partial "svg" "company-project-logos/codeberg" }}</a></li>
+    <li><a href="https://sourcehut.org">{{ partial "svg" "company-project-logos/sourcehut" }}</a></li>
+    <li><a href="https://gitea.com">{{ partial "svg" "company-project-logos/gitea" }}</a></li>
+  </ul>
 </section>

layouts/partials/svg.html

@@ -0,0 +1,8 @@
+{{/* from https://bitbanged.com/posts/how-to-use-inline-svgs-with-hugo/ */}}
+{{/* and https://css-tricks.com/accessible-svgs/ */}}
+{{ $svg := . }}
+{{ $class := print $svg "-icon" }}
+{{ $match := "<svg (.*)?>(.*)</svg>" }}
+
+{{ $replaceWith := printf `<svg class="%s" ${1}>${2}</svg>` $class }}
+{{ return (replaceRE $match $replaceWith (printf "/static/images/%s.svg" $svg | readFile) | safeHTML) }}