Permalink
Browse files

Bug 942224: Migrate promote.css to Stylus

  • Loading branch information...
1 parent 000ed77 commit beeace4449eb4abcc5d4b30bec02227519b6ead2 @openjck openjck committed Nov 20, 2013
@@ -4,9 +4,11 @@
{% block title %}{{ page_title(_('Promote MDN')) }}{% endblock %}
-{% block extrahead %}
-<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/promote.css" />
-{% endblock %}
+{% if waffle.flag('redesign') %}
+ {% set styles = ('redesign-promote',) %}
+{% else %}
+ {% set styles = ('promote',) %}
+{% endif %}
{% block content %}
@@ -15,9 +17,12 @@
<header id="page-head">
<div class="wrap">
- {# <nav class="crumb"><a href="{{ url('promote') }}">{{ _('Back to Home') }}</a></nav> #}
- <h1 class="page-title">{{ _('Promote MDN') }}</h1>
- <h2 class="page-subtitle">{{ _('Spread some developer love.') }}</h2>
+ {% if waffle.flag('redesign') %}
+ <h1>{{ _('Promote MDN') }}</h1>
+ {% else %}
+ <h1 class="page-title">{{ _('Promote MDN') }}</h1>
+ {% endif %}
+ <h2>{{ _('Spread some developer love.') }}</h2>
{% trans %}
<ol>
<li><strong>Get Buttons:</strong> Use our simple form below to create a custom button and source code to promote MDN on your website or blog.</li>
@@ -38,7 +43,7 @@ <h2 class="page-subtitle">{{ _('Spread some developer love.') }}</h2>
</div>
<fieldset id="step-design" class="step">
- <h3><b>1</b> {{_('Pick your button style')}}</h3>
+ <h3>{{_('Choose a button style')}}</h3>
<ul>
<li>
<label for="button-design-betterdocs">
@@ -68,7 +73,7 @@ <h2 class="page-subtitle">{{ _('Spread some developer love.') }}</h2>
</fieldset>
<fieldset id="step-color" class="step">
- <h3><b>2</b> {{_('Choose a color')}}</h3>
+ <h3>{{_('Choose a color')}}</h3>
<ul>
<li class="gray">
<label for="button-color-gray">
@@ -92,7 +97,7 @@ <h2 class="page-subtitle">{{ _('Spread some developer love.') }}</h2>
</fieldset>
<fieldset id="step-topic" class="step">
- <h3><b>3</b>{{_('Replace <FOO> with')}}</h3>
+ <h3>{{_('Replace &lt;FOO&gt; with')}}</h3>
<ul>
<li>
<label for="button-topic-css">
@@ -122,7 +127,7 @@ <h2 class="page-subtitle">{{ _('Spread some developer love.') }}</h2>
</fieldset>
<section id="step-code" class="step">
- <h3><b>4</b> {{_('Add your custom button to your website')}}</h3>
+ <h3>{{_('Add your custom button to your website')}}</h3>
<h4>{{_('Your source code:')}}</h4>
<textarea id="button-code" cols="40" rows="7"></textarea>
<h4>{{_('Your button will take people to:')}}</h4>
View
Binary file not shown.
View
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
View
Binary file not shown.
View
View
Binary file not shown.
Binary file not shown.

Large diffs are not rendered by default.

Oops, something went wrong.
Binary file not shown.
Binary file not shown.
@@ -74,3 +74,14 @@
font-weight: bold;
font-style: normal;
}
+
+@font-face {
+ font-family: "Milk";
+ src: url('/media/redesign/fonts/ABTSmilk.eot');
+ src: url('/media/redesign/fonts/ABTSmilk.eot?#iefix') format('embedded-opentype'),
+ url('/media/redesign/fonts/ABTSmilk.woff') format('woff'),
+ url('/media/redesign/fonts/ABTSmilk.ttf') format('truetype'),
+ url('/media/redesign/fonts/ABTSmilk.svg#webfont') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
@@ -92,6 +92,12 @@ compat-important(prop, value) {
{prop}: value !important;
}
+/* Override an !important set by compat-important() with another !important.
+ This should be removed after all CSS has been migrated to Stylus. */
+override-compat-important(prop, value) {
+ compat-important(prop, value);
+}
+
/* used for style which are only present to override other styles -- these will be deleted once legacy design is gone */
compat-only(prop, value, more-selector = '') {
compat-important(prop, value);
@@ -0,0 +1,240 @@
+@import 'mixins'
+@import 'vars'
+
+/* Values used by all boxes. */
+box-padding = 20px;
+box-border-width = 1px;
+box-border = box-border-width solid #d8d4ca;
+box-border-hover-color = #25a;
+selection-border-width = 2px;
+
+/* Values used by "step" boxes (choose a color, choose a technology, etc.). */
+step-box-width = 620px;
+step-box-total-width = (step-box-width + (box-padding * 2) + (box-border-width * 2));
+
+/* Values used for image alignment, and other alignment that is based on image alignment. */
+number-of-images = 4;
+img-width = 120px;
+img-nohover-padding = 1px;
+/* Some messy math here. Basically, this is the space available in #step-design
+ after the widths, margins, paddings, and borders of children elements are
+ taken into consideration, divided by the number of margins needed. */
+img-margin-right = ((step-box-width - (img-width * number-of-images) - ((img-nohover-padding + selection-border-width + box-border-width) * 2 * number-of-images)) / (number-of-images - 1));
+
+/* Values used by the preview box that floats off to the right. */
+preview-box-width = img-width;
+preview-box-left-margin = 10px;
+preview-box-total-width = (preview-box-width + (box-padding * 2) + (box-border-width * 2));
+
+#promote-buttons {
+ #page-head {
+ text-align: center;
+
+ ol {
+ list-style-position: inside;
+ list-style-type: decimal;
+ margin: grid-spacing 0;
+ text-align: left;
+ }
+
+ h1 {
+ margin-bottom: 2px;
+ }
+
+ h2 {
+ font-weight: normal;
+ }
+ }
+
+ section {
+ padding-top: 0;
+ }
+}
+
+#button-builder {
+ margin: 0 auto;
+ overflow: hidden;
+
+ /* Make the box wide enough to contain the entire step box, the entire
+ preview box, and the desired amount of space between them. */
+ width: (step-box-total-width + preview-box-left-margin + preview-box-total-width);
+
+ .step {
+ border: box-border;
+ margin: 0 0 10px;
+ padding: box-padding;
+ vendorize-value(background, linear-gradient, '(top, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 80%)');
+ width: step-box-width;
+ }
+
+ h3, h4, label {
+ font-size: 16px;
+ }
+
+ h4 {
+ margin-top: 12px;
+ margin-bottom: @margin-top;
+ }
+
+ li {
+ float: left;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ h3, h4 {
+ /* Use the same margin that is used by images, so that the left
+ edge of the image and the left edge of the heading line up. */
+ margin-left: selection-border-width;
+ }
+
+ h3 {
+ font-weight: bold;
+ letter-spacing: .5px;
+ }
+
+ input {
+ position: absolute;
+ left: -9999px;
+ }
+
+ label {
+ cursor: pointer;
+ display: block;
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+ }
+}
+
+
+/*
+ Every list item in #step-design contains an image. Every list item in every
+ other section contains text only. We need to keep this in mind when applying
+ shadows.
+
+ We could just apply the shadow to list items across the board, but that
+ would make the "selected" border show up in the wrong place for
+ #step-design selections.
+*/
+#step-color li, #step-topic li, #step-design img {
+ box-shadow: 2px 2px 2px rgba(0,0,0,.1);
+}
+
+#step-design {
+ li {
+ margin-right: img-margin-right;
+ overflow: hidden;
+ }
+
+ img {
+ border: box-border;
+ display: block;
+ margin: selection-border-width;
+ padding: img-nohover-padding;
+ }
+
+ img:hover, li.selected img {
+ border-color: box-border-hover-color;
+
+ /* Swap some spacing around, so that a border can be added without
+ changing the overall size of the box. Nifty. */
+ border-width: selection-border-width;
+ margin: img-nohover-padding;
+ }
+}
+
+#step-color, #step-topic {
+ li {
+ border: box-border;
+ padding: 2px;
+ width: img-width;
+
+ /* Very similar to what we do with img-margin-right above. We assume
+ that four list items are shown so that even if fewer list items are
+ shown, they all lign up with the images in #step-design. Neato. */
+ margin-right: ((step-box-width - (box-border * 2 * number-of-images) - (@padding * 2 * number-of-images) - (@width * 4)) / (number-of-images - 1));
+ }
+
+ label {
+ color: #fff;
+ display: block;
+ overflow: hidden;
+ padding: 8px 10px;
+ text-align: center;
+ text-shadow: 0 0 3px rgba(0,0,0,.5), 1px 1px 0 #000;
+ text-transform: uppercase;
+ }
+
+ li:hover, li.selected {
+ border-color: box-border-hover-color;
+ border-width: selection-border-width;
+ width: img-width - @border-width; /* Make room for the border. */
+
+ label {
+ margin: -1px;
+ }
+ }
+
+ .gray, .Gray {
+ label {
+ background: #443f3e;
+ }
+ }
+
+ .orange, .Orange {
+ label {
+ background: #f16a22;
+ }
+ }
+
+ .red, .Red {
+ label {
+ background: #ec2224;
+ }
+ }
+}
+
+#step-topic {
+ label {
+ text-transform: none;
+ letter-spacing: 1px;
+
+ /* Font face and other font settings are set to resemble the fonts
+ shown in the static images as closely as possible. */
+ font: normal 18px/1 "Milk", sans-serif;
+ }
+}
+
+#button-code {
+ font: 12px monospace;
+ height: 80px;
+ padding: 5px;
+ width: step-box-width - (@padding * 2);
+}
+
+#button-preview {
+ width: preview-box-width;
+ override-compat-important(padding, box-padding);
+ override-compat-important(border, box-border);
+
+ /* Thanks to the #button-builder width we set above, there should be
+ preview-box-margin-left amount of space on the left of this box after
+ it is floated right. */
+ float: right;
+
+ &.fixed {
+ override-compat-important(margin-left, (step-box-total-width + preview-box-left-margin));
+ position: fixed;
+ z-index: 99;
+ top: 20px;
+ }
+}
+
+#button-image {
+ display: block;
+}
@@ -15,7 +15,7 @@ if [ ! -d "$CSSDIR" ]; then
mkdir $CSSDIR
fi
-FILENAMES=(main wiki demo-studio profile search zones home wiki-syntax users no-js err404)
+FILENAMES=(main wiki demo-studio profile search zones home wiki-syntax users no-js err404 promote)
STYLESHEETS=$(printf "$STYLUSDIR/%s.styl " "${FILENAMES[@]}")
if [ $WATCH ]; then
echo Watching and automatically compiling stylesheets
View
@@ -626,6 +626,9 @@ def JINJA_CONFIG():
'js/prism-mdn/plugins/line-numbering/prism-line-numbering.css',
'js/prism-mdn/components/prism-json.css',
),
+ 'promote': (
+ 'css/promote.css',
+ ),
'redesign-main': (
'redesign/css/main.css',
'redesign/css/zones.css',
@@ -651,6 +654,9 @@ def JINJA_CONFIG():
'redesign-wiki-syntax': (
'redesign/css/wiki-syntax.css',
),
+ 'redesign-promote': (
+ 'redesign/css/promote.css',
+ ),
},
'js': {
'mdn': (

0 comments on commit beeace4

Please sign in to comment.