From a2d78d71a0d769a65fb67d01efefaf36a2057f3e Mon Sep 17 00:00:00 2001 From: Gavyn McKenzie Date: Wed, 6 Mar 2024 10:50:23 +0000 Subject: [PATCH 1/2] feat: diamond page polish --- src/index.html | 66 +++++++++++++++++++++++++++++++++++++-------- src/styles/main.css | 14 +++++++++- 2 files changed, 68 insertions(+), 12 deletions(-) diff --git a/src/index.html b/src/index.html index 4a92d15..df840a7 100644 --- a/src/index.html +++ b/src/index.html @@ -24,15 +24,19 @@
- - - - Diamond ui - - - -

Bring clarity to your components

+ + + Diamond ui + + + +

+ Bring clarity to
+ your components +

+ +

Diamond UI is a method of organising and grouping components to cleanly separate their responsibilities. @@ -46,9 +50,15 @@

-
+ @@ -58,7 +68,7 @@

Sign up for email notifications - +

@@ -75,7 +85,41 @@

-

A project by Etch

+

+ A project by + + + +

diff --git a/src/styles/main.css b/src/styles/main.css index 52a9a53..2c3363d 100644 --- 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; } \ No newline at end of file From cdce2a00709a233affc6afb3d9eb5e5e1d693450 Mon Sep 17 00:00:00 2001 From: Gavyn McKenzie Date: Wed, 6 Mar 2024 10:54:39 +0000 Subject: [PATCH 2/2] refactor: entrance animations --- src/index.html | 100 ++++++++++++++++++++++++++----------------------- src/js/app.js | 1 + 2 files changed, 55 insertions(+), 46 deletions(-) create mode 100644 src/js/app.js diff --git a/src/index.html b/src/index.html index df840a7..40f3a5a 100644 --- a/src/index.html +++ b/src/index.html @@ -19,6 +19,8 @@ + + @@ -30,57 +32,63 @@ -

- Bring clarity to
- your components -

+ +

+ Bring clarity to
+ your components +

+ - -
-

- Diamond UI is a method of organising and grouping components to cleanly separate their responsibilities. -

+ + +
+

+ Diamond UI is a method of organising and grouping components to cleanly separate their responsibilities. +

-

- This results in a UI ecosystem that is robust, reusable, extremely flexible, very testable and low maintenance. -

+

+ This results in a UI ecosystem that is robust, reusable, extremely flexible, very testable and low maintenance. +

-

- The methodology does not dictate any technology or naming constraints. -

-
- +

+ The methodology does not dictate any technology or naming constraints. +

+
+ + - - - - - - - - - - - - - -

- We promise to treat your inbox with respect. -

- - - - - - - + + + +
+ + + + + + + + + + +

+ We promise to treat your inbox with respect. +

+ + + + +
+ + +