Bug 1109318 Privacy Day landing page for 2015

Author: sgarrity

bedrock/privacy/templates/privacy/privacy-day.html

@@ -9,7 +9,7 @@
 
 urlpatterns = patterns('',
     url(r'^/$', views.privacy, name='privacy'),
-    page('/you', 'privacy/privacy-day.html'),
+    page('/tips', 'privacy/privacy-day.html'),
     page('/principles', 'privacy/principles.html'),
     url(r'^/firefox/$', views.firefox_notices, name='privacy.notices.firefox'),
     url(r'^/firefox-os/$', views.firefox_os_notices, name='privacy.notices.firefox-os'),

bedrock/privacy/urls.py

@@ -77,6 +77,10 @@ def tabzilla_css_redirect(r):
     # Bug 815527 /m/privacy.html -> /privacy/firefox/
     redirect(r'^m/privacy.html$', 'privacy.notices.firefox'),
 
+    # Bug 1109318 /privacy/you -> privacy/tips/
+    redirect(r'^privacy/you/$',
+             'privacy.privacy-day'),
+
     # Bug 821047 /about/mission.html -> /mission/
     redirect(r'^about/mission.html$', '/mission/'),
 

bedrock/redirects/urls.py

@@ -513,6 +513,8 @@ def JINJA_CONFIG():
             'css/privacy/privacy.less',
         ),
         'privacy-day': (
+            'css/sandstone/sandstone-resp.less',
+            'css/base/mozilla-share-cta.less',
             'css/privacy/privacy-day.less',
         ),
         'fb_privacy': (
@@ -956,6 +958,10 @@ def JINJA_CONFIG():
             'js/privacy/privacy.js',
         ),
         'privacy-day': (
+            'js/base/mozilla-pager.js',
+            'js/base/mozilla-share-cta.js',
+            'js/libs/jquery.waypoints.min.js',
+            'js/libs/jquery.waypoints-sticky.min.js',
             'js/privacy/privacy-day.js',
         ),
         'products': (

bedrock/settings/base.py

@@ -14,7 +14,6 @@
 }
 
 // Some common colors
-@mozillared:   #c13832;
 @lightbeige:   #fcf9f4;
 @darkbeige:    #d7d3c8;
 @green:        #7abf88;
@@ -242,7 +241,7 @@ textarea:focus {
 .page-title {
     .font-size(72px);
     text-align: center;
-    color: @mozillared;
+    color: @mozillaRed;
 }
 
 .head-stats {
@@ -293,11 +292,11 @@ textarea:focus {
     position: absolute;
     top: 0;
     z-index: 1;
-    background: @mozillared;
+    background: @mozillaRed;
     padding: 40px 0 10px;
     width: 100%;
     min-height: 40px;
-    border-bottom: 1px solid darken(@mozillared, 5%);
+    border-bottom: 1px solid darken(@mozillaRed, 5%);
     .section-dark;
     .clearfix;
 }
@@ -338,7 +337,7 @@ textarea:focus {
         &:hover,
         &:focus,
         &:active {
-            background-color: lighten(@mozillared, 10%);
+            background-color: lighten(@mozillaRed, 10%);
             background-color: rgba(255, 255, 255, .1);
             color: #fff;
             text-decoration: none;
@@ -352,7 +351,7 @@ textarea:focus {
             .button-flat;
             border-radius: 6px;
             margin-top: 10px;
-            background-color: darken(@mozillared, 10%);
+            background-color: darken(@mozillaRed, 10%);
             bottom: 10px;
             left: 10px;
             width: auto;
@@ -375,7 +374,7 @@ textarea:focus {
         border-style: solid;
         border-width: 13px;
         border-color: transparent;
-        border-top-color: @mozillared;
+        border-top-color: @mozillaRed;
         content: '';
         height: 0;
         left: 50%;
@@ -627,7 +626,7 @@ textarea:focus {
             margin-left: -95px;
             width: 180px;
             height: 180px;
-            border: 5px solid @mozillared;
+            border: 5px solid @mozillaRed;
             border-radius: 100%;
         }
     }
@@ -699,7 +698,7 @@ textarea:focus {
     color: lighten(@textColorPrimary, 40%);
 
     &:after {
-        color: @mozillared;
+        color: @mozillaRed;
     }
 }
 
@@ -827,9 +826,9 @@ textarea:focus {
         height: 170px;
         text-align: center;
         display: block;
-        border: 5px solid @mozillared;
+        border: 5px solid @mozillaRed;
         border-radius: 100%;
-        background: @mozillared;
+        background: @mozillaRed;
         color: #fff;
         line-height: 1.1;
         position: relative;
@@ -864,7 +863,7 @@ textarea:focus {
         text-decoration: none;
 
         .event-date {
-            background: lighten(@mozillared, 5%);
+            background: lighten(@mozillaRed, 5%);
         }
 
         .event-title,
@@ -1092,7 +1091,7 @@ textarea:focus {
     .errorlist {
         margin: 0;
         padding: .25em 0;
-        color: @mozillared;
+        color: @mozillaRed;
 
         li {
             width: auto;
@@ -1132,8 +1131,8 @@ textarea:focus {
 
         &:before {
             background-color: transparent;
-            border: 5px solid @mozillared;
-            color: @mozillared;
+            border: 5px solid @mozillaRed;
+            color: @mozillaRed;
             cursor: pointer;
             display: block;
             font-family: 'Font Awesome';
@@ -1273,7 +1272,7 @@ textarea:focus {
             left: -4px;
             top: 0;
             text-align: center;
-            color: @mozillared;
+            color: @mozillaRed;
         }
     }
 
@@ -1335,11 +1334,11 @@ textarea:focus {
 }
 
 #modal .window .inner header {
-    background-color: @mozillared;
+    background-color: @mozillaRed;
 }
 
 #modal-close .button {
-    background: darken(@mozillared, 10%);
+    background: darken(@mozillaRed, 10%);
     box-shadow: none;
 }
 
@@ -1417,7 +1416,7 @@ textarea:focus {
     text-align: center;
 
     .section-title {
-        color: @mozillared;
+        color: @mozillaRed;
         margin: 0 0 .15em;
     }
 
@@ -1476,7 +1475,7 @@ textarea:focus {
 .mozillians-profile {
     width: 450px;
     height: 450px;
-    border: 5px solid @mozillared;
+    border: 5px solid @mozillaRed;
     border-radius: 100%;
     background: #fff url('/media/img/contribute/mozillians-profile.png') center center no-repeat;
     float: left;
@@ -1643,7 +1642,7 @@ textarea:focus {
 .story-intro .photo {
     width: 220px;
     height: 220px;
-    border: 8px solid @mozillared;
+    border: 8px solid @mozillaRed;
     border-radius: 100%;
     position: absolute;
     left: 50%;
@@ -1752,7 +1751,7 @@ textarea:focus {
 
     .name {
         font-weight: bold;
-        color: @mozillared;
+        color: @mozillaRed;
     }
 
     .country {
@@ -2195,7 +2194,7 @@ textarea:focus {
     #contribute-nav-menu {
         display: none;
         width: 160px;
-        background: @mozillared;
+        background: @mozillaRed;
         padding: 0 5px 5px;
         border-radius: 6px;
         left: 0;