Skip to content

Commit 1fbf280

Browse files
Samuell1Samuell1
committed
docs: home page rework
1 parent 9f61c0b commit 1fbf280

File tree

7 files changed

+107
-79
lines changed

7 files changed

+107
-79
lines changed

‎docs/app/pages/Home/Home.vue

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<md-icon class="home-icon-indicator" @click.native="scrollDown">keyboard_arrow_down</md-icon>
77
</div>
88

9-
<!-- <home-ecosystem /> -->
9+
<home-ecosystem />
1010
<home-sponsors />
1111
</splash-container>
1212
</template>
@@ -86,3 +86,25 @@
8686
animation: home-icon-indicator 2s infinite $md-transition-stand-timing;
8787
}
8888
</style>
89+
90+
<style lang="scss">
91+
.page-wrapper {
92+
max-width: 1344px;
93+
margin: 0 auto;
94+
padding: 0 16px;
95+
}
96+
97+
.home-title {
98+
max-width: 1312px;
99+
margin: 0 auto;
100+
color: rgba(#000, .87);
101+
position: relative;
102+
padding: 16px 0;
103+
.md-icon {
104+
position: absolute;
105+
top: 2px;
106+
bottom: 0;
107+
left: -48px;
108+
}
109+
}
110+
</style>

‎docs/app/pages/Home/HomeEcosystem.vue

Lines changed: 77 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,49 @@
11
<template>
22
<md-content md-tag="section" md-theme="default" class="home-ecosystem">
3-
<h2 class="home-ecosystem-title md-display-1">{{ $t('pages.home.ecosystem') }}</h2>
4-
5-
<div class="home-repo-list md-layout-column">
6-
<div
7-
class="home-repo md-layout-row md-layout-column-xsmall"
8-
v-for="(item, index) in 2"
9-
:key="index"
10-
:class="{ reverse: (index + 1) % 2 === 0 }">
11-
<div class="home-repo-content md-layout-column md-flex-55 md-flex-xsmall-100 md-align-start-start">
12-
<h3 class="home-repo-title md-headline">Official Boilerplate</h3>
13-
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam qui enim harum excepturi nemo itaque quidem dolore unde asperiores, recusandae reiciendis perferendis laboriosam cum obcaecati quos assumenda libero labore! Expedita.</p>
14-
<md-button class="md-primary md-raised md-button-spaced">{{ $t('pages.home.viewProject') }}</md-button>
3+
<h2 class="home-title md-headline">
4+
<md-icon>settings</md-icon>
5+
{{ $t('pages.home.ecosystem') }}
6+
</h2>
7+
<div class="page-wrapper">
8+
<div class="md-layout md-gutter">
9+
<div class="md-layout-item">
10+
<md-content class="md-elevation-2 full-height">
11+
<div class="content">
12+
<div class="md-title">Advanced Webpack SPA</div>
13+
<p>A full-featured Webpack + Vue Material setup with hot-reload, lint-on-save, unit testing & css extraction.</p>
14+
</div>
15+
<div class="image">
16+
<img src="/assets/boilerplates/webpack-advanced.png" alt="webpack">
17+
</div>
18+
</md-content>
19+
</div>
20+
<div class="md-layout-item">
21+
<md-content class="md-elevation-2 full-height">
22+
<div class="content">
23+
<div class="md-title">NuxtJs Universal</div>
24+
<p>Nuxt.js is a framework for creating Universal Vue.js Applications. All the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.</p>
25+
</div>
26+
<div class="image">
27+
<img src="/assets/boilerplates/nuxt.png" alt="nuxtjs">
28+
</div>
29+
</md-content>
30+
</div>
31+
<div class="md-layout-item md-size-35">
32+
<md-content class="md-elevation-2 flying">
33+
<div class="content">
34+
<div class="md-title">Single HTML file</div>
35+
<p>The simplest possible Vue Material setup in a single HTML file. But without SCSS or ES7.</p>
36+
</div>
37+
<img src="/assets/boilerplates/html.png" alt="">
38+
</md-content>
39+
<md-content class="md-elevation-2 flying">
40+
<div class="content">
41+
<div class="md-title">Codepen for prototyping</div>
42+
<p>For fast prototyping, examples or issues reports is best to use codepen.</p>
43+
</div>
44+
<img src="/assets/boilerplates/codepen.svg" alt="">
45+
</md-content>
1546
</div>
16-
17-
<img src="https://placeimg.com/656/300/tech/grayscale" class="md-flex-45">
1847
</div>
1948
</div>
2049
</md-content>
@@ -32,59 +61,43 @@
3261
3362
.home-ecosystem {
3463
width: calc(100% + 32px);
35-
padding: 56px 16px;
36-
margin: 0 -16px -16px;
37-
}
38-
39-
.home-repo,
40-
.home-ecosystem-title {
41-
max-width: 1312px;
42-
margin: 0 auto;
43-
}
44-
45-
.home-ecosystem-title {
46-
margin-bottom: 24px;
47-
color: rgba(#000, .87);
48-
}
49-
50-
.home-repo {
51-
margin-top: 48px;
52-
53-
@include md-layout-xsmall {
54-
flex-direction: column-reverse;
55-
}
56-
57-
&.reverse {
58-
flex-direction: row-reverse;
59-
60-
@include md-layout-xsmall {
61-
flex-direction: column-reverse;
64+
padding-bottom: 28px;
65+
margin: 0 -16px;
66+
background: #f5f5f5;
67+
.md-content {
68+
padding: 16px;
69+
display: flex;
70+
margin-bottom: 16px;
71+
flex-direction: column;
72+
position: relative;
73+
overflow: hidden;
74+
&.full-height {
75+
height: 100%;
6276
}
63-
64-
.home-repo-content {
65-
padding-right: 0;
66-
padding-left: 48px;
67-
68-
@include md-layout-xsmall {
69-
padding: 0;
77+
.content {
78+
z-index: 1;
79+
flex-grow: 1;
80+
}
81+
.image {
82+
padding: 16px;
83+
margin: 16px -16px -16px -16px;
84+
max-height: 200px;
85+
overflow: hidden;
86+
background: #f8f8f8;
87+
text-align: center;
88+
img {
89+
max-height: 180px;
90+
}
91+
}
92+
&.flying {
93+
img {
94+
position: absolute;
95+
bottom: -30px;
96+
right: -30px;
97+
max-height: 160px;
98+
z-index: 0;
7099
}
71100
}
72101
}
73102
}
74-
75-
.home-repo-content {
76-
padding-right: 48px;
77-
78-
@include md-layout-xsmall {
79-
padding: 0;
80-
}
81-
}
82-
83-
.home-repo-title {
84-
margin-top: 16px;
85-
}
86-
87-
.md-button {
88-
margin: 24px 0 0;
89-
}
90103
</style>

‎docs/app/pages/Home/HomeSponsors.vue

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<template>
22
<md-content md-tag="section" md-theme="default" class="home-sponsors">
3+
<h2 class="home-title md-headline">
4+
<md-icon>monetization_on</md-icon>
5+
{{ $t('pages.home.sponsors') }} & {{ $t('pages.home.backers') }}
6+
</h2>
37
<div class="page-wrapper">
4-
<h2 class="home-sponsors-title md-display-1">{{ $t('pages.home.sponsors') }} & {{ $t('pages.home.backers') }}</h2>
5-
68
<div class="home-sponsors-description">
79
<i18n path="pages.home.sponsorsDescription" tag="p">
810
<a href="https://www.github.com/marcosmoura" target="_blank">Marcos Moura</a>
@@ -60,18 +62,7 @@
6062
6163
.home-sponsors {
6264
width: calc(100% + 32px);
63-
margin: 0 -16px -16px;
64-
}
65-
66-
.page-wrapper {
67-
max-width: 1344px;
68-
margin: 0 auto;
69-
padding: 56px 16px;
70-
}
71-
72-
.home-sponsors-title {
73-
margin-bottom: 56px;
74-
color: rgba(#000, .87);
65+
margin: 0 -16px;
7566
}
7667
7768
.home-sponsors-patreon {

‎docs/assets/boilerplates/codepen.svg

Lines changed: 2 additions & 0 deletions
Loading

‎docs/assets/boilerplates/html.png

52.6 KB
Loading

‎docs/assets/boilerplates/nuxt.png

19.6 KB
Loading

‎docs/assets/boilerplates/webpack-advanced.png

24.3 KB
Loading

0 commit comments

Comments
 (0)