first draft of style tweaks

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

packages/cli/templates/theme.css

@@ -53,7 +53,7 @@ img {
     }
 
     & a {
-      color: #006400;
+      color: #1d337a;
     }
   }
 
@@ -77,4 +77,4 @@ img {
         "footer  footer";
     }
   }
-}
+}

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 @@
        }
     }
   }
-}
+}

www/components/banner/banner.js

@@ -49,14 +49,14 @@ class Banner extends LitElement {
       <style>
         ${bannerCss}
       </style>
-      
+
       <div class='banner'>
         <eve-container>
           <div class='content'>
             <img src="${greenwoodLogo}" alt="Greenwood Logo"/>
-            
-            <h3>The static site generator for your. . . <span class="${this.animateState}">${currentProjectType}.</span></h3>
-            
+
+            <h3>The static site generator for your. . . <br /><span class="${this.animateState}">${currentProjectType}.</span></h3>
+
             <eve-button size="md" href="/getting-started" style="${buttonCss}">Get Started</eve-button>
           </div>
         </eve-container>
@@ -65,4 +65,4 @@ class Banner extends LitElement {
   }
 }
 
-customElements.define('eve-banner', Banner);
+customElements.define('eve-banner', Banner);

www/components/banner/button.css

@@ -1,13 +1,15 @@
 :host .btn {
   display:inline-block;
-  color: #020202;
   border-radius:5px;
   font-size:1.5rem;
-  border:1px solid #020202;
+  padding: 1rem;
+  color: white;
+  background-color: #1d337a;
+  border:1px solid white;
 }
 
 :host .btn:hover {
-  color: #1d337a;
-  background-color: white;
-  border:1px dotted #1d337a;
-}
+  color: #020202;
+  background-color: #F9E7CA;
+  border:1px solid #020202;
+}

www/components/card/card.css

@@ -1,7 +1,7 @@
 :host {
 
   & .card {
-    padding: 2rem;
+    padding: 2.5rem;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -11,6 +11,10 @@
     background-clip: initial;
     text-align: center;
 
+    @media(max-width:768px) {
+      padding:0;
+    }
+
     & .body {
       padding:10px;
     }
@@ -54,7 +58,7 @@
     -webkit-box-flex: 1;
     -ms-flex: 1 1 33.333%;
     margin: 0.25rem;
-    flex: 1;
+    flex: 1 1 33.333%;
   }
 
   & .card-img-top {

www/components/footer/footer.css

@@ -1,7 +1,7 @@
 :host {
   grid-area: footer;
   & .footer {
-    background-color: #1d2418;
+    background-color: #192a27;
     min-height: 30px;
     padding-top: 10px;
 
@@ -17,4 +17,4 @@
       text-decoration:none;
     }
   }
-}
+}

www/components/header/header.css

@@ -1,7 +1,7 @@
 :host {
   grid-area: header;
   & .header {
-    background-color: #111511;
+    background-color: #192a27;
     min-height: 30px;
     padding: 10px;
     font-size: 1.2rem;
@@ -36,8 +36,7 @@
           display: inline-block;
           padding:10px;
           &:hover {
-            background-color:white;
-
+          color: #F9E7CA;
             & a {
               color:green;
 
@@ -59,5 +58,8 @@
       margin-left:auto;
       text-align: right;
     }
+    & .project-name {
+      margin-top: -2px;
+    }
   }
-}
+}

www/components/header/header.js

@@ -17,15 +17,15 @@ class HeaderComponent extends LitElement {
               <a href="https://projectevergreen.github.io" target="_blank" rel="noopener noreferrer">
                 <img src="${brand}" />
               </a>
-              <h4>
+              <h4 class="project-name">
                 <a href="/">Greenwood</a>
               </h4>
             </div>
             <nav>
               <ul>
-                <li><a href="/about">About</a></li>
-                <li><a href="/getting-started">Getting Started</a></li>
-                <li><a href="/docs">Docs</a></li>
+                <a href="/about"><li>About</li></a>
+                <a href="/getting-started"><li>Getting Started</li></a>
+                <a href="/docs"><li>Docs</li></a>
               </ul>
             </nav>
             <div class="social">
@@ -42,4 +42,4 @@ class HeaderComponent extends LitElement {
   }
 }
 
-customElements.define('eve-header', HeaderComponent);
+customElements.define('eve-header', HeaderComponent);

www/components/row/row.css

@@ -6,11 +6,8 @@
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-  /* -ms-flex-flow: row wrap;
-  flex-flow: row wrap; */
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
-  /* justify-content: center; */
   justify-content: space-around;
   flex-direction: row;
 

