site-root: show forges logos on landing page

Replace the project and company logos by logos of forges that provide
Git hosting.

SVG images are used to properly scale on any screen size. The SVG images
are embedded directly into the HTML. This allows us to use CSS custom
properties (like `var(--logos-1)`) for the colors. Using this method the
colors can easily adapt to dark/light mode.

The SVG images are created in Inkscape. One source file `all.svg` has
all the logos. In this file placeholder colors are used. The placeholder
colors are replaced by `var(--xyz)` by the Hugo rendering pipeline. The
placeholder colors are:

* `#aaaaaa` -> `var(--logos-1)`
* `#999999` -> `var(--logos-2)`
* `#666666` -> `var(--logos-3)`
* `#333333` -> `var(--logos-4)`

These are lightest to darkest in light mode, and reverse in dark mode.

Author: To1ne

assets/sass/dark-mode.css

@@ -28,6 +28,11 @@
     $search-border:           #ceccc5;
     $search-focus-border:     #007175;
 
+    $logos-1: #a6a7a1;
+    $logos-2: #90908b;
+    $logos-3: #767675;
+    $logos-4: #696c69;
+
     @if $mode == dark {
         $orange:                  #d7834f;
         $blue:                    #007a7e;
@@ -56,6 +61,11 @@
         $search-border:           #5e5e5a;
         $search-focus-border:     #ceccc5;
 
+        $logos-1: #696c69;
+        $logos-2: #767675;
+        $logos-3: #90908b;
+        $logos-4: #a6a7a1;
+
         :root#{$theme} {
             div#masthead {
                 background: transparent;
@@ -181,6 +191,11 @@
         --versions-footer-bg-color:     #{$versions-footer-bg-color};
         --search-border:                #{$search-border};
         --search-focus-border:          #{$search-focus-border};
+
+        --logos-1: #{$logos-1};
+        --logos-2: #{$logos-2};
+        --logos-3: #{$logos-3};
+        --logos-4: #{$logos-4};
     }
 }
 

assets/sass/front-page.scss

@@ -200,90 +200,33 @@ $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));
+    align-items: center;
+    justify-items: center;
+
     li {
-      display: block;
-      float: left;
-      width: 108px;
-      height: 65px;
-      margin: 0 4px 25px 5px;
+      margin: 1em 2em;
     }
 
     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);
-      }
+    svg {
+      max-width: 100%;
+      max-height: 100%;
     }
   }
 }
@@ -360,12 +303,10 @@ a.icon {
   }
   #companies-projects {
     ul {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
+      // TODO
     }
     li {
-      margin: 0.7rem 0.4rem;
+      // TODO
     }
   }
 }

layouts/partials/company-svg.html

@@ -0,0 +1,23 @@
+{{/* 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 }}
+
+{{ $source := printf "/static/images/%s.svg" $svg | readFile }}
+
+{{/* The SVGs are created in Inkscape. They all are sourced from: */}}
+{{/*   static/images/company-project-logos/all.svg */}}
+{{/*  */}}
+{{/* The are exported using the "Batch Export" -> "Layers" function. */}}
+{{/*  */}}
+{{/* Four colors are used in the source drawing. These are replaced */}}
+{{/* by CSS variables to accomodate dark mode. */}}
+
+{{ $source = replace $source "#aaaaaa" "var(--logos-1)" }}
+{{ $source = replace $source "#999999" "var(--logos-2)" }}
+{{ $source = replace $source "#666666" "var(--logos-3)" }}
+{{ $source = replace $source "#333333" "var(--logos-4)" }}
+
+{{ return (replaceRE $match $replaceWith $source | safeHTML) }}

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 "company-svg" "company-project-logos/gitlab" }}</a></li>
+    <li><a href="https://github.com">{{ partial "company-svg" "company-project-logos/github" }}</a></li>
+    <li><a href="https://forgejo.org">{{ partial "company-svg" "company-project-logos/forgejo" }}</a></li>
+    <li><a href="https://codeberg.org">{{ partial "company-svg" "company-project-logos/codeberg" }}</a></li>
+    <li><a href="https://sourcehut.org">{{ partial "company-svg" "company-project-logos/sourcehut" }}</a></li>
+    <li><a href="https://gitea.com">{{ partial "company-svg" "company-project-logos/gitea" }}</a></li>
+  </ul>
 </section>