Skip to content

Commit

Permalink
refactor: entrance animations
Browse files Browse the repository at this point in the history
  • Loading branch information
gavmck committed Mar 6, 2024
1 parent a2d78d7 commit cdce2a0
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 46 deletions.
100 changes: 54 additions & 46 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@

<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>
Expand All @@ -30,57 +32,63 @@
</diamond-grid-item>
</diamond-grid>
<diamond-wrap size="xl">
<h1 class="diamond-text-align-center diamond-spacing-bottom-lg">
Bring clarity to<br />
your components
</h1>
<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>

<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>
<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>
</diamond-wrap>
<p>
The methodology does not dictate any technology or naming constraints.
</p>
</div>
</diamond-wrap>
</diamond-enter>

<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 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">
Expand Down
1 change: 1 addition & 0 deletions src/js/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import '@etchteam/diamond-ui/composition/Enter/Enter';

0 comments on commit cdce2a0

Please sign in to comment.