ducky/web

Paddy 2015-07-07

22:21f80f56cda9 Go to Latest

ducky/web/src/styles/header.scss

Switch to being a website instead of a Chrome app. Update our CNAME to be the more appropriate "prototype.useducky.com" when we deploy. Create a homepage and a non-onboarding page template. This mostly consisted of setting up a header component and the associated styles, and then a logged-in vs. guest flavor of said header, changing the links appropriately. We also created a simple homepage that describes what Ducky is and does, and gave a jumping-off point for it. Stubbed out a basic links page, just to get an idea for what the homepage would be like when a logged-in user navigated to the homepage (e.g., not the marketing copy). Updated our login page to _actually work_, and redirected it to the new URL for the payment setup page. Updated the payment page to actually create a subscription, and moved it from /register/payment to just /payment. Fixed a bug in our registration page that was looking for an invalid_form error when it really meant an invalid_format error. Ooops. Also, updated it to point to the new /payment endpoint instead of /register/payment. Updated our router to use the new homepage, the new links page, and updated the URL for the payment page. Updated our button styles so they should all have the right font color, padding, and border-radius, but could've potentially screwed something up. Oops. Updated our backgrounds all over to have a transparent-y white background behind the content, and a simple pattern for the rest of the body. Not sure how I feel about it just yet, but I'm not going to keep futzing with it.

