feat: new logo

src/elm/Components/Header.elm

@@ -64,7 +64,7 @@ view shared props =
                 , class "identity-logo-link"
                 , attribute "aria-label" "Home"
                 ]
-                [ velaLogo 24 ]
+                [ velaLogo 32 ]
             , case shared.session of
                 Authenticated auth ->
                     details (identityBaseClassList :: identityAttributeList)

src/elm/Components/Svgs.elm

@@ -54,12 +54,12 @@ velaLogo size =
     svg
         [ width <| String.fromInt size
         , height <| String.fromInt size
-        , viewBox "0 0 1500 1500"
+        , viewBox "0 0 1048 1048"
         , class "vela-logo"
         ]
-        [ Svg.path [ class "vela-logo-star", d "M1477.22 329.54l-139.11-109.63 11.45-176.75-147.26 98.42-164.57-65.51 48.11 170.47-113.16 136.27 176.99 6.93 94.63 149.72 61.28-166.19 171.64-43.73z" ] []
-        , Svg.path [ class "vela-logo-outer", d "M1174.75 635.12l-417.18 722.57a3.47 3.47 0 01-6 0L125.38 273.13a3.48 3.48 0 013-5.22h796.86l39.14-47.13-14.19-50.28h-821.8A100.9 100.9 0 0041 321.84L667.19 1406.4a100.88 100.88 0 00174.74 0l391.61-678.27z" ] []
-        , Svg.path [ class "vela-logo-inner", d "M1087.64 497.29l-49.37-1.93-283.71 491.39L395.9 365.54H288.13l466.43 807.88 363.02-628.76-29.94-47.37z" ] []
+        [ Svg.path [ class "vela-logo-line", d "M272.7 175.2h-107a37.6 37.6 0 0 0-32 17.8 37.5 37.5 0 0 0-1.6 36.6L462.9 891a37.5 37.5 0 0 0 33.6 20.8c14.2 0 27.2-8 33.6-20.8l219.8-439.5 42 84-194.6 389.1a112.7 112.7 0 0 1-201.6 0L65 263.1a112.6 112.6 0 0 1 100.8-163H235l37.6 75.1Z" ] []
+        , Svg.path [ class "vela-logo-line", d "M276.9 100.1h83.7l37.6 75.1h-83.7l-37.6-75Zm167.4 0h42l37.5 75.1H482l-37.7-75Zm-134 150.2 186.2 372.2L593.8 428l90.8-13.8-188.1 376.2-270-540h83.9Z" ] []
+        , Svg.path [ class "vela-logo-star", d "m770.6 325.3-154.8 23.4 111.5-109.9-69.5-138.7h1.8L796.1 171 907.6 61 882 215.4l139 72-154.8 23.4-25.5 154.4-70.1-139.9Z" ] []
         ]
 
 

src/scss/_main.scss

@@ -79,16 +79,12 @@ header {
 // Vela logo
 .vela-logo {
   &-star {
-    fill: var(--color-lavender);
+    fill: var(--color-violet);
   }
 
-  &-outer {
+  &-line {
     fill: var(--color-cyan);
   }
-
-  &-inner {
-    fill: var(--color-text);
-  }
 }
 
 .help-links {

src/scss/_variables.scss

@@ -10,6 +10,7 @@
   --color-lavender-dark: hsl(286, 29%, 40%);
   --color-lavender: hsl(286, 29%, 51%); // good for text on offwhite
   --color-lavender-light: hsl(286, 29%, 65%); // good for text on coal
+  --color-violet: hsl(288, 55%, 57%);
 
   // grays
   --color-coal-dark: hsl(0, 0%, 12%);