style(web/tvl/logo): Add dark & light versions, dim background
Currently the pitch black colour of the logo outline looks a bit strange on the homepage, dimming this to the same colour as the text is nicer. While poking around in that colouring segment I also made a way to spit out light logos instead (to use on dark backgrounds). Note: The light colours are just picked from our web CSS, but they don't actually look good yet - it also needs a different palette. For now nothing uses the light version. Change-Id: Ibfe7fa252cd40b803ac96047d0627dad0d6d9ac2 Reviewed-on: https://cl.tvl.fyi/c/depot/+/3633 Tested-by: BuildkiteCI Reviewed-by: tazjin <mail@tazj.in>
This commit is contained in:
Vincent Ambo
tazjin
parent
c874e20630
commit
ddb21647e4
2 changed files with 46 additions and 24 deletions
|
|
@ -13,14 +13,6 @@ let
|
|||
red = "#FF6663";
|
||||
};
|
||||
|
||||
logoShapes = builtins.readFile ./logo-shapes.svg;
|
||||
logoSvg = style: ''
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="420 860 1640 1500">
|
||||
<style>${style}</style>
|
||||
${logoShapes}
|
||||
</svg>
|
||||
'';
|
||||
|
||||
staticCss = colour: ''
|
||||
#armchair-background {
|
||||
fill: ${colour};
|
||||
|
|
@ -44,27 +36,57 @@ let
|
|||
}
|
||||
'';
|
||||
|
||||
# Dark version of the logo, suitable for light backgrounds.
|
||||
darkCss = armchairCss: ''
|
||||
.structure {
|
||||
fill: #383838;
|
||||
}
|
||||
#letters {
|
||||
fill: #fefefe;
|
||||
}
|
||||
${armchairCss}
|
||||
'';
|
||||
|
||||
# Light version, suitable for dark backgrounds.
|
||||
lightCss = armchairCss: ''
|
||||
.structure {
|
||||
fill: #e4e4ef;
|
||||
}
|
||||
#letters {
|
||||
fill: #181818;
|
||||
}
|
||||
${armchairCss}
|
||||
'';
|
||||
|
||||
logoShapes = builtins.readFile ./logo-shapes.svg;
|
||||
logoSvg = style: ''
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="420 860 1640 1500">
|
||||
<style>${style}</style>
|
||||
${logoShapes}
|
||||
</svg>
|
||||
'';
|
||||
|
||||
in depot.nix.utils.drvTargets(lib.fix (self: {
|
||||
inherit palette;
|
||||
# Expose the logo construction functions.
|
||||
inherit palette darkCss lightCss animatedCss staticCss;
|
||||
|
||||
# Create a TVL logo SVG with the specified static armchair colour.
|
||||
staticLogoSvg = colour: pkgs.writeText "logo.svg" (logoSvg (staticCss colour));
|
||||
# Create a TVL logo SVG with the specified style.
|
||||
logoSvg = style: pkgs.writeText "logo.svg" (logoSvg style);
|
||||
|
||||
# Create a TVL logo SVG with the specified animated armchair colour set.
|
||||
animatedLogoSvg = colours: pkgs.writeText "logo.svg" (logoSvg (animatedCss colours));
|
||||
|
||||
# Create a PNG of the TVL logo with the specified static armchair colour and DPI.
|
||||
logoPng = colour: dpi: pkgs.runCommandNoCC "logo.png" {} ''
|
||||
# Create a PNG of the TVL logo with the specified style and DPI.
|
||||
logoPng = style: dpi: pkgs.runCommandNoCC "logo.png" {} ''
|
||||
${pkgs.inkscape}/bin/inkscape \
|
||||
--export-area-drawing \
|
||||
--export-background-opacity 0 \
|
||||
--export-dpi ${toString dpi} \
|
||||
${self.staticLogoSvg colour} -o $out
|
||||
${self.logoSvg style} -o $out
|
||||
'';
|
||||
|
||||
# Animated SVG logo with all colours.
|
||||
pastelRainbow = self.animatedLogoSvg (lib.attrValues palette);
|
||||
# Animated dark SVG logo with all colours.
|
||||
pastelRainbow = self.logoSvg (darkCss (animatedCss (lib.attrValues palette)));
|
||||
}
|
||||
|
||||
# Add individual outputs for static logos of each colour.
|
||||
// (lib.mapAttrs' (k: v: lib.nameValuePair "${k}Png" (self.logoPng v 96)) palette)))
|
||||
# Add individual outputs for static dark logos of each colour.
|
||||
// (lib.mapAttrs'
|
||||
(k: v: lib.nameValuePair "${k}Png"
|
||||
(self.logoPng (darkCss (staticCss v)) 96)) palette)))
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<polygon id="armchair-background" fill="#FF6663" points="463 2030 567 1814 1904 1814 1978 2030 1935 2169 1720 2155 1590 2311 873 2305 778 2142 570 2186"/>
|
||||
<g id="virus body">
|
||||
<polygon id="armchair-background" points="463 2030 567 1814 1904 1814 1978 2030 1935 2169 1720 2155 1590 2311 873 2305 778 2142 570 2186"/>
|
||||
<g class="structure" id="virus body">
|
||||
<!-- body first, then lambda-legs going clockwise starting from the bottom left -->
|
||||
<path d="m699.524 1820.74-6.486-419.16 268.599-301.08 543.053 5.43 270.68 304.54-16.99 419.17-295.93 284.34-445.46-4.15-317.466-289.09Z"/>
|
||||
<path d="m1025 2109.8-86.543 132.68-22.688-40.11 28.405-45.37-54.824-2.26-12.116-20.66 13.122-20.5 79.884 3.27 21.015-31.09"/>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<path d="m1758.16 1733.44 100.18 32.93 100.8-91.1 39.61 12.29 8.92 40.77-69.38 62.61 88.23 30.28 17.63 78.92-45.96-13.32-243.68-72.12"/>
|
||||
<path d="m1486.78 2083.12-28.66 29.5 83.43 131.7 21.98-39.49-27.18-41.76 52.19-5.43 10.39-21.24-10.64-16.85-73.78 3.69"/>
|
||||
</g>
|
||||
<g id="armchair">
|
||||
<g class="structure" id="armchair">
|
||||
<path d="M742.781 2172.23s-89.208 93.93-210.767 22.78c-121.56-71.14-124.755-220.09-47.72-318 78.865-100.24 220.899-86.94 221.229-85.38.274 1.3 247.178 196.08 328.597 260.28 16.08 12.68 25.71 20.27 25.71 20.27l-37.68 41.02s-209.519-177.76-290.729-250.45c-9.975 1.38-150.662-67.27-214.983 108.51-24.251 74.65 15.983 145.09 69.889 167.71 91.689 19.32 94.88 1.94 121.523-18.39"/>
|
||||
<path d="M1738.4 2174.64s91.9 88.75 209.97 16.51c118.07-72.25 115.91-216.85 39.26-313.11-78.47-98.55-217.31-83.5-217.61-81.95-.26 1.29-239.43 197.97-318.3 262.8-15.58 12.8-24.9 20.46-24.9 20.46l37.4 40.26s202.73-184.66 281.29-257.92c9.78 1.23 134.36-50.54 211.78 110.07 28.32 92.64-13.71 144.64-66.18 167.81-89.5 20.38-90.29.61-116.63-19.24"/>
|
||||
<path d="m899.02 2276.92 680.44-.32 98.56-134.61 51.64 32.46-121.94 160.78-739.1-1.03-125.507-162.22 54.172-39.79 101.735 144.73Z"/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue