Skip to content

Commit c5c0dce

Browse files
ghislainegueringhislaineguerin
committed
add website building blocks
1 parent 5591e72 commit c5c0dce

File tree

7 files changed

+137
-19
lines changed

7 files changed

+137
-19
lines changed

‎addon/styles/components/es-button.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.es-button {
22
background-color: var(--color-ember-orange);
33
color: var(--color-light);
4-
font-size: var(--text-preset-4);
4+
font-size: var(--text-preset-2);
55
padding-left: 4.5rem;
66
padding-right: 4.5rem;
77
padding-top: 1rem;

‎addon/styles/components/es-header.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
header.es-header {
2-
height: 6rem;
3-
42
display: flex;
53
justify-content: center;
64
align-items: center;

‎addon/styles/global.css

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,73 @@
11
:root {
2-
--container-width-large: 64em;
2+
--container-width-large: 64rem;
33
--color-dark: #1C1E23;
4-
--color-light: #FFF;
4+
--color-light: #FFFFFF;
5+
--color-muted: #F4F6F8;
56
--color-ember-orange: #E04E39;
7+
--text-preset-1: 1rem;
8+
--text-preset-2: 1.2rem;
9+
--text-preset-3: 1.8rem;
10+
--text-preset-4: 2.8rem;
11+
--text-preset-5: 3.5rem;
12+
}
613

7-
--text-preset-4: 18pt;
14+
body, html {
15+
margin: 0;
16+
padding: 0;
17+
font-family: "Source Sans Pro", sans-serif;
18+
font-size: 16px;
819
}
920

10-
.container {
11-
max-width: var(--container-width-large);
12-
margin-left: auto;
13-
margin-right: auto;
21+
p {
22+
font-size: 1.2rem;
23+
line-height: 1.6;
24+
margin: 0 0 1rem 0;
25+
font-weight: 300;
26+
}
27+
28+
h1,
29+
h2,
30+
h3,
31+
h4,
32+
h5,
33+
h6 {
34+
font-weight: 300;
35+
margin: 0 0 1.2rem 0;
36+
}
37+
38+
@media (max-width: 1280px) and (min-width: 421px) {
39+
body,
40+
html {
41+
42+
}
43+
}
44+
45+
@media (max-width: 520px) {
46+
body,
47+
html {
48+
49+
}
1450
}
1551

52+
/* move beyond this point */
53+
1654
.dark {
1755
background-color: var(--color-dark);
1856
color: var(--color-light);
1957
}
58+
59+
.muted {
60+
background-color: var(--color-muted);
61+
}
62+
63+
.container {
64+
max-width: var(--container-width-large);
65+
margin-left: auto;
66+
margin-right: auto;
67+
}
68+
69+
.content-section {
70+
padding-top: 4.5rem;
71+
padding-bottom: 4.5rem;
72+
border: 1px solid #CCC;
73+
}

‎addon/styles/typography.css

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,39 @@
2525
url('/fonts/open-sans-v16-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
2626
}
2727

28-
body {
29-
font-size: 16pt;
30-
font-family: "Source Sans Pro", sans-serif;
31-
font-weight: 300;
28+
29+
.sans {
30+
font-family: 'Open Sans', sans-serif;
3231
}
3332

34-
h1 {
35-
font-weight: 300;
33+
.bold {
34+
font-weight: 800;
35+
}
36+
37+
.italic {
38+
font-style: italic;
39+
}
40+
41+
.xsmall {
42+
font-size: var(--text-preset-1);
43+
}
44+
45+
.small {
46+
font-size: var(--text-preset-2);
47+
}
48+
49+
.medium {
50+
font-size: var(--text-preset-3);
51+
}
52+
53+
.large {
54+
font-size: var(--text-preset-4);
55+
}
56+
57+
.xlarge {
58+
font-size: var(--text-preset-5);
3659
}
60+
61+
.text-center {
62+
text-align: center;
63+
}

‎addon/templates/components/es-page-header.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="es-page-header" ...attributes>
22
<div class="container">
3-
<h1 class="es-page-header__title">{{@headline}}</h1>
3+
<h1 class="xlarge">{{@headline}}</h1>
44

5-
<p class="es-page-header__details">{{@detail}}</p>
5+
<p>{{@detail}}</p>
66

77
{{yield}}
88
</div>

‎tests/dummy/app/templates/application.hbs

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
<h1>hello</h1>
1+
<EsHeader class="dark">
2+
<EsNavbar @home="/">
3+
</EsNavbar>
4+
</EsHeader>
5+
6+
<main>
7+
{{outlet}}
8+
</main>
9+
10+
<EsFooter />

‎tests/dummy/app/templates/index.hbs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<EsPageHeader
2+
@headline="A framework for ambitious web developers"
3+
@detail="Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device."
4+
class="dark"
5+
>
6+
<EsButton>Go</EsButton>
7+
</EsPageHeader>
8+
9+
<section class="content-section muted center">
10+
<div class="container">
11+
<h2 class="large">Build with the teams that never stop shipping.</h2>
12+
<p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
13+
<p class="bold">It’s time to start building from the 20th floor.</p>
14+
</div>
15+
</section>
16+
17+
<section class="content-section muted">
18+
<div class="container">
19+
<h3 class="small bold">A Simple Component</h3>
20+
<p>Ember Components are a superset of HTML – that means <span class="bold">&lt;p&gt;Hello, world&lt;/p&gt;</span> is a full-fledged Ember Component! To pass data into Components, use the @ symbol along with an argument name.</p>
21+
</div>
22+
</section>
23+
24+
<section class="content-section dark center">
25+
<div class="container">
26+
<h2 class="large">Batteries are included</h2>
27+
<p>Ember’s out-of-the-box experience has everything you need to start building on day one, and keep shipping for years. Never wire together your own framework again.</p>
28+
<p class="medium">Ember CLI is the backbone of modern Ember apps. Code generators let you quickly create new components and tests. Use the local server for a development environment with Babel, fast rebuilds, auto-reloading and a test runner. Build your app for production with a single command.</p>
29+
</div>
30+
</section>

0 commit comments

Comments
 (0)