Merge pull request #5 from etchteam/refactor/page-polish

Refactor/page polish
etchteam · Mar 6, 2024 · e9268fb · e9268fb
2 parents e5bce5f + cdce2a0
commit e9268fb
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 45 deletions.
diff --git a/src/index.html b/src/index.html
@@ -19,63 +19,115 @@
 
     <link rel="stylesheet" href="styles/main.css" />
 
+    <script src="js/app.js" type="module"></script>
+
     <script defer src="https://eu.umami.is/script.js" data-website-id="9d537fd5-cc28-4c00-9350-45e5727f264f"></script>
   </head>
   <body>
     <main>
       <diamond-section padding="fluid">
-        <diamond-wrap size="sm">
-          <diamond-grid justify-content="center" class="diamond-spacing-bottom-lg">
-            <diamond-grid-item>
-              <img src="images/logo.svg" alt="Diamond ui" width="124" height="20" />
-            </diamond-grid-item>
-          </diamond-grid>
-
-          <h1 class="diamond-text-align-center diamond-spacing-bottom-lg diamond-text-weight-body">Bring clarity to your components</h1>
+        <diamond-grid justify-content="center" class="diamond-spacing-bottom-lg">
+          <diamond-grid-item>
+            <img src="images/logo.svg" alt="Diamond ui" width="124" height="20" />
+          </diamond-grid-item>
+        </diamond-grid>
+        <diamond-wrap size="xl">
+          <diamond-enter type="fade">
+            <h1 class="diamond-text-align-center diamond-spacing-bottom-lg">
+              Bring clarity to<br />
+              your components
+            </h1>
+          </diamond-enter>
+        </diamond-wrap> 
 
-          <div class="diamond-text-size-xl diamond-spacing-bottom-lg diamond-text-weight-light">
-            <p>
-              Diamond UI is a method of organising and grouping components to cleanly separate their responsibilities. 
-            </p>
+        <diamond-enter type="fade-in-up" delay="0.2">
+          <diamond-wrap size="md">
+            <div class="diamond-text-size-xl diamond-spacing-bottom-lg diamond-text-weight-light">
+              <p>
+                Diamond UI is a method of organising and grouping components to cleanly separate their responsibilities. 
+              </p>
 
-            <p>
-              This results in a UI ecosystem that is robust, reusable, extremely flexible, very testable and low maintenance.
-            </p> 
+              <p>
+                This results in a UI ecosystem that is robust, reusable, extremely flexible, very testable and low maintenance.
+              </p> 
 
-            <p>
-              The methodology does not dictate any technology or naming constraints.
-            </p>
-          </div>
+              <p>
+                The methodology does not dictate any technology or naming constraints.
+              </p>
+            </div>
+          </diamond-wrap>
+        </diamond-enter>
 
