Skip to content
This repository was archived by the owner on Feb 25, 2019. It is now read-only.

Commit 851a0cc

Browse files
christiansmithchristiansmith
committed
Merge pull request #43 from petebot/basic-styles
Added some basic styling to views
2 parents 23f64cb + d459903 commit 851a0cc

File tree

5 files changed

+444
-83
lines changed

5 files changed

+444
-83
lines changed

‎public/images/anvil.svg

+43
Loading

‎public/stylesheets/app.css

+268
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
body {
2+
background: #fafafa;
3+
font-family: 'Roboto', sans-serif;
4+
}
5+
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
:hover {
11+
transition: .3s background;
12+
}
13+
14+
h1, h2, h3, h4, h5, h6 {
15+
font-family: 'Raleway', sans-serif;
16+
text-transform: uppercase;
17+
font-weight: 300;
18+
}
19+
20+
a {
21+
text-decoration: none;
22+
color: #00a35f;
23+
}
24+
25+
.logomark {
26+
width: 140px;
27+
background-origin: content-box;
28+
margin: 0 auto;
29+
display: block;
30+
}
31+
32+
.logotype {
33+
font-family: 'Playfair Display', sans-serif;
34+
font-weight: 800;
35+
font-size: 72px;
36+
color: #00d97f;
37+
width: 100%;
38+
margin: -.2em auto 30px;
39+
}
40+
41+
.thin {
42+
font-weight: 100;
43+
display: block;
44+
font-size: 18px;
45+
color: #000;
46+
letter-spacing: 1.3em;
47+
margin-right: -1.3em;
48+
line-height: 0em;
49+
}
50+
51+
.anvilform {
52+
width: 500px;
53+
margin: 0 auto;
54+
margin-top: 60px;
55+
min-height: 200px;
56+
position: relative;
57+
}
58+
59+
.anvilform h1 {
60+
text-align: center;
61+
}
62+
63+
.anvilform .textsep {
64+
color: #999;
65+
border: solid 1px #ccc;
66+
text-align: center;
67+
position: relative;
68+
height: 0px;
69+
border-width: 1px 0 0;
70+
}
71+
72+
.anvilform .textsep:before {
73+
content: '';
74+
display: inline-block;
75+
position: relative;
76+
top: -14px;
77+
padding: 0 10px;
78+
background: #fff;
79+
color: #8c8b8b;
80+
font-size: 16px;
81+
font-style: italic;
82+
}
83+
84+
.anvilform .textsep.signinwith:before {
85+
content: 'sign in with';
86+
}
87+
88+
.anvilform .textsep.signupwith:before {
89+
content: 'sign up with';
90+
}
91+
92+
.anvilform .textsep.or:before {
93+
content: 'or';
94+
}
95+
96+
.anvilform .panel {
97+
background: #ffffff;
98+
border: 1px solid #ccc;
99+
padding: 30px;
100+
width: 400px;
101+
margin: 0 auto;
102+
position: relative;
103+
}
104+
105+
.anvilform .error {
106+
background: #f15a24;
107+
color: #fff;
108+
padding: 10px;
109+
position: relative;
110+
top: -16px;
111+
}
112+
113+
.anvilform .panel .providers {
114+
padding: 0px;
115+
list-style-type: none;
116+
}
117+
118+
.anvilform form input[type="text"], .anvilform form input[type="password"] {
119+
background: #fafafa;
120+
border: 1px solid #ccc;
121+
height: 65px;
122+
display: block;
123+
padding: 20px;
124+
width: 100%;
125+
margin: 10px 0 0;
126+
font-size: 18px;
127+
}
128+
129+
.singlebutton {
130+
display: inline-block;
131+
margin-right: 2px;
132+
}
133+
134+
.singlebutton.cancel {
135+
margin-right: 0;
136+
}
137+
138+
.anvilform button {
139+
height: 65px;
140+
margin: 10px 2px 0 0;
141+
border: 0px solid #ccc;
142+
background: #ccc;
143+
cursor: pointer;
144+
font-size: 24px;
145+
text-transform: uppercase;
146+
font-family: 'Raleway', sans-serif;
147+
text-decoration: none;
148+
font-weight: 100;
149+
padding: 20px;
150+
width: 168px;
151+
transition: .3s background;
152+
-webkit-user-select: none;
153+
/* Chrome all / Safari all */
154+
-moz-user-select: none;
155+
/* Firefox all */
156+
-ms-user-select: none;
157+
/* IE 10+ */
158+
-o-user-select: none;
159+
user-select: none;
160+
}
161+
162+
.anvilform button:hover {
163+
background: #aaa;
164+
}
165+
166+
.anvilform button.callout {
167+
background: #21d782;
168+
font-weight: 400;
169+
color: #fff;
170+
}
171+
172+
.anvilform button.full {
173+
width: 100%;
174+
}
175+
176+
.anvilform button.smalltext {
177+
font-size: 12px;
178+
position: relative;
179+
top: -7px;
180+
}
181+
182+
.anvilform button.callout:hover {
183+
background: #4ddf9b;
184+
}
185+
186+
.anvilform button:last-child {
187+
margin-right: 0px;
188+
}
189+
190+
.anvilform button a {
191+
text-decoration: none;
192+
color: #000;
193+
font-weight: 100;
194+
}
195+
196+
.providers li {
197+
display: inline-block;
198+
margin: 0 2px 4px;
199+
height: 63px;
200+
width: 63px;
201+
}
202+
203+
.provider {
204+
background: #aaa;
205+
color: #fff;
206+
display: inline-block;
207+
padding: 15px;
208+
height: 100%;
209+
width: 100%;
210+
text-align: center;
211+
transition: .3s background;
212+
}
213+
214+
.provider.google {
215+
background: #dd4b39;
216+
}
217+
218+
.provider.google:hover {
219+
background: #a6382b;
220+
}
221+
222+
.provider.facebook {
223+
background: #3b5998;
224+
}
225+
226+
.provider.facebook:hover {
227+
background: #2c4372;
228+
}
229+
230+
.provider.twitter {
231+
background: #55acee;
232+
}
233+
234+
.provider.twitter:hover {
235+
background: #4993CC;
236+
}
237+
238+
.provider.github, .provider.codepen {
239+
background: #000;
240+
}
241+
242+
.provider.github:hover, .provider.codepen:hover {
243+
background: #333;
244+
}
245+
246+
.provider.dribbble {
247+
background: #ea4c89;
248+
}
249+
250+
.provider.dribbble:hover {
251+
background: #c06185;
252+
}
253+
254+
.provider.instagram {
255+
background: #517fa4;
256+
}
257+
258+
.provider.instagram:hover {
259+
background: #24557b;
260+
}
261+
262+
.provider.wordpress {
263+
background: #21759b;
264+
}
265+
266+
.provider.wordpress:hover {
267+
background: #195874;
268+
}

0 commit comments

Comments
 (0)