From cc739ef97edb553c9a7c89cc094efc4f9b9be6ca Mon Sep 17 00:00:00 2001 From: Dan Webb Date: Thu, 3 Oct 2024 18:43:40 +0100 Subject: [PATCH] feat: last 2 homepage sections --- src/components/content/d-alert.webc | 23 ++++++ src/components/content/d-icon/book.svg | 3 + src/components/content/d-icon/cross.svg | 3 + src/components/content/d-icon/document.svg | 3 + src/components/content/d-icon/heart.svg | 2 +- src/components/content/d-icon/tick.svg | 3 + src/components/control/d-nav-card.webc | 36 ++++++++ src/index.webc | 96 ++++++++++++++++++---- src/layouts/default.webc | 21 ++--- src/styles/base.css | 3 +- src/styles/color.css | 11 +++ 11 files changed, 172 insertions(+), 32 deletions(-) create mode 100644 src/components/content/d-alert.webc create mode 100644 src/components/content/d-icon/book.svg create mode 100644 src/components/content/d-icon/cross.svg create mode 100644 src/components/content/d-icon/document.svg create mode 100644 src/components/content/d-icon/tick.svg create mode 100644 src/components/control/d-nav-card.webc diff --git a/src/components/content/d-alert.webc b/src/components/content/d-alert.webc new file mode 100644 index 0000000..09ccd58 --- /dev/null +++ b/src/components/content/d-alert.webc @@ -0,0 +1,23 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/content/d-icon/book.svg b/src/components/content/d-icon/book.svg new file mode 100644 index 0000000..9d2554c --- /dev/null +++ b/src/components/content/d-icon/book.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/content/d-icon/cross.svg b/src/components/content/d-icon/cross.svg new file mode 100644 index 0000000..27d9acb --- /dev/null +++ b/src/components/content/d-icon/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/content/d-icon/document.svg b/src/components/content/d-icon/document.svg new file mode 100644 index 0000000..589f655 --- /dev/null +++ b/src/components/content/d-icon/document.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/content/d-icon/heart.svg b/src/components/content/d-icon/heart.svg index f44cff9..c86b3ae 100644 --- a/src/components/content/d-icon/heart.svg +++ b/src/components/content/d-icon/heart.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/content/d-icon/tick.svg b/src/components/content/d-icon/tick.svg new file mode 100644 index 0000000..b93c577 --- /dev/null +++ b/src/components/content/d-icon/tick.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/control/d-nav-card.webc b/src/components/control/d-nav-card.webc new file mode 100644 index 0000000..e13684a --- /dev/null +++ b/src/components/control/d-nav-card.webc @@ -0,0 +1,36 @@ + + + +
+ +
+
+ +
+ \ No newline at end of file diff --git a/src/index.webc b/src/index.webc index d569b87..20aa329 100644 --- a/src/index.webc +++ b/src/index.webc @@ -14,23 +14,17 @@ layout: default.webc

Diamond UI is a methodology for teams who build software products and design systems.

- - - - -

- You’ve heard of Atomic Design, right? -

-

- It’s great, and we’re big fans, but after years of building interfaces, we’ve - found a more intuitive way to define components and organise code. -

-

- Let us tell you about another way to build components. -

- - - + + +

You’ve heard of Atomic Design, right?

+

+ It’s great, and we’re big fans, but after years of building interfaces, we’ve + found a more intuitive way to define components and organise code. +

+

+ Let us tell you about another way to build components. +

+ @@ -151,4 +145,72 @@ layout: default.webc + + + +
+ + +

The TL;DR you’ve been looking for

+

It’s about clarity, not perfection.

+

+ Software products are never finished. Features can always be improved. Diamond UI makes it + easy to see where your interface changes will take effect. Giving you more confidence + when developing your product. +

+ + + + + +

What it is

+
    +
  • A helping hand to guide teams when creating interfaces
    • +
  • A rather simple, yet potentially transformative way of building interfaces
    • +
  • The outcome of decades of building complicated interfaces
    • +
+ + + + + +

What it is not

+
    +
  • Another UI pattern library
    • +
  • A silver bullet… defining and naming things is always tricky.
    • +
  • The next big thing in “DEZINE SYSTAMZ”
    • +
+ + + + +
+ + + +
+ + +

OMG, we still have your attention!

+

Interested in trying it out?

+

New is exciting, but it comes with friction – we realise there’s more to explain.

+ + + + + +

Documentation

+

Guidance on how to get started and use Diamond UI on your next project.

+ + + + +

About

+

The short story of Diamond UI and how it came to be.

+ + + + + +
diff --git a/src/layouts/default.webc b/src/layouts/default.webc index 906419f..6587294 100644 --- a/src/layouts/default.webc +++ b/src/layouts/default.webc @@ -55,19 +55,14 @@ - - - - -

- Have you tried Diamond UI? -

-

- Do you use it on your product? Tell us and we’ll add your site to our sparkly wall of appreciation. -

- - - + + +

Have you tried Diamond UI?

+

+ Do you use it on your product? Tell us and we’ll + add your site to our sparkly wall of appreciation. +

+ diff --git a/src/styles/base.css b/src/styles/base.css index b0b6411..2d8aaaf 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -3,7 +3,8 @@ } h1, -h2 { +h2, +h3 { font-weight: var(--diamond-font-weight-base); } diff --git a/src/styles/color.css b/src/styles/color.css index 753dfa9..22ea53a 100644 --- a/src/styles/color.css +++ b/src/styles/color.css @@ -9,4 +9,15 @@ --color-blue: #0066ff; --color-blue-light: #77aaff; --color-blue-lightest: #ccddff; + + --color-red: #ff4488; + --color-green: #44ff88; +} + +.text-color-red { + color: var(--color-red); +} + +.text-color-green { + color: var(--color-green); } \ No newline at end of file