Skip to content

Commit 596c931

Browse files
hutchgrantthescientist13
hutchgrant
authored and
thescientist13
committed
init templates, components, and styles. (#88)
* basic pages * copy * pages with links * meta data * feat: adding styles, header+nav components, multiple page templates * feat: adding banner, footer, and evergreen-wc/button. Style ideas * feat: adding evergreen-wc/container, cleanup navigation, adjust layout responsive * fix: adjust banner content vertical alignment and responsive fonts * fix: indentation * fix: css variable naming
1 parent 0fd6b21 commit 596c931

19 files changed

+481
-16
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
"dependencies": {
1919
"@babel/core": "^7.4.0",
2020
"@babel/preset-env": "^7.4.1",
21+
"@evergreen-wc/eve-button": "^0.0.7",
22+
"@evergreen-wc/eve-container": "^0.0.7",
2123
"babel-loader": "^8.0.5",
2224
"babel-plugin-transform-builtin-classes": "^0.6.1",
2325
"chalk": "^2.4.2",

‎www/assets/brand.png

2.12 KB
Loading

‎www/components/banner/banner.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
:host {
2+
grid-area: banner;
3+
& .banner {
4+
min-height: 60vh;
5+
6+
& .content {
7+
padding: 15vh 10px;
8+
font-size:1.7rem;
9+
color: white;
10+
text-align:center;
11+
12+
& hr {
13+
border-radius:25px;
14+
border-style:none;
15+
height:3px;
16+
margin:0 auto;
17+
background-color:white;
18+
border:1px solid rgba(0, 0, 0, 0.6);
19+
width: 160px;
20+
}
21+
22+
& h1 {
23+
font-size:3.5rem;
24+
text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
25+
}
26+
& h3 {
27+
text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
28+
}
29+
}
30+
}
31+
@media (max-width: 980px) {
32+
& .banner {
33+
min-height: 40vh;
34+
35+
& .content {
36+
font-size: 1.5rem;
37+
38+
& h1 {
39+
font-size: 3rem;
40+
}
41+
}
42+
}
43+
}
44+
@media (max-width: 756px) {
45+
& .banner {
46+
padding:0px;
47+
48+
& .content {
49+
margin-top: 0;
50+
}
51+
}
52+
}
53+
}

‎www/components/banner/banner.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { html, LitElement } from 'lit-element';
2+
import bannerCss from './banner.css';
3+
import buttonCss from './button.css';
4+
import '@evergreen-wc/eve-button';
5+
import '@evergreen-wc/eve-container';
6+
7+
class Banner extends LitElement {
8+
render() {
9+
return html`
10+
<style>
11+
${bannerCss}
12+
</style>
13+
<div class='banner'>
14+
<eve-container>
15+
<div class='content'>
16+
<h1>Greenwood</h1>
17+
<hr />
18+
<h3>Static Site Generator</h3>
19+
<eve-button size="md" href="/about" style="${buttonCss}">Get Started</eve-button>
20+
</div>
21+
</eve-container>
22+
</div>
23+
24+
`;
25+
}
26+
}
27+
28+
customElements.define('eve-banner', Banner);

‎www/components/banner/button.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
:host .btn {
3+
display:inline-block;
4+
color: white;
5+
border-radius:5px;
6+
font-size:1.5rem;
7+
border:1px solid black;
8+
background-color: darkgreen;
9+
}
10+
:host .btn:hover {
11+
color: darkgreen;
12+
background-color: white;
13+
}

‎www/components/footer/footer.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
:host {
2+
grid-area: footer;
3+
& .footer {
4+
background-color: #1d2418;
5+
min-height: 30px;
6+
padding-top: 10px;
7+
8+
& h4 {
9+
width: 90%;
10+
margin: 0 auto;
11+
padding: 0;
12+
text-align: center;
13+
}
14+
15+
& a {
16+
color: white;
17+
text-decoration:none;
18+
}
19+
}
20+
}

‎www/components/footer/footer.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { html, LitElement } from 'lit-element';
2+
import footerCss from './footer.css';
3+
4+
class FooterComponent extends LitElement {
5+
render() {
6+
return html`
7+
<style>
8+
${footerCss}
9+
</style>
10+
<footer class="footer">
11+
<h4>
12+
<a href="/">PROJECT EVERGREEN</a>
13+
</h4>
14+
</footer>
15+
`;
16+
}
17+
}
18+
19+
customElements.define('eve-footer', FooterComponent);

‎www/components/header/header.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
:host {
2+
grid-area: header;
3+
& .header {
4+
background-color: #111511;
5+
min-height: 30px;
6+
padding: 10px;
7+
font-size: 1.2rem;
8+
9+
& a {
10+
color: white;
11+
text-decoration:none;
12+
}
13+
14+
& h4 {
15+
margin: 0 auto;
16+
padding:0;
17+
padding-top:4px;
18+
display:inline-block;
19+
}
20+
21+
& .head-wrap {
22+
display: flex;
23+
align-items:center;
24+
justify-items: left;
25+
flex-wrap:wrap;
26+
}
27+
28+
& nav {
29+
width: 55%;
30+
& ul {
31+
padding:0;
32+
margin:0;
33+
list-style: none;
34+
& li {
35+
color:white;
36+
display: inline-block;
37+
padding:10px;
38+
&:hover {
39+
background-color:white;
40+
41+
& a {
42+
color:green;
43+
44+
}
45+
}
46+
}
47+
}
48+
}
49+
& .brand {
50+
padding: 10px;
51+
& img {
52+
float:left;
53+
}
54+
}
55+
& .social {
56+
text-align: right;
57+
}
58+
}
59+
}

‎www/components/header/header.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { html, LitElement } from 'lit-element';
2+
import '@evergreen-wc/eve-container';
3+
import headerCss from './header.css';
4+
import brand from '../../assets/brand.png';
5+
6+
class HeaderComponent extends LitElement {
7+
render() {
8+
return html`
9+
<style>
10+
${headerCss}
11+
</style>
12+
<header class="header">
13+
<eve-container>
14+
<div class="head-wrap">
15+
<div class="brand">
16+
<img src="${brand}" height="30px" width="30px" />
17+
<h4>
18+
<a href="/">PROJECT EVERGREEN</a>
19+
</h4>
20+
</div>
21+
<nav>
22+
<ul>
23+
<li><a href="/about">About</a></li>
24+
<li><a href="/docs">Docs</a></li>
25+
</ul>
26+
</nav>
27+
<div class="social">
28+
<a href="">
29+
<a href="https://github.com/ProjectEvergreen/greenwood">
30+
<img src="https://img.shields.io/github/stars/ProjectEvergreen/create-evergreen-app.svg?style=social&logo=github&label=github" />
31+
</a>
32+
</a>
33+
</div>
34+
</div>
35+
</eve-container>
36+
<!-- <div class="head-wrap">
37+
<div class="brand">
38+
<h4>
39+
<a href="/">PROJECT EVERGREEN</a>
40+
</h4>
41+
</div>
42+
</div> -->
43+
<!-- <div class="social">
44+
<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
45+
</div> -->
46+
</header>
47+
`;
48+
}
49+
}
50+
51+
customElements.define('eve-header', HeaderComponent);

‎www/components/navigation/navigation.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
:host {
2+
& .navigation {
3+
grid-area: nav;
4+
background-color: #006400;
5+
width: 100%;
6+
7+
& ul {
8+
width: 30%;
9+
margin: 0 auto;
10+
padding: 5px 0;
11+
}
12+
13+
& ul li {
14+
list-style: none;
15+
cursor: pointer;
16+
text-align: center;
17+
}
18+
19+
& a {
20+
color: #0C1824;
21+
}
22+
}
23+
@media (min-width: 500px) {
24+
& nav ul {
25+
display: flex;
26+
justify-content: space-between;
27+
}
28+
}
29+
}

‎www/components/navigation/navigation.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { html, LitElement } from 'lit-element';
2+
import navCss from './navigation.css';
3+
4+
class NavigationComponent extends LitElement {
5+
render() {
6+
return html`
7+
<style>
8+
${navCss}
9+
</style>
10+
<nav class="navigation">
11+
<ul>
12+
<li><h4><a href="/about">About</a></h4></li>
13+
<li><h4><a href="/guides">Guides</a></h4></li>
14+
<li><h4><a href="/projects">Projects</a></h4></li>
15+
</ul>
16+
</nav>
17+
`;
18+
}
19+
}
20+
21+
customElements.define('eve-navigation', NavigationComponent);

‎www/pages/docs.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
label: 'docs'
3+
---
4+
5+
### Documents Page
6+
7+
This is the Greenwood website's Documents page.
8+
9+
[Home](/)

‎www/styles/home.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
:host {
2+
& h3 {
3+
color: green;
4+
}
5+
6+
& .content {
7+
margin: 0 auto;
8+
min-height: 400px;
9+
padding: 20px 0 10px 0;
10+
background-color:white;
11+
font-size:1.2rem;
12+
13+
& h3 {
14+
font-size:2rem;
15+
margin: 5px 0;
16+
}
17+
18+
& a {
19+
color: #006400;
20+
}
21+
}
22+
}

‎www/styles/page.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
:host {
2+
& h3 {
3+
color: green;
4+
}
5+
6+
& .content {
7+
margin: 0 auto;
8+
min-height: 400px;
9+
padding: 20px 0 10px 0;
10+
background-color:white;
11+
font-size:1.2rem;
12+
13+
& h3 {
14+
font-size:2rem;
15+
margin: 5px 0;
16+
}
17+
18+
& a {
19+
color: #006400;
20+
}
21+
}
22+
}

0 commit comments

Comments
 (0)