Skip to content

Commit 8d59728

Browse files
To1neTo1ne
committed
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.
1 parent 952c692 commit 8d59728

File tree

11 files changed

+846
-88
lines changed

11 files changed

+846
-88
lines changed

‎assets/sass/dark-mode.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@
2828
$search-border: #ceccc5;
2929
$search-focus-border: #007175;
3030

31+
$logos-1: #a6a7a1;
32+
$logos-2: #90908b;
33+
$logos-3: #767675;
34+
$logos-4: #696c69;
35+
3136
@if $mode == dark {
3237
$orange: #d7834f;
3338
$blue: #007a7e;
@@ -56,6 +61,11 @@
5661
$search-border: #5e5e5a;
5762
$search-focus-border: #ceccc5;
5863

64+
$logos-1: #696c69;
65+
$logos-2: #767675;
66+
$logos-3: #90908b;
67+
$logos-4: #a6a7a1;
68+
5969
:root#{$theme} {
6070
div#masthead {
6171
background: transparent;
@@ -181,6 +191,11 @@
181191
--versions-footer-bg-color: #{$versions-footer-bg-color};
182192
--search-border: #{$search-border};
183193
--search-focus-border: #{$search-focus-border};
194+
195+
--logos-1: #{$logos-1};
196+
--logos-2: #{$logos-2};
197+
--logos-3: #{$logos-3};
198+
--logos-4: #{$logos-4};
184199
}
185200
}
186201

‎assets/sass/front-page.scss‎

Lines changed: 12 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -200,90 +200,33 @@ $monitor-height: 271px;
200200
}
201201

202202
#companies-projects {
203-
padding-top: 20px;
204-
clear: both;
205203
border-top: solid 1px var(--base-border-color);
206204

207205
ul {
208206
@extend .unstyled !optional;
209207

208+
display: grid;
209+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
210+
align-items: center;
211+
justify-items: center;
212+
210213
li {
211-
display: block;
212-
float: left;
213-
width: 108px;
214-
height: 65px;
215-
margin: 0 4px 25px 5px;
214+
margin: 1em 2em;
216215
}
217216

218217
a {
219-
display: block;
220-
width: 108px;
221-
height: 65px;
222-
text-indent: -9999px;
223-
background-repeat: no-repeat;
224-
background-position: 0 0;
225218
opacity: 0.85;
226219
transition-duration: 0.3s;
227220
transition-property: opacity;
228221

229222
&:hover {
230223
opacity: 1;
231224
}
225+
}
232226

233-
&.google {
234-
@include background-image-2x($baseurl + "images/company-project-logos/google", 108px, 65px);
235-
}
236-
237-
&.microsoft {
238-
@include background-image-2x($baseurl + "images/company-project-logos/microsoft", 108px, 65px);
239-
}
240-
241-
&.netflix {
242-
@include background-image-2x($baseurl + "images/company-project-logos/netflix", 108px, 65px);
243-
}
244-
245-
&.linked-in {
246-
@include background-image-2x($baseurl + "images/company-project-logos/linked-in", 108px, 65px);
247-
}
248-
249-
&.linux {
250-
@include background-image-2x($baseurl + "images/company-project-logos/linux", 108px, 65px);
251-
}
252-
253-
&.perl {
254-
@include background-image-2x($baseurl + "images/company-project-logos/perl", 108px, 65px);
255-
}
256-
257-
&.postgresql {
258-
@include background-image-2x($baseurl + "images/company-project-logos/postgresql", 108px, 65px);
259-
}
260-
261-
&.android {
262-
@include background-image-2x($baseurl + "images/company-project-logos/android", 108px, 65px);
263-
}
264-
&.rails {
265-
@include background-image-2x($baseurl + "images/company-project-logos/rails", 108px, 65px);
266-
}
267-
268-
&.qt {
269-
@include background-image-2x($baseurl + "images/company-project-logos/qt", 108px, 65px);
270-
}
271-
272-
&.gnome {
273-
@include background-image-2x($baseurl + "images/company-project-logos/gnome", 108px, 65px);
274-
}
275-
276-
&.eclipse {
277-
@include background-image-2x($baseurl + "images/company-project-logos/eclipse", 108px, 65px);
278-
}
279-
280-
&.kde {
281-
@include background-image-2x($baseurl + "images/company-project-logos/kde", 108px, 65px);
282-
}
283-
284-
&.x {
285-
@include background-image-2x($baseurl + "images/company-project-logos/x", 108px, 65px);
286-
}
227+
svg {
228+
max-width: 100%;
229+
max-height: 100%;
287230
}
288231
}
289232
}
@@ -360,12 +303,10 @@ a.icon {
360303
}
361304
#companies-projects {
362305
ul {
363-
display: flex;
364-
flex-wrap: wrap;
365-
justify-content: center;
306+
// TODO
366307
}
367308
li {
368-
margin: 0.7rem 0.4rem;
309+
// TODO
369310
}
370311
}
371312
}

‎layouts/partials/company-svg.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{{/* from https://bitbanged.com/posts/how-to-use-inline-svgs-with-hugo/ */}}
2+
{{/* and https://css-tricks.com/accessible-svgs/ */}}
3+
{{ $svg := . }}
4+
{{ $class := print $svg "-icon" }}
5+
{{ $match := "<svg (.*)?>(.*)</svg>" }}
6+
{{ $replaceWith := printf `<svg class="%s" ${1}>${2}</svg>` $class }}
7+
8+
{{ $source := printf "/static/images/%s.svg" $svg | readFile }}
9+
10+
{{/* The SVGs are created in Inkscape. They all are sourced from: */}}
11+
{{/* static/images/company-project-logos/all.svg */}}
12+
{{/* */}}
13+
{{/* The are exported using the "Batch Export" -> "Layers" function. */}}
14+
{{/* */}}
15+
{{/* Four colors are used in the source drawing. These are replaced */}}
16+
{{/* by CSS variables to accomodate dark mode. */}}
17+
18+
{{ $source = replace $source "#aaaaaa" "var(--logos-1)" }}
19+
{{ $source = replace $source "#999999" "var(--logos-2)" }}
20+
{{ $source = replace $source "#666666" "var(--logos-3)" }}
21+
{{ $source = replace $source "#333333" "var(--logos-4)" }}
22+
23+
{{ return (replaceRE $match $replaceWith $source | safeHTML) }}

‎layouts/partials/site-root.html‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,13 @@ <h3>Community</h3>
5858
</div>
5959

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

0 commit comments

Comments
 (0)