ducky/web
ducky/web/src/styles/homepage.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.
| paddy@22 | 1 @import "bourbon"; |
| paddy@22 | 2 @Import "neat"; |
| paddy@22 | 3 @import "base/base"; |
| paddy@22 | 4 @import "hero"; |
| paddy@22 | 5 @import "button"; |
| paddy@22 | 6 |
| paddy@22 | 7 body { |
| paddy@22 | 8 $base-border-radius: 3px !default; |
| paddy@22 | 9 $action-color: #477DCA !default; |
| paddy@22 | 10 $large-screen: em(860) !default; |
| paddy@22 | 11 $device-padding-vertical: 5em; |
| paddy@22 | 12 $device-offset-vertical: 10em; |
| paddy@22 | 13 $device-padding-horizontal: 0.4em; |
| paddy@22 | 14 $device-screen-width: 14em; |
| paddy@22 | 15 $device-screen-height: 25em; |
| paddy@22 | 16 $device-background: darken(gray, 40%); |
| paddy@22 | 17 $device-backside-background: darken($device-background, 10%); |
| paddy@22 | 18 $device-text-color: #010101; |
| paddy@22 | 19 $device-text-background: transparentize(white, .5); |
| paddy@22 | 20 $device-background-top: #162C4C; |
| paddy@22 | 21 $device-background-bottom: #0A120D; |
| paddy@22 | 22 $gradient-angle: 10deg; |
| paddy@22 | 23 $device-image: '../img/ps_neutral.png'; |
| paddy@22 | 24 $device-screen-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg'; |
| paddy@22 | 25 |
| paddy@22 | 26 @include background(url($device-image), linear-gradient($gradient-angle, $device-background-bottom, $device-background-top), no-repeat $device-background-top scroll); |
| paddy@22 | 27 background-repeat: repeat; |
| paddy@22 | 28 //background-size: cover; |
| paddy@22 | 29 width: 100%; |
| paddy@22 | 30 |
| paddy@22 | 31 .device-text { |
| paddy@22 | 32 color: $device-text-color; |
| paddy@22 | 33 background-color: $device-text-background; |
| paddy@22 | 34 padding: 2em; |
| paddy@22 | 35 margin: 2em; |
| paddy@22 | 36 border-radius: 5px; |
| paddy@22 | 37 |
| paddy@22 | 38 @include media($large-screen) { |
| paddy@22 | 39 float: left; |
| paddy@22 | 40 max-width: 50%; |
| paddy@22 | 41 } |
| paddy@22 | 42 |
| paddy@22 | 43 h4 { |
| paddy@22 | 44 border-bottom: 1px solid transparentize($device-text-color, 0.7); |
| paddy@22 | 45 font-size: 1.5em; |
| paddy@22 | 46 margin: 0 0 0.5em 0; |
| paddy@22 | 47 padding-bottom: 0.5em; |
| paddy@22 | 48 } |
| paddy@22 | 49 |
| paddy@22 | 50 p { |
| paddy@22 | 51 line-height: 1.5em; |
| paddy@22 | 52 margin-bottom: 1.5em; |
| paddy@22 | 53 } |
| paddy@22 | 54 |
| paddy@22 | 55 .button { |
| paddy@22 | 56 font-size: 1.5em; |
| paddy@22 | 57 padding: .75em 2em; |
| paddy@22 | 58 } |
| paddy@22 | 59 } |
| paddy@22 | 60 |
| paddy@22 | 61 .device { |
| paddy@22 | 62 display: none; |
| paddy@22 | 63 position: relative; |
| paddy@22 | 64 |
| paddy@22 | 65 @include media($large-screen) { |
| paddy@22 | 66 @include transform( |
| paddy@22 | 67 perspective(800px) |
| paddy@22 | 68 translateX(0px) |
| paddy@22 | 69 translateY(-100px) |
| paddy@22 | 70 translateZ(50px) |
| paddy@22 | 71 rotateX(0deg) |
| paddy@22 | 72 rotateY(-20deg) |
| paddy@22 | 73 rotateZ(-0deg)); |
| paddy@22 | 74 background: $device-background; |
| paddy@22 | 75 margin-top: $device-offset-vertical; |
| paddy@22 | 76 border-radius: 2em; |
| paddy@22 | 77 box-shadow: |
| paddy@22 | 78 1px 0px lighten($device-backside-background, 20%), |
| paddy@22 | 79 4px 0px lighten($device-backside-background, 2%), |
| paddy@22 | 80 7px 0px $device-backside-background, |
| paddy@22 | 81 10px 0px $device-backside-background, |
| paddy@22 | 82 13px 0px $device-backside-background; |
| paddy@22 | 83 display: block; |
| paddy@22 | 84 float: right; |
| paddy@22 | 85 margin-bottom: -12em; |
| paddy@22 | 86 margin-right: 5em; |
| paddy@22 | 87 padding: $device-padding-vertical 0; |
| paddy@22 | 88 width: $device-screen-width + (2 * $device-padding-horizontal); |
| paddy@22 | 89 z-index: 99999; |
| paddy@22 | 90 |
| paddy@22 | 91 .screen { |
| paddy@22 | 92 @include size($device-screen-width $device-screen-height); |
| paddy@22 | 93 background-image: url($device-screen-image); |
| paddy@22 | 94 background-size: cover; |
| paddy@22 | 95 border-radius: 0.2em; |
| paddy@22 | 96 box-shadow: inset 0 1px 8px transparentize(black, 0.5); |
| paddy@22 | 97 margin: auto; |
| paddy@22 | 98 } |
| paddy@22 | 99 } |
| paddy@22 | 100 } |
| paddy@22 | 101 |
| paddy@22 | 102 |
| paddy@22 | 103 @mixin grid-item-columns($columns) { |
| paddy@22 | 104 width: (100% / 12) * $columns; |
| paddy@22 | 105 } |
| paddy@22 | 106 |
| paddy@22 | 107 .grid-items-lines { |
| paddy@22 | 108 $base-background-color: transparent; |
| paddy@22 | 109 $dark-gray: #333 !default; |
| paddy@22 | 110 $light-gray: #DDD !default; |
| paddy@22 | 111 $medium-screen: em(640) !default; |
| paddy@22 | 112 $large-screen: em(860) !default; |
| paddy@22 | 113 $base-font-color: $dark-gray !default; |
| paddy@22 | 114 $grid-items-background: $base-background-color; |
| paddy@22 | 115 $grid-item-background: $base-background-color; |
| paddy@22 | 116 $grid-item-border: 1px solid transparentize($base-font-color, 0.8); |
| paddy@22 | 117 $grid-item-columns: 6; |
| paddy@22 | 118 $grid-item-big-columns: 8; |
| paddy@22 | 119 $grid-item-color: $base-font-color; |
| paddy@22 | 120 $grid-item-height: 14em; |
| paddy@22 | 121 |
| paddy@22 | 122 @include clearfix; |
| paddy@22 | 123 position: relative; |
| paddy@22 | 124 width: 100%; |
| paddy@22 | 125 |
| paddy@22 | 126 .grid-item { |
| paddy@22 | 127 @include transition (all 0.2s ease-in-out); |
| paddy@22 | 128 background: $grid-item-background; |
| paddy@22 | 129 float: left; |
| paddy@22 | 130 overflow: hidden; |
| paddy@22 | 131 outline: none; |
| paddy@22 | 132 text-decoration: none; |
| paddy@22 | 133 width: 100%; |
| paddy@22 | 134 |
| paddy@22 | 135 @include media($large-screen) { |
| paddy@22 | 136 @include grid-item-columns($grid-item-columns); |
| paddy@22 | 137 padding: 2em; |
| paddy@22 | 138 height: $grid-item-height; |
| paddy@22 | 139 &.left { |
| paddy@22 | 140 border-right: $grid-item-border; |
| paddy@22 | 141 } |
| paddy@22 | 142 &.right { |
| paddy@22 | 143 border-left: $grid-item-border; |
| paddy@22 | 144 } |
| paddy@22 | 145 } |
| paddy@22 | 146 } |
| paddy@22 | 147 |
| paddy@22 | 148 .grid-item img { |
| paddy@22 | 149 display: block; |
| paddy@22 | 150 height: 2.5em; |
| paddy@22 | 151 margin-bottom: 1.2em; |
| paddy@22 | 152 opacity: 0.2; |
| paddy@22 | 153 } |
| paddy@22 | 154 |
| paddy@22 | 155 .grid-item h1 { |
| paddy@22 | 156 color: $grid-item-color; |
| paddy@22 | 157 font-size: 1.3em; |
| paddy@22 | 158 margin-bottom: 0.4em; |
| paddy@22 | 159 } |
| paddy@22 | 160 |
| paddy@22 | 161 .grid-item p { |
| paddy@22 | 162 color: transparentize($grid-item-color, 0.4); |
| paddy@22 | 163 line-height: 1.5em; |
| paddy@22 | 164 |
| paddy@22 | 165 @include media($medium-screen) { |
| paddy@22 | 166 max-width: 70%; |
| paddy@22 | 167 } |
| paddy@22 | 168 } |
| paddy@22 | 169 } |
| paddy@22 | 170 } |