From 64b36c351d43d800fe3f4a7b52e6bda79514e7b2 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 3 Jun 2024 18:02:26 -0400 Subject: [PATCH 01/68] recent post component --- src/components/latest-post/latest-post.js | 17 ++ .../latest-post/latest-post.module.css | 15 ++ .../latest-post/latest-post.spec.js | 51 ++++++ .../latest-post/latest-post.stories.js | 14 ++ src/pages/index.md | 154 +++++++++++++++++- src/styles/home.css | 10 ++ 6 files changed, 254 insertions(+), 7 deletions(-) create mode 100644 src/components/latest-post/latest-post.js create mode 100644 src/components/latest-post/latest-post.module.css create mode 100644 src/components/latest-post/latest-post.spec.js create mode 100644 src/components/latest-post/latest-post.stories.js diff --git a/src/components/latest-post/latest-post.js b/src/components/latest-post/latest-post.js new file mode 100644 index 00000000..f8243496 --- /dev/null +++ b/src/components/latest-post/latest-post.js @@ -0,0 +1,17 @@ +import styles from "./latest-post.module.css"; + +export default class LatestPost extends HTMLElement { + connectedCallback() { + const link = this.getAttribute("link"); + const title = this.getAttribute("title"); + + this.innerHTML = ` +
+ 🎉 New + ${title} → +
+ `; + } +} + +customElements.define("app-latest-post", LatestPost); diff --git a/src/components/latest-post/latest-post.module.css b/src/components/latest-post/latest-post.module.css new file mode 100644 index 00000000..de353042 --- /dev/null +++ b/src/components/latest-post/latest-post.module.css @@ -0,0 +1,15 @@ +.pill { + display: inline-block; + border-radius: var(--radius-4); + padding: var(--size-fluid-1); + border: var(--radius-1) solid var(--color-gray-background); + box-shadow: var(--shadow-2); + text-align: left; +} + +.new { + background-color: #c3ddba; + border-radius: var(--radius-4); + padding: var(--size-2); + margin-right: var(--size-fluid-1); +} diff --git a/src/components/latest-post/latest-post.spec.js b/src/components/latest-post/latest-post.spec.js new file mode 100644 index 00000000..1ef843ae --- /dev/null +++ b/src/components/latest-post/latest-post.spec.js @@ -0,0 +1,51 @@ +import { expect } from "@esm-bundle/chai"; +import "./latest-post.js"; + +describe("Components/Latest Post", () => { + const LINK = "/test/"; + const TITLE = "test title"; + let latestPost; + + before(async () => { + latestPost = document.createElement("app-latest-post"); + + latestPost.setAttribute("link", LINK); + latestPost.setAttribute("title", TITLE); + + document.body.appendChild(latestPost); + + await latestPost.updateComplete; + }); + + describe("Default Behavior", () => { + it("should not be null", () => { + expect(latestPost).not.equal(undefined); + expect(latestPost.querySelectorAll("div").length).equal(1); + }); + + describe("Link tag", () => { + let link; + + before(async () => { + link = document.querySelector("a"); + }); + + it("should have the expected href value", () => { + expect(link.getAttribute("href")).to.equal(LINK); + }); + + it("should have the expected title attribute", () => { + expect(link.getAttribute("title")).to.equal("Read our latest post"); + }); + + it("should have the expected title text", () => { + expect(link.textContent).to.equal(`${TITLE} →`); + }); + }); + }); + + after(() => { + latestPost.remove(); + latestPost = null; + }); +}); diff --git a/src/components/latest-post/latest-post.stories.js b/src/components/latest-post/latest-post.stories.js new file mode 100644 index 00000000..9ee43bbc --- /dev/null +++ b/src/components/latest-post/latest-post.stories.js @@ -0,0 +1,14 @@ +import "./latest-post.js"; + +export default { + title: "Components/Latest Post", +}; + +const Template = () => ` + +`; + +export const Primary = Template.bind({}); diff --git a/src/pages/index.md b/src/pages/index.md index 57cf31da..bcb4e5e3 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -1,14 +1,154 @@ --- +title: Greenwood imports: - - ../styles/home.css + - ../components/hero-banner/hero-banner.js data-gwd-opt="static" + - ../components/latest-post/latest-post.js data-gwd-opt="static" + - ../components/walkthrough/walkthrough.js --- -# Welcome to Greenwood! + + + + + + +
+ HTML First +

Greenwood is HTML first by design. Start from just an index.html file or leverage hybrid, file-system based routing to easily achieve static and dynamic pages side-by-side.

+ +```html + + + + My Site + + + +

Welcome to our site!

+

+ Feel free to browse around or + contact us + if you have any questions. +

+ + +``` + +
+ +
+ Server Rendering +

Yay SSR! Lorum...

```js -return new Response("

Hello World

", { - headers: { - "Content-Type": "text/html", - }, -}); +// pages/products.js +import "../components/card.js"; +import { getProducts } from "../services/products.js"; + +export default class ProductsPage extends HTMLElement { + async connectedCallback() { + const products = await getProducts(); + const html = products + .map((product) => { + const { title, thumbnail } = product; + + return ` + + + `; + }) + .join(""); + + this.innerHTML = ` +

Product Catalog

+
${html}
+ `; + } +} ``` + +
+ +
+ Web Components +

Yay Web Components! Lorum...

+ +```js +// components/card.js +import sheet from "./card.js" with { type: "css" }; + +export default class Card extends HTMLElement { + connectedCallback() { + if (!this.shadowRoot) { + const thumbnail = this.getAttribute("thumbnail"); + const title = this.getAttribute("title"); + const template = document.createElement("template"); + + template.innerHTML = ` +
+

${title}

+ ${title} +
+ `; + this.attachShadow({ mode: "open" }); + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } + + this.shadowRoot.adoptedStyleSheets = [sheet]; + } +} + +customElements.define("app-card", Card); +``` + +
+ +
+ API Routes +

Yay API Routes! Lorum...

+ +```js +// api/search.js +import { renderFromHTML } from "wc-compiler"; +import { getProducts } from "../services/products.js"; + +export async function handler(request) { + const formData = await request.formData(); + const searchTerm = formData.has("term") ? formData.get("term") : ""; + const products = await getProducts(searchTerm); + let body = "No results found."; + + if (products.length > 0) { + const { html } = await renderFromHTML( + ` + ${products + .map((item, idx) => { + const { title, thumbnail } = item; + + return ` + + `; + }) + .join("")} + `, + [new URL("../components/card.js", import.meta.url)], + ); + + body = html; + } + + return new Response(body, { + headers: new Headers({ + "Content-Type": "text/html", + }), + }); +} +``` + +
diff --git a/src/styles/home.css b/src/styles/home.css index 2b330484..4c953cfa 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -7,3 +7,13 @@ pre { width: 30%; overflow: scroll; } + +app-latest-post, app-hero-banner { + display: block; + margin: 0 auto; + width: 70%; +} + +.walkthrough-card { + display: none; +} From 2ee75e20a9dd10d40e38fc54a49f3699c2c4a93d Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Thu, 6 Jun 2024 11:14:00 -0400 Subject: [PATCH 02/68] hero banner iterations --- src/components/hero-banner/hero-banner.js | 27 +++++++++ .../hero-banner/hero-banner.module.css | 56 +++++++++++++++++++ .../hero-banner/hero-banner.stories.js | 9 +++ src/styles/home.css | 10 ---- src/styles/theme.css | 5 +- 5 files changed, 95 insertions(+), 12 deletions(-) create mode 100644 src/components/hero-banner/hero-banner.js create mode 100644 src/components/hero-banner/hero-banner.module.css create mode 100644 src/components/hero-banner/hero-banner.stories.js diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js new file mode 100644 index 00000000..a6dda257 --- /dev/null +++ b/src/components/hero-banner/hero-banner.js @@ -0,0 +1,27 @@ +import styles from './hero-banner.module.css'; + +export default class HeroBanner extends HTMLElement { + connectedCallback() { + this.innerHTML = ` +
+

The Fullstack web
is here

+ +

Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.

+ + + + + +
+ 
$ npx @greenwood/cli@latest
+
+
+ ` + } +} + +customElements.define('app-hero-banner', HeroBanner); \ No newline at end of file diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css new file mode 100644 index 00000000..09612fed --- /dev/null +++ b/src/components/hero-banner/hero-banner.module.css @@ -0,0 +1,56 @@ +.container { + text-align: left; + max-width: 60%; + margin: 0; + padding: 0; +} + +.heading { + font-size: var(--font-size-8); + font-weight: var(--font-weight-9); + margin-block-start: 0; + margin-block-end: 0; +} + +.headingSub { + font-size: var(--font-size-3); + letter-spacing: var(--font-letterspacing-2); +} + +.buttonBlitz { + display: inline-block; + cursor: pointer; + border-radius: var(--radius-3); + background-color: transparent; + padding: var(--size-fluid-1); + min-width: var(--size-px-13); + color: var(--color-black); + box-shadow: var(--shadow-2); +} + +.buttonStarted { + display: inline-block; + cursor: pointer; + border-radius: var(--radius-3); + padding: var(--size-fluid-1); + background-color: var(--color-primary); + min-width: var(--size-px-13); + color: var(--color-white); + box-shadow: var(--shadow-4); +} + +.linkStarted { + color: var(--color-white); + text-decoration: none; +} + +.snippet { + margin: var(--size-4) 0; + display: inline-block; + border-radius: var(--radius-4); + padding: 0 var(--size-4); + border: var(--radius-1) solid var(--color-primary); + box-shadow: var(--shadow-4); + text-align: left; + letter-spacing: var(--font-letterspacing-4); +} diff --git a/src/components/hero-banner/hero-banner.stories.js b/src/components/hero-banner/hero-banner.stories.js new file mode 100644 index 00000000..ec7c7167 --- /dev/null +++ b/src/components/hero-banner/hero-banner.stories.js @@ -0,0 +1,9 @@ +import "./hero-banner.js"; + +export default { + title: "Components/Hero Banner", +}; + +const Template = () => ""; + +export const Primary = Template.bind({}); diff --git a/src/styles/home.css b/src/styles/home.css index 4c953cfa..ff0e7c27 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -1,13 +1,3 @@ -h1 { - text-align: center; -} - -pre { - margin: 0 auto !important; - width: 30%; - overflow: scroll; -} - app-latest-post, app-hero-banner { display: block; margin: 0 auto; diff --git a/src/styles/theme.css b/src/styles/theme.css index 362017c8..0426a567 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -15,7 +15,8 @@ format("truetype"); } -:root { +:root, +:host { --color-primary: #016341; --color-secondary: #0e0f0c; --color-tertiary: #151818; @@ -33,7 +34,7 @@ * { font-family: var(--font-primary); - font-size: var(--size-px-3); + font-size: var(--font-size-3); box-sizing: border-box; } From 2a6d44f051339639c92899dbf112545f57ab7b36 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Thu, 6 Jun 2024 11:15:56 -0400 Subject: [PATCH 03/68] formatting --- src/components/hero-banner/hero-banner.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js index a6dda257..c1a496d6 100644 --- a/src/components/hero-banner/hero-banner.js +++ b/src/components/hero-banner/hero-banner.js @@ -1,4 +1,4 @@ -import styles from './hero-banner.module.css'; +import styles from "./hero-banner.module.css"; export default class HeroBanner extends HTMLElement { connectedCallback() { @@ -20,8 +20,8 @@ export default class HeroBanner extends HTMLElement { 
$ npx @greenwood/cli@latest
- ` + `; } } -customElements.define('app-hero-banner', HeroBanner); \ No newline at end of file +customElements.define("app-hero-banner", HeroBanner); From 5e734e576e80ef42a92480a17e1faf6de2513a72 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 10 Jun 2024 12:46:20 -0400 Subject: [PATCH 04/68] WIP walkthrough section setup --- package-lock.json | 6 +-- src/components/walkthrough/walkthrough.css | 46 +++++++++++++++++++++ src/components/walkthrough/walkthrough.js | 47 ++++++++++++++++++++++ 3 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 src/components/walkthrough/walkthrough.css create mode 100644 src/components/walkthrough/walkthrough.js diff --git a/package-lock.json b/package-lock.json index c91fdf37..994f43a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2909,9 +2909,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.17.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz", - "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==", + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz", + "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==", "cpu": [ "x64" ], diff --git a/src/components/walkthrough/walkthrough.css b/src/components/walkthrough/walkthrough.css new file mode 100644 index 00000000..b5065bb1 --- /dev/null +++ b/src/components/walkthrough/walkthrough.css @@ -0,0 +1,46 @@ +.walkthrough { + border: solid 3px var(--color-secondary); + padding: 30px; + margin: 30px auto; + border-radius: 10px; + width: 60%; + min-height: 300px; + color: var(--color-white); + background-color: var(--color-accent); +} + +.walkthrough h3 { + padding: 0 20px; + display: block; + font-size: 1.5em; + text-align: center; + width: 90%; + margin: 10px auto; +} + +.walkthrough div pre { + display: inline-block; + width: 60%; + border-radius: 10px; + background-color: var(--color-secondary); + padding: 15px; + overflow: auto; +} + +.walkthrough ol { + list-style-type: none; + display: inline-block; + width: 30%; + vertical-align: top; + font-size: 1.5rem; +} + +.walkthrough ol li { + cursor: pointer; +} + +.walkthrough ol li.active { + background-color: var(--color-secondary); + border-radius: 5px; + padding-left: 5px; +} diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js new file mode 100644 index 00000000..767df51c --- /dev/null +++ b/src/components/walkthrough/walkthrough.js @@ -0,0 +1,47 @@ +// import sheet from './walkthrough.css' with { type: 'css' }; +// import theme from '../../styles/theme.css' with { type: 'css' }; + +const template = document.createElement('template'); + +export default class Walkthrough extends HTMLElement { + constructor() { + super(); + this.index = 0; + this.cards = []; + }; + + connectedCallback() { + if (!this.shadowRoot && typeof window !== 'undefined') { + this.cards = globalThis.document?.querySelectorAll('.walkthrough-card') || []; + + template.innerHTML = ` +

${this.cards[this.index].querySelector('p').innerHTML}

+ +
    + ${Array.from(this.cards).map((card, idx) => { + const label = card.querySelector('span').innerHTML; + + return `
  1. ${label}
    2. `; + }).join('')} +
+ +
${this.cards[this.index].querySelector('pre').innerHTML}
+ `; + + this.attachShadow({ mode: "open" }); + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } + + // this.shadowRoot.adoptedStyleSheets = [ theme ]; + this.shadowRoot?.querySelectorAll('li')?.forEach(item => item.addEventListener('click', this.selectItem.bind(this))) + } + + selectItem(event) { + console.log('selectItem', event.currentTarget.dataset.idx); + this.index = event.currentTarget.dataset.idx; + this.shadowRoot.querySelector('h3').innerHTML = this.cards[this.index].querySelector('p').innerHTML; + this.shadowRoot.querySelector('.snippet').innerHTML = this.cards[this.index].querySelector('pre').innerHTML; + } +} + +customElements.define('app-walkthrough', Walkthrough); \ No newline at end of file From b508f5b6a24deff474430962a2993ad0b632b986 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 10 Jun 2024 16:07:44 -0400 Subject: [PATCH 05/68] css modules implementation refactoring --- greenwood.config.js | 3 +- patches/wc-compiler+0.14.0.patch | 14 ++- plugin-css-modules.js | 146 +++++++++++++--------- postcss.config.cjs | 3 + postcss.config.mjs | 5 + src/components/walkthrough/walkthrough.js | 48 ++++--- 6 files changed, 136 insertions(+), 83 deletions(-) create mode 100644 postcss.config.cjs create mode 100644 postcss.config.mjs diff --git a/greenwood.config.js b/greenwood.config.js index 39e8acdc..8b2f27e5 100644 --- a/greenwood.config.js +++ b/greenwood.config.js @@ -1,9 +1,10 @@ import { greenwoodPluginImportRaw } from "@greenwood/plugin-import-raw"; import { greenwoodPluginCssModules } from "./plugin-css-modules.js"; +import { greenwoodPluginPostCss } from "@greenwood/plugin-postcss"; export default { prerender: true, - plugins: [greenwoodPluginImportRaw(), greenwoodPluginCssModules()], + plugins: [greenwoodPluginPostCss(), greenwoodPluginCssModules(), greenwoodPluginImportRaw()], markdown: { plugins: ["@mapbox/rehype-prism"], }, diff --git a/patches/wc-compiler+0.14.0.patch b/patches/wc-compiler+0.14.0.patch index c3e43a7c..b8ff5220 100644 --- a/patches/wc-compiler+0.14.0.patch +++ b/patches/wc-compiler+0.14.0.patch @@ -1,8 +1,18 @@ diff --git a/node_modules/wc-compiler/src/dom-shim.js b/node_modules/wc-compiler/src/dom-shim.js -index be289a3..dd4692a 100644 +index be289a3..2c97d0e 100644 --- a/node_modules/wc-compiler/src/dom-shim.js +++ b/node_modules/wc-compiler/src/dom-shim.js -@@ -102,6 +102,9 @@ class ShadowRoot extends DocumentFragment { +@@ -83,6 +83,9 @@ class Document extends Node { + createDocumentFragment(html) { + return new DocumentFragment(html); + } ++ ++ querySelector() { } ++ querySelectorAll() { } + } + + // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement +@@ -102,6 +105,9 @@ class ShadowRoot extends DocumentFragment { super(); this.mode = options.mode || 'closed'; this.adoptedStyleSheets = []; diff --git a/plugin-css-modules.js b/plugin-css-modules.js index 46080983..4d89785d 100644 --- a/plugin-css-modules.js +++ b/plugin-css-modules.js @@ -159,78 +159,104 @@ class CssModulesResource extends ResourceInterface { return new Request(matchedUrl); } - async shouldServe(url) { + // async shouldIntercept(url) { + // console.log('css modules intercept', { url }); + // const { pathname, protocol } = url; + // const mapKey = `${protocol}//${pathname}`; + // // // console.log(this.compilation.context.scratchDir) + // // // console.log(new URL('./__css-modules-map.json', this.compilation.context.scratchDir)); + // const cssModulesMap = getCssModulesMap(this.compilation); + // // console.log("shouldServer", { cssModulesMap, url }); + // return protocol === "file:" && pathname.endsWith(this.extensions[0]) && cssModulesMap[mapKey]; + // } + + // async intercept(url) { + // console.log('css modules intercept', { url }); + // const { pathname, protocol } = url; + // const mapKey = `${protocol}//${pathname}`; + // const cssModulesMap = getCssModulesMap(this.compilation); + // // console.log("@@@@@@", { url, cssModulesMap }); + // const cssModule = `export default ${JSON.stringify(cssModulesMap[mapKey].module)}`; + + // // console.log("@@@@@@", { cssModule }); + // return new Response(cssModule, { + // headers: { + // "Content-Type": this.contentType, + // }, + // }); + // } + + // this happens "first" as the HTML is returned, to find viable references to CSS Modules + // better way than just checking for /? + async shouldIntercept(url) { const { pathname, protocol } = url; const mapKey = `${protocol}//${pathname}`; - // // console.log(this.compilation.context.scratchDir) - // // console.log(new URL('./__css-modules-map.json', this.compilation.context.scratchDir)); const cssModulesMap = getCssModulesMap(this.compilation); - // console.log("shouldServer", { cssModulesMap, url }); - return protocol === "file:" && pathname.endsWith(this.extensions[0]) && cssModulesMap[mapKey]; + + return ( + url.pathname.endsWith("/") || + (protocol === "file:" && pathname.endsWith(this.extensions[0]) && cssModulesMap[mapKey]) + ); } - async serve(url) { + async intercept(url, request, response) { const { pathname, protocol } = url; const mapKey = `${protocol}//${pathname}`; const cssModulesMap = getCssModulesMap(this.compilation); - // console.log("@@@@@@", { url, cssModulesMap }); - const cssModule = `export default ${JSON.stringify(cssModulesMap[mapKey].module)}`; - - // console.log("@@@@@@", { cssModule }); - return new Response(cssModule, { - headers: { - "Content-Type": this.contentType, - }, - }); - } - - // this happens "first" as the HTML is returned, to find viable references to CSS Modules - // better way than just checking for /? - async shouldIntercept(url) { - return url.pathname.endsWith("/"); - } - async intercept(url, request, response) { - const body = await response.text(); - const dom = htmlparser.parse(body, { script: true }); - const scripts = dom.querySelectorAll("head script"); - const sheets = []; // TODO use a map here? - - for (const script of scripts) { - const type = script.getAttribute("type"); - const src = script.getAttribute("src"); - if (src && ["module", "module-shim"].includes(type)) { - // console.log("check this file for CSS Modules", src); - // await resolveForRelativeUrl(new URL(src, import.meta.url this.compilation.context.userWorkspace) - const scriptUrl = new URL( - `./${src.replace(/\.\.\//g, "").replace(/\.\//g, "")}`, - this.compilation.context.userWorkspace, - ); - walkAllImportsForCssModules(scriptUrl, sheets, this.compilation); + if (url.pathname.endsWith("/")) { + const body = await response.text(); + const dom = htmlparser.parse(body, { script: true }); + const scripts = dom.querySelectorAll("head script"); + const sheets = []; // TODO use a map here? + + for (const script of scripts) { + const type = script.getAttribute("type"); + const src = script.getAttribute("src"); + if (src && ["module", "module-shim"].includes(type)) { + // console.log("check this file for CSS Modules", src); + // await resolveForRelativeUrl(new URL(src, import.meta.url this.compilation.context.userWorkspace) + const scriptUrl = new URL( + `./${src.replace(/\.\.\//g, "").replace(/\.\//g, "")}`, + this.compilation.context.userWorkspace, + ); + walkAllImportsForCssModules(scriptUrl, sheets, this.compilation); + } } - } - const cssModulesMap = getCssModulesMap(this.compilation); - // console.log({ cssModulesMap }); - - // for(const cssModule of cssModulesMap) { - // // console.log({ cssModule }); - // } - Object.keys(cssModulesMap).forEach((key) => { - sheets.push(cssModulesMap[key].contents); - }); - - const newBody = body.replace( - "", - ` - - - `, - ); + const cssModulesMap = getCssModulesMap(this.compilation); + // console.log({ cssModulesMap }); + + // for(const cssModule of cssModulesMap) { + // // console.log({ cssModule }); + // } + Object.keys(cssModulesMap).forEach((key) => { + sheets.push(cssModulesMap[key].contents); + }); + + const newBody = body.replace( + "", + ` + + + `, + ); - return new Response(newBody); + return new Response(newBody); + } else if ( + url.pathname.endsWith("/") || + (protocol === "file:" && pathname.endsWith(this.extensions[0]) && cssModulesMap[mapKey]) + ) { + const cssModule = `export default ${JSON.stringify(cssModulesMap[mapKey].module)}`; + + return new Response(cssModule, { + headers: { + "Content-Type": this.contentType, + }, + }); + } } async shouldOptimize(url, response) { diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 00000000..0df4fd4a --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,3 @@ +module.exports = { + plugins: [require("postcss-import")], +}; diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 00000000..38ef7be9 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,5 @@ +// would like to get rid of this need, ideally +// https://github.com/ProjectEvergreen/greenwood/discussions/1238 +export default { + plugins: [(await import("postcss-import")).default], +}; diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index 767df51c..b4b43d01 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -1,47 +1,55 @@ -// import sheet from './walkthrough.css' with { type: 'css' }; -// import theme from '../../styles/theme.css' with { type: 'css' }; +import sheet from "./walkthrough.css" with { type: "css" }; +import theme from "../../styles/theme.css" with { type: "css" }; -const template = document.createElement('template'); +const template = document.createElement("template"); export default class Walkthrough extends HTMLElement { constructor() { super(); this.index = 0; this.cards = []; - }; + } connectedCallback() { - if (!this.shadowRoot && typeof window !== 'undefined') { - this.cards = globalThis.document?.querySelectorAll('.walkthrough-card') || []; + if (!this.shadowRoot) { + this.cards = globalThis.document?.querySelectorAll(".walkthrough-card") || []; template.innerHTML = ` -

${this.cards[this.index].querySelector('p').innerHTML}

+
+

${this.cards[this.index]?.querySelector("p").innerHTML}

-
    - ${Array.from(this.cards).map((card, idx) => { - const label = card.querySelector('span').innerHTML; +
      + ${Array.from(this.cards) + .map((card, idx) => { + const label = card?.querySelector("span").innerHTML; - return `
    1. ${label}
      2. `; - }).join('')} -
    + return `
  1. ${label}
    2. `; + }) + .join("")} +
-
${this.cards[this.index].querySelector('pre').innerHTML}
+
${this.cards[this.index]?.querySelector("pre").innerHTML}
+
`; this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); } - // this.shadowRoot.adoptedStyleSheets = [ theme ]; - this.shadowRoot?.querySelectorAll('li')?.forEach(item => item.addEventListener('click', this.selectItem.bind(this))) + this.shadowRoot.adoptedStyleSheets = [theme, sheet]; + this.shadowRoot + .querySelectorAll("li") + ?.forEach((item) => item.addEventListener("click", this.selectItem.bind(this))); } selectItem(event) { - console.log('selectItem', event.currentTarget.dataset.idx); + console.log("selectItem", event.currentTarget.dataset.idx); this.index = event.currentTarget.dataset.idx; - this.shadowRoot.querySelector('h3').innerHTML = this.cards[this.index].querySelector('p').innerHTML; - this.shadowRoot.querySelector('.snippet').innerHTML = this.cards[this.index].querySelector('pre').innerHTML; + this.shadowRoot.querySelector("h3").innerHTML = + this.cards[this.index].querySelector("p").innerHTML; + this.shadowRoot.querySelector(".snippet").innerHTML = + this.cards[this.index].querySelector("pre").innerHTML; } } -customElements.define('app-walkthrough', Walkthrough); \ No newline at end of file +customElements.define("app-walkthrough", Walkthrough); From eed15921ab6d6aa5410d0ab66916d90a7b6db0ca Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 10 Jun 2024 16:26:54 -0400 Subject: [PATCH 06/68] misc walkthrough SSR refactor --- src/components/walkthrough/walkthrough.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index b4b43d01..31380124 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -11,35 +11,36 @@ export default class Walkthrough extends HTMLElement { } connectedCallback() { - if (!this.shadowRoot) { - this.cards = globalThis.document?.querySelectorAll(".walkthrough-card") || []; + this.cards = globalThis.document?.querySelectorAll(".walkthrough-card") || []; + if (this.cards.length > 0) { template.innerHTML = `
-

${this.cards[this.index]?.querySelector("p").innerHTML}

+

${this.cards[this.index].querySelector("p").innerHTML}

    ${Array.from(this.cards) .map((card, idx) => { - const label = card?.querySelector("span").innerHTML; + const label = card.querySelector("span").innerHTML; return `
  1. ${label}
    2. `; }) .join("")}
-
${this.cards[this.index]?.querySelector("pre").innerHTML}
+
${this.cards[this.index].querySelector("pre").innerHTML}
`; this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); + this.shadowRoot.adoptedStyleSheets = [theme, sheet]; + this.shadowRoot + .querySelectorAll("li") + .forEach((item) => item.addEventListener("click", this.selectItem.bind(this))); + } else { + console.debug("no walkthrough content cards detected"); } - - this.shadowRoot.adoptedStyleSheets = [theme, sheet]; - this.shadowRoot - .querySelectorAll("li") - ?.forEach((item) => item.addEventListener("click", this.selectItem.bind(this))); } selectItem(event) { From 865576b7672fb18a05c635e3d7387fa4c7bb6021 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 10 Jun 2024 21:51:34 -0400 Subject: [PATCH 07/68] walkthrough layout styling WIP --- src/components/walkthrough/walkthrough.css | 69 ++++++++++++---------- src/components/walkthrough/walkthrough.js | 42 +++++++------ src/pages/index.md | 1 + 3 files changed, 64 insertions(+), 48 deletions(-) diff --git a/src/components/walkthrough/walkthrough.css b/src/components/walkthrough/walkthrough.css index b5065bb1..8d876b9d 100644 --- a/src/components/walkthrough/walkthrough.css +++ b/src/components/walkthrough/walkthrough.css @@ -1,46 +1,55 @@ -.walkthrough { - border: solid 3px var(--color-secondary); +:host .walkthrough { padding: 30px; margin: 30px auto; - border-radius: 10px; - width: 60%; - min-height: 300px; + border-radius: var(--radius-5); + width: 98%; + min-height: 1000px; color: var(--color-white); - background-color: var(--color-accent); + background-color: var(--color-secondary); } -.walkthrough h3 { - padding: 0 20px; - display: block; - font-size: 1.5em; - text-align: center; - width: 90%; - margin: 10px auto; +.row { + display: flex; } -.walkthrough div pre { - display: inline-block; +.column-left { + flex: 40%; +} + +.column-right { + flex: 60%; width: 60%; - border-radius: 10px; - background-color: var(--color-secondary); - padding: 15px; - overflow: auto; } -.walkthrough ol { - list-style-type: none; - display: inline-block; - width: 30%; - vertical-align: top; - font-size: 1.5rem; +.card { + border-radius: var(--radius-4); + padding: 5px; } -.walkthrough ol li { +h2 { + font-size: var(--font-size-fluid-3); + font-weight: bold; +} + +h3 { + color: var(--color-gray); +} + +h4 { + font-size: var(--font-size-fluid-1); + font-weight: bold; + margin: 5px 0; cursor: pointer; } -.walkthrough ol li.active { - background-color: var(--color-secondary); - border-radius: 5px; - padding-left: 5px; +p { + margin: 0; + padding: 15px; + width: 90%; + text-align: left; + font-size: var(--font-size-1); + background-color: #151818; + min-height: 100px; + color: var(--color-gray); + border-radius: var(--radius-2); } diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index 31380124..b8e1bcf2 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -16,19 +16,28 @@ export default class Walkthrough extends HTMLElement { if (this.cards.length > 0) { template.innerHTML = `
-

${this.cards[this.index].querySelector("p").innerHTML}

- -
    - ${Array.from(this.cards) - .map((card, idx) => { - const label = card.querySelector("span").innerHTML; - - return `
  1. ${label}
    2. `; - }) - .join("")} -
- -
${this.cards[this.index].querySelector("pre").innerHTML}
+

Go from Zero to Fullstack with web standards

+

Lorum Ipsum...

+ +
+
+ ${Array.from(this.cards) + .map((card, idx) => { + const title = card.querySelector("span").innerHTML; + const text = card.querySelector("p").innerHTML; + + return ` +
+

${title}

+

${text}

+
+ `; + }) + .join("")} +
+ +
${this.cards[this.index].querySelector("pre").outerHTML}
+
`; @@ -36,7 +45,7 @@ export default class Walkthrough extends HTMLElement { this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.adoptedStyleSheets = [theme, sheet]; this.shadowRoot - .querySelectorAll("li") + .querySelectorAll(".card h4") .forEach((item) => item.addEventListener("click", this.selectItem.bind(this))); } else { console.debug("no walkthrough content cards detected"); @@ -44,12 +53,9 @@ export default class Walkthrough extends HTMLElement { } selectItem(event) { - console.log("selectItem", event.currentTarget.dataset.idx); this.index = event.currentTarget.dataset.idx; - this.shadowRoot.querySelector("h3").innerHTML = - this.cards[this.index].querySelector("p").innerHTML; this.shadowRoot.querySelector(".snippet").innerHTML = - this.cards[this.index].querySelector("pre").innerHTML; + this.cards[this.index].querySelector("pre").outerHTML; } } diff --git a/src/pages/index.md b/src/pages/index.md index bcb4e5e3..f1c31b43 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -4,6 +4,7 @@ imports: - ../components/hero-banner/hero-banner.js data-gwd-opt="static" - ../components/latest-post/latest-post.js data-gwd-opt="static" - ../components/walkthrough/walkthrough.js + - ../styles/home.css --- From 8482ae24ca01e63ea3474b5e5a189395b14d653d Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 17 Jun 2024 16:03:12 -0400 Subject: [PATCH 08/68] fix lint --- src/styles/home.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/home.css b/src/styles/home.css index ff0e7c27..aec86252 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -1,4 +1,5 @@ -app-latest-post, app-hero-banner { +app-latest-post, +app-hero-banner { display: block; margin: 0 auto; width: 70%; From e68bfb6310284c9ab9529ec139872e57c5c50c24 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 17 Jun 2024 16:40:32 -0400 Subject: [PATCH 09/68] misc styling --- src/components/hero-banner/hero-banner.js | 2 +- src/components/hero-banner/hero-banner.module.css | 6 +++++- src/pages/index.md | 1 - src/styles/home.css | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js index c1a496d6..ee8a83b0 100644 --- a/src/components/hero-banner/hero-banner.js +++ b/src/components/hero-banner/hero-banner.js @@ -4,7 +4,7 @@ export default class HeroBanner extends HTMLElement { connectedCallback() { this.innerHTML = `
-

The Fullstack web
is here

+

The Fullstack web is here

Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.

diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css index 09612fed..c3e8d3bd 100644 --- a/src/components/hero-banner/hero-banner.module.css +++ b/src/components/hero-banner/hero-banner.module.css @@ -1,8 +1,11 @@ .container { text-align: left; - max-width: 60%; margin: 0; padding: 0; + + @media (width >= 1080px) { + max-width: 60%; + } } .heading { @@ -37,6 +40,7 @@ min-width: var(--size-px-13); color: var(--color-white); box-shadow: var(--shadow-4); + margin-top: var(--size-fluid-1); } .linkStarted { diff --git a/src/pages/index.md b/src/pages/index.md index f1c31b43..1c8d9abb 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -1,5 +1,4 @@ --- -title: Greenwood imports: - ../components/hero-banner/hero-banner.js data-gwd-opt="static" - ../components/latest-post/latest-post.js data-gwd-opt="static" diff --git a/src/styles/home.css b/src/styles/home.css index aec86252..f99ba9ec 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -1,7 +1,7 @@ app-latest-post, app-hero-banner { display: block; - margin: 0 auto; + margin: var(--size-fluid-1) auto; width: 70%; } From b38d306e41f2e93654b9096f79c5219e870de8d9 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 17 Jun 2024 17:37:52 -0400 Subject: [PATCH 10/68] hover styling for walk through --- src/components/walkthrough/walkthrough.css | 23 ++++++++++++++++++---- src/components/walkthrough/walkthrough.js | 22 ++++++++++++++++----- src/pages/index.md | 4 ++++ 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/components/walkthrough/walkthrough.css b/src/components/walkthrough/walkthrough.css index 8d876b9d..4e15a080 100644 --- a/src/components/walkthrough/walkthrough.css +++ b/src/components/walkthrough/walkthrough.css @@ -23,7 +23,20 @@ .card { border-radius: var(--radius-4); - padding: 5px; + padding: var(--font-size-fluid-1); + cursor: pointer; + width: 94%; + margin: var(--font-size-1) 0; +} + +.card:hover { + background-color: var(--color-accent); + color: var(--color-black); +} + +.active { + background-color: var(--color-accent); + color: var(--color-black); } h2 { @@ -39,7 +52,6 @@ h4 { font-size: var(--font-size-fluid-1); font-weight: bold; margin: 5px 0; - cursor: pointer; } p { @@ -48,8 +60,11 @@ p { width: 90%; text-align: left; font-size: var(--font-size-1); - background-color: #151818; min-height: 100px; - color: var(--color-gray); border-radius: var(--radius-2); } + +img { + display: inline-block; + vertical-align: middle; +} diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index b8e1bcf2..f735606a 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -25,10 +25,14 @@ export default class Walkthrough extends HTMLElement { .map((card, idx) => { const title = card.querySelector("span").innerHTML; const text = card.querySelector("p").innerHTML; + const icon = card.querySelector("i").textContent; return ` -
-

${title}

+
+

+ ${text} icon + ${title} +

${text}

`; @@ -45,7 +49,7 @@ export default class Walkthrough extends HTMLElement { this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.adoptedStyleSheets = [theme, sheet]; this.shadowRoot - .querySelectorAll(".card h4") + .querySelectorAll(".card") .forEach((item) => item.addEventListener("click", this.selectItem.bind(this))); } else { console.debug("no walkthrough content cards detected"); @@ -53,9 +57,17 @@ export default class Walkthrough extends HTMLElement { } selectItem(event) { - this.index = event.currentTarget.dataset.idx; + const cards = this.shadowRoot.querySelectorAll(".card"); + const index = this.index = event.currentTarget.dataset.idx; + this.shadowRoot.querySelector(".snippet").innerHTML = - this.cards[this.index].querySelector("pre").outerHTML; + this.cards[this.index].querySelector("pre").outerHTML; + + cards.forEach((card) => { + card.dataset.idx === index + ? card.classList.add('active') + : card.classList.remove('active') + }); } } diff --git a/src/pages/index.md b/src/pages/index.md index 1c8d9abb..28f5c142 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -14,6 +14,7 @@ imports:
HTML First + html.svg

Greenwood is HTML first by design. Start from just an index.html file or leverage hybrid, file-system based routing to easily achieve static and dynamic pages side-by-side.

```html @@ -38,6 +39,7 @@ imports:
Server Rendering + build-ssg.svg

Yay SSR! Lorum...

```js @@ -74,6 +76,7 @@ export default class ProductsPage extends HTMLElement {
Web Components + web-components.svg

Yay Web Components! Lorum...

```js @@ -108,6 +111,7 @@ customElements.define("app-card", Card);
API Routes + api-routes.svg

Yay API Routes! Lorum...

```js From f11e368eee1763ea4693a7f470369b588793605f Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 17 Jun 2024 18:04:22 -0400 Subject: [PATCH 11/68] scaffolding out addition home page sections --- .../build-with-friends/build-with-friends.js | 15 +++++++++++++++ .../build-with-friends.module.css | 3 +++ .../build-with-friends.stories.js | 9 +++++++++ src/components/run-anywhere/run-anywhere.js | 16 ++++++++++++++++ .../run-anywhere/run-anywhere.module.css | 3 +++ .../run-anywhere/run-anywhere.stories.js | 9 +++++++++ src/components/walkthrough/walkthrough.js | 8 +++----- src/components/why-greenwood/why-greenwood.js | 14 ++++++++++++++ .../why-greenwood/why-greenwood.module.css | 3 +++ .../why-greenwood/why-greenwood.stories.js | 9 +++++++++ src/pages/index.md | 9 +++++++++ 11 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 src/components/build-with-friends/build-with-friends.js create mode 100644 src/components/build-with-friends/build-with-friends.module.css create mode 100644 src/components/build-with-friends/build-with-friends.stories.js create mode 100644 src/components/run-anywhere/run-anywhere.js create mode 100644 src/components/run-anywhere/run-anywhere.module.css create mode 100644 src/components/run-anywhere/run-anywhere.stories.js create mode 100644 src/components/why-greenwood/why-greenwood.js create mode 100644 src/components/why-greenwood/why-greenwood.module.css create mode 100644 src/components/why-greenwood/why-greenwood.stories.js diff --git a/src/components/build-with-friends/build-with-friends.js b/src/components/build-with-friends/build-with-friends.js new file mode 100644 index 00000000..cda5b110 --- /dev/null +++ b/src/components/build-with-friends/build-with-friends.js @@ -0,0 +1,15 @@ +import styles from "./build-with-friends.module.css"; + +export default class BuildWithFriends extends HTMLElement { + connectedCallback() { + this.innerHTML = ` +
+

Build With Friends

+

Greenwood Lorum Ipsum...

+ Lit logo +
+ `; + } +} + +customElements.define("app-build-with-friends", BuildWithFriends); diff --git a/src/components/build-with-friends/build-with-friends.module.css b/src/components/build-with-friends/build-with-friends.module.css new file mode 100644 index 00000000..e239466b --- /dev/null +++ b/src/components/build-with-friends/build-with-friends.module.css @@ -0,0 +1,3 @@ +.container { + background-color: var(--color-gray); +} diff --git a/src/components/build-with-friends/build-with-friends.stories.js b/src/components/build-with-friends/build-with-friends.stories.js new file mode 100644 index 00000000..741390ee --- /dev/null +++ b/src/components/build-with-friends/build-with-friends.stories.js @@ -0,0 +1,9 @@ +import "./build-with-friends.js"; + +export default { + title: "Components/Build With Friends", +}; + +const Template = () => ""; + +export const Primary = Template.bind({}); diff --git a/src/components/run-anywhere/run-anywhere.js b/src/components/run-anywhere/run-anywhere.js new file mode 100644 index 00000000..089eb991 --- /dev/null +++ b/src/components/run-anywhere/run-anywhere.js @@ -0,0 +1,16 @@ +import styles from "./run-anywhere.module.css"; + +export default class RunAnywhere extends HTMLElement { + connectedCallback() { + this.innerHTML = ` +
+

Run anywhere the run can run

+

Greenwood Lorum Ipsum...

+ Vercel logo + Netlify logo +
+ `; + } +} + +customElements.define("app-run-anywhere", RunAnywhere); diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css new file mode 100644 index 00000000..e239466b --- /dev/null +++ b/src/components/run-anywhere/run-anywhere.module.css @@ -0,0 +1,3 @@ +.container { + background-color: var(--color-gray); +} diff --git a/src/components/run-anywhere/run-anywhere.stories.js b/src/components/run-anywhere/run-anywhere.stories.js new file mode 100644 index 00000000..87cf7e72 --- /dev/null +++ b/src/components/run-anywhere/run-anywhere.stories.js @@ -0,0 +1,9 @@ +import "./run-anywhere.js"; + +export default { + title: "Components/Run Anywhere", +}; + +const Template = () => ""; + +export const Primary = Template.bind({}); diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index f735606a..17931850 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -58,15 +58,13 @@ export default class Walkthrough extends HTMLElement { selectItem(event) { const cards = this.shadowRoot.querySelectorAll(".card"); - const index = this.index = event.currentTarget.dataset.idx; + const index = (this.index = event.currentTarget.dataset.idx); this.shadowRoot.querySelector(".snippet").innerHTML = - this.cards[this.index].querySelector("pre").outerHTML; + this.cards[this.index].querySelector("pre").outerHTML; cards.forEach((card) => { - card.dataset.idx === index - ? card.classList.add('active') - : card.classList.remove('active') + card.dataset.idx === index ? card.classList.add("active") : card.classList.remove("active"); }); } } diff --git a/src/components/why-greenwood/why-greenwood.js b/src/components/why-greenwood/why-greenwood.js new file mode 100644 index 00000000..306b0dba --- /dev/null +++ b/src/components/why-greenwood/why-greenwood.js @@ -0,0 +1,14 @@ +import styles from "./why-greenwood.module.css"; + +export default class WhyGreenwood extends HTMLElement { + connectedCallback() { + this.innerHTML = ` +
+

Why Greenwood?

+

Greenwood Lorum Ipsum...

+
+ `; + } +} + +customElements.define("app-why-greenwood", WhyGreenwood); diff --git a/src/components/why-greenwood/why-greenwood.module.css b/src/components/why-greenwood/why-greenwood.module.css new file mode 100644 index 00000000..e239466b --- /dev/null +++ b/src/components/why-greenwood/why-greenwood.module.css @@ -0,0 +1,3 @@ +.container { + background-color: var(--color-gray); +} diff --git a/src/components/why-greenwood/why-greenwood.stories.js b/src/components/why-greenwood/why-greenwood.stories.js new file mode 100644 index 00000000..6662928f --- /dev/null +++ b/src/components/why-greenwood/why-greenwood.stories.js @@ -0,0 +1,9 @@ +import "./why-greenwood.js"; + +export default { + title: "Components/Why Greenwood", +}; + +const Template = () => ""; + +export const Primary = Template.bind({}); diff --git a/src/pages/index.md b/src/pages/index.md index 28f5c142..a52de46e 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -2,6 +2,9 @@ imports: - ../components/hero-banner/hero-banner.js data-gwd-opt="static" - ../components/latest-post/latest-post.js data-gwd-opt="static" + - ../components/run-anywhere/run-anywhere.js data-gwd-opt="static" + - ../components/why-greenwood/why-greenwood.js data-gwd-opt="static" + - ../components/build-with-friends/build-with-friends.js data-gwd-opt="static" - ../components/walkthrough/walkthrough.js - ../styles/home.css --- @@ -156,3 +159,9 @@ export async function handler(request) { ```
+ + + + + + From b9d8fa10f3562d3859d00d3c13025f7d41cd7f56 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 24 Jun 2024 16:59:46 -0400 Subject: [PATCH 12/68] favor init package greenwood starter command --- src/components/hero-banner/hero-banner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js index ee8a83b0..763b4fb4 100644 --- a/src/components/hero-banner/hero-banner.js +++ b/src/components/hero-banner/hero-banner.js @@ -17,7 +17,7 @@ export default class HeroBanner extends HTMLElement {
- 
$ npx @greenwood/cli@latest
+ 
$ npx @greenwood/init@latest
`; From 438db1b35b16020a8201ddf7099bf505f7022413 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 24 Jun 2024 17:35:48 -0400 Subject: [PATCH 13/68] card emphasis styling --- src/components/walkthrough/walkthrough.css | 16 ++++++++++++++++ src/pages/index.md | 8 ++++---- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/walkthrough/walkthrough.css b/src/components/walkthrough/walkthrough.css index 4e15a080..e9345236 100644 --- a/src/components/walkthrough/walkthrough.css +++ b/src/components/walkthrough/walkthrough.css @@ -29,11 +29,27 @@ margin: var(--font-size-1) 0; } +.card strong { + color: var(--color-accent); + font-weight: bold; +} + +.card em, +.card strong { + font-size: var(--font-size-1); +} + .card:hover { background-color: var(--color-accent); color: var(--color-black); } +.card:hover strong, +.active strong { + color: var(--color-white); + font-weight: bold; +} + .active { background-color: var(--color-accent); color: var(--color-black); diff --git a/src/pages/index.md b/src/pages/index.md index a52de46e..6f49906f 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -1,11 +1,11 @@ --- imports: - - ../components/hero-banner/hero-banner.js data-gwd-opt="static" - ../components/latest-post/latest-post.js data-gwd-opt="static" - - ../components/run-anywhere/run-anywhere.js data-gwd-opt="static" + - ../components/hero-banner/hero-banner.js data-gwd-opt="static" + - ../components/walkthrough/walkthrough.js - ../components/why-greenwood/why-greenwood.js data-gwd-opt="static" + - ../components/run-anywhere/run-anywhere.js data-gwd-opt="static" - ../components/build-with-friends/build-with-friends.js data-gwd-opt="static" - - ../components/walkthrough/walkthrough.js - ../styles/home.css --- @@ -18,7 +18,7 @@ imports:
HTML First html.svg -

Greenwood is HTML first by design. Start from just an index.html file or leverage hybrid, file-system based routing to easily achieve static and dynamic pages side-by-side.

+

Greenwood is HTML first by design. Start from just an index.html file or leverage hybrid, file-system based routing to easily achieve static and dynamic pages side-by-side.

```html From 7c3f2020258673c7e1c589d55a7c06fe07a2d168 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 24 Jun 2024 17:36:18 -0400 Subject: [PATCH 14/68] active selection --- src/components/walkthrough/walkthrough.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index 17931850..120a0ae8 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -26,9 +26,10 @@ export default class Walkthrough extends HTMLElement { const title = card.querySelector("span").innerHTML; const text = card.querySelector("p").innerHTML; const icon = card.querySelector("i").textContent; + const isActiveClass = idx === this.index ? ' active' : ''; return ` -
+

${text} icon ${title} From c38ea61504c0c5c30c492b4f081b0515298637d7 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 24 Jun 2024 21:47:32 -0400 Subject: [PATCH 15/68] run anywhere platform icon boxes --- src/components/run-anywhere/platforms.json | 22 +++++++ src/components/run-anywhere/run-anywhere.js | 26 +++++++- .../run-anywhere/run-anywhere.module.css | 64 +++++++++++++++++++ 3 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 src/components/run-anywhere/platforms.json diff --git a/src/components/run-anywhere/platforms.json b/src/components/run-anywhere/platforms.json new file mode 100644 index 00000000..fe3bbf5d --- /dev/null +++ b/src/components/run-anywhere/platforms.json @@ -0,0 +1,22 @@ +[ + { + "name": "Vercel", + "icon": "/assets/vercel.svg", + "link": "#" + }, + { + "name": "Netlify", + "icon": "/assets/netlify.png", + "link": "#" + }, + { + "name": "NodeJS", + "icon": "/assets/node.png", + "link": "#" + }, + { + "name": "GitHub", + "icon": "/assets/github.svg", + "link": "#" + } +] diff --git a/src/components/run-anywhere/run-anywhere.js b/src/components/run-anywhere/run-anywhere.js index 089eb991..fd6a4fa8 100644 --- a/src/components/run-anywhere/run-anywhere.js +++ b/src/components/run-anywhere/run-anywhere.js @@ -1,13 +1,33 @@ +import platforms from "./platforms.json" with { type: "json" }; import styles from "./run-anywhere.module.css"; export default class RunAnywhere extends HTMLElement { connectedCallback() { this.innerHTML = `
-

Run anywhere the run can run

+

Run anywhere the web can run

+

Greenwood Lorum Ipsum...

- Vercel logo - Netlify logo + +
+
+ ${platforms + .map((platform) => { + const { name, icon, link } = platform; + + return ` +
+
+ ${name} logo +
+ + ${name} +
+ `; + }) + .join("")} +
+
`; } diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css index e239466b..b9259b1e 100644 --- a/src/components/run-anywhere/run-anywhere.module.css +++ b/src/components/run-anywhere/run-anywhere.module.css @@ -1,3 +1,67 @@ .container { background-color: var(--color-gray); + text-align: center; +} + +.iconContainer { + width: 50%; + margin: 0 auto; +} + +.heading { + font-size: var(--font-size-5); + font-weight: var(--font-weight-9); +} + +.platformColumn { + display: flex; + flex: 1; + flex-direction: row; + flex-wrap: wrap; +} + +@media (max-width: 767px) { + .platformColumn { + flex-basis: calc(50% - 12px); + } +} + +@media (max-width: 460px) { + .platformColumn { + flex-basis: 100%; + } +} + +.platformBox { + display: flex; + justify-content: center; + align-items: center; + flex: 1; + flex-direction: column; +} + +.iconBox { + border-radius: var(--radius-3); + box-shadow: var(--shadow-2); + background-color: var(--color-white); + width: 150px; + line-height: 150px; +} + +.icon { + width: 100px; + display: inline-block; + vertical-align: middle; + line-height: 100%; +} + +.iconLink { + display: inline-block; + margin: var(--size-px-2) 0 var(--size-px-4); + border-radius: var(--radius-3); + border: 1px solid #bababa; + background-color: var(--gray-background); + color: var(--color-black); + padding: 10px 20px; + text-decoration: none; } From 4af6740ffc3b7b1a946d2f9fcbd3b1c18f267238 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 24 Jun 2024 21:47:54 -0400 Subject: [PATCH 16/68] formatting --- src/components/walkthrough/walkthrough.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index 120a0ae8..68d6c967 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -26,7 +26,7 @@ export default class Walkthrough extends HTMLElement { const title = card.querySelector("span").innerHTML; const text = card.querySelector("p").innerHTML; const icon = card.querySelector("i").textContent; - const isActiveClass = idx === this.index ? ' active' : ''; + const isActiveClass = idx === this.index ? " active" : ""; return `
From 70e79008de8ef83008a102214289ab05f10331b9 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 30 Jun 2024 15:22:36 -0400 Subject: [PATCH 17/68] styling and content for build with friends section --- src/assets/htmx.svg | 449 ++++++++++++++++++ src/assets/modern-web.svg | 104 ++++ .../build-with-friends/build-with-friends.js | 30 +- .../build-with-friends.module.css | 29 ++ 4 files changed, 609 insertions(+), 3 deletions(-) create mode 100644 src/assets/htmx.svg create mode 100644 src/assets/modern-web.svg diff --git a/src/assets/htmx.svg b/src/assets/htmx.svg new file mode 100644 index 00000000..4f5f653b --- /dev/null +++ b/src/assets/htmx.svg @@ -0,0 +1,449 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/modern-web.svg b/src/assets/modern-web.svg new file mode 100644 index 00000000..64e0b6a9 --- /dev/null +++ b/src/assets/modern-web.svg @@ -0,0 +1,104 @@ + + Tilted sphere with longitudinal stripes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/build-with-friends/build-with-friends.js b/src/components/build-with-friends/build-with-friends.js index cda5b110..5ddc94d8 100644 --- a/src/components/build-with-friends/build-with-friends.js +++ b/src/components/build-with-friends/build-with-friends.js @@ -1,12 +1,36 @@ import styles from "./build-with-friends.module.css"; +import htmxIcon from "../../assets/htmx.svg?type=raw"; +import litIcon from "../../assets/lit.svg?type=raw"; +import storybookIcon from "../../assets/storybook.svg?type=raw"; +import tailwindIcon from "../../assets/tailwind-logo.svg?type=raw"; +import typescriptIcon from "../../assets/typescript.svg?type=raw"; +import wtrIcon from "../../assets/modern-web.svg?type=raw"; export default class BuildWithFriends extends HTMLElement { connectedCallback() { this.innerHTML = `
-

Build With Friends

-

Greenwood Lorum Ipsum...

- Lit logo +

Build With Friends

+

Greenwood and Web Components work great with all your favorite tools in the frontend ecosystem.

+ + ${litIcon} + + + ${storybookIcon} + + + ${tailwindIcon} + + + ${typescriptIcon} + + + ${htmxIcon} + + + ${wtrIcon} + Web Test Runner +
`; } diff --git a/src/components/build-with-friends/build-with-friends.module.css b/src/components/build-with-friends/build-with-friends.module.css index e239466b..9b83f054 100644 --- a/src/components/build-with-friends/build-with-friends.module.css +++ b/src/components/build-with-friends/build-with-friends.module.css @@ -1,3 +1,32 @@ .container { background-color: var(--color-gray); + text-align: left; + padding: 100px; + width: 80%; + margin: 0 auto; +} + +.heading { + font-size: var(--font-size-5); + font-weight: var(--font-weight-9); +} + +.icon { + display: inline-block; + text-align: center; + background-color: var(--color-white); + border-radius: var(--radius-5); + padding: var(--size-fluid-1) var(--size-fluid-2); + margin: var(--size-fluid-1); + height: 100px; + vertical-align: middle; +} + +.icon svg { + height: 50px; +} + +.icon span { + vertical-align: middle; + font-weight: var(--font-weight-9); } From 30fd2ccb251f6da2c7c5808f3ca2c5e27fefc112 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 30 Jun 2024 15:31:39 -0400 Subject: [PATCH 18/68] restore fill on github icon SVG --- src/assets/github.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/github.svg b/src/assets/github.svg index a69fbfcb..dc42fbd5 100644 --- a/src/assets/github.svg +++ b/src/assets/github.svg @@ -1,3 +1,3 @@ - + From 9a56d8a7015217486b455af2d0f34fcf1f5753d4 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 30 Jun 2024 15:41:37 -0400 Subject: [PATCH 19/68] misc copy and styling tweaks --- src/components/build-with-friends/build-with-friends.js | 6 +++++- src/components/run-anywhere/run-anywhere.js | 2 +- src/components/run-anywhere/run-anywhere.module.css | 6 ++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/build-with-friends/build-with-friends.js b/src/components/build-with-friends/build-with-friends.js index 5ddc94d8..9aa96792 100644 --- a/src/components/build-with-friends/build-with-friends.js +++ b/src/components/build-with-friends/build-with-friends.js @@ -4,6 +4,7 @@ import litIcon from "../../assets/lit.svg?type=raw"; import storybookIcon from "../../assets/storybook.svg?type=raw"; import tailwindIcon from "../../assets/tailwind-logo.svg?type=raw"; import typescriptIcon from "../../assets/typescript.svg?type=raw"; +import wccIcon from "../../assets/wcc.svg?type=raw"; import wtrIcon from "../../assets/modern-web.svg?type=raw"; export default class BuildWithFriends extends HTMLElement { @@ -11,7 +12,7 @@ export default class BuildWithFriends extends HTMLElement { this.innerHTML = `

Build With Friends

-

Greenwood and Web Components work great with all your favorite tools in the frontend ecosystem.

+

Greenwood and Web Components work great with all your favorite tools in the web ecosystem.

${litIcon} @@ -31,6 +32,9 @@ export default class BuildWithFriends extends HTMLElement { ${wtrIcon} Web Test Runner + + ${wccIcon} +
`; } diff --git a/src/components/run-anywhere/run-anywhere.js b/src/components/run-anywhere/run-anywhere.js index fd6a4fa8..bf4420d0 100644 --- a/src/components/run-anywhere/run-anywhere.js +++ b/src/components/run-anywhere/run-anywhere.js @@ -7,7 +7,7 @@ export default class RunAnywhere extends HTMLElement {

Run anywhere the web can run

-

Greenwood Lorum Ipsum...

+

Greenwood helps you take your application further by embracing platforms that embrace web standards for both static and dynamic needs.

diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css index b9259b1e..88155ca4 100644 --- a/src/components/run-anywhere/run-anywhere.module.css +++ b/src/components/run-anywhere/run-anywhere.module.css @@ -13,6 +13,12 @@ font-weight: var(--font-weight-9); } +.subHeading { + width: 50%; + text-align: center; + margin: 0px auto 30px; +} + .platformColumn { display: flex; flex: 1; From 459b94d90ac6c6bcf96772032b887a38b1a910ec Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 1 Jul 2024 12:27:03 -0400 Subject: [PATCH 20/68] why greenwood skeleton --- src/components/why-greenwood/why-greenwood.js | 25 ++++++++- .../why-greenwood/why-greenwood.module.css | 55 +++++++++++++++++++ 2 files changed, 78 insertions(+), 2 deletions(-) diff --git a/src/components/why-greenwood/why-greenwood.js b/src/components/why-greenwood/why-greenwood.js index 306b0dba..caecddab 100644 --- a/src/components/why-greenwood/why-greenwood.js +++ b/src/components/why-greenwood/why-greenwood.js @@ -1,11 +1,32 @@ import styles from "./why-greenwood.module.css"; +import placeholderIcon from "../../assets/api-routes.svg?type=raw"; export default class WhyGreenwood extends HTMLElement { connectedCallback() { this.innerHTML = `
-

Why Greenwood?

-

Greenwood Lorum Ipsum...

+

Why Greenwood?

+

Greenwood lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ +
+
+

${placeholderIcon} Something 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ Link +
+ +
+

${placeholderIcon} Something 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ Link +
+ +
+

${placeholderIcon} Something 3

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ Link +
+
`; } diff --git a/src/components/why-greenwood/why-greenwood.module.css b/src/components/why-greenwood/why-greenwood.module.css index e239466b..4fac939c 100644 --- a/src/components/why-greenwood/why-greenwood.module.css +++ b/src/components/why-greenwood/why-greenwood.module.css @@ -1,3 +1,58 @@ .container { background-color: var(--color-gray); + border: var(--border-size-1) solid var(--color-black); + border-radius: var(--radius-5); + text-align: center; + width: 90%; + margin: 0 auto; + padding: 100px 50px 20px; +} + +.heading { + font-size: var(--font-size-5); + font-weight: var(--font-weight-9); +} + +.subHeading { + width: 60%; + margin: 10px auto 30px; +} + +.cardContainer { + display: grid; + grid-auto-flow: row; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(1, 1fr); + background-color: var(--color-white); + border-radius: var(--radius-5); +} + +.card { + display: inline-block; + text-align: left; + margin: 10px 10px 10px; + padding: 20px; + border-radius: var(--radius-5); + background-color: var(--color-gray); +} + +.card h3 { + padding: 20px; + border-radius: var(--radius-5); + background-color: var(--color-gray-background); + line-height: 50px; +} + +.card svg { + vertical-align: middle; +} + +.card a { + display: inline-block; + margin-left: 40px; + width: 100px; + padding: 10px 0; + text-align: center; + border-radius: var(--radius-5); + border: var(--border-size-1) solid var(--color-black); } From e00deae11410f791e081a3fad5f4821ef3540bab Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 1 Jul 2024 12:27:19 -0400 Subject: [PATCH 21/68] misc sections styling --- src/components/build-with-friends/build-with-friends.js | 4 +++- .../build-with-friends/build-with-friends.module.css | 8 +++++--- src/components/run-anywhere/run-anywhere.module.css | 7 +++++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/build-with-friends/build-with-friends.js b/src/components/build-with-friends/build-with-friends.js index 9aa96792..b6bdbfee 100644 --- a/src/components/build-with-friends/build-with-friends.js +++ b/src/components/build-with-friends/build-with-friends.js @@ -12,7 +12,9 @@ export default class BuildWithFriends extends HTMLElement { this.innerHTML = `

Build With Friends

-

Greenwood and Web Components work great with all your favorite tools in the web ecosystem.

+ +

Greenwood and Web Components work great with all of your favorite tools in the web ecosystem.

+ ${litIcon} diff --git a/src/components/build-with-friends/build-with-friends.module.css b/src/components/build-with-friends/build-with-friends.module.css index 9b83f054..97fb0491 100644 --- a/src/components/build-with-friends/build-with-friends.module.css +++ b/src/components/build-with-friends/build-with-friends.module.css @@ -1,9 +1,11 @@ .container { background-color: var(--color-gray); + border: var(--border-size-1) solid var(--color-black); + border-radius: var(--radius-5); text-align: left; - padding: 100px; - width: 80%; - margin: 0 auto; + padding: 50px; + width: 90%; + margin: 20px auto; } .heading { diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css index 88155ca4..72dbc87d 100644 --- a/src/components/run-anywhere/run-anywhere.module.css +++ b/src/components/run-anywhere/run-anywhere.module.css @@ -1,10 +1,13 @@ .container { - background-color: var(--color-gray); + border-left: 2px solid var(--color-gray); + border-right: 2px solid var(--color-gray); + width: 80%; + margin: 0 auto; text-align: center; } .iconContainer { - width: 50%; + width: 60%; margin: 0 auto; } From 0c10170d6233f166d371d6f539605c8d210efb57 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 1 Jul 2024 13:21:38 -0400 Subject: [PATCH 22/68] getting started CTA content --- src/components/get-started/get-started.js | 28 ++++++++++ .../get-started/get-started.module.css | 52 +++++++++++++++++++ .../get-started/get-started.stories.js | 9 ++++ src/pages/index.md | 3 ++ src/styles/home.css | 5 ++ 5 files changed, 97 insertions(+) create mode 100644 src/components/get-started/get-started.js create mode 100644 src/components/get-started/get-started.module.css create mode 100644 src/components/get-started/get-started.stories.js diff --git a/src/components/get-started/get-started.js b/src/components/get-started/get-started.js new file mode 100644 index 00000000..c3ccbc7c --- /dev/null +++ b/src/components/get-started/get-started.js @@ -0,0 +1,28 @@ +import styles from "./get-started.module.css"; + +export default class GetStarted extends HTMLElement { + connectedCallback() { + this.innerHTML = ` +
+

Get Started in seconds

+ +
+ 
$ npx @greenwood/init@latest
+
+ + + +
+ `; + } +} + +customElements.define("app-get-started", GetStarted); diff --git a/src/components/get-started/get-started.module.css b/src/components/get-started/get-started.module.css new file mode 100644 index 00000000..beee5b9c --- /dev/null +++ b/src/components/get-started/get-started.module.css @@ -0,0 +1,52 @@ +.container { + padding: 160px 0; + border-radius: var(--radius-5); + color: var(--color-white); + background-color: var(--color-tertiary); + text-align: center; +} + +.heading { + font-size: var(--font-size-5); + font-weight: var(--font-weight-9); +} + +.snippet { + display: inline-block; + border-radius: var(--radius-4); + padding: 0 var(--size-4); + box-shadow: var(--shadow-4); + text-align: left; + letter-spacing: var(--font-letterspacing-3); + background-color: var(--color-white); + color: var(--color-black); +} + +.buttonBlitz { + display: inline-block; + cursor: pointer; + border-radius: var(--radius-3); + border: var(--border-size-1) solid var(--color-white); + background-color: transparent; + padding: var(--size-fluid-1) var(--size-fluid-2); + min-width: var(--size-px-13); + color: var(--color-black); + box-shadow: var(--shadow-2); +} + +.buttonStarted { + display: inline-block; + cursor: pointer; + border-radius: var(--radius-3); + padding: var(--size-fluid-1) var(--size-fluid-2); + background-color: var(--color-primary); + min-width: var(--size-px-13); + color: var(--color-white); + box-shadow: var(--shadow-4); + margin-top: var(--size-fluid-1); +} + +.linkStarted { + color: var(--color-white); + text-decoration: none; +} diff --git a/src/components/get-started/get-started.stories.js b/src/components/get-started/get-started.stories.js new file mode 100644 index 00000000..76d2a82c --- /dev/null +++ b/src/components/get-started/get-started.stories.js @@ -0,0 +1,9 @@ +import "./get-started.js"; + +export default { + title: "Components/Get Started", +}; + +const Template = () => ""; + +export const Primary = Template.bind({}); diff --git a/src/pages/index.md b/src/pages/index.md index 6f49906f..6bb6a4a4 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -6,6 +6,7 @@ imports: - ../components/why-greenwood/why-greenwood.js data-gwd-opt="static" - ../components/run-anywhere/run-anywhere.js data-gwd-opt="static" - ../components/build-with-friends/build-with-friends.js data-gwd-opt="static" + - ../components/get-started/get-started.js data-gwd-opt="static" - ../styles/home.css --- @@ -165,3 +166,5 @@ export async function handler(request) { + + diff --git a/src/styles/home.css b/src/styles/home.css index f99ba9ec..54b0efba 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -8,3 +8,8 @@ app-hero-banner { .walkthrough-card { display: none; } + +app-footer { + display: block; + margin-top: -150px; +} From 055153f38506c74fcc470cda4d48054b9ea49715 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 1 Jul 2024 18:31:25 -0400 Subject: [PATCH 23/68] breakpoint responsiveness --- .../build-with-friends/build-with-friends.js | 46 ++++++++++--------- .../build-with-friends.module.css | 21 ++++++--- .../get-started/get-started.module.css | 20 +++++++- src/components/hero-banner/hero-banner.js | 4 +- .../hero-banner/hero-banner.module.css | 18 ++++++-- src/components/latest-post/latest-post.js | 2 +- .../latest-post/latest-post.module.css | 4 ++ src/components/run-anywhere/run-anywhere.js | 2 +- .../run-anywhere/run-anywhere.module.css | 39 ++++++++++------ .../why-greenwood/why-greenwood.module.css | 16 ++++--- src/styles/home.css | 23 ++++++++-- 11 files changed, 131 insertions(+), 64 deletions(-) diff --git a/src/components/build-with-friends/build-with-friends.js b/src/components/build-with-friends/build-with-friends.js index b6bdbfee..dd21aaf0 100644 --- a/src/components/build-with-friends/build-with-friends.js +++ b/src/components/build-with-friends/build-with-friends.js @@ -15,28 +15,30 @@ export default class BuildWithFriends extends HTMLElement {

Greenwood and Web Components work great with all of your favorite tools in the web ecosystem.

- - ${litIcon} - - - ${storybookIcon} - - - ${tailwindIcon} - - - ${typescriptIcon} - - - ${htmxIcon} - - - ${wtrIcon} - Web Test Runner - - - ${wccIcon} - + + + ${litIcon} + + + ${storybookIcon} + + + ${tailwindIcon} + + + ${typescriptIcon} + + + ${htmxIcon} + + + ${wtrIcon} + Web Test Runner + + + ${wccIcon} + +
`; } diff --git a/src/components/build-with-friends/build-with-friends.module.css b/src/components/build-with-friends/build-with-friends.module.css index 97fb0491..64466e00 100644 --- a/src/components/build-with-friends/build-with-friends.module.css +++ b/src/components/build-with-friends/build-with-friends.module.css @@ -2,8 +2,7 @@ background-color: var(--color-gray); border: var(--border-size-1) solid var(--color-black); border-radius: var(--radius-5); - text-align: left; - padding: 50px; + padding: 10px 20px; width: 90%; margin: 20px auto; } @@ -13,15 +12,18 @@ font-weight: var(--font-weight-9); } +.icons { + text-align: center; + width: 80%; +} + .icon { - display: inline-block; + display: block; text-align: center; background-color: var(--color-white); border-radius: var(--radius-5); - padding: var(--size-fluid-1) var(--size-fluid-2); + padding: var(--size-fluid-1) var(--size-fluid-1); margin: var(--size-fluid-1); - height: 100px; - vertical-align: middle; } .icon svg { @@ -32,3 +34,10 @@ vertical-align: middle; font-weight: var(--font-weight-9); } + +@media (min-width: 600px) { + .icon { + display: inline-block; + vertical-align: middle; + } +} diff --git a/src/components/get-started/get-started.module.css b/src/components/get-started/get-started.module.css index beee5b9c..3970dc32 100644 --- a/src/components/get-started/get-started.module.css +++ b/src/components/get-started/get-started.module.css @@ -1,5 +1,5 @@ .container { - padding: 160px 0; + padding: 20px 0 160px; border-radius: var(--radius-5); color: var(--color-white); background-color: var(--color-tertiary); @@ -16,10 +16,16 @@ border-radius: var(--radius-4); padding: 0 var(--size-4); box-shadow: var(--shadow-4); - text-align: left; letter-spacing: var(--font-letterspacing-3); background-color: var(--color-white); color: var(--color-black); + margin: 10px 0; +} + +.snippet pre { + font-size: 16px; + text-align: center; + display: inline-block; } .buttonBlitz { @@ -50,3 +56,13 @@ color: var(--color-white); text-decoration: none; } + +@media (min-width: 821px) { + .container { + padding: 160px 0; + } + + .snippet { + max-width: 50%; + } +} diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js index 763b4fb4..307148cf 100644 --- a/src/components/hero-banner/hero-banner.js +++ b/src/components/hero-banner/hero-banner.js @@ -4,7 +4,7 @@ export default class HeroBanner extends HTMLElement { connectedCallback() { this.innerHTML = `
-

The Fullstack web is here

+

The Fullstack web is here

Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.

@@ -19,7 +19,7 @@ export default class HeroBanner extends HTMLElement { 
$ npx @greenwood/init@latest
-
+
`; } } diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css index c3e8d3bd..d2fa1b23 100644 --- a/src/components/hero-banner/hero-banner.module.css +++ b/src/components/hero-banner/hero-banner.module.css @@ -49,12 +49,20 @@ } .snippet { - margin: var(--size-4) 0; - display: inline-block; + display: block; + width: fit-content; border-radius: var(--radius-4); - padding: 0 var(--size-4); + padding: 0 2px; border: var(--radius-1) solid var(--color-primary); box-shadow: var(--shadow-4); - text-align: left; - letter-spacing: var(--font-letterspacing-4); + margin: 5px 0; +} + +@media (min-width: 768px) { + .snippet { + display: block; + letter-spacing: var(--font-letterspacing-3); + padding: 0 var(--size-4); + margin: 10px 0; + } } diff --git a/src/components/latest-post/latest-post.js b/src/components/latest-post/latest-post.js index f8243496..d0c50102 100644 --- a/src/components/latest-post/latest-post.js +++ b/src/components/latest-post/latest-post.js @@ -8,7 +8,7 @@ export default class LatestPost extends HTMLElement { this.innerHTML = `
🎉 New - ${title} → + ${title} →
`; } diff --git a/src/components/latest-post/latest-post.module.css b/src/components/latest-post/latest-post.module.css index de353042..17df04e3 100644 --- a/src/components/latest-post/latest-post.module.css +++ b/src/components/latest-post/latest-post.module.css @@ -13,3 +13,7 @@ padding: var(--size-2); margin-right: var(--size-fluid-1); } + +.link { + line-height: 50px; +} diff --git a/src/components/run-anywhere/run-anywhere.js b/src/components/run-anywhere/run-anywhere.js index bf4420d0..0c38bc9c 100644 --- a/src/components/run-anywhere/run-anywhere.js +++ b/src/components/run-anywhere/run-anywhere.js @@ -7,7 +7,7 @@ export default class RunAnywhere extends HTMLElement {

Run anywhere the web can run

-

Greenwood helps you take your application further by embracing platforms that embrace web standards for both static and dynamic needs.

+

Greenwood helps you take your application further by embracing platforms that embrace web standards.

diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css index 72dbc87d..c6bd7bed 100644 --- a/src/components/run-anywhere/run-anywhere.module.css +++ b/src/components/run-anywhere/run-anywhere.module.css @@ -1,13 +1,12 @@ .container { border-left: 2px solid var(--color-gray); border-right: 2px solid var(--color-gray); - width: 80%; margin: 0 auto; text-align: center; } .iconContainer { - width: 60%; + max-width: 80%; margin: 0 auto; } @@ -17,9 +16,9 @@ } .subHeading { - width: 50%; text-align: center; margin: 0px auto 30px; + padding: 20px; } .platformColumn { @@ -29,18 +28,6 @@ flex-wrap: wrap; } -@media (max-width: 767px) { - .platformColumn { - flex-basis: calc(50% - 12px); - } -} - -@media (max-width: 460px) { - .platformColumn { - flex-basis: 100%; - } -} - .platformBox { display: flex; justify-content: center; @@ -74,3 +61,25 @@ padding: 10px 20px; text-decoration: none; } + +@media (max-width: 767px) { + .platformColumn { + flex-basis: calc(50% - 12px); + } +} + +@media (max-width: 460px) { + .platformColumn { + flex-basis: 100%; + } +} + +@media (min-width: 767px) { + .iconContainer { + max-width: 60%; + } + + .subHeading { + max-width: 50%; + } +} diff --git a/src/components/why-greenwood/why-greenwood.module.css b/src/components/why-greenwood/why-greenwood.module.css index 4fac939c..446fd8c9 100644 --- a/src/components/why-greenwood/why-greenwood.module.css +++ b/src/components/why-greenwood/why-greenwood.module.css @@ -3,9 +3,8 @@ border: var(--border-size-1) solid var(--color-black); border-radius: var(--radius-5); text-align: center; - width: 90%; margin: 0 auto; - padding: 100px 50px 20px; + padding: 20px 20px; } .heading { @@ -14,15 +13,10 @@ } .subHeading { - width: 60%; margin: 10px auto 30px; } .cardContainer { - display: grid; - grid-auto-flow: row; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(1, 1fr); background-color: var(--color-white); border-radius: var(--radius-5); } @@ -56,3 +50,11 @@ border-radius: var(--radius-5); border: var(--border-size-1) solid var(--color-black); } + +@media (min-width: 1024px) { + .card { + display: inline-block; + margin: 20px 10px 20px 20px; + width: 29%; + } +} diff --git a/src/styles/home.css b/src/styles/home.css index 54b0efba..8b169a40 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -2,14 +2,31 @@ app-latest-post, app-hero-banner { display: block; margin: var(--size-fluid-1) auto; - width: 70%; } .walkthrough-card { display: none; } -app-footer { +app-get-started { display: block; - margin-top: -150px; + padding-bottom: 160px; +} + +app-get-started { + display: block; + margin-bottom: -300px; +} + +@media (min-width: 768px) { + app-hero-banner, + app-latest-post { + width: 70%; + } + + app-run-anywhere { + display: block; + width: 70%; + margin: 0 auto; + } } From 56c4e417a97c830dedcd449e8aaface134e9f32d Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Tue, 2 Jul 2024 20:36:49 -0400 Subject: [PATCH 24/68] adjust text --- src/pages/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.md b/src/pages/index.md index 6bb6a4a4..03d14c2f 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -10,7 +10,7 @@ imports: - ../styles/home.css --- - + From a6eddff55ab6f7f574c6d09d0851680278140a96 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Tue, 2 Jul 2024 21:57:04 -0400 Subject: [PATCH 25/68] walkthrough code box nav styling --- src/components/walkthrough/walkthrough.css | 84 ++++++++++++++-------- src/components/walkthrough/walkthrough.js | 53 +++++++++++--- src/styles/home.css | 3 +- 3 files changed, 103 insertions(+), 37 deletions(-) diff --git a/src/components/walkthrough/walkthrough.css b/src/components/walkthrough/walkthrough.css index e9345236..4dcb5b86 100644 --- a/src/components/walkthrough/walkthrough.css +++ b/src/components/walkthrough/walkthrough.css @@ -1,47 +1,29 @@ :host .walkthrough { padding: 30px; - margin: 30px auto; border-radius: var(--radius-5); - width: 98%; - min-height: 1000px; color: var(--color-white); background-color: var(--color-secondary); } -.row { - display: flex; -} - -.column-left { - flex: 40%; +.walkthrough em, +.walkthrough strong { + font-size: var(--font-size-1); } -.column-right { - flex: 60%; - width: 60%; +.cards { + overflow-x: auto; } .card { + display: inline-block; border-radius: var(--radius-4); - padding: var(--font-size-fluid-1); cursor: pointer; - width: 94%; margin: var(--font-size-1) 0; -} - -.card strong { - color: var(--color-accent); - font-weight: bold; -} - -.card em, -.card strong { - font-size: var(--font-size-1); + padding: 10px 20px; } .card:hover { - background-color: var(--color-accent); - color: var(--color-black); + border: 2px dotted var(--color-accent); } .card:hover strong, @@ -68,12 +50,28 @@ h4 { font-size: var(--font-size-fluid-1); font-weight: bold; margin: 5px 0; + display: inline-block; +} + +nav { + overflow: auto; + white-space: nowrap; + border-bottom: 1px solid var(--color-accent); + padding: 0px; + margin-bottom: 5px; +} + +ul { + list-style-type: none; + display: inline-block; + width: fit-content; + padding: 0; + margin: 0; } p { margin: 0; - padding: 15px; - width: 90%; + padding: 10px; text-align: left; font-size: var(--font-size-1); min-height: 100px; @@ -84,3 +82,33 @@ img { display: inline-block; vertical-align: middle; } + +@media (max-width: 760px) { + code[class*="language-"], + pre[class*="language-"], + .token { + font-size: 12px; + } +} + +@media (min-width: 760px) { + .card { + padding: 20px; + margin-right: 20px; + } + + .card:hover { + padding: 18px; + } + + nav { + padding-bottom: 10px; + margin-bottom: 10px; + } +} + +@media (min-width: 1400px) { + p { + width: 60%; + } +} diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index 68d6c967..0fd7c4c7 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -19,8 +19,8 @@ export default class Walkthrough extends HTMLElement {

Go from Zero to Fullstack with web standards

Lorum Ipsum...

-
-
+
+ + -
${this.cards[this.index].querySelector("pre").outerHTML}
-
+

${this.cards[this.index].querySelector("p").innerHTML}

+
${this.cards[this.index].querySelector("pre").outerHTML}
`; + // TODO if going with the above option, rename cards related classes + // if (this.cards.length > 0) { + // template.innerHTML = ` + //
+ //

Go from Zero to Fullstack with web standards

+ //

Lorum Ipsum...

+ + //
+ //
+ // ${Array.from(this.cards) + // .map((card, idx) => { + // const title = card.querySelector("span").innerHTML; + // const text = card.querySelector("p").innerHTML; + // const icon = card.querySelector("i").textContent; + // const isActiveClass = idx === this.index ? " active" : ""; + + // return ` + //
+ //

+ // ${text} icon + // ${title} + //

+ //

${text}

+ //
+ // `; + // }) + // .join("")} + //
+ + //
${this.cards[this.index].querySelector("pre").outerHTML}
+ //
+ //
+ // `; + this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.adoptedStyleSheets = [theme, sheet]; @@ -64,6 +98,9 @@ export default class Walkthrough extends HTMLElement { this.shadowRoot.querySelector(".snippet").innerHTML = this.cards[this.index].querySelector("pre").outerHTML; + this.shadowRoot.querySelector("p").innerHTML = + this.cards[this.index].querySelector("p").innerHTML; + cards.forEach((card) => { card.dataset.idx === index ? card.classList.add("active") : card.classList.remove("active"); }); diff --git a/src/styles/home.css b/src/styles/home.css index 8b169a40..3bb86e4e 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -1,5 +1,6 @@ app-latest-post, -app-hero-banner { +app-hero-banner, +app-walkthrough { display: block; margin: var(--size-fluid-1) auto; } From 84a0bb39dce82f33ec831922190cab13a8b94ecf Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 6 Jul 2024 13:30:04 -0400 Subject: [PATCH 26/68] misc responsiveness --- src/components/hero-banner/hero-banner.js | 2 +- .../hero-banner/hero-banner.module.css | 19 +++++++++++++------ .../run-anywhere/run-anywhere.module.css | 8 ++++---- .../why-greenwood/why-greenwood.module.css | 4 ++++ 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js index 307148cf..e025b041 100644 --- a/src/components/hero-banner/hero-banner.js +++ b/src/components/hero-banner/hero-banner.js @@ -4,7 +4,7 @@ export default class HeroBanner extends HTMLElement { connectedCallback() { this.innerHTML = `
-

The Fullstack web is here

+

The Fullstack web is here

Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.

diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css index d2fa1b23..f377172f 100644 --- a/src/components/hero-banner/hero-banner.module.css +++ b/src/components/hero-banner/hero-banner.module.css @@ -2,19 +2,20 @@ text-align: left; margin: 0; padding: 0; - - @media (width >= 1080px) { - max-width: 60%; - } } -.heading { +.heading, +.headingEmphasis { font-size: var(--font-size-8); font-weight: var(--font-weight-9); margin-block-start: 0; margin-block-end: 0; } +.headingEmphasis { + text-decoration: underline; +} + .headingSub { font-size: var(--font-size-3); letter-spacing: var(--font-letterspacing-2); @@ -60,9 +61,15 @@ @media (min-width: 768px) { .snippet { - display: block; + display: inline-block; letter-spacing: var(--font-letterspacing-3); padding: 0 var(--size-4); margin: 10px 0; } } + +@media (min-width: 1440px) { + .container { + max-width: 80%; + } +} diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css index c6bd7bed..14c54ad1 100644 --- a/src/components/run-anywhere/run-anywhere.module.css +++ b/src/components/run-anywhere/run-anywhere.module.css @@ -6,8 +6,8 @@ } .iconContainer { - max-width: 80%; margin: 0 auto; + width: 60%; } .heading { @@ -74,12 +74,12 @@ } } -@media (min-width: 767px) { +@media (min-width: 1024px) { .iconContainer { - max-width: 60%; + max-width: 80%; } .subHeading { - max-width: 50%; + max-width: 70%; } } diff --git a/src/components/why-greenwood/why-greenwood.module.css b/src/components/why-greenwood/why-greenwood.module.css index 446fd8c9..b795fe54 100644 --- a/src/components/why-greenwood/why-greenwood.module.css +++ b/src/components/why-greenwood/why-greenwood.module.css @@ -57,4 +57,8 @@ margin: 20px 10px 20px 20px; width: 29%; } + + .subHeading { + width: 60%; + } } From 4da45b828676868f38d2b63bd80028970911d28b Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 8 Jul 2024 17:14:56 -0400 Subject: [PATCH 27/68] general mobile and responsivess styling refinements --- .../build-with-friends.module.css | 21 +++++++---- src/components/get-started/get-started.js | 2 +- .../get-started/get-started.module.css | 4 +-- src/components/hero-banner/hero-banner.js | 2 +- .../hero-banner/hero-banner.module.css | 2 +- .../run-anywhere/run-anywhere.module.css | 36 +++++-------------- src/components/walkthrough/walkthrough.css | 17 +++++++-- src/components/walkthrough/walkthrough.js | 2 +- src/styles/home.css | 1 - 9 files changed, 45 insertions(+), 42 deletions(-) diff --git a/src/components/build-with-friends/build-with-friends.module.css b/src/components/build-with-friends/build-with-friends.module.css index 64466e00..9e2bac57 100644 --- a/src/components/build-with-friends/build-with-friends.module.css +++ b/src/components/build-with-friends/build-with-friends.module.css @@ -2,8 +2,7 @@ background-color: var(--color-gray); border: var(--border-size-1) solid var(--color-black); border-radius: var(--radius-5); - padding: 10px 20px; - width: 90%; + padding: var(--size-px-5) var(--size-px-5); margin: 20px auto; } @@ -13,8 +12,7 @@ } .icons { - text-align: center; - width: 80%; + display: block; } .icon { @@ -22,8 +20,9 @@ text-align: center; background-color: var(--color-white); border-radius: var(--radius-5); - padding: var(--size-fluid-1) var(--size-fluid-1); - margin: var(--size-fluid-1); + padding: var(--size-fluid-1) var(--size-fluid-2); + margin: var(--size-fluid-1) var(--size-fluid-1) var(--size-fluid-1) 0; + line-height: 100%; } .icon svg { @@ -41,3 +40,13 @@ vertical-align: middle; } } + +@media (min-width: 1440px) { + .icons { + max-width: 80%; + } + + .container { + padding: var(--size-px-10) var(--size-px-11); + } +} diff --git a/src/components/get-started/get-started.js b/src/components/get-started/get-started.js index c3ccbc7c..e6a19ac9 100644 --- a/src/components/get-started/get-started.js +++ b/src/components/get-started/get-started.js @@ -4,7 +4,7 @@ export default class GetStarted extends HTMLElement { connectedCallback() { this.innerHTML = `
-

Get Started in seconds

+

Get started in seconds 🚀

$ npx @greenwood/init@latest
diff --git a/src/components/get-started/get-started.module.css b/src/components/get-started/get-started.module.css index 3970dc32..74d72bb5 100644 --- a/src/components/get-started/get-started.module.css +++ b/src/components/get-started/get-started.module.css @@ -57,9 +57,9 @@ text-decoration: none; } -@media (min-width: 821px) { +@media (min-width: 1024px) { .container { - padding: 160px 0; + padding: var(--size-px-10) 0 var(--size-px-13) 0; } .snippet { diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js index e025b041..2192650d 100644 --- a/src/components/hero-banner/hero-banner.js +++ b/src/components/hero-banner/hero-banner.js @@ -4,7 +4,7 @@ export default class HeroBanner extends HTMLElement { connectedCallback() { this.innerHTML = `
-

The Fullstack web is here

+

The fullstack web is here

Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.

diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css index f377172f..f3abf1ab 100644 --- a/src/components/hero-banner/hero-banner.module.css +++ b/src/components/hero-banner/hero-banner.module.css @@ -1,7 +1,7 @@ .container { text-align: left; margin: 0; - padding: 0; + padding: var(--size-px-2); } .heading, diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css index 14c54ad1..6173254f 100644 --- a/src/components/run-anywhere/run-anywhere.module.css +++ b/src/components/run-anywhere/run-anywhere.module.css @@ -7,7 +7,6 @@ .iconContainer { margin: 0 auto; - width: 60%; } .heading { @@ -21,27 +20,14 @@ padding: 20px; } -.platformColumn { - display: flex; - flex: 1; - flex-direction: row; - flex-wrap: wrap; -} - -.platformBox { - display: flex; - justify-content: center; - align-items: center; - flex: 1; - flex-direction: column; -} - .iconBox { border-radius: var(--radius-3); box-shadow: var(--shadow-2); background-color: var(--color-white); width: 150px; line-height: 150px; + margin: 0 auto; + display: inline-block; } .icon { @@ -60,25 +46,21 @@ color: var(--color-black); padding: 10px 20px; text-decoration: none; + line-height: 100%; } -@media (max-width: 767px) { - .platformColumn { - flex-basis: calc(50% - 12px); +@media (min-width: 768px) { + .platformBox { + display: inline-block; } -} -@media (max-width: 460px) { - .platformColumn { - flex-basis: 100%; + .iconLink { + display: block; + margin: 0 var(--size-px-6); } } @media (min-width: 1024px) { - .iconContainer { - max-width: 80%; - } - .subHeading { max-width: 70%; } diff --git a/src/components/walkthrough/walkthrough.css b/src/components/walkthrough/walkthrough.css index 4dcb5b86..2f56290e 100644 --- a/src/components/walkthrough/walkthrough.css +++ b/src/components/walkthrough/walkthrough.css @@ -1,5 +1,5 @@ :host .walkthrough { - padding: 30px; + padding: 50px; border-radius: var(--radius-5); color: var(--color-white); background-color: var(--color-secondary); @@ -16,7 +16,7 @@ .card { display: inline-block; - border-radius: var(--radius-4); + border-radius: var(--radius-5); cursor: pointer; margin: var(--font-size-1) 0; padding: 10px 20px; @@ -37,9 +37,14 @@ color: var(--color-black); } +.snippet pre { + border-radius: var(--radius-3); +} + h2 { font-size: var(--font-size-fluid-3); font-weight: bold; + margin: 0; } h3 { @@ -92,6 +97,14 @@ img { } @media (min-width: 760px) { + :host .walkthrough { + padding: 50px 100px; + } + + .snippet pre { + border-radius: var(--radius-1); + } + .card { padding: 20px; margin-right: 20px; diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js index 0fd7c4c7..6aeb4026 100644 --- a/src/components/walkthrough/walkthrough.js +++ b/src/components/walkthrough/walkthrough.js @@ -16,7 +16,7 @@ export default class Walkthrough extends HTMLElement { if (this.cards.length > 0) { template.innerHTML = `
-

Go from Zero to Fullstack with web standards

+

Go from zero to fullstack with web standards

Lorum Ipsum...