From 5dd9537779222408ebd955cc0c09ebc3f5878699 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 23 Jun 2024 19:42:45 -0400 Subject: [PATCH 01/15] WIP landing page with spinning logo --- .../src/template/src/components/logo/logo.css | 23 ++++ .../src/template/src/components/logo/logo.js | 22 ++++ packages/init/src/template/src/favicon.ico | Bin 0 -> 15406 bytes .../init/src/template/src/pages/index.html | 99 ++++++++++++++++++ packages/init/src/template/src/pages/index.md | 1 - 5 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 packages/init/src/template/src/components/logo/logo.css create mode 100644 packages/init/src/template/src/components/logo/logo.js create mode 100644 packages/init/src/template/src/favicon.ico create mode 100644 packages/init/src/template/src/pages/index.html delete mode 100644 packages/init/src/template/src/pages/index.md diff --git a/packages/init/src/template/src/components/logo/logo.css b/packages/init/src/template/src/components/logo/logo.css new file mode 100644 index 000000000..af78f7213 --- /dev/null +++ b/packages/init/src/template/src/components/logo/logo.css @@ -0,0 +1,23 @@ + +:host img { + padding: 1.5em; + will-change: filter; + transition: filter 300ms; + width: 30%; +} + +@media (prefers-reduced-motion: no-preference) { + img { + animation: logo-spin infinite 20s linear; + } +} + +@keyframes logo-spin { + from { + transform: rotate(360deg); + } + + to { + transform: rotate(0deg); + } +} \ No newline at end of file diff --git a/packages/init/src/template/src/components/logo/logo.js b/packages/init/src/template/src/components/logo/logo.js new file mode 100644 index 000000000..7a1d405a0 --- /dev/null +++ b/packages/init/src/template/src/components/logo/logo.js @@ -0,0 +1,22 @@ +import sheet from './logo.css' with { type: 'css' }; + +const template = document.createElement('template'); + +template.innerHTML = ` + + + +`; + +class Logo extends HTMLElement { + connectedCallback() { + if (!this.shadowRoot) { + this.attachShadow({ mode: 'open' }); + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } + + this.shadowRoot.adoptedStyleSheets = [sheet]; + } +} + +customElements.define('x-logo', Logo); \ No newline at end of file diff --git a/packages/init/src/template/src/favicon.ico b/packages/init/src/template/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8e11c47841a549748dbd8b34015a5a4d2dc16883 GIT binary patch literal 15406 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 AMF0Q* literal 0 HcmV?d00001 diff --git a/packages/init/src/template/src/pages/index.html b/packages/init/src/template/src/pages/index.html new file mode 100644 index 000000000..b0a88fb8f --- /dev/null +++ b/packages/init/src/template/src/pages/index.html @@ -0,0 +1,99 @@ + + + + Greenwood + + + + + + + + + + + + + + + +
+ +

Welcome to Greenwood!

+ + + +

Edit src/pages/index.html to start making changes

+ +
    +
  • + Getting Started + Lorum Ipsum +
    • +
  • + Docs + Blah Blah +
    • +
  • + Guides + Learn how to build and deploy your app! +
    • +
  • + Community + Come reach out to us on GitHub or Discord +
    • +
+
+ + + \ No newline at end of file diff --git a/packages/init/src/template/src/pages/index.md b/packages/init/src/template/src/pages/index.md deleted file mode 100644 index 6b343b58c..000000000 --- a/packages/init/src/template/src/pages/index.md +++ /dev/null @@ -1 +0,0 @@ -## My Project \ No newline at end of file From 4407be743f4ea142526d934968c02011109b2bd0 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 23 Jun 2024 20:17:48 -0400 Subject: [PATCH 02/15] flesh out cards conent --- .../src/template/src/components/logo/logo.css | 2 +- .../init/src/template/src/pages/index.html | 60 ++++++++++++------- 2 files changed, 39 insertions(+), 23 deletions(-) diff --git a/packages/init/src/template/src/components/logo/logo.css b/packages/init/src/template/src/components/logo/logo.css index af78f7213..49fcbe041 100644 --- a/packages/init/src/template/src/components/logo/logo.css +++ b/packages/init/src/template/src/components/logo/logo.css @@ -3,7 +3,7 @@ padding: 1.5em; will-change: filter; transition: filter 300ms; - width: 30%; + width: 15%; } @media (prefers-reduced-motion: no-preference) { diff --git a/packages/init/src/template/src/pages/index.html b/packages/init/src/template/src/pages/index.html index b0a88fb8f..3ad4ce015 100644 --- a/packages/init/src/template/src/pages/index.html +++ b/packages/init/src/template/src/pages/index.html @@ -52,13 +52,27 @@ ul { list-style-type: none; padding: 0; - display: block; display: flex; flex-wrap: wrap; } - li { + .card { + width: 40%; + margin: 5px auto; + padding: 1rem; + height: 100px; + display: inline-block; + background-color: #edefec; + border-radius: 1rem; + color: #020202; + @media(max-width: 768px) { + width: 80%; + } + } + + a { + color: #020202; } @@ -66,7 +80,6 @@ -

Welcome to Greenwood!

@@ -75,25 +88,28 @@

Welcome to Greenwood!

Edit src/pages/index.html to start making changes

