diff --git a/_source/_assets/css/base/@root.pcss b/_source/_assets/css/base/@root.pcss
index 8e5b72f..c32f511 100644
--- a/_source/_assets/css/base/@root.pcss
+++ b/_source/_assets/css/base/@root.pcss
@@ -20,6 +20,7 @@ custom properties
/* semantic colors */
--color-text: var(--color-black);
+ --color-inversed-text: var(--color-white);
--color-sheet: var(--color-white);
--color-neutral: var(--color-beige);
--color-link: var(--color-yellow);
@@ -27,6 +28,12 @@ custom properties
--color-positive: var(--color-teal);
--color-negative: var(--color-pink);
+ /* brand colors */
+ --color-brand-turbo: #5CD8E5;
+ --color-brand-stimulus: #77E8B9;
+ --color-brand-strada: #E76057;
+ --color-brand-native: #C18BF4;
+
/* spacing presets */
--space-xs: 0.25em;
--space-s: 0.5em;
diff --git a/_source/_assets/css/components/button.pcss b/_source/_assets/css/components/button.pcss
index c9afc46..4f1d2f2 100644
--- a/_source/_assets/css/components/button.pcss
+++ b/_source/_assets/css/components/button.pcss
@@ -2,30 +2,56 @@
it's a button... that you click
---------------------------------------------------------------------------- */
+:root {
+ --button-background-color: var(--color-link);
+ --button-text-color: var(--color-text);
+ --button-hover-background-color: var(--color-link);
+ --button-hover-text-color: var(--color-text);
+}
+
.button {
transition: font-weight 0.1s ease, clip-path 0.2s ease;
display: inline-block;
padding: 1em 1.5em;
- color: var(--color-text);
+ color: var(--button-text-color);
font-family: var(--font-main);
text-decoration: none;
text-align: center;
line-height: normal;
-webkit-appearance: none;
- background-color: var(--color-link);
+ background-color: var(--button-background-color);
border: 0;
box-shadow: none;
clip-path: polygon(5% 10%, 46% 1%, 46% 10%, 100% 0, 95% 90%, 31% 100%, 31% 90%, 0% 100%);
&:visited {
- color: var(--color-text);
+ color: var(--button-text-color);
}
&:hover {
- color: var(--color-text);
+ color: var(--button-hover-text-color);
cursor: pointer;
text-decoration: none;
font-weight: 800;
+ background-color: var(--button-hover-background-color);
clip-path: polygon(5% 10%, 66% 1%, 66% 10%, 100% 0, 95% 90%, 51% 100%, 51% 90%, 0% 100%);
}
}
+
+.button.--brand-turbo {
+ --button-background-color: var(--color-brand-turbo);
+}
+
+.button.--brand-stimulus {
+ --button-background-color: var(--color-brand-stimulus);
+}
+
+.button.--brand-strada {
+ --button-background-color: var(--color-brand-strada);
+ --button-text-color: var(--color-inversed-text);
+}
+
+.button.--brand-native {
+ --button-background-color: var(--color-brand-native);
+ --button-text-color: var(--color-inversed-text);
+}
diff --git a/_source/_assets/css/components/header.pcss b/_source/_assets/css/components/header.pcss
index ba4c7c2..e042f4d 100644
--- a/_source/_assets/css/components/header.pcss
+++ b/_source/_assets/css/components/header.pcss
@@ -7,6 +7,39 @@ global site header
text-align: center;
}
+.header__spark {
+ width: 18em;
+ margin: 3em auto 0;
+ position: relative;
+
+ &::before {
+ content: " ";
+ display: block;
+ height: 100%;
+ position: absolute;
+ top: -3em;
+ left: 0;
+ right: 0;
+ margin: 0 0 0 0;
+ background: url('/assets/wiring/leads.svg') center 6em / 15em auto no-repeat;
+ pointer-events: none;
+ transform: rotate(180deg);
+ }
+
+ & .spark__outer {
+ fill: var(--color-sheet);
+ }
+
+ & .spark__inner {
+ fill: var(--color-accent);
+ animation: color-cycle-fill 0.3s step-start infinite;
+
+ @media (prefers-reduced-motion) {
+ animation: none;
+ }
+ }
+}
+
.header__nav {
display: flex;
flex-direction: column;
@@ -15,8 +48,8 @@ global site header
width: 100%;
position: relative;
z-index: 20000;
- margin: 0;
- padding: 4em 2em;
+ margin: -4.5em 0 0;
+ padding: 0 2em;
}
.header__logo {
diff --git a/_source/_assets/css/components/home.pcss b/_source/_assets/css/components/home.pcss
index d57ad34..b928394 100644
--- a/_source/_assets/css/components/home.pcss
+++ b/_source/_assets/css/components/home.pcss
@@ -3,79 +3,42 @@ homepage components
---------------------------------------------------------------------------- */
.home-block {
- position: relative;
text-align: center;
- background-color: var(--color-neutral);
- &.--leader {
- margin-top: 13em;
+ &.--spark::before {
+ content: '';
+ display: block;
+ width: 12em;
+ height: 12em;
+ position: absolute;
+ z-index: -1;
+ left: calc(50% - 6em);
+ top: 1.5em;
+ background: url('/assets/wiring/spark.svg') center / contain no-repeat;
+ }
+ &.--spark:nth-child(2) {
&::before {
- content: " ";
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: -1;
- margin: -13em 0 0 0;
- background: url('/assets/wiring/leads.svg') center top / 15em auto no-repeat;
- pointer-events: none;
+ transform: rotate(-40deg);
}
}
- &.--connector {
- margin-top: 5em;
-
- &::after {
- content: " ";
- display: block;
- position: absolute;
- top: -10.5em;
- left: 0;
- right: 0;
- height: 10.25em;
- z-index: -2;
- margin: 5em 0 0 0;
- pointer-events: none;
- background: url('/assets/wiring/connector.svg') center bottom -0.5em / 8em auto no-repeat;
+ &.--spark:nth-child(3) {
+ &::before {
+ transform: rotate(60deg);
}
}
- &.--connector-2::after {
- top: -10em;
- background: url('/assets/wiring/connector-2.svg') center bottom 1em / 14em auto no-repeat;
- }
-
- &.--connector-3::after {
- background: url('/assets/wiring/connector-3.svg') center bottom / 12em auto no-repeat;
- }
-}
-
-.home-block__spark {
- position: absolute;
- width: 18em;
- top: -21.5em;
- left: calc(50% - 9em);
- z-index: -2;
-
- & .spark__outer {
- fill: var(--color-sheet);
- }
-
- & .spark__inner {
- fill: var(--color-accent);
- animation: color-cycle-fill 0.3s step-start infinite;
-
- @media (prefers-reduced-motion) {
- animation: none;
+ &.--spark:nth-child(4) {
+ &::before {
+ transform: rotate(180deg);
}
}
}
.home-block__logo {
display: inline-block;
- height: 0.875em;
+ height: 1.5em;
width: auto;
+ position: relative;
}
diff --git a/_source/_assets/images/logos/native.svg b/_source/_assets/images/logos/native.svg
new file mode 100644
index 0000000..d7a25bf
--- /dev/null
+++ b/_source/_assets/images/logos/native.svg
@@ -0,0 +1,20 @@
+
diff --git a/_source/_assets/images/wiring/spark.svg b/_source/_assets/images/wiring/spark.svg
new file mode 100644
index 0000000..3ada9eb
--- /dev/null
+++ b/_source/_assets/images/wiring/spark.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/_source/_includes/header.html b/_source/_includes/header.html
index 5daed9d..f837e3c 100644
--- a/_source/_includes/header.html
+++ b/_source/_includes/header.html
@@ -1,7 +1,11 @@
-