diff --git a/logo/svg2png_converter/index.html b/logo/svg2png_converter/index.html index 73343da..fb19dd3 100644 --- a/logo/svg2png_converter/index.html +++ b/logo/svg2png_converter/index.html @@ -1,29 +1,47 @@ + + + + + Document + - - - - - Document - + +
+
+ +
- + -
-
- +
- - - -
- - - - - \ No newline at end of file + + + diff --git a/styleguide/doodles/index.html b/styleguide/doodles/index.html index 2c21cca..4de8484 100644 --- a/styleguide/doodles/index.html +++ b/styleguide/doodles/index.html @@ -112,76 +112,49 @@ background, we designed a few doodles which can be used to fill some space. These consist of an icon (preferably of something that can move) and a dashed line behind it, which shows the path travelled. The - line has rounded ends and a line-to-space ratio of 1:3 (the lines will appear longer due to the line caps), where 1 is the - line thickness. Here are some examples: + line has rounded ends and a line-to-space ratio of 1:3 (the lines will + appear longer due to the line caps), where 1 is the line thickness. + Here are some examples:

- + - - - - - - - - - - + d="m 2787.4987,171.54852 a 62.1,62.1 0 0 0 -21.815,4.885 l -473.07,200.738 c -48.038,20.384 -52.852,90 -8.076,116.8 l 39.984,23.934 a 25,25 0 0 0 34.291,-8.611 25,25 0 0 0 -8.611,-34.291 l -39.985,-23.934 c -12.309,-7.367 -11.28,-22.267 1.926,-27.87 l 473.072,-200.738 c 5.133,-2.178 10.814,-0.833 14.424,3.416 3.61,4.249 4.022,10.072 1.043,14.785 l -201.363,318.675 c -16.664,26.371 -50.638,34.466 -77.404,18.445 l -4.643,-2.78 a 25,25 0 0 0 -34.291,8.612 25,25 0 0 0 8.611,34.291 l 4.645,2.78 c 49.586,29.68 114.48,14.215 145.35,-34.64 l 201.362,-318.672 c 14.549,-23.025 12.428,-53.113 -5.207,-73.87 -11.021,-12.972 -26.621,-20.552 -42.889,-21.816 a 63,63 0 0 0 -7.354,-0.138 m -138.563,142.725 a 25,25 0 0 0 -11.898,5.088 l -211.47,166.139 c -30.343,23.84 -48.087,60.34 -48.087,98.93 v 62.023 a 25,25 0 0 0 25,25 25,25 0 0 0 25.002,-25 v -62.023 a 75.75,75.75 0 0 1 28.975,-59.612 l 211.468,-166.138 a 25,25 0 0 0 4.215,-35.104 25,25 0 0 0 -23.205,-9.303" + /> + + - - + + + + + + + - - + + +
diff --git a/styleguide/glow/index.html b/styleguide/glow/index.html index 9b5e34e..29ce260 100644 --- a/styleguide/glow/index.html +++ b/styleguide/glow/index.html @@ -121,16 +121,16 @@

The first three values are used for drop-shadows, the last for an inset shadow. Sadly, the latter is currently not possible using plain - CSS filters. Which is why it requires the use of an SVG filter. But - support for external SVG filters (using - url("filter.svg#filter-id")) is still flaky, we instead - opted to have two versions of each glow. One using SVG filters for - use-cases which support it (like the logo), and one using CSS filters - (as for this page's headings). Below you'll find implementation - examples using the primary color CSS variable for the glow color as - specified in our (S)CSS stylesheets. Simply replace + CSS filters, which is why it requires the use of an SVG filter + (further information: see Notes). +

+

+ Below you'll find implementation examples using the primary color CSS + variable for the glow color as specified in our (S)CSS stylesheets. In + the CSS example simply replace --color-primary with --color-secondary to - use the secondary color. + use the secondary color. In the SVG example, we don't use CSS + variables, because not every software understands them.