Merge pull request #43 from hotwired/style-edits

Hotwire Native

_source/_assets/css/base/@root.pcss

@@ -20,13 +20,20 @@ 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);
   --color-accent: var(--color-yellow);
   --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;

_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);
+}

_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 {

_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;
 }

_source/_includes/header.html

@@ -1,7 +1,11 @@
-<header class="header">
+<header class="header space --bottom-xl">
 
   <a class="header__skip display --sr-only" href="#content">Skip to content</a>
 
+  <div class="header__spark" aria-hidden="true">
+    {% include svg/spark.svg %}
+  </div>
+
   <nav class="header__nav" aria-label="Main navigation">
 
     <a href="/" class="header__logo" aria-label="Hotwire">

_source/index.html

@@ -4,10 +4,7 @@
 layout: page
 ---
 
-<section class="home-block --leader">
-  <div class="home-block__spark" aria-hidden="true">
-    {% include svg/spark.svg %}
-  </div>
+<section class="home-block">
   <p><strong class="text --size-l">Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.</strong> This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, without sacrificing any of the speed or responsiveness associated with a traditional single-page application.</p>
   <div class="video" id="screencast">
     <video poster="/assets/videos/hotwire-screencast-poster.jpg" width="1920" height="1080" controls playsinline>
@@ -18,29 +15,29 @@
   <p>You can follow the HTML-over-the-wire approach as merely inspiration for your own tooling, or you can use these Hotwire designed frameworks created by the team at <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a> to power <a href="https://hey.com" target="_blank" rel="noopener">HEY</a>. They work together, complementing each other to give you a complete solution across all platforms:</p>
 </section>
 
-<section class="home-block --connector animate --delay-s" data-aos="--fade-in-pop">
-  <h2 class="space --bottom-flush">
+<section class="home-block --spark animate --delay-s" data-aos="--fade-in-pop">
+  <h2 class="space --top-xl">
     <span class="display --sr-only">Turbo</span>
     <img class="home-block__logo" width="204" height="45" src="/assets/logos/turbo.svg" alt="">
   </h2>
-  <p class="space --top-flush">The heart of Hotwire is Turbo. A set of complementary techniques for speeding up page changes and form submissions, dividing complex pages into components, and stream partial page updates over WebSocket. All without writing any JavaScript at all. And designed from the start to integrate perfectly with native hybrid applications for iOS and Android.</p>
-  <p><a href="https://turbo.hotwired.dev" rel="noopener" class="button">Learn more about Turbo</a></p>
+  <p class="space --top-flush">The heart of Hotwire is Turbo. A set of complementary techniques for speeding up page changes and form submissions, dividing complex pages into components, and stream partial page updates over WebSocket. All without writing any JavaScript at all.</p>
+  <p><a href="https://turbo.hotwired.dev" rel="noopener" class="button --brand-turbo">Learn more about Turbo</a></p>
 </section>
 
-<section class="home-block --connector --connector-2 animate --delay-s" data-aos="--fade-in-pop">
-  <h2 class="space --bottom-flush">
+<section class="home-block --spark animate --delay-s" data-aos="--fade-in-pop">
+  <h2 class="space --top-xl">
     <span class="display --sr-only">Stimulus</span>
     <img class="home-block__logo" width="278" height="45" src="/assets/logos/stimulus.svg" alt="">
   </h2>
   <p class="space --top-flush">While Turbo usually takes care of at least 80% of the interactivity that traditionally would have required JavaScript, there are still cases where a dash of custom code is required. Stimulus makes this easy with a HTML-centric approach to state and wiring.</p>
-  <p><a href="https://stimulus.hotwired.dev" rel="noopener" class="button">Learn more about Stimulus</a></p>
+  <p><a href="https://stimulus.hotwired.dev" rel="noopener" class="button --brand-stimulus">Learn more about Stimulus</a></p>
 </section>
 
-<section class="home-block --connector --connector-3 animate --delay-s" data-aos="--fade-in-pop">
-  <h2 class="space --bottom-flush">
-    <span class="display --sr-only">Strada</span>
-    <img class="home-block__logo" width="234" height="45" src="/assets/logos/strada.svg" alt="">
+<section class="home-block --spark animate --delay-s" data-aos="--fade-in-pop">
+  <h2 class="space --top-xl">
+    <span class="display --sr-only">Native</span>
+    <img class="home-block__logo" width="234" height="45" src="/assets/logos/native.svg" alt="">
   </h2>
-  <p class="space --top-flush">Standardizes the way that web and native parts of a mobile hybrid application talk to each other via HTML bridge attributes. This makes it easy to progressively level-up web interactions with native replacements.</p>
-  <p><a href="https://strada.hotwired.dev" rel="noopener" class="button">Learn more about Strada</a></p>
+  <p class="space --top-flush">Hotwire Native is a web-first framework for building native mobile apps. It provides you with all the tools you need to leverage your web app and build great mobile apps.</p>
+  <p><a href="https://native.hotwired.dev" rel="noopener" class="button --brand-native">Learn more about Hotwire Native</a></p>
 </section>