зеркало из https://github.com/mozilla/bedrock.git
Merge pull request #284 from craigcook/responsify-mozorg
Responsify mozorg pages
This commit is contained in:
Steven Garrity
Коммит
2b9548a76f
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "mozorg/base.html" %}
|
||||
{% extends "mozorg/base-resp.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "/mozorg/base.html" %}
|
||||
{% extends "/mozorg/base-resp.html" %}
|
||||
|
||||
{% block page_title %}Get to Know Mozilla{% endblock %}
|
||||
{% block body_id %}about{% endblock %}
|
||||
|
|
|
|||
|
|
@ -267,3 +267,7 @@
|
|||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block site_js %}
|
||||
{{ js('mozorg-resp') }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,9 @@
|
|||
</ul>
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
<fieldset>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-column-1">
|
||||
<h3>{{_('Want to help?')}}</h3>
|
||||
</div>
|
||||
|
|
@ -43,11 +45,9 @@
|
|||
{{ form.interest|safe }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-submit">
|
||||
<input type="submit" class="button-blue" id="form-submit" value="{{_('Submit »')}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="form-details">
|
||||
|
||||
<div class="form-row" id="form-details">
|
||||
<div class="form-column-1">
|
||||
<p>{{_('Send us a note and we can get you started right away.')}}</p>
|
||||
</div>
|
||||
|
|
@ -70,7 +70,13 @@
|
|||
{{ form.captcha }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<div class="form-submit">
|
||||
<input type="submit" class="button-blue" id="form-submit" value="{{_('Submit »')}}">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
{% else %}
|
||||
<div id="help-form" class="billboard thank">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
{% extends "sand.html" %}
|
||||
{% extends "base-resp.html" %}
|
||||
|
||||
{% block page_title %}{{_('Contribute to our sites')}}{% endblock %}
|
||||
{% block body_id %}contribute-page{% endblock %}
|
||||
{% block body_class %}sand{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{{ css('contribute-page') }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "mozorg/base.html" %}
|
||||
{% extends "mozorg/base-resp.html" %}
|
||||
|
||||
{% block page_title %}{{_('Get Involved: Volunteer Opportunities at Mozilla')}}{% endblock %}
|
||||
{% block body_id %}contribute{% endblock %}
|
||||
|
|
@ -117,37 +117,37 @@
|
|||
<ul>
|
||||
<li class="row">
|
||||
<a href="/contribute/local/northamerica.html">
|
||||
<img src="/media/img/contribute/local/map-th-northamerica.png" alt="{{_('map')}}">
|
||||
<img src="/media/img/contribute/local/map-th-northamerica.png" alt="">
|
||||
<h3>{{_('US and Canada')}}</h3>
|
||||
</a>
|
||||
</li>
|
||||
<li class="row">
|
||||
<a href="/contribute/local/europe.html">
|
||||
<img src="/media/img/contribute/local/map-th-europe.png" alt="{{_('map')}}">
|
||||
<img src="/media/img/contribute/local/map-th-europe.png" alt="">
|
||||
<h3>{{_('Europe')}}</h3>
|
||||
</a>
|
||||
</li>
|
||||
<li class="row">
|
||||
<a href="/contribute/local/latinamerica.html">
|
||||
<img src="/media/img/contribute/local/map-th-latinamerica.png" alt="{{_('map')}}">
|
||||
<img src="/media/img/contribute/local/map-th-latinamerica.png" alt="">
|
||||
<h3>{{_('Latin America')}}</h3>
|
||||
</a>
|
||||
</li>
|
||||
<li class="row">
|
||||
<a href="/contribute/local/africamideast.html">
|
||||
<img src="/media/img/contribute/local/map-th-africamideast.png" alt="{{_('map')}}">
|
||||
<img src="/media/img/contribute/local/map-th-africamideast.png" alt="">
|
||||
<h3>{{_('Africa and the Middle East')}}</h3>
|
||||
</a>
|
||||
</li>
|
||||
<li class="row">
|
||||
<a href="/contribute/local/asia.html">
|
||||
<img src="/media/img/contribute/local/map-th-asia.png" alt="{{_('map')}}">
|
||||
<img src="/media/img/contribute/local/map-th-asia.png" alt="">
|
||||
<h3>{{_('Asia and the South Pacific')}}</h3>
|
||||
</a>
|
||||
</li>
|
||||
<li class="row">
|
||||
<a href="/contribute/local/southpole.html">
|
||||
<img src="/media/img/contribute/local/map-th-southpole.png" alt="{{_('map')}}">
|
||||
<img src="/media/img/contribute/local/map-th-southpole.png" alt="">
|
||||
<h3>{{_('Antarctica')}}</h3>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "sandstone/variables.less";
|
||||
@import "sandstone/mixins.less";
|
||||
@import "sandstone/variables-resp.less";
|
||||
@import "sandstone/mixins-resp.less";
|
||||
|
||||
#main-content {
|
||||
|
||||
|
|
@ -9,12 +9,11 @@
|
|||
|
||||
.intro {
|
||||
.span(4);
|
||||
margin-left: 0;
|
||||
padding-top: @baseLine;
|
||||
}
|
||||
|
||||
ul.links {
|
||||
.span(3);
|
||||
.span(4);
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
|
|
@ -36,3 +35,62 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
/* Tablet Layout: 760px */
|
||||
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
|
||||
|
||||
#main-content {
|
||||
.intro {
|
||||
.span_narrow(4);
|
||||
}
|
||||
|
||||
ul.links {
|
||||
.span_narrow(4);
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Mobile layout: 320px */
|
||||
@media only screen and (max-width: @breakTablet) {
|
||||
|
||||
#main-content {
|
||||
margin-bottom: @baseLine;
|
||||
.intro {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
ul.links {
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Wide mobile layout: 480px; */
|
||||
@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
|
||||
|
||||
#main-content {
|
||||
.intro {
|
||||
.span(2);
|
||||
}
|
||||
|
||||
ul.links {
|
||||
.span(3);
|
||||
float: right;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
padding-top: @baseLine;
|
||||
padding-bottom: @baseLine;
|
||||
margin-bottom: @baseLine * 2;
|
||||
|
||||
fieldset,
|
||||
.form-row {
|
||||
width: (@gridColumnWidth * 10) + (@gridGutterWidth * 10);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.form-column-1 {
|
||||
.span(2);
|
||||
|
|
@ -12,22 +18,23 @@
|
|||
}
|
||||
|
||||
.form-column-2 {
|
||||
.span(3);
|
||||
.span(4);
|
||||
}
|
||||
|
||||
.form-column-3 {
|
||||
.span(3);
|
||||
.span(4);
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
.span(2);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.field-interest {
|
||||
min-height: 36px;
|
||||
select {
|
||||
margin-top: 4px;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,11 +44,12 @@
|
|||
|
||||
textarea,
|
||||
input[type=email] {
|
||||
width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - 20px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
width: (@gridColumnWidth * 2) + (@gridGutterWidth);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.field-newsletter label,
|
||||
|
|
@ -69,3 +77,50 @@
|
|||
}
|
||||
|
||||
.js #form-details { display: none; }
|
||||
|
||||
/* Tablet Layout: 760px */
|
||||
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
|
||||
|
||||
#help-form {
|
||||
fieldset,
|
||||
.form-row {
|
||||
width: (@gridColumnWidthNarrow * 10) + (@gridGutterWidth * 10);
|
||||
float: left;
|
||||
}
|
||||
.form-column-1,
|
||||
.form-submit {
|
||||
.span_narrow(2);
|
||||
}
|
||||
.form-column-2,
|
||||
.form-column-3 {
|
||||
.span_narrow(4);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Layout: 320px */
|
||||
@media only screen and (max-width: @breakTablet) {
|
||||
|
||||
#help-form {
|
||||
padding-left: @gridGutterWidth;
|
||||
padding-right: @gridGutterWidth;
|
||||
fieldset,
|
||||
.form-row {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.form-column-1,
|
||||
.form-column-2,
|
||||
.form-column-3,
|
||||
.form-submit {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin: 0 0 .5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,56 @@
|
|||
@import "sandstone/variables.less";
|
||||
@import "sandstone/mixins.less";
|
||||
@import "sandstone/variables-resp.less";
|
||||
@import "sandstone/mixins-resp.less";
|
||||
@import "contribute-form.less";
|
||||
|
||||
#contribute-page {
|
||||
#main-feature {
|
||||
padding-top: @baseLine;
|
||||
padding-bottom: @baseLine;
|
||||
padding: @baseLine (@gridGutterWidth * 1.5);
|
||||
}
|
||||
#main-content p {
|
||||
.span(7);
|
||||
margin-left: 0;
|
||||
.span(8);
|
||||
clear: left;
|
||||
margin: 0 (@gridGutterWidth / 2) @baseLine;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Layout: 760px */
|
||||
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
|
||||
|
||||
#contribute-page {
|
||||
#main-content p {
|
||||
.span_narrow(10);
|
||||
margin: 0 (@gridGutterWidth / 2) @baseLine;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Mobile layout: 320px */
|
||||
@media only screen and (max-width: @breakTablet) {
|
||||
|
||||
#contribute-page {
|
||||
#main-feature {
|
||||
padding: @baseLine @gridGutterWidth;
|
||||
}
|
||||
#main-content p {
|
||||
width: auto;
|
||||
margin: 0 (@gridGutterWidth / 2) @baseLine;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Wide Mobile Layout: 480px */
|
||||
@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
|
||||
|
||||
#contribute-page {
|
||||
#main-feature {
|
||||
padding: @baseLine 0;
|
||||
}
|
||||
#main-content p {
|
||||
width: auto;
|
||||
margin: 0 0 @baseLine;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import "sandstone/variables.less";
|
||||
@import "sandstone/mixins.less";
|
||||
@import "sandstone/variables-resp.less";
|
||||
@import "sandstone/mixins-resp.less";
|
||||
@import "contribute-form.less";
|
||||
|
||||
#contribute {
|
||||
|
|
@ -34,9 +34,17 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
li.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#opportunities {
|
||||
padding-bottom: @baseLine * 2;
|
||||
.container {
|
||||
padding-left: @gridGutterWidth * 1.5;
|
||||
padding-right: @gridGutterWidth * 1.5;
|
||||
}
|
||||
nav {
|
||||
background: #f0ece3;
|
||||
border: 1px solid rgba(0,0,0,0.03);
|
||||
|
|
@ -89,35 +97,34 @@
|
|||
.border-radius;
|
||||
.box-shadow(0 2px 4px rgba(0,0,0,0.1));
|
||||
float: left;
|
||||
margin: @baseLine 0 @baseLine @gridGutterWidth;
|
||||
margin: @baseLine 10px @baseLine 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
float: left;
|
||||
margin: @baseLine * 1.25 @gridGutterWidth @baseLine @gridGutterWidth;
|
||||
width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2);
|
||||
.span(3);
|
||||
margin-top: @baseLine * 1.25;
|
||||
}
|
||||
|
||||
.content {
|
||||
float: left;
|
||||
margin: @baseLine 0 0 0;
|
||||
width: (@gridColumnWidth * 6) + (@gridGutterWidth * 5);
|
||||
.span(7);
|
||||
margin-top: @baseLine * 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
.location-content section {
|
||||
li {
|
||||
.location-content {
|
||||
li.row {
|
||||
float: left;
|
||||
margin-right: @gridGutterWidth;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 142px;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2);
|
||||
margin: @baseLine * 2 0 0 @gridGutterWidth;
|
||||
margin: (@baseLine * 2) 0 0 (@gridGutterWidth / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -141,3 +148,129 @@
|
|||
|
||||
.js #form-details { display: none; }
|
||||
|
||||
/* Tablet Layout: 760px */
|
||||
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
|
||||
|
||||
|
||||
#contribute {
|
||||
#opportunities {
|
||||
section {
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
.span_narrow(4);
|
||||
margin-top: @baseLine * 1.25;
|
||||
}
|
||||
|
||||
.content {
|
||||
.span_narrow(7);
|
||||
margin-top: @baseLine;
|
||||
}
|
||||
}
|
||||
|
||||
.location-content {
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
width: (@gridColumnWidthNarrow * 3) + (@gridGutterWidth * 2);
|
||||
margin: (@baseLine * 1.5) 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Mobile Layout: 320px */
|
||||
@media only screen and (max-width: @breakTablet) {
|
||||
|
||||
#contribute {
|
||||
#opportunities {
|
||||
.container {
|
||||
padding-left: @gridGutterWidth;
|
||||
padding-right: @gridGutterWidth;
|
||||
}
|
||||
section {
|
||||
img {
|
||||
float: left;
|
||||
}
|
||||
h3 {
|
||||
width: auto;
|
||||
}
|
||||
.content {
|
||||
width: auto;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.location-content {
|
||||
li.row {
|
||||
margin: 0 0 (@baseLine * 1.5);
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
float: none;
|
||||
margin: 0 auto .5em;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
h5 {
|
||||
display: block;
|
||||
margin: 0 0 .5em;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0 3px .25em 0;
|
||||
}
|
||||
a {
|
||||
padding: 0 8px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
#newsletter-form {
|
||||
.field-email input {
|
||||
width: 260px;
|
||||
}
|
||||
.field-country select {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Wide Mobile Layout: 480px */
|
||||
@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
|
||||
|
||||
#contribute {
|
||||
#opportunities .location-content {
|
||||
li.row {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
float: left;
|
||||
margin: @baseLine (@gridGutterWidth / 2);
|
||||
}
|
||||
h3 {
|
||||
width: (@gridColumnWidthNarrow * 4) + (@gridGutterWidth * 3);
|
||||
float: left;
|
||||
text-align: left;
|
||||
margin: (@baseLine * 1.5) 0 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
@import "sandstone/variables.less";
|
||||
@import "sandstone/mixins.less";
|
||||
@import "sandstone/variables-resp.less";
|
||||
@import "sandstone/mixins-resp.less";
|
||||
|
||||
.main-column {
|
||||
.span(7);
|
||||
.span(8);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.span(3);
|
||||
.offset(1);
|
||||
}
|
||||
|
||||
#welcome-video {
|
||||
margin: @baseLine auto;
|
||||
width: 640px;
|
||||
max-width: 100%;
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
|
@ -19,3 +21,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Tablet Layout: 760px */
|
||||
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
|
||||
|
||||
.main-column {
|
||||
.span_narrow(9);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.span_narrow(3);
|
||||
.offset(0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Mobile layout: 320px */
|
||||
@media only screen and (max-width: @breakTablet) {
|
||||
|
||||
.main-column,
|
||||
.sidebar {
|
||||
width: auto;
|
||||
.offset(0);
|
||||
}
|
||||
|
||||
#welcome-video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -582,9 +582,8 @@ nav.menu-bar {
|
|||
margin: 1em 0 0;
|
||||
|
||||
.row {
|
||||
width: @gridRowWidth;
|
||||
width: @gridRowWidth + @gridGutterWidth;
|
||||
margin: 0 auto;
|
||||
padding: 0 @gridGutterWidth;
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
|
|
@ -650,6 +649,10 @@ nav.menu-bar {
|
|||
.container {
|
||||
width: @widthTablet - (@gridGutterWidth * 2);
|
||||
}
|
||||
|
||||
nav.menu-bar {
|
||||
font-size: .9375em;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.offset(0);
|
||||
|
|
@ -672,9 +675,7 @@ nav.menu-bar {
|
|||
|
||||
#colophon {
|
||||
.row {
|
||||
width: @gridRowWidthTablet;
|
||||
padding-left: @gridGutterWidth / 2;
|
||||
padding-right: @gridGutterWidth / 2;
|
||||
width: @gridRowWidthTablet + @gridGutterWidth;
|
||||
}
|
||||
.footer-logo {
|
||||
.span_narrow(4);
|
||||
|
|
@ -750,6 +751,7 @@ nav.menu-bar {
|
|||
}
|
||||
|
||||
nav.breadcrumbs {
|
||||
margin-left: 0;
|
||||
a,
|
||||
span {
|
||||
margin-right: .3em;
|
||||
|
|
@ -802,6 +804,7 @@ nav.menu-bar {
|
|||
padding-bottom: @baseLine / 2;
|
||||
li {
|
||||
display: block;
|
||||
padding: 0;
|
||||
a {
|
||||
padding: @baseLine / 2;
|
||||
border: 0;
|
||||
|
|
@ -831,7 +834,7 @@ nav.menu-bar {
|
|||
|
||||
#colophon {
|
||||
.row {
|
||||
width: auto;
|
||||
width: @gridRowWidthMobile + @gridGutterWidth;
|
||||
padding: 0;
|
||||
}
|
||||
.footer-logo,
|
||||
|
|
@ -972,7 +975,7 @@ nav.menu-bar {
|
|||
.container,
|
||||
.main-column,
|
||||
.sidebar {
|
||||
width: @widthMobileLandscape - @gridGutterWidth;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.main-column,
|
||||
|
|
@ -983,7 +986,7 @@ nav.menu-bar {
|
|||
|
||||
#colophon {
|
||||
.row {
|
||||
width: auto;
|
||||
width: @widthMobileLandscape - @gridGutterWidth;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,9 @@
|
|||
@gridColumnsMobile: 5;
|
||||
@gridRowWidthMobile: (@gridColumnsMobile * @gridColumnWidthNarrow) + (@gridGutterWidth * (@gridColumnsMobile - 1));
|
||||
|
||||
@gridRowWidthMobileWide: (@gridColumnsMobile * @gridColumnWidth) + (@gridGutterWidth * (@gridColumnsMobile - 1));
|
||||
// Mobile landscape grid: 7 columns at 40px
|
||||
@gridColumnsMobileWide: 7;
|
||||
@gridRowWidthMobileWide: (@gridColumnsMobileWide * @gridColumnWidthNarrow) + (@gridGutterWidth * (@gridColumnsMobileWide - 1));
|
||||
|
||||
// Breakpoints for common devices
|
||||
@breakDesktop: 1000px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
@import "variables-resp.less";
|
||||
@import "mixins-resp.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;
|
||||
}
|
||||
|
||||
.mozilla-video-shadow {
|
||||
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 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;
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
|
||||
|
|
@ -357,7 +357,7 @@ NavMain.openSmallMenu = function()
|
|||
}
|
||||
|
||||
$('#nav-main-menu')
|
||||
.slideToggle(150)
|
||||
.slideDown(150)
|
||||
.removeAttr('aria-hidden');
|
||||
|
||||
$('#nav-main .toggle').addClass('open');
|
||||
|
|
|
|||
|
|
@ -78,68 +78,8 @@ $(document).ready(function() {
|
|||
});
|
||||
});
|
||||
|
||||
if ( $(window).width() <= 760 ) {
|
||||
|
||||
// mobile dropdown menu
|
||||
$("#nav-main .toggle").click(function() {
|
||||
if ( $("#nav-main-menu").is(":visible") ) {
|
||||
$("#nav-main-menu:visible").slideUp(100).attr("aria-expanded", "false");
|
||||
$("#nav-main .toggle.open").removeClass("open");
|
||||
}
|
||||
else {
|
||||
$("#nav-main-menu").slideToggle(150).attr("aria-expanded", "true");
|
||||
$(this).toggleClass("open");
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#nav-main-menu a[aria-haspopup='true']").click(function(){
|
||||
if ( $(this).next(".submenu").is(":visible") ) {
|
||||
$(this).next(".submenu").slideUp(100).attr("aria-expanded", "false");
|
||||
}
|
||||
else {
|
||||
$(this).next(".submenu").slideDown(150).attr("aria-expanded", "true");
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/*
|
||||
// Hide menu when anything else is clicked
|
||||
$(document).bind('click', function(e) {
|
||||
var $clicked = $(e.target);
|
||||
if (! $clicked.parents("#nav-main"))
|
||||
$("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-expanded", "false");
|
||||
$("#nav-main .toggle").removeClass("open");
|
||||
});
|
||||
|
||||
// or gets focus
|
||||
$("a, input, textarea, button, :focus").bind('focus', function(e) {
|
||||
var $focused = $(e.target);
|
||||
if (! $focused.parents("#nav-main")) {
|
||||
$("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-expanded", "false");
|
||||
$("#nav-main .toggle").removeClass("open");
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
} // endif
|
||||
|
||||
// reset the menu for wider windows
|
||||
$(window).resize(function() {
|
||||
if ( $(window).width() >= 761 ) {
|
||||
$("#nav-main-menu").removeAttr("style").removeAttr("aria-hidden");
|
||||
}
|
||||
else if ( $(window).width() <= 760 ) {
|
||||
$("#nav-main-menu").removeAttr("style").attr("aria-hidden", "true");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// With JavaScript enabled, we can provide a full navigation with #nav-main.
|
||||
// Now "hide" the duplicated #footer-menu from AT.
|
||||
$('#footer-menu').attr('role', 'presentation');
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@ MINIFY_BUNDLES = {
|
|||
'css/marketplace.less',
|
||||
),
|
||||
'mission': (
|
||||
'css/sandstone/video.less',
|
||||
'css/sandstone/video-resp.less',
|
||||
'css/mission.less',
|
||||
),
|
||||
'mozilla_expanders': (
|
||||
|
|
@ -306,6 +306,11 @@ MINIFY_BUNDLES = {
|
|||
'js/mozilla-video-tools.js',
|
||||
'js/marketplace/partners.js',
|
||||
),
|
||||
'mozorg-resp': (
|
||||
'js/libs/jquery-1.7.1.min.js',
|
||||
'js/nav-main-resp.js',
|
||||
'js/footer-email-form.js',
|
||||
),
|
||||
'pager': (
|
||||
'js/mozilla-pager.js',
|
||||
),
|
||||
|
|
|
|||
|
|
@ -166,49 +166,5 @@
|
|||
{% include "includes/webtrends.html" %}
|
||||
{% endblock %}
|
||||
|
||||
<script>
|
||||
// mobile dropdown menu
|
||||
$("#nav-main .toggle").click(function() {
|
||||
if ( $("#nav-main-menu").is(":visible") ) {
|
||||
$("#nav-main-menu:visible").slideUp(100).attr("aria-expanded", "false");
|
||||
$("#nav-main .toggle.open").removeClass("open");
|
||||
}
|
||||
else {
|
||||
$("#nav-main-menu").slideToggle(150).attr("aria-expanded", "true");
|
||||
$(this).toggleClass("open");
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/*
|
||||
// Hide menu when anything else is clicked
|
||||
$(document).bind('click', function(e) {
|
||||
var $clicked = $(e.target);
|
||||
if (! $clicked.parents("#nav-main"))
|
||||
$("#nav-main-menu").hide().attr("aria-expanded", "false");
|
||||
$("#nav-main .toggle").removeClass("open");
|
||||
});
|
||||
|
||||
// or gets focus
|
||||
$("a, input, textarea, button, :focus").bind('focus', function(e) {
|
||||
var $focused = $(e.target);
|
||||
if (! $focused.parents("#nav-main")) {
|
||||
$("#nav-main-menu").hide().attr("aria-expanded", "false");
|
||||
$("#nav-main .toggle").removeClass("open");
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
// reset the menu for wider windows
|
||||
$(window).resize(function() {
|
||||
if ( $(window).width() >= 761 ) {
|
||||
$("#nav-main-menu").removeAttr("style").attr("aria-expanded", "true");
|
||||
}
|
||||
else if ( $(window).width() <= 760 ) {
|
||||
$("#nav-main-menu").removeAttr("style").attr("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче