Merge pull request #4206 from mozilla/944186-zone-css

Bug 944186: Migrate all zone custom CSS to kuma, serve in zones.css

kuma/settings/common.py

@@ -654,7 +654,6 @@ def enable_candidate_languages():
     'wiki': {
         'source_filenames': (
             'styles/wiki.scss',
-            'styles/zones.scss',
             'styles/diff.scss',
 
             # Custom build of our Prism theme
@@ -679,6 +678,12 @@ def enable_candidate_languages():
         ),
         'output_filename': 'build/styles/wiki-edit.css',
     },
+    'zones': {
+        'source_filenames': (
+            'styles/zones.scss',
+        ),
+        'output_filename': 'build/styles/zones.css',
+    },
     'sphinx': {
         'source_filenames': (
             'styles/wiki.scss',

kuma/static/styles/zones.scss

@@ -1,305 +1,32 @@
-/*
-These styles compliment the wiki styles when the page is a zone landing page or is simply in the zone.
-********************************************************************** */
-
 @import 'includes/vars';
 @import 'includes/mixins';
 
-/* Settings which apply to _all_ zone pages */
-.zone {
-    @include create-gradient-background($homepage-background-color, true);
-    @include use-white-logo();
-    @include remove-main-spacing();
-    @include override-main-header-color($blue-background-text-color, $homepage-background-color);
-
-    #main-header {
-        @include rgba-fallback(border-bottom-color, #fff, .2, $homepage-background-color);
-    }
-
-    /* zone content area needs to be adjusted for zone pages */
-    main {
-        background: transparent;
-    }
-
-    .wiki-main-content {
-        padding-top: $first-content-top-padding !important; /* stylelint-disable-line declaration-no-important */
-
-        .center {
-            @include add-center-spacing();
-        }
-    }
-}
-
-/* zone landing pages only */
-.zone-landing {
-    h1 {
-        @include column-6();
-        color: $blue-background-text-color;
-        clear: both;
-    }
-
-    .zone-landing-header-preview {
-        margin-top: $grid-spacing;
-
-        .column-strip {
-            position: relative;
-
-            .zone-landing-header-preview-base {
-                position: absolute;
-                width: 100%;
-                z-index: 2;
-            }
-
-            .zone-landing-header-spacing {
-                float: left;
-            }
-        }
-    }
-
-    .crumbs {
-        color: $blue-background-text-color;
-
-        a {
-            @include rgba-fallback(color, $blue-background-text-color, .7, $homepage-background-color);
-        }
-    }
-
-    .summary {
-        display: none;
-    }
-
-    h3.title {
-        @include set-font-size($base-font-size);
-        margin: 6px 0 0 0;
-    }
-}
-
-/* the zone landing page masthead    */
-.zone-landing-header {
-    position: relative;
-    color: $blue-background-text-color;
-
-    > .center {
-        padding-top: $first-content-top-padding;
-    }
-
-    .masthead-text {
-        p {
-            @include set-larger-font-size();
-            font-weight: $light-font-weight;
-        }
-    }
-
-    .zone-image {
-        @include bidi-style(right, 0, left, auto);
-        position: absolute;
-        top: 100px;
-        display: block;
-        width: 468px;
-        bottom: 0;
-        background-repeat: no-repeat;
-        background-position: 95% 0;
-    }
-
-    a.button,
-    button {
-        color: $blue-background-text-color;
-
-        &:not(.transparent) {
-            @include rgba-fallback(background-color, #000, .1);
-            box-shadow: inset 0 -1px rgba(0, 0, 0, .1);
-        }
-    }
-}
-
-.zone-landing-lists li {
-    padding: $content-vertical-spacing 0;
-    @include prevent-last-child-spacing(padding-bottom);
-}
-
-
-/*    Basic zone article pages */
-.zone-article-header {
-    padding: $grid-spacing 0;
-    overflow: hidden;
-
-    .zone-title {
-        @include heading-2();
-
-        a {
-            color: $blue-background-text-color;
-
-            font-family: $heading-font-family;
-            #{$selector-heading-font-fallback} {
-                font-family: $heading-font-family-fallback;
-            }
-        }
-    }
-
-    .zone-image {
-        @include bidi-style(right, 0, left, auto);
-        position: absolute;
-        top: 0;
-        display: block;
-        width: 200px;
-        height: 400px;
-        background-size: contain;
-        background-repeat: no-repeat;
-    }
-}
-
-.zone-content {
-    padding-top: 38px;
-    @include reverse-link-decoration();
-}
-
-.zone-subnav-container {
-    background: #fff;
-    margin-bottom: $grid-spacing;
-    position: relative;
-    z-index: 10;
-}
-
-.zone-callout {
-    position: relative;
-    padding: $grid-spacing;
-    background: $light-background-color;
-    margin: ($grid-spacing + ($grid-spacing / 2)) 0;
-
-    table {
-        width: 100%;
-    }
-
-    td {
-        vertical-align: bottom;
-        padding-right: $grid-spacing;
-    }
-}
-
-
-/* Styles specific to the Connect page (formerly the Developer Program page),
-   because it's a specific zone */
-.dev-program-block {
-    margin-bottom: ($grid-spacing * 2);
-    @include prevent-last-child-spacing('*', margin-bottom);
-
-    ul {
-        margin-bottom: 0;
-    }
-}
-
-.dev-program-first {
-    margin-top: ($grid-spacing * 4 * -1);
-}
-
-%dev-program-pad {
-    background: $light-background-color;
-    padding: ($grid-spacing);
-    @include prevent-last-child-spacing(p, margin-bottom);
-}
-
-.dev-program-callouts {
-    margin-left: $grid-margin;
-    margin-right: $grid-margin;
-
-    .dev-program-callout {
-        @extend %dev-program-pad;
-
-        h2 {
-            @include set-larger-font-size();
-        }
-    }
-}
-
-.stack-form {
-    margin-bottom: $content-block-margin;
-
-    input {
-        display: inline-block;
-        width: 90%;
-    }
-
-    .stack-icon {
-        width: 16px;
-        height: 16px;
-        display: inline-block;
-        background-image: url($path-to-images + 'stackoverflow.png');
-        margin-right: $icon-margin;
-    }
-}
-
-.dev-program-explanation {
-    @extend %dev-program-pad;
-}
-
-.dev-program-hacks {
-    h3 {
-        @include set-larger-font-size();
-        margin-bottom: 4px;
-    }
-
-    p {
-        color: #bbb;
-        @include set-smaller-font-size();
-        margin-bottom: 10px;
-
-        a {
-            color: #777;
-        }
-    }
-}
+/*
+These styles compliment the wiki styles when the page is a zone.
+********************************************************************** */
 
-.dev-program-events {
-    table.dev-program-table {
-        width: 100%;
-        border: 0;
 
-        td {
-            width: 33%;
-            border: 0;
-        }
-    }
-}
+@import 'zones/base';
 
-@media #{$media-query-tablet} {
-    .zone-landing {
-        .zone-subnav-container {
-            margin-top: 0;
-        }
 
-        .zone-landing-header-preview .column-strip,
-        .zone-landing-header-preview .masthead-text {
-            .zone-landing-header-preview-base {
-                position: static;
-            }
-        }
-    }
+/*
+Specialized styles for specific zones
+====================================================================== */
 
-    .zone-landing-header-preview {
-        .column-strip,
-        .masthead-text {
-            width: 48%;
-        }
-    }
+/* Apps */
+@import 'zones/components/initial-steps';
 
-    .zone-landing-header .zone-image,
-    .zone-article-header .zone-image {
-        opacity: .2;
-    }
-}
+/* Archive */
+@import 'zones/archive';
 
+/* B2G */
+@import 'zones/components/outer-apps-box';
 
-@media #{$media-query-mobile} {
-    .zone-landing-header .zone-image,
-    .zone-article-header .zone-image {
-        display: none;
-    }
+/* Connect */
+@import 'zones/connect';
 
-    .zone-landing h1 {
-        width: auto;
-    }
+/* MDN at 10 */
+@import 'zones/ten';
 
-    .zone-landing-header {
-        display: block;
-    }
-}
+/* Tools */
+@import 'zones/components/articulated-diagram';

kuma/static/styles/zones/addons.scss

@@ -0,0 +1,14 @@
+@import 'components/webext-summary-compat-table';
+
+.addon-sdk-api-name {
+    background-color: rgba(212, 221, 228, .15);
+    padding: 3px;
+}
+
+dd > dl.reference-values {
+    padding-left: 40px;
+}
+
+li.webextension-api-sidebar {
+    background-color: #f4f7f8;
+}

kuma/static/styles/zones/archive.scss

@@ -0,0 +1,6 @@
+/* set the article's background color to something obviously odd */
+body[data-slug^='Archive'] .wiki-main-content {
+    background-color: rgba(255, 217, 217, 1);
+    border: 20px solid #f00;
+    border-image: repeating-linear-gradient(-45deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 10px, rgba(255, 168, 0, 1) 10px, rgba(255, 168, 0, 1) 20px, rgba(255, 0, 0, 1) 20px) 20 20 repeat;
+}