Download raw file
View source Diff to previous Annotate
History
1 @import "bourbon";
2 @import "neat";
3 @import "base/base";
4 .centered-navigation {
5 $base-border-radius: 3px !default;
6 $large-screen: em(860) !default;
7 $base-font-color: #fff;
8 $centered-navigation-padding: 1em;
9 $centered-navigation-logo-height: 2em;
10 $centered-navigation-background: #40526b;
11 $centered-navigation-color: transparentize($base-font-color, 0.3);
12 $centered-navigation-color-hover: $base-font-color;
13 $centered-navigation-height: 60px;
14 $centered-navigation-item-padding: 1em;
15 $centered-navigation-submenu-padding: 1em;
16 $centered-navigation-submenu-width: 12em;
17 $centered-navigation-item-nudge: 2.2em;
18 $horizontal-bar-mode: $large-screen;
19
20 background-color: $centered-navigation-background;
21 border-bottom: 1px solid darken($centered-navigation-background, 6%);
22 min-height: $centered-navigation-height;
23 width: 100%;
24 z-index: 9999;
25
26
27 // Mobile view
28
29 .mobile-logo {
30 display: inline;
31 float: left;
32 max-height: $centered-navigation-height;
33 padding-left: $centered-navigation-padding;
34
35 img {
36 max-height: $centered-navigation-height;
37 opacity: .6;
38 padding: .8em 0;
39 }
40
41 @include media($horizontal-bar-mode) {
42 display: none;
43 }
44 }
45
46 .centered-navigation-mobile-menu {
47 color: $centered-navigation-color;
48 display: block;
49 float: right;
50 font-weight: 700;
51 line-height: $centered-navigation-height;
52 margin: 0;
53 padding-right: $centered-navigation-submenu-padding;
54 text-decoration: none;
55 text-transform: uppercase;
56
57 @include media ($horizontal-bar-mode) {
58 display: none;
59 }
60
61 &:focus,
62 &:hover {
63 color: $centered-navigation-color-hover;
64 }
65 }
66
67
68 // Nav menu
69
70 .centered-navigation-wrapper {
71 @include outer-container;
72 @include clearfix;
73 position: relative;
74 z-index: 999;
75 }
76
77 ul.centered-navigation-menu {
78 -webkit-transform-style: preserve-3d;
79 // stop webkit flicker
80 clear: both;
81 display: none;
82 margin: 0 auto;
83 overflow: visible;
84 padding: 0;
85 width: 100%;
86 z-index: 99999;
87
88 &.show {
89 display: block;
90 }
91
92 @include media ($horizontal-bar-mode) {
93 display: block;
94 text-align: center;
95 }
96 }
97
98
99 // The nav items
100
101 .nav-link:first-child {
102 @include media($horizontal-bar-mode) {
103 margin-left: $centered-navigation-item-nudge;
104 }
105 }
106
107 ul li.nav-link {
108 background: $centered-navigation-background;
109 display: block;
110 line-height: $centered-navigation-height;
111 overflow: hidden;
112 padding-right: $centered-navigation-submenu-padding;
113 text-align: right;
114 width: 100%;
115 z-index: 9999;
116
117 a {
118 color: $centered-navigation-color;
119 display: inline-block;
120 outline: none;
121 text-decoration: none;
122
123 &:focus,
124 &:hover {
125 color: $centered-navigation-color-hover;
126 }
127 }
128
129 @include media($horizontal-bar-mode) {
130 background: transparent;
131 display: inline;
132 line-height: $centered-navigation-height;
133
134 a {
135 padding-right: $centered-navigation-item-padding;
136 }
137 }
138 }
139
140 li.logo.nav-link {
141 display: none;
142 line-height: 0;
143
144 @include media($large-screen) {
145 display: inline;
146 }
147 }
148
149 .logo img {
150 margin-bottom: -$centered-navigation-logo-height / 3;
151 max-height: $centered-navigation-logo-height;
152 }
153
154
155 // Sub menus
156
157 li.more.nav-link {
158 padding-right: 0;
159
160 @include media($large-screen) {
161 padding-right: $centered-navigation-submenu-padding;
162 }
163
164 > ul > li:first-child a {
165 padding-top: 1em;
166 }
167
168 a {
169 margin-right: $centered-navigation-submenu-padding;
170 }
171
172 > a {
173 padding-right: 0.6em;
174 }
175
176 > a:after {
177 @include position(absolute, auto -0.4em auto auto);
178 color: $centered-navigation-color;
179 content: "\25BE";
180 }
181 }
182
183 li.more {
184 overflow: visible;
185 padding-right: 0;
186
187 a {
188 padding-right: $centered-navigation-submenu-padding;
189 }
190
191 > a {
192 padding-right: 1.6em;
193 position: relative;
194
195 @include media($large-screen) {
196 margin-right: $centered-navigation-submenu-padding;
197 }
198
199 &:after {
200 content: "›";
201 font-size: 1.2em;
202 position: absolute;
203 right: $centered-navigation-submenu-padding / 2;
204 }
205 }
206
207 &:focus > .submenu,
208 &:hover > .submenu {
209 display: block;
210 }
211
212 @include media($horizontal-bar-mode) {
213 padding-right: $centered-navigation-submenu-padding;
214 position: relative;
215 }
216 }
217
218 ul.submenu {
219 display: none;
220 padding-left: 0;
221
222 @include media($horizontal-bar-mode) {
223 left: -$centered-navigation-submenu-padding;
224 position: absolute;
225 top: 1.5em;
226 }
227
228 .submenu {
229 @include media($horizontal-bar-mode) {
230 left: $centered-navigation-submenu-width - 0.2em;
231 top: 0;
232 }
233 }
234
235 li {
236 display: block;
237 padding-right: 0;
238
239 @include media($horizontal-bar-mode) {
240 line-height: $centered-navigation-height / 1.3;
241
242 &:first-child > a {
243 border-top-left-radius: $base-border-radius;
244 border-top-right-radius: $base-border-radius;
245 }
246
247 &:last-child > a {
248 border-bottom-left-radius: $base-border-radius;
249 border-bottom-right-radius: $base-border-radius;
250 padding-bottom: .7em;
251 }
252 }
253
254 a {
255 background-color: darken($centered-navigation-background, 3%);
256 display: inline-block;
257 text-align: right;
258 text-decoration: none;
259 width: 100%;
260
261 @include media($horizontal-bar-mode) {
262 background-color: $centered-navigation-background;
263 padding-left: $centered-navigation-submenu-padding;
264 text-align: left;
265 width: $centered-navigation-submenu-width;
266 }
267 }
268 }
269 }
270 }