Skip to content

Commit 7c19c5a

Browse files
hacklschorschhacklschorsch
committed
Merge branch 'redesign' into gh-pages
2 parents 6306f97 + ae5b6b4 commit 7c19c5a

7 files changed

+528
-18
lines changed

‎css/overrides.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* Overriding the PureCSS landing page template with some custom styles */
2+
3+
.splash {
4+
height: 80%;
5+
text-transform: none;
6+
}
7+
8+
.splash-container {
9+
background: repeating-conic-gradient(
10+
hsla(0,0%,100%,.2) 0deg 15deg,
11+
hsla(0,0%,100%,0) 0deg 30deg) #0ac;
12+
}
13+
14+
.splash-head {
15+
border: none;
16+
font-family: "Bangers";
17+
font-size: 6em;
18+
line-height: 0em;
19+
padding: 0;
20+
letter-spacing: 0.03em;
21+
}
22+
23+
24+
/* Form elements */
25+
26+
.pure-form input[type] {
27+
width: inherit;
28+
}
29+
30+
.pure-button-primary {
31+
background: white;
32+
color: #1f8dd6;
33+
border-radius: 5px;
34+
font-size: 120%;
35+
}
36+
37+
38+
/* New stuff */
39+
40+
.forkMe {
41+
position: absolute;
42+
right: 0;
43+
width: 150px;
44+
}
45+

‎css/pure/grids-responsive-min.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pure/layout-marketing-styles.css

