зеркало из https://github.com/mozilla/kitsune.git
callout card layout changes, sidebar vote form edits
This commit is contained in:
Kasey Kelly
Родитель
765f1842d7
Коммит
dbbd102516
|
|
@ -6,7 +6,7 @@
|
|||
{% block hidden_search_masthead %}{% endblock %}
|
||||
|
||||
{% block contentwrap %}
|
||||
<section class="home-search-section sumo-page-section shade-bg">
|
||||
<section class="home-search-section sumo-page-section--lg shade-bg">
|
||||
<div class="mzp-l-content narrow">
|
||||
<div class="home-search-section--content">
|
||||
<h1 class="text-display-xl">{{ _('Search Support') }}</h1>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<div class="card card--callout is-full-width">
|
||||
<img class="card--feature-img" src="{{ STATIC_URL }}sumo/img/Mozilla_illustration_placholder2x.png" alt="Illustration of hands" />
|
||||
<div class="card--details">
|
||||
<h3 class="card--title">{{ _('Join Our Community') }}</h3>
|
||||
<p class="card--desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</p>
|
||||
<p class="card--desc"><strong><a href="{{ url('landings.get_involved') }}">{{ _('Learn More') }}</a></strong></p>
|
||||
<div class="card card--callout is-full-width has-moz-headings">
|
||||
<div class="card--callout-wrap-narrow">
|
||||
<img class="card--feature-img" src="{{ STATIC_URL }}sumo/img/Mozilla_illustration_placholder2x.png" alt="Illustration of hands" />
|
||||
<div class="card--details">
|
||||
<h3 class="card--title">{{ _('Join Our Community') }}</h3>
|
||||
<p class="card--desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</p>
|
||||
<p class="card--desc"><strong><a href="{{ url('landings.get_involved') }}">{{ _('Learn More') }}</a></strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<div class="card card--callout">
|
||||
<img class="card--feature-img" src="{{ STATIC_URL }}sumo/img/Mozilla_illustration_placholder2x.png" alt="Illustration of hands" />
|
||||
<div class="card--details">
|
||||
<h3 class="card--title">{{ _('Volunteer') }}</h3>
|
||||
<p class="card--desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</p>
|
||||
<p class="card--desc"><strong><a href="{{ url('landings.get_involved') }}">{{ _('Learn More') }}</a></strong></p>
|
||||
<div class="card card--callout is-full-width has-moz-headings">
|
||||
<div class="card--callout-wrap-narrow">
|
||||
<img class="card--feature-img" src="{{ STATIC_URL }}sumo/img/Mozilla_illustration_placholder2x.png" alt="Illustration of hands" />
|
||||
<div class="card--details">
|
||||
<h3 class="card--title">{{ _('Volunteer') }}</h3>
|
||||
<p class="card--desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</p>
|
||||
<p class="card--desc"><strong><a href="{{ url('landings.get_involved') }}">{{ _('Learn More') }}</a></strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
{% set listed_product=product.slug|capitalize %}
|
||||
|
||||
{% if show_community_support %}
|
||||
<div class="card card--ribbon is-inverse">
|
||||
<div class="card card--ribbon is-inverse has-moz-headings">
|
||||
<div class="card--details">
|
||||
<h3 class="card--title">
|
||||
<svg class="card--icon-sm" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
{% block hidden_search_masthead %}{% endblock %}
|
||||
|
||||
{% block contentwrap %}
|
||||
<section class="home-search-section sumo-page-section shade-bg">
|
||||
<section class="home-search-section sumo-page-section--lg shade-bg">
|
||||
<div class="mzp-l-content">
|
||||
{% block breadcrumbs %}
|
||||
{{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@
|
|||
<!-- This is only displayed when the instant search is active.
|
||||
This block is overriden in home.html and product.html,
|
||||
and can likely be removed when frontend search is replaced. -->
|
||||
<div class="home-search-section sumo-page-section shade-bg hidden-search-masthead">
|
||||
<div class="home-search-section sumo-page-section--lg shade-bg hidden-search-masthead">
|
||||
<div class="mzp-l-content narrow">
|
||||
<div class="home-search-section--content">
|
||||
<h4 class="text-display-xl">{{ _('Search Support') }}</h4>
|
||||
|
|
|
|||
|
|
@ -42,8 +42,8 @@ body {
|
|||
h1, h2, h3, h4, h5, h6,
|
||||
[class*=text-display] {
|
||||
font-family: var(--heading-font-family);
|
||||
color: var(--color-heading);
|
||||
font-weight: bold;
|
||||
color: var(--color-heading);
|
||||
|
||||
a, :link {
|
||||
text-decoration: none;
|
||||
|
|
@ -53,6 +53,10 @@ h1, h2, h3, h4, h5, h6,
|
|||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .has-moz-headings & {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
}
|
||||
}
|
||||
|
||||
.color-heading {
|
||||
|
|
|
|||
|
|
@ -35,14 +35,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: block;
|
||||
@media screen and (max-width: 1055px) {
|
||||
.large-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
@media #{p.$mq-md} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-on-large {
|
||||
@media #{p.$mq-lg} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden,
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
text-align: center;
|
||||
|
||||
.card--title {
|
||||
@include c.text-display-lg;
|
||||
@include c.text-display-lg('no-fam');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
.card--icon-sm {
|
||||
margin-bottom: 8px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card--desc {
|
||||
|
|
@ -133,25 +133,33 @@
|
|||
|
||||
&--callout {
|
||||
@include c.elevation-01;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
background-color: var(--color-callout-bg);
|
||||
|
||||
&-wrap-narrow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card--details {
|
||||
flex: 1 1 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card--title {
|
||||
@include c.text-display-sm;
|
||||
font-family: var(--heading-font-family);
|
||||
@include c.text-display-sm('no-fam');
|
||||
}
|
||||
|
||||
.card--desc {
|
||||
@include c.text-body-md;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -203,7 +211,9 @@
|
|||
|
||||
@media #{p.$mq-md} {
|
||||
&--callout {
|
||||
flex-direction: row;
|
||||
&-wrap-narrow {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.card--desc {
|
||||
margin: p.$spacing-md auto;
|
||||
|
|
@ -219,10 +229,14 @@
|
|||
margin-top: p.$spacing-lg;
|
||||
margin-bottom: p.$spacing-lg;
|
||||
max-width: none;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card--feature-img {
|
||||
max-width: 450px;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -249,10 +263,7 @@
|
|||
}
|
||||
|
||||
&--feature-img {
|
||||
margin-top: -80px;
|
||||
margin-right: 0;
|
||||
margin-bottom: -60px;
|
||||
margin-left: 60px;
|
||||
margin: -80px 0 -60px;
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -223,154 +223,6 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
#doc-tools {
|
||||
.sidebar-nav {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 30px;
|
||||
|
||||
> li {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
|
||||
&.selected {
|
||||
> a,
|
||||
> a:visited {
|
||||
background: #f3f3f3;
|
||||
border: none;
|
||||
border-left: 4px solid #000;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
border: none;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-subtopics {
|
||||
> a {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#editing-tools-sidebar {
|
||||
> span {
|
||||
background: #f3f3f3;
|
||||
border: none;
|
||||
|
||||
&:after {
|
||||
background: none;
|
||||
border-color: #000 transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 8px;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
margin-top: -5px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> span {
|
||||
background: #fff;
|
||||
|
||||
&:after {
|
||||
background: none;
|
||||
border-color: transparent transparent #000 transparent;
|
||||
border-style: solid;
|
||||
border-width: 8px;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
margin-top: -11px;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> a,
|
||||
> a:visited, {
|
||||
color: #000;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-left: 4px solid #e7e7e7;
|
||||
text-transform: none;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.subtopic-selected {
|
||||
> a,
|
||||
> a:visited {
|
||||
background: #fff;
|
||||
border-left: 4px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: none;
|
||||
|
||||
> li {
|
||||
> a,
|
||||
> a:visited {
|
||||
background: #f3f3f3;
|
||||
border-left: none;
|
||||
color: #000;
|
||||
display: block;
|
||||
padding: 12px 20px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> a,
|
||||
> a:visited {
|
||||
border-left: 4px solid #000;
|
||||
font-weight: bold;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Document Translation page */
|
||||
#localize-document {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
--color-error-hover: var(--color-red-07);
|
||||
|
||||
|
||||
--color-inverse-bg: var(--color-black);
|
||||
--color-inverse-bg: var(--color-ink-09);
|
||||
--color-inverse: var(--color-white);
|
||||
|
||||
--color-heading: var(--color-inverse-bg);
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
--base-font-family: Inter, X-LocaleSpecific, sans-serif;
|
||||
--base-font-size: 1rem;
|
||||
// --heading-font-family: 'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif;
|
||||
--heading-font-family-moz: 'Zilla Slab', 'Open Sans', X-LocaleSpecific, serif;
|
||||
--heading-font-family: Metropolis, Inter, X-LocaleSpecific, sans-serif;
|
||||
--heading-alt-font-family: var(--heading-font-family);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,15 @@ $text-body-line-height: 1.5 !default;
|
|||
$text-display-line-height: 1.1 !default;
|
||||
|
||||
// display copy: headings, blockquotes, other fancy stuff
|
||||
@mixin text-display-xxl { // Use this one sparingly.
|
||||
@mixin text-display-xxl($family: false) { // Use this one sparingly.
|
||||
@include p.font-size(48px);
|
||||
line-height: $text-display-line-height;
|
||||
font-family: var(--heading-font-family);
|
||||
@if $family == 'no-fam' {}
|
||||
@else if $family == 'moz' {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
} @else {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
@media #{p.$mq-lg} {
|
||||
@include p.font-size(64px);
|
||||
|
|
@ -17,10 +22,15 @@ $text-display-line-height: 1.1 !default;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin text-display-xl {
|
||||
@mixin text-display-xl($family: false) {
|
||||
@include p.font-size(32px);
|
||||
@include c.line-height(36px);
|
||||
font-family: var(--heading-font-family);
|
||||
@if $family == 'no-fam' {}
|
||||
@else if $family == 'moz' {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
} @else {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
@media #{p.$mq-md} {
|
||||
@include p.font-size(48px);
|
||||
|
|
@ -33,10 +43,15 @@ $text-display-line-height: 1.1 !default;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin text-display-lg {
|
||||
@mixin text-display-lg($family: false) {
|
||||
@include p.font-size(32px);
|
||||
line-height: $text-display-line-height;
|
||||
font-family: var(--heading-font-family);
|
||||
@if $family == 'no-fam' {}
|
||||
@else if $family == 'moz' {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
} @else {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
@media #{p.$mq-lg} {
|
||||
@include p.font-size(48px);
|
||||
|
|
@ -44,20 +59,32 @@ $text-display-line-height: 1.1 !default;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin text-display-md {
|
||||
@mixin text-display-md($family: false) {
|
||||
@include p.font-size(24px);
|
||||
font-family: var(--heading-font-family);
|
||||
line-height: $text-display-line-height;
|
||||
|
||||
@if $family == 'no-fam' {}
|
||||
@else if $family == 'moz' {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
} @else {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
@media #{p.$mq-lg} {
|
||||
@include p.font-size(40px);
|
||||
@include c.line-height(44px);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-display-sm {
|
||||
@mixin text-display-sm($family: false) {
|
||||
@include p.font-size(21px);
|
||||
font-family: var(--heading-font-family);
|
||||
|
||||
@if $family == 'no-fam' {}
|
||||
@else if $family == 'moz' {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
} @else {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
@media #{p.$mq-lg} {
|
||||
@include p.font-size(32px);
|
||||
|
|
@ -65,10 +92,15 @@ $text-display-line-height: 1.1 !default;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin text-display-xs {
|
||||
@mixin text-display-xs($family: false) {
|
||||
@include p.font-size(18px);
|
||||
@include c.line-height(28px);
|
||||
font-family: var(--heading-font-family);
|
||||
@if $family == 'no-fam' {}
|
||||
@else if $family == 'moz' {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
} @else {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
@media #{p.$mq-lg} {
|
||||
@include p.font-size(24px);
|
||||
|
|
@ -76,16 +108,26 @@ $text-display-line-height: 1.1 !default;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin text-display-xxs {
|
||||
@mixin text-display-xxs($family: false) {
|
||||
@include p.font-size(20px);
|
||||
@include c.line-height(24px);
|
||||
font-family: var(--heading-font-family);
|
||||
@if $family == 'no-fam' {}
|
||||
@else if $family == 'moz' {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
} @else {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-display-xxxs {
|
||||
@mixin text-display-xxxs($family: false) {
|
||||
@include p.font-size(16px);
|
||||
@include c.line-height(20px);
|
||||
font-family: var(--heading-font-family);
|
||||
@if $family == 'no-fam' {}
|
||||
@else if $family == 'moz' {
|
||||
font-family: var(--heading-font-family-moz);
|
||||
} @else {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
// body copy
|
||||
|
|
|
|||
|
|
@ -32,6 +32,21 @@
|
|||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
&--lg {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
@media #{p.$mq-md} {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
@media #{p.$mq-lg} {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-break {
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
|
||||
&--form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -57,6 +58,7 @@
|
|||
&--heading {
|
||||
@include c.text-display-xxxs;
|
||||
margin: 0;
|
||||
margin-bottom: p.$spacing-md;
|
||||
}
|
||||
|
||||
&--buttons {
|
||||
|
|
@ -112,6 +114,18 @@
|
|||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{p.$mq-md} {
|
||||
|
||||
&--form {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&--heading {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -98,3 +98,12 @@
|
|||
margin: 88px 0 p.$spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
// pull search up inline with breadcrumbs on large
|
||||
@media #{p.$mq-md} {
|
||||
.breadcrumbs + .sumo-l-two-col {
|
||||
.search-form-sidebar {
|
||||
margin: -48px 0 40px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block side %}
|
||||
<div class="search-form-sidebar hide-on-mobile">
|
||||
<div class="search-form-sidebar large-only">
|
||||
{{ search_box(settings, id='support-search-wiki', params=search_params) }}
|
||||
</div>
|
||||
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
{% endif %}
|
||||
</article>
|
||||
|
||||
<section class="sumo-page-section">
|
||||
<section class="sumo-page-section hide-on-large">
|
||||
{{ vote_form(document, 'footer') }}
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<nav id="doc-tools">
|
||||
<ul class="sidebar-nav sidebar-folding">
|
||||
<li id="editing-tools-sidebar">
|
||||
<h3 class="sidebar-subheading hide-on-mobile">{{ _('Editing Tools') }}</h3>
|
||||
<h3 class="sidebar-subheading large-only">{{ _('Editing Tools') }}</h3>
|
||||
<span class="details-heading"></span>
|
||||
<ul class="sidebar-nav--list">
|
||||
{% if document %}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче