Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/page polish #5

Merged
merged 2 commits into from
Mar 6, 2024
Merged

Refactor/page polish #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2d78d7
feat: diamond page polish
gavmck Mar 6, 2024
cdce2a0
refactor: entrance animations
gavmck Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 96 additions & 44 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import '@etchteam/diamond-ui/composition/Enter/Enter';
14 changes: 13 additions & 1 deletion src/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
}