Skip to content

Commit a553b33

Browse files
peggyrayzispeggyrayzis
committed
Add landing page
1 parent dbb8e99 commit a553b33

File tree

3 files changed

+64
-20
lines changed

3 files changed

+64
-20
lines changed

‎docs/assets/theme-colors.less‎

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@color-primary: #22A699;
1+
@color-primary: #22a699;
22

33
.docstart {
44
width: 100%;
@@ -20,21 +20,24 @@
2020
}
2121
.pb-early-access {
2222
font-weight: 700;
23-
letter-spacing: .25em;
23+
letter-spacing: 0.25em;
2424
text-transform: uppercase;
2525
color: @color-primary;
2626
}
2727
.pb-head {
2828
font-weight: bold;
2929
font-size: 1.1rem;
3030
}
31-
.pb-link, .pb-link a {
31+
.pb-link,
32+
.pb-link a {
3233
color: @color-primary;
3334
text-decoration: underline;
3435
}
3536
}
3637

37-
.fundamentals, .quickstart, .guides {
38+
.fundamentals,
39+
.quickstart,
40+
.guides {
3841
//border:0px solid #22A699;
3942
width: 33.3%;
4043
float: left;
@@ -60,28 +63,26 @@
6063
font-size: 20px;
6164
}
6265

63-
6466
.documentation-buttons {
6567
width: 100%;
6668
height: 100px;
6769

6870
.doc {
69-
width: 33.3%;
71+
width: 50%;
7072
float: left;
7173
padding-top: 10px;
7274
padding-bottom: 10px;
73-
padding-left: 10px;
74-
padding-right: 10px;
75+
padding-left: 20px;
76+
padding-right: 20px;
7577
}
76-
7778
}
7879

7980
.btn.default.hollow {
8081
color: #e535ab;
8182
border: 2px solid #e535ab;
8283
border-radius: 3em;
83-
text-indent: .1em;
84-
letter-spacing: .1em;
84+
text-indent: 0.1em;
85+
letter-spacing: 0.1em;
8586
text-transform: uppercase;
8687
font-size: 14px;
8788
line-height: 20px;
@@ -90,8 +91,21 @@
9091
background-color: #fff;
9192
}
9293

93-
@media (min-width: 768px) and (max-width: 990px) {
94+
.btn.default.closed {
95+
color: #fff;
96+
border: 2px solid #e535ab;
97+
border-radius: 3em;
98+
text-indent: 0.1em;
99+
letter-spacing: 0.1em;
100+
text-transform: uppercase;
101+
font-size: 14px;
102+
line-height: 20px;
103+
font-weight: 600;
104+
padding: 12px 24px;
105+
background-color: #e535ab;
106+
}
94107

108+
@media (min-width: 768px) and (max-width: 990px) {
95109
.btn.default.hollow {
96110
color: #e535ab;
97111
border: 2px solid #e535ab;
@@ -104,20 +118,30 @@
104118
background-color: #fff;
105119
}
106120

121+
.btn.default.closed {
122+
color: #fff;
123+
border: 2px solid #e535ab;
124+
border-radius: 3em;
125+
text-transform: uppercase;
126+
font-size: 9px;
127+
line-height: 20px;
128+
font-weight: 600;
129+
padding: 6px 12px;
130+
background-color: #e535ab;
131+
}
107132
}
108133

109-
110134
// @media (min-width: 880px) and (max-width: 928px) {
111135
// .docstart {
112-
// width: 100%;
136+
// width: 100%;
113137
// height: 274px;
114138
// border-right: 1px solid #22A699;
115-
// //border:0px solid #22A699;
139+
// //border:0px solid #22A699;
116140
// }
117141

118142
// .fundamentals, .quickstart, .guides {
119-
// border:1px solid #22A699;
120-
// width: 33.3%;
143+
// border:1px solid #22A699;
144+
// width: 33.3%;
121145
// float: left;
122146
// //padding-top: 10px;
123147
// //padding-bottom: 10px;
@@ -128,7 +152,7 @@
128152

129153
// }
130154

131-
// /*
155+
// /*
132156
// ##Device = Low Resolution Tablets, Mobiles (Landscape)
133157
// ##Screen = B/w 481px to 767px
134158
// */
@@ -147,7 +171,7 @@
147171
}
148172
}
149173

150-
// /*
174+
// /*
151175
// ##Device = Most of the Smartphones Mobiles (Portrait)
152176
// ##Screen = B/w 320px to 479px
153177
// */
@@ -178,4 +202,4 @@
178202
padding: 6px 10px;
179203
background-color: #fff;
180204
}
181-
}
205+
}

‎docs/source/img/platform.jpg‎

176 KB
Loading

‎docs/source/index.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,25 @@ title: Welcome
33
description: Start here to learn about the Apollo platform
44
---
55

6+
Welcome! 👋 We're excited you're here to learn about Apollo.
7+
8+
The Apollo GraphQL platform is an implementation of GraphQL that helps you manage data from the cloud to your UI. It's incrementally adoptable and can be layered over your existing services, including REST APIs and databases. Apollo includes two open-source libraries for the client and server, in addition to developer tooling that provides everything you need to run a graph API in production with confidence.
9+
10+
<div class="documentation-buttons">
11+
<div class="doc">
12+
<div align="center">
13+
<a href="/docs/tutorial/introduction.html" class="btn default closed">Try it out!</a>
14+
</div>
15+
</div>
16+
<div class="doc">
17+
<div align="center">
18+
<a href="/docs/intro/platform.html" class="btn default hollow">Learn more</a>
19+
</div>
20+
</div>
21+
</div>
22+
23+
<div style="text-align:center">
24+
![Graph layer](./img/platform.jpg)
25+
</div>
626

727

0 commit comments

Comments
 (0)