Permalink
Browse files

Build out more of the Contribute page and base styles

  • Loading branch information...
1 parent 2304b34 commit 352e48c48259cbca8bc20a40ab336d5a541a259c @sgarrity sgarrity committed Feb 16, 2012
@@ -1,13 +1,107 @@
{% extends "base.html" %}
+{% block page_title %}Get Involved: Volunteer Opportunities at Mozilla{% endblock %}
{% block body_id %}contribute{% endblock %}
-{% block site_css %}
+{% block extrahead %}
+ {{ css('video') }}
{{ css('contribute') }}
{% endblock %}
+{% block js %}
+ {{ js('video') }}
+ {{ js('pager') }}
+{% endblock %}
+
{% block content %}
-xyz
+<div id="main-content">
+
+ <h1 class="large">Get involved with Mozilla</h1>
+
+ <nav class="menu-bar">
+ <ul>
+ <li><a href="/contribute/areas.html">Area of Interest</a></li>
+ <li><a href="/contribute/local/">Location</a></li>
+ <li><a href="/contribute/timeavailable.html">Time Available</a></li>
+ </ul>
+ </nav>
+
+ <section id="welcome">
+ <div id="welcome-video" class="mozilla-video-control">
+ <video
+ width="640"
+ height="360"
+ poster="/media/img/contribute/poster-brand.jpg"
+ controls="controls">
+ <source src="//videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.webm" type="video/webm" />
+ <source src="//videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.theora.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;" />
+ <source src="//http://videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.mp4" type="video/mp4" />
+ <object type="application/x-shockwave-flash"
+ style="width: 640px; height: 388px;"
+ data="/media/flash/playerWithControls.swf?flv=brand/Mozilla_Firefox_Manifesto_v0.2_640.mp4&amp;autoplay=false&amp;msg=Play%20Video">
+ <param name="movie" value="/media/flash/playerWithControls.swf?flv=brand/Mozilla_Firefox_Manifesto_v0.2_640.mp4&amp;autoplay=false&amp;msg=Play%20Video" />
+ <param name="wmode" value="transparent" />
+
+ <div class="video-player-no-flash">
+ This video requires a browser with support for open video
+ or the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a>.
+ </div>
+ </object>
+ </video>
+ </div>
+ <p>
+ You don’t have to be a C++ guru (or even know what that means!) to get involved.
+ <b>You just have to love the Web.</b>
+ </p>
+ </section>
+
+ <form action="#" id="help-form" class="row">
+ <div class="span3">
+ <h3>Want to help?</h3>
+ </div>
+ <div class="span2">
+ <input type="email" placeholder="YOUR EMAIL ADDRESSS">
+ </div>
+ <div class="span2">
+ <select>
+ <option disabled="disabled" selected="selected" value="">Area of interest?</option>
+ </select>
+ </div>
+ <div class="span2">
+ <input type="submit" class="button-blue" value="Sign me up »">
+ </div>
+ </form>
+
+ <section id="opportunities">
+
+ <h1>Find an opportunity</h1>
+
+ <div class="pager pager-with-tabs">
+ <ul>
+ <li><a href="#location">Location</a></li>
+ <li><a href="#interest">Interest</a></li>
+ <li><a href="#all">all</a></li>
+ </ul>
+ <div class="pager-content">
+ <div class="location-content default-page" id="location">
+ <script>// <![CDATA[
+ document.getElementById('bio-baker').id = 'page-bio-baker';
+ // ]]></script>
+ <p>Location content!</p>
+ </div>
+ <div class="interest-content default-page" id="interest">
+ <script>// <![CDATA[
+ document.getElementById('bio-baker').id = 'page-bio-baker';
+ // ]]></script>
+ <p>Interest content!</p>
+ </div>
+ </div>
+ </div>
+
+
+ </section>
+
+</div>
{% endblock %}
View
@@ -0,0 +1,47 @@
+@import "sandstone/variables.less";
+@import "sandstone/mixins.less";
+
+#contribute {
+
+ h1.large {
+ text-align: center;
+ margin: @baseLine * 2 auto;
+ }
+
+ #welcome-video {
+ max-width: 640px;
+ margin: 0 auto;
+ padding-bottom: 15px;
+ background-image: url(/media/img/sandstone/video/shadow.png);
+ background-repeat: no-repeat;
+ background-position: 50% 100%;
+ background-size: 100% 15px;
+ padding-bottom: 15px;
+ video {
+ max-width: 640px;
+ width: 100%;
+ height: auto;
+ }
+ }
+
+ #welcome p {
+ .open-sans;
+ font-weight: 300;
+ font-size: 22px;
+ line-height: 120%;
+ margin: @baseLine;
+ text-align: center;
+ b {
+ white-space: nowrap;
+ font-weight: 400;
+ }
+ }
+
+ #help-form {
+ background: #fff;
+ padding: @baseLine 0;
+ .box-shadow(0 1px rgba(0,0,0,0.1);
+ margin-bottom: @baseLine * 2;
+ }
+
+}
@@ -3,14 +3,15 @@
.inline-block;
.box-shadow(@buttonShadow);
background-color: @buttonGreen;
- #gradient > .vertical(@buttonGreen, #659C28);
+ #gradient > .vertical(@buttonGreen, @buttonGreenDark);
color: @buttonTextColor;
text-align: center;
font-size: 14px;
padding: 0 @baseLine;
height: @baseLine * 2;
line-height: @baseLine * 2;
text-decoration: none;
+ border: 0;
.open-sans;
.transition();
@@ -28,3 +29,13 @@
.transition();
}
}
+
+.button-blue {
+ .button;
+ background-color: @buttonBlue;
+ #gradient > .vertical(@buttonBlue, @buttonBlueDark);
+
+ &:hover {
+ .box-shadow(@buttonBlueShadowHover);
+ }
+}
@@ -179,6 +179,33 @@ li {
}
/* }}} */
+/* {{{ Menu Bars */
+
+.menu-bar {
+ background: #fff;
+ line-height: @baseLine * 3;
+ text-align: center;
+ .box-shadow(0 1px rgba(0,0,0,0.1);
+ .open-sans;
+ font-weight: 300;
+
+ ul {
+ margin: 0 0 @baseLine * 2 0;
+ li {
+ .inline-block;
+ margin: 0;
+ a {
+ border-left: 1px solid @borderColor;
+ padding: @baseLine / 3 @baseLine;
+ }
+ &:first-child a {
+ border-left: 0;
+ }
+ }
+ }
+}
+
+/* }}} */
/* {{{ Sidebar */
#sidebar {
@@ -6,12 +6,18 @@
@linkBlue: rgb(103,167,208);
@buttonGreen: #81bc2e;
-@buttonSecondary: darken(@buttonGreen, 35%);
+@buttonGreenDark: darken(@buttonGreen, 35%);
@buttonTextColor: #fff;
+@buttonBlue: #3c88cc;
+@buttonBlueDark: darken(@buttonBlue, 15%);
+
@buttonShadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2);
@buttonShadowHover: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px saturate(@buttonGreen, 10%);
+@buttonBlueShadowHover: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px saturate(@buttonBlue, 10%);
@buttonShadowActive: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2);
+@borderColor: #d6d6d6;
+
@baseFontSize: 16px;
@baseFontFamily: Georgia, serif;
@baseLine: 24px;
@@ -0,0 +1,123 @@
+@import "variables.less";
+@import "mixins.less";
+
+/* {{{ Video Control */
+
+.mozilla-video-control {
+ position: relative;
+}
+
+a.mozilla-video-control-overlay {
+ top: 0;
+ left: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: 0.25;
+ display: none;
+ text-align: center;
+ background: transparent url(/media/img/sandstone/video/play.png) center center no-repeat;
+}
+
+/* }}} */
+/* {{{ Video Launcher */
+
+.mozilla-video-player-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background: #444;
+ background: -webkit-gradient(radial,center center,0,center center,100%,from(#fff), to(#000));
+ background: -webkit-radial-gradient(center center, rgba(255,255,255,1) 0, rgba(0,0,0,0.9) 100%);
+ background: -moz-radial-gradient(center center, rgba(255,255,255,1) 0, rgba(0,0,0,0.9) 100%);
+ background: radial-gradient(center center, rgba(255,255,255,1) 0, rgba(0,0,0,0.9) 100%);
+ z-index: 500;
+ outline: 0;
+ cursor: default;
+}
+
+.mozilla-video-player-window {
+ position: fixed;
+ left: 50%; /* for centering */
+ margin-left: -320px; /* for centering */
+ top: 0;
+ width: 640px;
+ z-index: 1000;
+ background: #333;
+ background: rgba(0,0,0,0.8);
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ border-radius: 8px;
+ -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8); /* ye-olde WebKit */
+ -webkit-box-shadow: 0 3px 70px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0,0,0,0.5);
+ -moz-box-shadow: 0 3px 70px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0,0,0,0.5);
+ box-shadow: 0 3px 70px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0,0,0,0.5);
+}
+
+.mozilla-video-player-content {
+ overflow: hidden;
+}
+
+* html .mozilla-video-player-window {
+}
+
+.mozilla-video-player-content video {
+ display: block;
+}
+
+.mozilla-video-player-no-flash {
+ width: 600px;
+ height: 260px;
+ margin: auto;
+ padding: 100px 20px 0 20px;
+ text-align: left;
+}
+
+.mozilla-video-player-link,
+.mozilla-video-player-close {
+ text-align: right;
+}
+
+.mozilla-video-player-link a,
+.mozilla-video-player-close a {
+ display: block;
+ height: 32px;
+ width: 32px;
+ margin: 0 0 0 auto;
+ overflow: hidden;
+ line-height: 200px;
+ background: url(/media/img/sandstone/video/clothes-lol.png) no-repeat 50% 50%;
+}
+
+.mozilla-video-player-link a {
+ padding-right: 10px;
+ background: none;
+}
+
+.mozilla-video-player-content .video-download-links {
+ text-align: center;
+ font-family: "Trebuchet MS",sans-serif;
+ font-size: 11px;
+}
+
+.mozilla-video-player-content .video-download-links ul {
+ margin: 0;
+ padding: 1em;
+}
+
+.mozilla-video-player-content .video-download-links ul li {
+ background: none;
+ display: inline;
+ margin: 0 0.5em;
+}
+
+.mozilla-video-player-content .video-download-links a,
+.mozilla-video-player-content .video-download-links a:link,
+.mozilla-video-player-content .video-download-links a:hover {
+ color: #888;
+}
+
+/* }}} */
+
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 352e48c

Please sign in to comment.