+286
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
* {
2+
-webkit-box-sizing: border-box;
3+
-moz-box-sizing: border-box;
4+
box-sizing: border-box;
5+
}
6+
7+
/*
8+
* -- BASE STYLES --
9+
* Most of these are inherited from Base, but I want to change a few.
10+
*/
11+
body {
12+
line-height: 1.7em;
13+
color: #7f8c8d;
14+
font-size: 13px;
15+
}
16+
17+
h1,
18+
h2,
19+
h3,
20+
h4,
21+
h5,
22+
h6,
23+
label {
24+
color: #34495e;
25+
}
26+
27+
.pure-img-responsive {
28+
max-width: 100%;
29+
height: auto;
30+
}
31+
32+
/*
33+
* -- LAYOUT STYLES --
34+
* These are some useful classes which I will need
35+
*/
36+
.l-box {
37+
padding: 1em;
38+
}
39+
40+
.l-box-lrg {
41+
padding: 2em;
42+
border-bottom: 1px solid rgba(0,0,0,0.1);
43+
}
44+
45+
.is-center {
46+
text-align: center;
47+
}
48+
49+
50+
51+
/*
52+
* -- PURE FORM STYLES --
53+
* Style the form inputs and labels
54+
*/
55+
.pure-form label {
56+
margin: 1em 0 0;
57+
font-weight: bold;
58+
font-size: 100%;
59+
}
60+
61+
.pure-form input[type] {
62+
border: 2px solid #ddd;
63+
box-shadow: none;
64+
font-size: 100%;
65+
width: 100%;
66+
margin-bottom: 1em;
67+
}
68+
69+
/*
70+
* -- PURE BUTTON STYLES --
71+
* I want my pure-button elements to look a little different
72+
*/
73+
.pure-button {
74+
background-color: #1f8dd6;
75+
color: white;
76+
padding: 0.5em 2em;
77+
border-radius: 5px;
78+
}
79+
80+
a.pure-button-primary {
81+
background: white;
82+
color: #1f8dd6;
83+
border-radius: 5px;
84+
font-size: 120%;
85+
}
86+
87+
88+
/*
89+
* -- MENU STYLES --
90+
* I want to customize how my .pure-menu looks at the top of the page
91+
*/
92+
93+
.home-menu {
94+
padding: 0.5em;
95+
text-align: center;
96+
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
97+
}
98+
.home-menu {
99+
background: #2d3e50;
100+
}
101+
.pure-menu.pure-menu-fixed {
102+
/* Fixed menus normally have a border at the bottom. */
103+
border-bottom: none;
104+
/* I need a higher z-index here because of the scroll-over effect. */
105+
z-index: 4;
106+
}
107+
108+
.home-menu .pure-menu-heading {
109+
color: white;
110+
font-weight: 400;
111+
font-size: 120%;
112+
}
113+
114+
.home-menu .pure-menu-selected a {
115+
color: white;
116+
}
117+
118+
.home-menu a {
119+
color: #6FBEF3;
120+
}
121+
.home-menu li a:hover,
122+
.home-menu li a:focus {
123+
background: none;
124+
border: none;
125+
color: #AECFE5;
126+
}
127+
128+
129+
/*
130+
* -- SPLASH STYLES --
131+
* This is the blue top section that appears on the page.
132+
*/
133+
134+
.splash-container {
135+
background: #1f8dd6;
136+
z-index: 1;
137+
overflow: hidden;
138+
/* The following styles are required for the "scroll-over" effect */
139+
width: 100%;
140+
height: 88%;
141+
top: 0;
142+
left: 0;
143+
position: fixed !important;
144+
}
145+
146+
.splash {
147+
/* absolute center .splash within .splash-container */
148+
width: 80%;
149+
height: 50%;
150+
margin: auto;
151+
position: absolute;
152+
top: 100px; left: 0; bottom: 0; right: 0;
153+
text-align: center;
154+
text-transform: uppercase;
155+
}
156+
157+
/* This is the main heading that appears on the blue section */
158+
.splash-head {
159+
font-size: 20px;
160+
font-weight: bold;
161+
color: white;
162+
border: 3px solid white;
163+
padding: 1em 1.6em;
164+
font-weight: 100;
165+
border-radius: 5px;
166+
line-height: 1em;
167+
}
168+
169+
/* This is the subheading that appears on the blue section */
170+
.splash-subhead {
171+
color: white;
172+
letter-spacing: 0.05em;
173+
opacity: 0.8;
174+
}
175+
176+
/*
177+
* -- CONTENT STYLES --
178+
* This represents the content area (everything below the blue section)
179+
*/
180+
.content-wrapper {
181+
/* These styles are required for the "scroll-over" effect */
182+
position: absolute;
183+
top: 87%;
184+
width: 100%;
185+
min-height: 12%;
186+
z-index: 2;
187+
background: white;
188+
189+
}
190+
191+
/* We want to give the content area some more padding */
192+
.content {
193+
padding: 1em 1em 3em;
194+
}
195+
196+
/* This is the class used for the main content headers (<h2>) */
197+
.content-head {
198+
font-weight: 400;
199+
text-transform: uppercase;
200+
letter-spacing: 0.1em;
201+
margin: 2em 0 1em;
202+
}
203+
204+
/* This is a modifier class used when the content-head is inside a ribbon */
205+
.content-head-ribbon {
206+
color: white;
207+
}
208+
209+
/* This is the class used for the content sub-headers (<h3>) */
210+
.content-subhead {
211+
color: #1f8dd6;
212+
}
213+
.content-subhead i {
214+
margin-right: 7px;
215+
}
216+
217+
/* This is the class used for the dark-background areas. */
218+
.ribbon {
219+
background: #2d3e50;
220+
color: #aaa;
221+
}
222+
223+
/* This is the class used for the footer */
224+
.footer {
225+
background: #111;
226+
position: fixed;
227+
bottom: 0;
228+
width: 100%;
229+
}
230+
231+
/*
232+
* -- TABLET (AND UP) MEDIA QUERIES --
233+
* On tablets and other medium-sized devices, we want to customize some
234+
* of the mobile styles.
235+
*/
236+
@media (min-width: 48em) {
237+
238+
/* We increase the body font size */
239+
body {
240+
font-size: 16px;
241+
}
242+
243+
/* We can align the menu header to the left, but float the
244+
menu items to the right. */
245+
.home-menu {
246+
text-align: left;
247+
}
248+
.home-menu ul {
249+
float: right;
250+
}
251+
252+
/* We increase the height of the splash-container */
253+
/* .splash-container {
254+
height: 500px;
255+
}*/
256+
257+
/* We decrease the width of the .splash, since we have more width
258+
to work with */
259+
.splash {
260+
width: 50%;
261+
height: 50%;
262+
}
263+
264+
.splash-head {
265+
font-size: 250%;
266+
}
267+
268+
269+
/* We remove the border-separator assigned to .l-box-lrg */
270+
.l-box-lrg {
271+
border: none;
272+
}
273+
274+
}
275+
276+
/*
277+
* -- DESKTOP (AND UP) MEDIA QUERIES --
278+
* On desktops and other large devices, we want to over-ride some
279+
* of the mobile and tablet styles.
280+
*/
281+
@media (min-width: 78em) {
282+
/* We increase the header font size even more */
283+
.splash-head {
284+
font-size: 300%;
285+
}
286+
}

0 commit comments

Comments
 (0)