diff --git a/www/components/card/card.css b/www/components/card/card.css index a0fe490a3..045187144 100644 --- a/www/components/card/card.css +++ b/www/components/card/card.css @@ -1,54 +1,15 @@ :host { - - & .card { - padding: 2.5rem; - position: relative; - display: flex; - flex-direction: column; - min-width: 0; - word-wrap: break-word; - background-color: #fff; - background-clip: initial; - text-align: center; - - @media(max-width:768px) { - padding:0; - } - - & .body { - padding:10px; - } - } - - - & .card-xs { - margin: 0.25rem; - flex: 1 1 16.666%; - max-width: 250px; - - @media (max-width: 1024px) { - max-width: 100%; - } - } - & .card-sm { - margin: 0.25rem; - flex: 1 1 25%; - max-width: 380px; - - @media (max-width: 1024px) { - max-width: 100%; - } - } - & .card-md { - margin: 0.25rem; - flex: 1 1 33.333%; - max-width: 450px; - - @media (max-width: 1024px) { - max-width: 100%; - } - } - & .card-full { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #fff; + background-clip: initial; + text-align: center; + + & slot { + padding: 10px; margin: 0.25rem; flex: 1 1 33.333%; } @@ -57,9 +18,10 @@ background-size: cover; background-position-x: center; background-position-y: center; + & img { width: 100%; max-width: 200px; } } -} \ No newline at end of file +} diff --git a/www/components/card/card.js b/www/components/card/card.js index 3eb77bdce..34921d230 100644 --- a/www/components/card/card.js +++ b/www/components/card/card.js @@ -43,18 +43,11 @@ class Card extends LitElement { render() { return html` - -
- ${this.renderImage()} - ${this.renderTitle()} -
- -
-
+ ${this.renderImage()} + ${this.renderTitle()} + `; } } -customElements.define('app-card', Card); \ No newline at end of file +customElements.define('app-card', Card); diff --git a/www/components/row/row.js b/www/components/row/row.js deleted file mode 100644 index 3e3766257..000000000 --- a/www/components/row/row.js +++ /dev/null @@ -1,19 +0,0 @@ -import { css, html, LitElement, unsafeCSS } from 'lit-element'; -import rowCss from './row.css'; - -class Row extends LitElement { - - static get styles() { - return css` - ${unsafeCSS(rowCss)} - `; - } - - render() { - return html` - - `; - } -} - -customElements.define('app-row', Row); diff --git a/www/package.json b/www/package.json index ff680936f..d5ce5751b 100644 --- a/www/package.json +++ b/www/package.json @@ -10,7 +10,6 @@ "@evergreen-wc/eve-button": "^0.0.9", "@evergreen-wc/eve-container": "^0.0.10", "lit-element": "^2.4.0", - "lit-html": "^1.3.0", "prismjs": "^1.21.0" }, "devDependencies": { diff --git a/www/pages/docs/component-model.md b/www/pages/docs/component-model.md index c4215fa23..f1551e6ba 100644 --- a/www/pages/docs/component-model.md +++ b/www/pages/docs/component-model.md @@ -114,4 +114,19 @@ customElements.define('x-greeting', GreetingComponent); ## References - [MDN Developer Docs: Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) -- [Google Developer Docs: Web Components](https://developers.google.com/web/fundamentals/web-components/) \ No newline at end of file +- [Google Developer Docs: Web Components](https://developers.google.com/web/fundamentals/web-components/) + + +> Some notes / recommendations about ShadowDOM from [our research](https://github.com/ProjectEvergreen/greenwood/pull/454) +> - [`` should be named](https://github.com/Polymer/lit-element/issues/824#issuecomment-535574662) +> - `` only supports a [shallow (one) level of nesting](https://javascript.info/slots-composition). A `` tag must be within a direct descendant of its `:host`. +> ```html +>

Content from inside the custom element. (inside HTMLElement)

+>

+> +>

+>
+>

+> +>

+>

\ No newline at end of file diff --git a/www/pages/index.html b/www/pages/index.html index 15303d32d..7a1215c92 100644 --- a/www/pages/index.html +++ b/www/pages/index.html @@ -4,10 +4,9 @@ - + - @@ -16,33 +15,33 @@
+ - +
- +

Greenwood is a modern and performant static site generator for Web Component based development.

- +

Greenwood is focused on providing an intuitive and accessible development workflow supporting modern JavaScript and CSS features like Web Components, FlexBox, CSS Grid, and Modules. Greenwood strives to deliver not only great user experiences, but also great developer experiences. To learn more about the project we encourage everyone to first go through our Getting Started guide. You can learn more about the project itself at our about page or see our documentation to learn more about how to use Greenwood.

- +
- - - To us, webpack is more than a module bundler, it's an entire development ecosystem! We use webpack - under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS. The best part? You don't have to know anything about that! Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you. - - - Do we love Web Components? You bet we do! In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more! It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users. Sit back and write the modern code you want and Greenwood will take care of the rest. - - - Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line. This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site! Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with. - - -
+ +

To us, webpack is more than a module bundler, it's an entire development ecosystem! We use webpack under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS. The best part? You don't have to know anything about that! Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.

+ + + +

Do we love Web Components? You bet we do! In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more! It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users. Sit back and write the modern code you want and Greenwood will take care of the rest.

+ + + +

Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line. This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site! Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.

+ +
@@ -53,4 +52,4 @@

Greenwood is a modern and performant static site generator for Web Component - \ No newline at end of file + diff --git a/www/styles/home.css b/www/styles/home.css index c872086b7..d694672df 100644 --- a/www/styles/home.css +++ b/www/styles/home.css @@ -8,8 +8,8 @@ h3 { margin-top: 20px; min-height: 300px; background-color: #efefef; - padding: 0 15%; font-size:1.2rem; + width: 85%; & h3 { font-size:2rem; @@ -22,12 +22,14 @@ h3 { } .cards { - margin: 0 -15% + margin: 0 -15%; } .message { padding: 4rem; text-align:center; + margin: 0 auto; + width: 80%; & hr { margin-top: 4rem; @@ -36,4 +38,16 @@ h3 { @media(max-width:768px) { padding:0; } +} + +.cards { + margin-left: -0.25rem; + margin-right: -0.25rem; + display: flex; + justify-content: space-around; + flex-direction: row; + + @media (max-width: 1024px) { + flex-direction: column; + } } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 489488ebb..b94a8f2c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4994,7 +4994,7 @@ lit-element@^2.0.1, lit-element@^2.4.0: dependencies: lit-html "^1.1.1" -lit-html@^1.1.1, lit-html@^1.3.0: +lit-html@^1.1.1: version "1.3.0" resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.3.0.tgz#c80f3cc5793a6dea6c07172be90a70ab20e56034" integrity sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q==