зеркало из https://github.com/mozilla/kitsune.git
Update base template code/styles based on new mockups for support.mozilla.org re-design. (#3243)
* Update base template style for header, body and footer based on new designs Update header for base template, move search input from header in main content instead and update search style Update header navigation links/buttons and add new icons Add padding to prevent content jumping Merge update footer for desktop only to look like mozilla.org footer to resolve conflicts. (#3230) * change footer background color to black * Applied updates to footer to match footer on mozilla.org * Update Mozilla and Firefox list headers and add language picker to footer * Remove mozilla.org at the end of the contribution link * Fix Donate utm_source param and contribute to site link Update footer links font-weight to bold * Fix header paddings * Add new optimized mozilla support SVG to use in header instead of PNG * Add underline text-decoration to header links * Add missing fonts * Change default font-family to Open Sans and use Zilla Slab for special cases. * Add hover feedback on buttons. * Fix nav list and buttons display when on smaller screens. * Fix nav list display when on smaller screens and signed in. * Make adjustments to header links wrapping. * Fix formatting and padding issue * Change #aux-nav-left to #aux-nav to not break other functionality using #aux-nav reference * Make adjustments to header. * Fix issue with header search input when search results are shown. * Make main search take up full width like mockup. * Chain focus and val calls.
This commit is contained in:
Matthew Lagace
Jon Petto
Родитель
cf32e39783
Коммит
45c4294332
|
|
@ -3,6 +3,10 @@
|
|||
{% set styles = ('home',) %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grid_12 search-form-large">
|
||||
<h1>{{ _('Search Mozilla Support') }}</h1>
|
||||
{{ search_box(settings, id='support-search-home', params=search_params) }}
|
||||
</div>
|
||||
<div class="grid_12">
|
||||
<section id="products-and-services">
|
||||
{{ product_cards(products) }}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
{% block title %}{{ pgettext('DB: products.Topic.title', topic.title) }} | {{ _('{product} Help')|f(product=pgettext('DB: products.Product.title', product.title)) }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grid_12 search-form-large">
|
||||
{{ search_box(settings, id='support-search-documents', params=search_params) }}
|
||||
</div>
|
||||
<div class="grid_12">
|
||||
<h1 class="product-title cf">
|
||||
{% set prod_url = url('products.product', slug=product.slug) %}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
{% block title %}{{ _('{product} Help')|f(product=pgettext('DB: products.Product.title', product.title)) }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grid_12 search-form-large">
|
||||
{{ search_box(settings, id='support-search-product', params=search_params) }}
|
||||
</div>
|
||||
<div class="grid_12">
|
||||
<h1 class="product-title cf">
|
||||
<img src="{{ product.image_url }}" alt="" class="logo-sprite" />
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
{% set styles = ('products',) %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grid_12 search-form-large">
|
||||
{{ search_box(settings, id='support-search-products', params=search_params) }}
|
||||
</div>
|
||||
<section id="products-and-services" class="grid_12">
|
||||
<h1>{{ title }}</h1>
|
||||
{{ product_cards(products) }}
|
||||
|
|
|
|||
|
|
@ -166,33 +166,43 @@
|
|||
</div>
|
||||
|
||||
<header>
|
||||
<div class="container_12 cf">
|
||||
<div class="grid_12">
|
||||
<div class="cf">
|
||||
<nav id="aux-nav" role="navigation">
|
||||
<ul>
|
||||
{% if not hide_aux_nav %}
|
||||
{{ aux_nav(user, hide_aaq_link) }}
|
||||
{% endif %}
|
||||
{% if not hide_locale_switcher %}
|
||||
<li><a href="{{ locale_picker_url }}" class="locale-picker" data-event-category="navigation" data-event-action="main navigation" data-event-label="Locale Picker">{{ settings.LANGUAGES_DICT[request.LANGUAGE_CODE.lower()] }}</a></li>
|
||||
{% endif %}
|
||||
{% if not (hide_fx_download or user.is_authenticated()) %}
|
||||
<a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&utm_medium=referral&utm_campaign=non-fx-button"
|
||||
class="firefox-download-button hidden" data-event-category="Download Button" data-event-action="Firefox for Desktop">
|
||||
<strong class="download-title">{{ _('Download Firefox') }}</strong>
|
||||
</a>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="cf">
|
||||
{% if not hide_header_search %}
|
||||
{{ search_box(settings, id='support-search', params=search_params) }}
|
||||
<div class="cf">
|
||||
<h2 class="logo">
|
||||
<a href="{{ url('home') }}" data-event-category="navigation" data-event-action="main navigation" data-event-label="Home"></a>
|
||||
</h2>
|
||||
{% if not hide_aux_nav %}
|
||||
<nav id="aux-nav" class="logged-{% if user.is_authenticated() %}in{% else %}out{% endif %}" role="navigation">
|
||||
<ul>
|
||||
{{ aux_nav(user, hide_aaq_link) }}
|
||||
|
||||
{% if not hide_locale_switcher %}
|
||||
<li>
|
||||
{% include "includes/icons/globe-icon.svg" %}
|
||||
<a href="{{ locale_picker_url }}" class="locale-picker" data-event-category="navigation" data-event-action="main navigation" data-event-label="Locale Picker">{{ settings.LANGUAGES_DICT[request.LANGUAGE_CODE.lower()] }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<a href="{{ url('home') }}" class="logo" data-event-category="navigation" data-event-action="main navigation" data-event-label="Home"></a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
<nav id="aux-nav-right" role="navigation">
|
||||
<ul>
|
||||
{% if not (hide_fx_download or user.is_authenticated()) %}
|
||||
<li>
|
||||
<a href="https://www.mozilla.org/firefox/download/thanks/" class="firefox-download-button hidden" data-event-category="Download Button" data-event-action="Firefox for Desktop">{{ _('Download Firefox') }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if not (user.is_authenticated()) %}
|
||||
<li>
|
||||
<a href="{{ url('landings.get_involved') }}" class="volunteer-button" data-event-category="Volunteer Button" data-event-action="Volunteer for Mozilla Support">{{ _('Volunteer') }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="cf">
|
||||
{% if not hide_header_search %}
|
||||
{{ search_box(settings, id='support-search', params=search_params) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -221,6 +231,12 @@
|
|||
</aside>
|
||||
{% endblock %}
|
||||
|
||||
<div class="support-search-main">
|
||||
<div class="grid_12 search-form-large">
|
||||
{{ search_box(settings, id='support-search-results', params=search_params) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main id="main-content" role="main">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<input type="hidden" name="{{ k }}" value="{{ v }}" />
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<input type="search" name="q" required="required" aria-required="true" placeholder="{{ _('Search Mozilla Support') }}" class="searchbox" id="search-q" />
|
||||
<input type="search" name="q" required="required" aria-required="true" placeholder="{{ _('Find help...')|truncate(12) }}" class="searchbox" id="search-q" />
|
||||
<button type="submit" title="{{ _('Search') }}" class="submit-button">{{ _('Search') }}</button>
|
||||
</form>
|
||||
{% endmacro %}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
{% else %}
|
||||
{% set ask_url = url('wiki.document', 'get-community-support') %}
|
||||
{% endif %}
|
||||
<li><a href="{{ ask_url }}" class="ask" data-event-category="navigation" data-event-action="main navigation" data-event-label="Ask a question">{{ _('Ask a question') }}</a></li>
|
||||
<li><a href="{{ ask_url }}" class="ask" data-event-category="navigation" data-event-action="main navigation" data-event-label="Get Community Support">{{ _('Get Community Support') }}</a></li>
|
||||
{% endif %}
|
||||
{% if user.is_authenticated() %}
|
||||
<li class="dropdown">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path id="icon-globe" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm-.67,20.17a9.68,9.68,0,0,1-5.67-2.72A9.37,9.37,0,0,1,5.14,5.58a9.22,9.22,0,0,1,.11,1.29C5.16,8.14,5,8.93,5.79,10a5.15,5.15,0,0,1,.51,1.49c.14.48.7.72,1.08,1,.78.59,1.53,1.27,2.35,1.79.55.34.89.51.73,1.16A4.28,4.28,0,0,1,10,16.77,2.5,2.5,0,0,0,10.47,18a16.63,16.63,0,0,0,1.25,1.12C12.41,19.64,11.65,20.37,11.33,21.17Zm7.42-2.56A9.26,9.26,0,0,1,14,21.17a3.74,3.74,0,0,1,1.13-1.53,3.92,3.92,0,0,0,1-1.27,8.19,8.19,0,0,1,.7-1.22c.37-.56-.9-1.42-1.31-1.6A13.48,13.48,0,0,1,13.06,14c-.59-.42-1.77.21-2.43-.08a12.61,12.61,0,0,1-2.44-1.68c-.81-.62-.77-1.34-.77-2.24.63,0,1.54-.18,2,.33.13.17.59.89.9.63S10.09,9.93,10,9.73c-.26-.61.59-.85,1-1.26s1.79-1.39,1.69-1.78S11.5,5.21,10.84,5.38c-.1,0-1,.94-1.13,1.08,0-.3,0-.6,0-.89s-.35-.39-.33-.51c0-.31.89-.87,1.1-1.11-.15-.1-.65-.54-.81-.47-.37.15-.79.26-1.16.42a2.22,2.22,0,0,0,0-.37,8.74,8.74,0,0,1,2.34-.69l.73.29.52.62.51.53.45.15.71-.68-.18-.48V2.83a9.13,9.13,0,0,1,3.91,1.56l-.7.08a3.84,3.84,0,0,0-.36-.14c.34.74.69,1.46,1,2.18s1.23,1.6,1.38,2.42,0,1.83.15,3a5,5,0,0,0,1.22,2.32,2.39,2.39,0,0,0,1,.12A9.36,9.36,0,0,1,18.75,18.61Z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.4 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 48">
|
||||
<path style="fill: #fff;" d="M111.36,17.09q-.58,4.41-4.9,4.41a5.13,5.13,0,0,1-3.55-1.18A4.2,4.2,0,0,1,101.6,17V9.7h-2V7.25h2V2.93h3.31V7.25h5.18V9.7h-5.18v6.8c0,1.47.64,2.21,1.93,2.21a2.31,2.31,0,0,0,1.17-.39c.44-.26.74-.93.9-2ZM95.21,7a4.74,4.74,0,0,1,2.61.78l.59,4.35-2.58.31-.52-2.4a2.61,2.61,0,0,0-1.06-.31,1.93,1.93,0,0,0-1.5.72,2.9,2.9,0,0,0-.64,2v6.18h2.76v2.54H86.72V18.65H88.8V9.83H86.63V7.25h5.24V9.86a4.75,4.75,0,0,1,1.19-2A2.93,2.93,0,0,1,95.21,7ZM81.58,14.14a4.91,4.91,0,0,0-1.07-3.41,3.58,3.58,0,0,0-2.78-1.18A3.33,3.33,0,0,0,75,10.8a5.32,5.32,0,0,0-1,3.37,5.76,5.76,0,0,0,1,3.36,3.18,3.18,0,0,0,2.8,1.37,3.37,3.37,0,0,0,2.82-1.32A5.48,5.48,0,0,0,81.58,14.14Zm3.44.1A7,7,0,0,1,83,19.5a7.31,7.31,0,0,1-5.34,2,7,7,0,0,1-5.13-1.92,7,7,0,0,1-1.94-5.22,7.89,7.89,0,0,1,1.83-5.23,6.67,6.67,0,0,1,5.42-2.19,6.64,6.64,0,0,1,5.43,2.17A7.8,7.8,0,0,1,85,14.24Zm-19.59,0a5,5,0,0,0-1-3.41,3.31,3.31,0,0,0-2.6-1.16,3.11,3.11,0,0,0-2.63,1.27,5.23,5.23,0,0,0-1,3l0,1.09a3.91,3.91,0,0,0,1,2.8,3.42,3.42,0,0,0,2.59,1,3.27,3.27,0,0,0,2.74-1.24A5.35,5.35,0,0,0,65.43,14.21Zm3.44-.35a9.24,9.24,0,0,1-1.57,5.31,5.38,5.38,0,0,1-4.82,2.33,4.77,4.77,0,0,1-4.37-2.17V25.2h2.76v2.61H52.72V25.2H54.8V9.8H52.63V7.25h5.48V10a6.1,6.1,0,0,1,1.72-2.14A4.8,4.8,0,0,1,62.89,7a5.56,5.56,0,0,1,4.32,1.82A7.22,7.22,0,0,1,68.87,13.86ZM48,14.21a5,5,0,0,0-1-3.41,3.34,3.34,0,0,0-2.61-1.16,3.11,3.11,0,0,0-2.63,1.27,5.23,5.23,0,0,0-1,3l0,1.09a3.91,3.91,0,0,0,1,2.8,3.44,3.44,0,0,0,2.59,1A3.27,3.27,0,0,0,47,17.59,5.35,5.35,0,0,0,48,14.21Zm3.44-.35a9.24,9.24,0,0,1-1.57,5.31A5.38,5.38,0,0,1,45,21.5a4.77,4.77,0,0,1-4.37-2.17V25.2h2.76v2.61H35.27V25.2h2.08V9.8H35.18V7.25h5.48V10a6.1,6.1,0,0,1,1.72-2.14A4.8,4.8,0,0,1,45.44,7a5.56,5.56,0,0,1,4.32,1.82A7.22,7.22,0,0,1,51.42,13.86ZM34.37,21.19H28.89V18.86a4.77,4.77,0,0,1-4.59,2.61,5.26,5.26,0,0,1-3.43-1.19,4.69,4.69,0,0,1-1.44-3.81V9.8H17.36V7.25h5.39v8a4.34,4.34,0,0,0,.71,2.81,2.54,2.54,0,0,0,2,.83,3.07,3.07,0,0,0,2.46-1.09,4,4,0,0,0,.95-2.58V9.8H26.41V7.25H32.2v11.4h2.17Zm-18.5-5.93a5.52,5.52,0,0,1-2.09,4.63A8.81,8.81,0,0,1,8.24,21.5,15.66,15.66,0,0,1,4.29,21a7.66,7.66,0,0,1-3-1.43L1.83,15l2.76.28-.06,2.49a6.29,6.29,0,0,0,1.87.66,9.2,9.2,0,0,0,1.6.14A7,7,0,0,0,11,18a2.33,2.33,0,0,0,1.19-2.32,2.51,2.51,0,0,0-1.36-2.53,13.87,13.87,0,0,0-3.13-1,25.05,25.05,0,0,1-2.89-.74A5.33,5.33,0,0,1,2.39,9.83a4.71,4.71,0,0,1-1-3.2A5,5,0,0,1,3.58,2.08,8.76,8.76,0,0,1,8.4.69,11.89,11.89,0,0,1,12,1.25a7.43,7.43,0,0,1,2.74,1.46L14.94,7l-2.76.25L11.9,4.61a6.38,6.38,0,0,0-1.73-.69,8.29,8.29,0,0,0-1.68-.18,4.61,4.61,0,0,0-2.42.59,2,2,0,0,0-1,1.89,2.05,2.05,0,0,0,1.2,2.07A13.59,13.59,0,0,0,9,9.17q1.28.28,2.88.75a6.4,6.4,0,0,1,2.81,1.66A5,5,0,0,1,15.87,15.26ZM54.06,43a.8.8,0,0,1-.9-.89c0-.84.68-1.06,1.47-1.06a8.48,8.48,0,0,1,1.11.1A1.72,1.72,0,0,1,54.06,43Zm4.72.05a1,1,0,0,1-.32,0c-.36,0-.53-.15-.53-.6V39.14c0-1.76-1.41-2.62-3.07-2.62a7.55,7.55,0,0,0-3.3.7L51.29,39l1.76.18.26-.87a2.38,2.38,0,0,1,1.18-.22c1.25,0,1.26.94,1.26,1.73v.25A10.23,10.23,0,0,0,54.49,40c-1.76,0-3.59.44-3.59,2.34a2.17,2.17,0,0,0,2.37,2.21A2.78,2.78,0,0,0,55.75,43a1.58,1.58,0,0,0,1.7,1.54,2.87,2.87,0,0,0,1.38-.36ZM51.1,32.61H48.93L45.6,44.38h2.17Zm-4.48,0H44.45L41.12,44.38h2.17Zm-9.23,6.84H39.7V36.68H37.39Zm0,4.95H39.7V41.63H37.39ZM34,41.52l-.36,1.2H31.17l4.27-4.88-.17-1.16H28.52l-.28,2.7,1.59.17.35-1.2h2.41l-4.24,4.89.22,1.16h6.72l.48-2.7ZM22.94,42.86c-1.19,0-1.81-1-1.81-2.36s.7-2.3,1.83-2.3,1.88.7,1.88,2.26S24.09,42.86,22.94,42.86ZM23,36.52a3.87,3.87,0,0,0-4.14,4.13,3.71,3.71,0,0,0,4,3.92,3.92,3.92,0,0,0,4.24-4A3.83,3.83,0,0,0,23,36.52Zm-6.13,6.19h0V39.19a2.5,2.5,0,0,0-2.65-2.67,2.57,2.57,0,0,0-2.51,1.66,2.51,2.51,0,0,0-2.52-1.66,2.56,2.56,0,0,0-2.34,1.32V36.68H3.66v1.67h1v4.37h-1V44.4H8.34V42.72H6.87V40c0-1.08.43-1.83,1.49-1.83.87,0,1.32.51,1.32,1.85V44.4h3.23V42.72h-1V40c0-1.08.43-1.83,1.49-1.83.87,0,1.32.51,1.32,1.85v4.33H17.9V42.71ZM0,48V30.37H61.55V48Z"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 3.8 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
До Ширина: | Высота: | Размер: 32 KiB После Ширина: | Высота: | Размер: 3.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
|
|
@ -10,13 +10,21 @@
|
|||
$('#main-content').hide();
|
||||
$('#main-content').siblings('aside').hide();
|
||||
$('#main-breadcrumbs').hide();
|
||||
|
||||
if ($('#support-search-wiki:visible').length === 0) {
|
||||
$('.support-search-main').show();
|
||||
$('.support-search-main').find('input[name=q]').focus();
|
||||
}
|
||||
}
|
||||
|
||||
function showContent() {
|
||||
$('.support-search-main').hide();
|
||||
$('#main-content').show();
|
||||
$('#main-content').siblings('aside').show();
|
||||
$('#main-breadcrumbs').show();
|
||||
$('#instant-search-content').remove();
|
||||
$('.search-form-large:visible').find('input[name=q]').focus().val('');
|
||||
$('#support-search').find('input[name=q]').val('');
|
||||
}
|
||||
|
||||
function render(data) {
|
||||
|
|
@ -48,6 +56,8 @@
|
|||
|
||||
$(document).on('keyup', '[data-instant-search="form"] input[type="search"]', function(ev) {
|
||||
var $this = $(this);
|
||||
var $form = $this.closest('form');
|
||||
var formId = $form.attr('id');
|
||||
var params = {
|
||||
format: 'json'
|
||||
};
|
||||
|
|
@ -63,7 +73,7 @@
|
|||
window.clearTimeout(searchTimeout);
|
||||
}
|
||||
|
||||
$this.closest('form').find('input').each(function () {
|
||||
$form.find('input').each(function () {
|
||||
if ($(this).attr('type') === 'submit') {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -71,6 +81,17 @@
|
|||
return true;
|
||||
}
|
||||
if ($(this).attr('name') === 'q') {
|
||||
var value = $(this).val();
|
||||
|
||||
if (formId === 'support-search-results') {
|
||||
$('#support-search').find('input[name=q]').val(value);
|
||||
} else if (formId === 'support-search') {
|
||||
$('.search-form-large').find('input[name=q]').val(value);
|
||||
} else {
|
||||
$('#support-search').find('input[name=q]').val(value);
|
||||
$('#support-search-results').find('input[name=q]').val(value);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
params[$(this).attr('name')] = $(this).val();
|
||||
|
|
|
|||
|
|
@ -44,6 +44,66 @@
|
|||
url('@{fontpath}/Komikax-webfont.ttf?v=1') format('truetype'), /* Safari, Android, iOS */
|
||||
url('@{fontpath}/Komikax-webfont.svg?v=1#svgFontName') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zilla Slab';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('@{fontpath}/ZillaSlab-Regular.woff2') format('woff2'),
|
||||
url('@{fontpath}/ZillaSlab-Regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('@{fontpath}/ZillaSlab-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zilla Slab';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('@{fontpath}/ZillaSlab-Bold.woff2') format('woff2'),
|
||||
url('@{fontpath}/ZillaSlab-Bold.woff') format('woff'), /* Modern Browsers */
|
||||
url('@{fontpath}/ZillaSlab-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zilla Slab';
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src: url('@{fontpath}/ZillaSlab-RegularItalic.woff2') format('woff2'),
|
||||
url('@{fontpath}/ZillaSlab-RegularItalic.woff') format('woff'), /* Modern Browsers */
|
||||
url('@{fontpath}/ZillaSlab-RegularItalic.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zilla Slab';
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src: url('@{fontpath}/ZillaSlab-RegularItalic.woff2') format('woff2'),
|
||||
url('@{fontpath}/ZillaSlab-RegularItalic.woff') format('woff'), /* Modern Browsers */
|
||||
url('@{fontpath}/ZillaSlab-BoldItalic.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zilla Slab Highlight';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('@{fontpath}/ZillaSlabHighlight-Regular.woff2') format('woff2'),
|
||||
url('@{fontpath}/ZillaSlabHighlight-Regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('@{fontpath}/ZillaSlabHighlight-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zilla Slab Highlight';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('@{fontpath}/ZillaSlabHighlight-Bold.woff2') format('woff2'),
|
||||
url('@{fontpath}/ZillaSlabHighlight-Bold.woff') format('woff'), /* Modern Browsers */
|
||||
url('@{fontpath}/ZillaSlabHighlight-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
#main-content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#products-and-services {
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
|
||||
.search-form-large {
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
margin: 40px 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.simple-search-form {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@ article {
|
|||
body {
|
||||
color: @textGrey;
|
||||
font-family: @OpenSans;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
min-width: 1000px;
|
||||
text-align: left;
|
||||
|
||||
|
|
@ -55,73 +56,115 @@ body {
|
|||
|
||||
> header .logo {
|
||||
float: right;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
&.scroll-header {
|
||||
> header {
|
||||
.logo {
|
||||
left: auto;
|
||||
right: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#support-search {
|
||||
left: 0;
|
||||
padding-left: 10px;
|
||||
right: auto;
|
||||
|
||||
.searchbox {
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#aux-nav {
|
||||
margin-left: 302px;
|
||||
margin-right: 0;
|
||||
margin-left: 220px;
|
||||
}
|
||||
|
||||
#aux-nav-right {
|
||||
margin-left: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-form-large {
|
||||
.searchbox {
|
||||
padding-left: 60px;
|
||||
}
|
||||
.submit-button {
|
||||
left: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #b3b8bc;
|
||||
border-top: 2px solid #fff;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
background: #000;
|
||||
min-height: 100px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
#aux-nav {
|
||||
padding: 29px 0 29px 20px;
|
||||
}
|
||||
|
||||
#aux-nav-right {
|
||||
padding: 29px 20px 29px 0;
|
||||
}
|
||||
|
||||
#support-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
background: url('../img/mozilla-support-white.svg') top left no-repeat;
|
||||
background-size: 112px 48px;
|
||||
float: left;
|
||||
height: 69px;
|
||||
width: 160px;
|
||||
display: block;
|
||||
background: url('../img/mozilla-support.png') 0 0 no-repeat;
|
||||
background-size: 160px 69px;
|
||||
margin-left: 30px;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 48px;
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.scroll-header {
|
||||
padding-top: 151px;
|
||||
padding-top: 100px;
|
||||
|
||||
> header {
|
||||
background: #fff;
|
||||
background: #000;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
min-height: 50px;
|
||||
max-height: 50px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: -100px;
|
||||
transform: translateY(100px);
|
||||
transition: transform .3s;
|
||||
width: 100%;
|
||||
z-index: 97;
|
||||
|
||||
.logo {
|
||||
left: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
height: 40px;
|
||||
width: 188px;
|
||||
background: url('../img/mozilla-support-scroll.png') 0 0 no-repeat;
|
||||
background-size: 188px 40px;
|
||||
background-size: 90px 36px;
|
||||
height: 36px;
|
||||
margin-left: 10px;
|
||||
margin-top: 6px;
|
||||
width: 90px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 36px;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
#aux-nav {
|
||||
margin-right: 290px;
|
||||
|
||||
#aux-nav,
|
||||
#aux-nav-right {
|
||||
> ul {
|
||||
margin-top: 4px;
|
||||
|
||||
|
|
@ -130,16 +173,61 @@ body {
|
|||
}
|
||||
|
||||
.firefox-download-button {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.volunteer-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
|
||||
> a:link,
|
||||
a:visited, {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#aux-nav {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
width: 60%;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.locale-picker {
|
||||
padding-left: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
#aux-nav-right {
|
||||
margin-right: 240px;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#support-search {
|
||||
right: 0;
|
||||
margin-top: 9px;
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
.searchbox {
|
||||
border: 0;
|
||||
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
#tabzilla {
|
||||
|
|
@ -159,7 +247,7 @@ body {
|
|||
|
||||
body,
|
||||
html {
|
||||
background: @background url('../img/grain.png') 0 0 repeat;
|
||||
background: @background;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -173,7 +261,6 @@ footer {
|
|||
a:link,
|
||||
a:visited {
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -292,7 +379,7 @@ footer {
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: @OpenSansLight;
|
||||
font-family: @ZillaSlab;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -319,7 +406,6 @@ textarea {
|
|||
border: 1px solid #b2b2b2;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 1px #efefef;
|
||||
font-family: @OpenSans;
|
||||
transition: all linear .1s;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -356,7 +442,6 @@ input[type="submit"]{
|
|||
border-style: solid;
|
||||
border-width: 1px;
|
||||
font-weight: 600;
|
||||
margin: -20px 0 20px 0;
|
||||
padding: 4px 4px 5px 4px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -737,7 +822,7 @@ input[type=button],
|
|||
}
|
||||
|
||||
.folding-section {
|
||||
background: #fff;
|
||||
background: #000;
|
||||
|
||||
> header {
|
||||
padding: 16px 20px;
|
||||
|
|
@ -1194,29 +1279,29 @@ input[type=button],
|
|||
}
|
||||
|
||||
#aux-nav {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
z-index: 10;
|
||||
|
||||
> ul {
|
||||
float: right;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
color: @textGrey;
|
||||
float: left;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
line-height: 1.2;
|
||||
margin: 0 8px 0 0;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
&.dropdown {
|
||||
> a:after,
|
||||
> span:after {
|
||||
border-color: #666666 transparent transparent;
|
||||
border-color: #fff transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 4px;
|
||||
content: " ";
|
||||
|
|
@ -1233,8 +1318,7 @@ input[type=button],
|
|||
> a,
|
||||
> a:visited,
|
||||
> span {
|
||||
color: @textDarkGrey;
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
height: 42px;
|
||||
line-height: 40px;
|
||||
|
|
@ -1242,16 +1326,24 @@ input[type=button],
|
|||
text-decoration: none;
|
||||
|
||||
&.locale-picker {
|
||||
background-image: @iconsSprite;
|
||||
background-position: -38px -153px;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 34px;
|
||||
color: #fff;
|
||||
padding-left: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
background-color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
> svg {
|
||||
fill: #fff;
|
||||
height: 28px;
|
||||
padding-left: 12px;
|
||||
padding-top: 6px;
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
> ul {
|
||||
|
|
@ -1263,7 +1355,7 @@ input[type=button],
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
top: 40px;
|
||||
width: 160px;
|
||||
|
||||
&.double {
|
||||
|
|
@ -1309,15 +1401,27 @@ input[type=button],
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
background: #000;
|
||||
|
||||
> ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.logged-in {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
&.logged-out {
|
||||
width: 43%;
|
||||
}
|
||||
|
||||
.unread-message-count {
|
||||
background: @textGrey;
|
||||
border-radius: 2px;
|
||||
|
|
@ -1332,37 +1436,116 @@ input[type=button],
|
|||
top: -2px;
|
||||
}
|
||||
|
||||
.firefox-download-button {
|
||||
background: #81BC2E;
|
||||
background: linear-gradient(to bottom, #81BC2E, #659324);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.3) inset;
|
||||
display: inline-block;
|
||||
line-height: 25px;
|
||||
margin: 6px 15px 0px 15px;
|
||||
position: relative;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
transition: all 0.5s;
|
||||
width: 130px;
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.download-title {
|
||||
color: #FFFFFF;
|
||||
#aux-nav-right {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
z-index: 10;
|
||||
|
||||
> ul {
|
||||
list-style: none;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
font-family: "Open Sans",Arial,Helvetica,sans-serif;
|
||||
padding: 1px 6px 1px 12px;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
line-height: 1.2;
|
||||
margin: 0 8px 0 0;
|
||||
|
||||
> a,
|
||||
> a:visited,
|
||||
> span {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
height: 42px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.firefox-download-button:link,
|
||||
.firefox-download-button:visited {
|
||||
background-color: @buttonGreen;
|
||||
border-radius: 100px;
|
||||
border: 2px solid @buttonGreen;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
margin-left: 0;
|
||||
margin-top: 2px;
|
||||
padding: 0 30px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: color .1s ease-in-out, background-color .1s ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: saturate(darken(@buttonGreen, 5%), 10%);
|
||||
border-color: saturate(darken(@buttonGreen, 5%), 10%);
|
||||
transition: color .1s ease-in-out, background-color .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.volunteer-button:link,
|
||||
.volunteer-button:visited {
|
||||
background-color: #000;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 100px;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
margin-left: 10px;
|
||||
margin-top: 2px;
|
||||
padding: 0 30px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: color .1s ease-in-out, background-color .1s ease-in-out;
|
||||
min-width: 100px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: saturate(darken(#fff, 5%), 10%);
|
||||
border-color: saturate(darken(#fff, 5%), 10%);
|
||||
color: #000;
|
||||
transition: color .1s ease-in-out, background-color .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.html-rtl {
|
||||
#aux-nav {
|
||||
float: right;
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
float: left;
|
||||
padding: 0 20px 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.unread-message-count {
|
||||
right: auto;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
#aux-nav-right {
|
||||
float: left;
|
||||
|
||||
> ul {
|
||||
|
|
@ -1403,7 +1586,7 @@ input[type=button],
|
|||
|
||||
.title {
|
||||
display: block;
|
||||
font-family: @OpenSansLight;
|
||||
font-family: @OpenSans;
|
||||
font-size: 22px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 22px;
|
||||
|
|
@ -1412,6 +1595,7 @@ input[type=button],
|
|||
|
||||
.description {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin: 0 0 0 99px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1466,23 +1650,22 @@ input[type=button],
|
|||
position: relative;
|
||||
|
||||
.submit-button {
|
||||
background: @iconsSprite -50px -50px no-repeat;
|
||||
background: url('../img/search-icon.png') 0 0 no-repeat;
|
||||
background-size: 17px 17px;
|
||||
border: 0;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
text-indent: -9999px;
|
||||
top: 6px;
|
||||
top: 8px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
background: #8d969e;
|
||||
background: url('../img/grain.png'), linear-gradient(to bottom, #8d969e, #a8b0b7);
|
||||
border: 0;
|
||||
background: #fff;
|
||||
border: 2px solid #cbcbcb;
|
||||
border-radius: 30px;
|
||||
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
height: 18px;
|
||||
padding: 6px 42px 6px 20px;
|
||||
|
|
@ -1491,12 +1674,12 @@ input[type=button],
|
|||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -2119,7 +2302,8 @@ input[type=button],
|
|||
}
|
||||
}
|
||||
.html-rtl {
|
||||
#aux-nav {
|
||||
#aux-nav,
|
||||
#aux-nav-right {
|
||||
> ul {
|
||||
> li {
|
||||
padding: 0px;
|
||||
|
|
@ -2153,3 +2337,40 @@ input[type=button],
|
|||
display: none;
|
||||
}
|
||||
/* end bug1441583 */
|
||||
|
||||
.search-form-large {
|
||||
.simple-search-form {
|
||||
display: block;
|
||||
float: none;
|
||||
margin: 30px 0 30px 0;
|
||||
text-align: center;
|
||||
|
||||
.searchbox {
|
||||
&::placeholder {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
background: #fff;
|
||||
border: 2px solid #cbcbcb;
|
||||
border-radius: 8px;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
height: 60px;
|
||||
padding: 0 0 0 20px;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-size: 24px 24px;
|
||||
height: 24px;
|
||||
right: 20px;
|
||||
width: 24px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.support-search-main {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,28 +122,6 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.simple-search-form {
|
||||
margin-bottom: 40px;
|
||||
background: url('../img/grain.png') #eff2f4;
|
||||
border: 1px solid #b9c9d1;
|
||||
border-radius: 6px;
|
||||
display: block;
|
||||
padding: 12px;
|
||||
|
||||
.btn {
|
||||
float: right;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
margin-top: -15px;
|
||||
width: 585px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* Colors */
|
||||
@background: #eaeff2;
|
||||
@background: #fff;
|
||||
@borderLightGrey: #c1c5c8;
|
||||
@buttonGreen: #16da00;
|
||||
@mobileHeaderBorder: #992f21;
|
||||
@mobileSubheaderBackground: #F9F9FA;
|
||||
@mobileHyperlink: #00abcd;
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
@MetaBold: 'MetaBold', Arial, Helvetica, sans-serif;
|
||||
@MetaMedium: 'MetaMedium', Arial, Helvetica, sans-serif;
|
||||
@Moz: 'Moz', Verdana, Helvetica, Arial, sans-serif;
|
||||
@ZillaSlab: 'Zilla Slab', 'Open Sans', X-LocaleSpecific, sans-serif;
|
||||
|
||||
/* Images */
|
||||
@iconsSprite: url('../img/icons-sprite.png?v=5');
|
||||
|
|
|
|||
|
|
@ -35,6 +35,9 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block above_main %}
|
||||
<div class="grid_12 search-form-large">
|
||||
{{ search_box(settings, id='support-search-wiki', params=search_params) }}
|
||||
</div>
|
||||
<h1 class="product-title cf">
|
||||
{% set prod_url = url('products.product', slug=product.slug) %}
|
||||
<img src="{{ STATIC_URL }}sumo/img/blank.png" alt="" class="logo-sprite" style="background-image: url('{{ product.image_url }}');" />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
# Neither Firefox nor Safari will draw these if they're text/xml
|
||||
AddType image/svg+xml .svg
|
||||
AddType application/octet-stream .exe
|
||||
AddType application/font-woff .woff
|
||||
AddType application/font-woff2 .woff2
|
||||
AddType application/vnd.ms-fontobject .eot
|
||||
AddType application/octet-stream .ttf
|
||||
|
||||
AddCharset utf-8 .css .js
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче