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