From 4e00e9fd1d0b9a8ee92e81d517a210abcc436fc2 Mon Sep 17 00:00:00 2001 From: Adam Holtzman Date: Sat, 10 Aug 2019 09:56:04 -0400 Subject: [PATCH 1/3] fisrt draft of style tweaks, changes to colors, & spacing primarily --- packages/cli/templates/theme.css | 4 ++-- www/components/banner/banner.css | 6 +++--- www/components/banner/banner.js | 10 +++++----- www/components/banner/button.css | 14 ++++++++------ www/components/card/card.css | 8 ++++++-- www/components/footer/footer.css | 4 ++-- www/components/header/header.css | 10 ++++++---- www/components/header/header.js | 10 +++++----- www/components/shelf/shelf.css | 4 ++-- www/pages/index.md | 22 +++++++++++----------- www/styles/home.css | 15 ++++++++++++--- www/styles/page.css | 12 +++++++++--- www/styles/theme.css | 5 +++-- 13 files changed, 74 insertions(+), 50 deletions(-) diff --git a/packages/cli/templates/theme.css b/packages/cli/templates/theme.css index d6fa769e8..bba6a237d 100644 --- a/packages/cli/templates/theme.css +++ b/packages/cli/templates/theme.css @@ -53,7 +53,7 @@ img { } & a { - color: #006400; + color: #1d337a; } } @@ -77,4 +77,4 @@ img { "footer footer"; } } -} \ No newline at end of file +} diff --git a/www/components/banner/banner.css b/www/components/banner/banner.css index cec1c8890..503a1f28b 100644 --- a/www/components/banner/banner.css +++ b/www/components/banner/banner.css @@ -22,8 +22,8 @@ grid-area: banner; & .banner { - background-color: rgba(238, 231, 235); - min-height: 50vh; + background-color: #F6F2F4; + min-height: 60vh; & .content { padding: 5vh 10px; @@ -81,4 +81,4 @@ } } } -} \ No newline at end of file +} diff --git a/www/components/banner/banner.js b/www/components/banner/banner.js index 1900ee57f..ac53606c1 100644 --- a/www/components/banner/banner.js +++ b/www/components/banner/banner.js @@ -49,14 +49,14 @@ class Banner extends LitElement { - +
@@ -42,4 +42,4 @@ class HeaderComponent extends LitElement { } } -customElements.define('eve-header', HeaderComponent); \ No newline at end of file +customElements.define('eve-header', HeaderComponent); diff --git a/www/components/shelf/shelf.css b/www/components/shelf/shelf.css index 39238ef29..57abd853c 100644 --- a/www/components/shelf/shelf.css +++ b/www/components/shelf/shelf.css @@ -8,7 +8,7 @@ & a { text-decoration: none; - color: green; + color: #2D3D3A; &:hover { color:black; @@ -76,4 +76,4 @@ & .active { color:red; } -} \ No newline at end of file +} diff --git a/www/pages/index.md b/www/pages/index.md index 4262fbfbf..a90952030 100644 --- a/www/pages/index.md +++ b/www/pages/index.md @@ -2,17 +2,17 @@ template: 'home' --- -## Greenwood is a modern and performant static site generator. - +```render +
+

Greenwood is a modern and performant static site generator.

This is the Greenwood website's home page! 🌱 -Visit our [about page](/about) to learn more! +Visit our about page to learn more! 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. We hope that the development experience is as pleasant and performant as the resulting user experience and that you'll be just as happy building your own site as we are with building Greenwood. -Click [here](/about) to learn more about the project, or for more advanced topics please head over to our [Documentation page](/docs). - - -```render +Click here to learn more about the project, or for more advanced topics please head over to our Documentation page. +
+
@@ -20,15 +20,15 @@ Click [here](/about) to learn more about the project, or for more advanced topic 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 broweer, 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. + 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.
-``` \ No newline at end of file +``` diff --git a/www/styles/home.css b/www/styles/home.css index d47cf8f86..0762cb423 100644 --- a/www/styles/home.css +++ b/www/styles/home.css @@ -18,10 +18,19 @@ } & a { - color: #006400; + color: #1d337a; } } & .cards { - margin:0 -15% + margin: 4rem -15% } -} \ No newline at end of file + & .message { + padding: 4rem; + text-align:center; + margin-bottom:4rem; + + @media(max-width:768px) { + padding:0; + } + } +} diff --git a/www/styles/page.css b/www/styles/page.css index 5ec1e5508..a6e19fac7 100644 --- a/www/styles/page.css +++ b/www/styles/page.css @@ -3,7 +3,8 @@ :host { & h3 { - color: green; + color: #2D3D3A; + padding-top: 4rem; } & .content-wrapper { @@ -35,6 +36,11 @@ margin: auto; background-color:white; font-size:1.2rem; + padding: 2rem; + + @media(max-width:768px) { + padding:0; + } & h3 { font-size:2rem; @@ -42,7 +48,7 @@ } & a { - color: #006400; + color: #1d337a; } @media (max-width: 768px) { @@ -50,4 +56,4 @@ height: 100%; } } -} \ No newline at end of file +} diff --git a/www/styles/theme.css b/www/styles/theme.css index 55a3a38e1..5ab7a7093 100644 --- a/www/styles/theme.css +++ b/www/styles/theme.css @@ -7,11 +7,12 @@ } html { - background-color: #f0f0f0; + background-color: white; } body { font-family: 'Source Sans Pro', sans-serif; + line-height:1.4; } table { @@ -69,4 +70,4 @@ a { margin: inherit; color: #000; } -} \ No newline at end of file +} From c0c60bc79110ae369d01b338e26af9cee9d1bd94 Mon Sep 17 00:00:00 2001 From: Grant Hutchinson Date: Tue, 13 Aug 2019 18:17:27 -0400 Subject: [PATCH 2/3] Adjusting BlockQuote and Shelf Styles (#155) * feat: adding block quote styling * fix: spelling mistakes/typos * fix: readme typo --- README.md | 2 +- www/components/shelf/shelf.css | 3 +++ www/pages/docs/configuration.md | 4 ++-- www/pages/docs/css-and-images.md | 6 +++--- www/pages/docs/front-matter.md | 6 +++--- www/styles/page.css | 6 ++++++ 6 files changed, 18 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 0a79299d4..8e5017ef3 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ All of our documentation is on our [website](https://www.greenwoodjs.io/) (which - Component Model - Styes and Assets -## Contritbuting +## Contributing We would love your contribution to Greenwood! Please check out our issue tracker for "good first issue" label or feel to reach out to us on Gitter in the room "Greenwood" or on [Twitter](https://twitter.com/PrjEvergreen). ## License diff --git a/www/components/shelf/shelf.css b/www/components/shelf/shelf.css index 57abd853c..efc9a07e8 100644 --- a/www/components/shelf/shelf.css +++ b/www/components/shelf/shelf.css @@ -56,6 +56,9 @@ margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; + & a { + cursor: pointer; + } } @media (max-width: 768px) { padding-left:10px; diff --git a/www/pages/docs/configuration.md b/www/pages/docs/configuration.md index f30bc81a7..9c7821914 100644 --- a/www/pages/docs/configuration.md +++ b/www/pages/docs/configuration.md @@ -32,7 +32,7 @@ module.exports = { ### Meta -You can use the `meta` option for the configuration of [`` tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) within the `` tag of the generated _index.html_ file. This is epecially useful for providing text and images for social sharing and link previews like for Slack, text messages, and social media shares, in particular when using the [Open Graph](https://ogp.me/) set of tags. +You can use the `meta` option for the configuration of [`` tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) within the `` tag of the generated _index.html_ file. This is especially useful for providing text and images for social sharing and link previews like for Slack, text messages, and social media shares, in particular when using the [Open Graph](https://ogp.me/) set of tags. #### Example This is an example of the `meta` configuration for the Greenwood website. @@ -96,7 +96,7 @@ module.exports = { ``` ### Workspace -Workspace path for your project where all your project files will be located. You can change it by passing a string. Using an absolute path is recommened. +Workspace path for your project where all your project files will be located. You can change it by passing a string. Using an absolute path is recommended. #### Example ```render js diff --git a/www/pages/docs/css-and-images.md b/www/pages/docs/css-and-images.md index 1354fe82f..b3abd392a 100644 --- a/www/pages/docs/css-and-images.md +++ b/www/pages/docs/css-and-images.md @@ -9,7 +9,7 @@ By default Greenwood supports directory detection for the following folder names ### Theming -To enable theming through global styles, create a file in your workspace styles directoy called _theme.css_, e.g. _src/styles/theme.css_ and import it into your page templates. Greenwood will include this in a `