www/components/shelf/shelf.css

@@ -8,7 +8,7 @@
 
   & a {
     text-decoration: none;
-    color: green;
+    color: #2D3D3A;
 
     &:hover {
       color:black;
@@ -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;
@@ -76,4 +79,4 @@
   & .active {
     color:red;
   }
-}
+}

www/pages/docs/configuration.md

@@ -32,7 +32,7 @@ module.exports = {
 
 
 ### Meta
-You can use the `meta` option for the configuration of [`<meta>` tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) within the `<head>` 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 [`<meta>` tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) within the `<head>` 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

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 `<style>` tag in the `<head>` of the generated pages.
+To enable theming through global styles, create a file in your workspace styles directory called _theme.css_,  e.g. _src/styles/theme.css_ and import it into your page templates.  Greenwood will include this in a `<style>` tag in the `<head>` of the generated pages.
 
 
 #### Example
@@ -46,7 +46,7 @@ customElements.define('page-template', PageTemplate);
 ```
 
 ### Shadow DOM
-For any of your components and page templates, it is recommend to use the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) within your LitElement's `render` function.  You can also import the CSS too.
+For any of your components and page templates, it is recommended to use the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) within your LitElement's `render` function.  You can also import the CSS too.
 
 #### Example
 ```render javascript
@@ -93,7 +93,7 @@ customElements.define('page-template', PageTemplate);
 They say a picture is worth 1000 words, so by default Greenwood will look for an _assets/_ folder in your workspace and automtically copy / bundle whatever it sees there.
 
 #### Example
-So to use an image in a markdown file, you would reference it as so using standard markdown syntax:
+To use an image in a markdown file, you would reference it as so using standard markdown syntax:
 
 ```render md
 # This is my page

www/pages/docs/front-matter.md

@@ -27,7 +27,7 @@ label: 'mypage'
 Which will compile to the element: `<wc-md-mypage></wc-md-mypage>`
 
 ### Template
-When creating multiple page templates, you can use the `template` front-matter to configre Greenwood to use that template for a given page.
+When creating multiple page templates, you can use the `template` front-matter to configure Greenwood to use that template for a given page.
 
 #### Example
 ```render md
@@ -41,12 +41,12 @@ This is the home page
 
 In this example, the _src/templates/home-template.js_ will be used to render the current markdown page.
 
-> **Note:** By default, Greenwood will usage `src/templates/page-template.js` for all undefined template pages.
+> **Note:** By default, Greenwood will use `src/templates/page-template.js` for all undefined template pages.
 
 
 ### Imports
 
-If you want to import custom files such as a custom element, you can use the predefiend variable `imports`.
+If you want to import custom files such as a custom element, you can use the predefined variable `imports`.
 
 #### Example
 ```render md

www/pages/getting-started/branding.md

@@ -39,7 +39,7 @@ customElements.define('app-header', HeaderComponent);
 ```
 
 Now we can use it in both our templates, like so:
-```
+```render javascript
 import { html, LitElement } from 'lit-element';
 import '../components/header'; // import our custom element
 

www/pages/index.md

@@ -2,33 +2,31 @@
 template: 'home'
 ---
 
-## 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!
-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.
+```render
+<div class="message">
+  <h2>Greenwood is a modern and performant static site generator for Web Component based development.</h2>
 
-Click [here](/about) to learn more about the project, or for more advanced topics please head over to our [Documentation page](/docs).
+  <p>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 aimed at delivering not just great user experiences, but alo great developer experiences too.  To learn more about the project click <a href="/about">here</a>, or for our documentation please click <a href="/docs">here</a>.</p>
 
+  <hr/>
+</div>
 
-```render
 <div class="cards">
   <eve-row>
 
     <eve-card title="webpack" img="/assets/webpack.svg" size="full">
       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.
     </eve-card>
-  
+
     <eve-card title="Web Components" img="/assets/webcomponents.svg" size="full">
-      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.
     </eve-card>
-  
+
     <eve-card title="NodeJS" img="/assets/nodejs.png" size="full">
       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.
     </eve-card>
 
   </eve-row>
 </div>
-```
+```

www/styles/home.css

@@ -18,10 +18,24 @@
     }
 
     & a {
-      color: #006400;
+      color: #1d337a;
     }
   }
+
   & .cards {
-    margin:0 -15%
+    margin: 0 -15%
+  }
+
+  & .message {
+    padding: 4rem;
+    text-align:center;
+
+    & hr {
+      margin-top: 4rem;
+    }
+
+    @media(max-width:768px) {
+      padding:0;
+    }
   }
-}
+}