[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
.mw-logo {
|
|
|
|
.flex-display();
|
|
|
|
// If icon is not configured, ensure that the logo still takes up available
|
|
|
|
// space allocated by layout.
|
|
|
|
height: 100%;
|
|
|
|
// Center vertically.
|
|
|
|
align-items: center;
|
2022-04-15 19:56:32 +00:00
|
|
|
// Hamburger menu icon with padding (22px + 12px = 46px) + right margin (12px) + logo (222px @ 16) + space between
|
|
|
|
// logo and searchbox (28px) = 296px which equals the sum of widths of sidebar elements (i.e. TOC) when toggled.
|
2022-04-08 22:33:59 +00:00
|
|
|
// 226px @ 16 provides correct spacing between the right edge of logo container + left edge of searchbox input.
|
2022-04-15 19:56:32 +00:00
|
|
|
min-width: 13.875em; // 222px @ 16
|
2022-12-16 22:11:17 +00:00
|
|
|
|
2023-03-28 15:26:22 +00:00
|
|
|
.vector-feature-main-menu-pinned-disabled & {
|
2022-12-16 22:11:17 +00:00
|
|
|
// The logo is 40px from the page container.
|
|
|
|
// Main menu button width (20px) + 20px = 40px
|
|
|
|
margin-left: 20px;
|
|
|
|
}
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.mw-logo-icon {
|
|
|
|
// For browsers which do not support flexbox we float left.
|
|
|
|
// This will be ignored in flexbox browsers.
|
|
|
|
float: left;
|
|
|
|
margin-right: 10px;
|
2021-06-02 22:57:43 +00:00
|
|
|
// Hide mobile icon at lower resolutions and defer to wordmark
|
|
|
|
display: none;
|
2021-09-08 18:43:50 +00:00
|
|
|
@size-mw-logo-icon: unit( 50 / @font-size-browser, em );
|
|
|
|
width: @size-mw-logo-icon;
|
|
|
|
height: @size-mw-logo-icon;
|
2021-06-02 22:57:43 +00:00
|
|
|
|
2022-06-23 21:33:47 +00:00
|
|
|
@media ( min-width: @min-width-tablet ) {
|
2021-06-02 22:57:43 +00:00
|
|
|
display: block;
|
|
|
|
}
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.mw-logo-container {
|
|
|
|
// For browsers which do not support flexbox we float left.
|
|
|
|
// This will be ignored in flexbox browsers.
|
|
|
|
// The two children `div`s will lay out in a row.
|
|
|
|
float: left;
|
2021-06-02 22:57:43 +00:00
|
|
|
// At mobile resolutions restrict logo to 120px to optimize for a 340px display (@min-width-supported)
|
|
|
|
// (based on https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide)
|
|
|
|
// This accounts for up to 5 icons
|
|
|
|
// (Echo notifications x 2, search, hamburger and personal menu)
|
|
|
|
// where the icons have 44px each (44x5 = 220px)
|
|
|
|
max-width: 120px;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
2022-06-23 21:33:47 +00:00
|
|
|
@media ( min-width: @min-width-tablet ) {
|
2021-06-02 22:57:43 +00:00
|
|
|
max-width: none;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: auto;
|
|
|
|
}
|
|
|
|
}
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Note for 3rd parties where no wgLogos['wordmark'] is defined
|
|
|
|
// the site title is not clipped. We may need to revisit this later
|
|
|
|
// for projects with long site titles.
|
|
|
|
.mw-logo-wordmark {
|
2020-05-11 18:43:07 +00:00
|
|
|
display: block;
|
|
|
|
margin: 0 auto;
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.mw-logo-tagline {
|
|
|
|
// For browsers which do not support flexbox.
|
|
|
|
display: block;
|
2020-05-11 18:43:07 +00:00
|
|
|
margin: 5px auto 0;
|
[modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
|
|
|
}
|