Merge pull request #1986 from To1ne/toon-forges-logos

site-root: show forges logos on landing page

Author: dscho

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

@@ -199,91 +199,58 @@ $monitor-height: 271px;
   }
 }
 
+@property --floor {
+  syntax: '<integer>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@property --seed {
+  syntax: '<integer>';
+  initial-value: #{random(1000)};
+  inherits: true;
+}
+
 #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;
+
+      $num: 11;
+      $prime: 97;
+
+      @for $i from 1 through $num {
+        &:nth-child(#{$i}) {
+          --prod: calc(var(--seed) * #{$i} * #{$prime});
+          --floor: calc((var(--prod) / #{$num}) - 0.5);
+
+          order: calc(var(--prod) - (#{$num} * var(--floor)));
+        }
+      }
     }
 
     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 +327,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,21 @@ <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>
+    {{ $m := slice
+    (dict "name" "gitlab" "url" "https://gitlab.com")
+    (dict "name" "github" "url" "https://github.com")
+    (dict "name" "forgejo" "url" "https://forgejo.org")
+    (dict "name" "codeberg" "url" "https://codeberg.org")
+    (dict "name" "sourcehut" "url" "https://sourcehut.org")
+    (dict "name" "gitea" "url" "https://gitea.com")
+    }}
+    {{ range shuffle $m }}
+    <li><a href="{{ .url }}">{{ partial "company-svg" (printf "company-project-logos/%s" .name) }}</a></li>
+    {{ end }}
+  </ul>
+  <script type="text/javascript">
+    document.getElementById("companies-projects").style.setProperty("--seed", Math.floor(Math.random() * 1000));
+  </script>
 </section>