-
    -
  • - Getting Started - Lorum Ipsum -
    • -
  • - Docs - Blah Blah -
    • -
  • - Guides - Learn how to build and deploy your app! -
    • -
  • - Community - Come reach out to us on GitHub or Discord -
    • -
+
+
+

Getting Started

+

Follow our guide on learning Greenwood for the first time.

+
+ +
+

Docs

+

Learn about Greenwood's features and capabilities.

+
+ +
+

Guides

+

Walkthroughs on ways to build and deploy with Greenwood.

+
+ +
+

Community

+

Come join us GitHub and Discord.

+
+
+
- \ No newline at end of file From b2b08cfc736dd6013ad356705073adab3e9ab6ec Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Tue, 25 Jun 2024 20:57:15 -0400 Subject: [PATCH 03/15] comment out fonts --- packages/init/src/template/src/pages/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/init/src/template/src/pages/index.html b/packages/init/src/template/src/pages/index.html index 3ad4ce015..1c4afbde0 100644 --- a/packages/init/src/template/src/pages/index.html +++ b/packages/init/src/template/src/pages/index.html @@ -11,7 +11,7 @@ + - + - + - + `; From f798bd800370d2a647d5451ab4ae87d03e1b2590 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 29 Jun 2024 16:12:36 -0400 Subject: [PATCH 08/15] add links --- packages/init/src/template/src/pages/index.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/init/src/template/src/pages/index.html b/packages/init/src/template/src/pages/index.html index 3ad4ce015..187bf9492 100644 --- a/packages/init/src/template/src/pages/index.html +++ b/packages/init/src/template/src/pages/index.html @@ -74,6 +74,10 @@ a { color: #020202; } + + x-logo:not(:defined) { + opacity: 0; + } @@ -91,17 +95,17 @@

Edit src/pages/index.html to start making changes

Getting Started

-

Follow our guide on learning Greenwood for the first time.

+

Follow our guide on learning Greenwood for the first time.

Docs

-

Learn about Greenwood's features and capabilities.

+

Learn about Greenwood's features and capabilities.

Guides

-

Walkthroughs on ways to build and deploy with Greenwood.

+

Walkthroughs on ways to build and deploy with Greenwood.

From decc78653200a6466f12d5420b6ce9f2b0067f13 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Fri, 2 Aug 2024 20:19:28 -0400 Subject: [PATCH 09/15] responsive and misc styling tweaks --- .../src/template/src/components/logo/logo.css | 21 ++++++- .../init/src/template/src/pages/index.html | 58 +++++++------------ 2 files changed, 42 insertions(+), 37 deletions(-) diff --git a/packages/init/src/template/src/components/logo/logo.css b/packages/init/src/template/src/components/logo/logo.css index a90330c03..13e2f3999 100644 --- a/packages/init/src/template/src/components/logo/logo.css +++ b/packages/init/src/template/src/components/logo/logo.css @@ -7,9 +7,10 @@ .my-logo div { display: inline-block; - width: 8%; + max-width: 35%; vertical-align: middle; border-radius: 20px; + vertical-align: top; } svg { @@ -43,3 +44,21 @@ svg { animation: leafanimation 8s linear; } } + +@media(min-width: 500px) { + .my-logo div { + max-width: 23%; + } +} + +@media(min-width: 768px) { + .my-logo div { + max-width: 15%; + } +} + +@media(min-width: 1024px) { + .my-logo div { + max-width: 10%; + } +} \ No newline at end of file diff --git a/packages/init/src/template/src/pages/index.html b/packages/init/src/template/src/pages/index.html index 187bf9492..193f60b96 100644 --- a/packages/init/src/template/src/pages/index.html +++ b/packages/init/src/template/src/pages/index.html @@ -11,31 +11,13 @@ @@ -110,7 +96,7 @@

Guides

Community

-

Come join us GitHub and Discord.

+

Come join us on GitHub and Discord to get involved.

From 303fcbe681f7b4851e263f186fe46633cad38ff1 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Fri, 2 Aug 2024 21:45:25 -0400 Subject: [PATCH 10/15] correctly align logo --- packages/init/src/template/src/components/logo/logo.css | 9 ++++++++- packages/init/src/template/src/components/logo/logo.js | 2 +- packages/init/src/template/src/pages/index.html | 1 + 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/init/src/template/src/components/logo/logo.css b/packages/init/src/template/src/components/logo/logo.css index 13e2f3999..9fb1ba1c8 100644 --- a/packages/init/src/template/src/components/logo/logo.css +++ b/packages/init/src/template/src/components/logo/logo.css @@ -5,6 +5,13 @@ color: transparent; } +.spacer { + height: 100px; + width: 100px; + display: block; + margin-top: -100px; +} + .my-logo div { display: inline-block; max-width: 35%; @@ -41,7 +48,7 @@ svg { @media (prefers-reduced-motion: no-preference) { .my-logo { - animation: leafanimation 8s linear; + animation: leafanimation 6s linear; } } diff --git a/packages/init/src/template/src/components/logo/logo.js b/packages/init/src/template/src/components/logo/logo.js index d3be3c26a..bad3aa2ed 100644 --- a/packages/init/src/template/src/components/logo/logo.js +++ b/packages/init/src/template/src/components/logo/logo.js @@ -4,7 +4,7 @@ const template = document.createElement('template'); template.innerHTML = `