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