-          <diamond-card class="diamond-text-align-center diamond-spacing-bottom-lg theme-medium" padding="lg" radius>
-            <form action="https://etchapps.us6.list-manage.com/subscribe/post?u=6399ac2bf5&amp;id=fa635584a8&amp;f_id=00f23de3f0" method="post" target="_blank">
-              <div aria-hidden="true" style="position: absolute; left: -5000px;">
-                <input type="text" name="b_6399ac2bf5_fa635584a8" tabindex="-1" value="">
-              </div>
-              <diamond-form-group class="diamond-spacing-bottom-md">
-                <diamond-grid justify-content="center">
-                  <diamond-grid-item>
-                    <label for="email" class="diamond-text-weight-bold">Sign up for email notifications</label>
-                  </diamond-grid-item>
-                </diamond-grid>
-                <diamond-input class="">
-                  <input type="email" name="EMAIL" placeholder="[email protected]" id="email" required />
-                </diamond-input>
-                <p class="diamond-text-size-sm">
-                  We promise to treat your inbox with respect.
-                </p>
-              </diamond-form-group>
-              <diamond-button width="full-width" variant="primary">
-                <button type="submit" class="diamond-text-weight-bold">Subscribe</button>
-              </diamond-button>
-            </form>
-          </diamond-card>
-        </diamond-wrap>
+        <diamond-enter type="fade-in-up" enter-on-scroll>
+          <diamond-wrap size="md">
+            <diamond-card class="diamond-text-align-center diamond-spacing-bottom-lg theme-medium" padding="lg" radius>
+              <form 
+                action="https://etchapps.us6.list-manage.com/subscribe/post?u=6399ac2bf5&amp;id=fa635584a8&amp;f_id=00f23de3f0" 
+                method="post" 
+                target="_blank"
+              >
+                <div aria-hidden="true" style="position: absolute; left: -5000px;">
+                  <input type="text" name="b_6399ac2bf5_fa635584a8" tabindex="-1" value="">
+                </div>
+                <diamond-form-group class="diamond-spacing-bottom-md">
+                  <diamond-grid justify-content="center">
+                    <diamond-grid-item>
+                      <label for="email" class="diamond-text-weight-bold">Sign up for email notifications</label>
+                    </diamond-grid-item>
+                  </diamond-grid>
+                  <diamond-input>
+                    <input type="email" name="EMAIL" placeholder="[email protected]" id="email" required />
+                  </diamond-input>
+                  <p class="diamond-text-size-sm">
+                    We promise to treat your inbox with respect.
+                  </p>
+                </diamond-form-group>
+                <diamond-button width="full-width" variant="primary">
+                  <button type="submit" class="diamond-text-weight-bold">Subscribe</button>
+                </diamond-button>
+              </form>
+            </diamond-card>
+          </diamond-wrap>
+        </diamond-enter>
       </diamond-section>
     </main>
     <footer class="diamond-text-align-center">
       <diamond-section padding="lg">
-        <p>A project by <a href="https://etch.co">Etch</a></p>
+        <p>
+          A project by 
+          <a href="https://etch.co" target="_blank" rel="noopener noreferrer">
+            <svg
+              class="logo"
+              xmlns="http://www.w3.org/2000/svg"
+              x="0px"
+              y="0px"
+              viewBox="0 0 76 32"
+              aria-labelledby="logo"
+              role="img"
+            >
+              <title id="logo">Etch</title>
+              <g>
+                <path fill="#F06" d="M0 4L0 20 16 4z" />
+                <path fill="#F06" d="M0 12L0 28 16 28z" />
+                <path fill="#F66" d="M0 12L0 28 16 12z" />
+              </g>
+              <g>
+                <path fill="#F06" d="M20 4H28V20H20z" />
+                <path fill="#F06" d="M20 12L20 28 36 28z" />
+                <path fill="#F66" d="M20 12L20 28 36 12z" />
+              </g>
+              <g>
+                <path fill="#F06" d="M40 12L40 28 56 28z" />
+                <path fill="#F66" d="M40 12L40 28 56 12z" />
+              </g>
+              <g>
+                <path fill="#F06" d="M60 4H68V20H60z" />
+                <path fill="#F06" d="M72 12L60 12 60 16 76 32 76 16z" />
+                <path fill="#F66" d="M60 12L60 32 76 16 72 12z" />
+              </g>
+            </svg>
+          </a>
+        </p>
       </diamond-section>
     </footer>
   </body>

diff --git a/src/js/app.js b/src/js/app.js
@@ -0,0 +1 @@
+import '@etchteam/diamond-ui/composition/Enter/Enter';
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -10,7 +10,7 @@
   --diamond-font-family: 'Nunito sans', -apple-system, system-ui,
     BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
 
-  --diamond-font-size-h1: 2.5rem;
+  --diamond-font-size-h1: clamp(2rem, 10vw, 4rem);
 
   --diamond-input-border-color: var(--color-gray);
   --diamond-input-border-color-hover: var(--color-blue);
@@ -21,4 +21,16 @@
 
   --diamond-theme-heading-color: var(--color-blue);
   --diamond-theme-link-color: var(--color-blue);
+}
+
+h1 {
+  font-weight: var(--diamond-font-weight-black);
+}
+
+.logo {
+  display: inline-block;
+  margin-left: .1em;
+  vertical-align: middle;
+  transform: translateY(-18%);
+  width: 3.5rem;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import '@etchteam/diamond-ui/composition/Enter/Enter';