Jdrewniak has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/404438 )
Change subject: Updating header for mobile
......................................................................
Updating header for mobile
Centering the wikipedia logo and header on mobile devices.
This patch reworks much of the header CSS and HTML to group
the Wikipedia wordmark and globe logo together. The globe logo
is now placed using aboslute positioning on desktop and
relative positioning on mobile.
For RTL languages, the logo is also now centered and positioned
to the right of the wordmark.
Bug: T184172
Change-Id: I58e4a9ee4644c15160d4bec4a4258933dc06540c
---
M dev/wikipedia.org/assets/postcss/_central-featured.css
M dev/wikipedia.org/assets/postcss/_central-textlogo.css
M dev/wikipedia.org/assets/postcss/_ie.css
M dev/wikipedia.org/assets/postcss/_wm-portal.css
M dev/wikipedia.org/templates/header-logo.handlebars
M dev/wikipedia.org/templates/top10.handlebars
6 files changed, 54 insertions(+), 43 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/portals
refs/changes/38/404438/1
diff --git a/dev/wikipedia.org/assets/postcss/_central-featured.css
b/dev/wikipedia.org/assets/postcss/_central-featured.css
index b4fa49e..5919d04 100644
--- a/dev/wikipedia.org/assets/postcss/_central-featured.css
+++ b/dev/wikipedia.org/assets/postcss/_central-featured.css
@@ -12,11 +12,6 @@
vertical-align: middle;
}
-.central-featured-logo-wrapper {
- line-height: 31.2rem;
- vertical-align: middle;
-}
-
.central-featured-lang {
position: absolute;
width: 15.6rem;
@@ -109,8 +104,7 @@
.central-featured {
width: auto;
height: auto;
- margin-top: 4.16rem;
- padding-top: 2.08rem;
+ margin-top: 7rem;
font-size: 1.04rem;
text-align: left;
}
@@ -122,14 +116,6 @@
clear: both;
height: 0;
font-size: 0;
- }
-
- .central-featured-logo {
- position: absolute;
- top: -70px;
- left: 0.832rem;
- width: 70px;
- margin-top: -4.16rem;
}
.central-featured-lang {
diff --git a/dev/wikipedia.org/assets/postcss/_central-textlogo.css
b/dev/wikipedia.org/assets/postcss/_central-textlogo.css
index 1bed745..826f3af 100644
--- a/dev/wikipedia.org/assets/postcss/_central-textlogo.css
+++ b/dev/wikipedia.org/assets/postcss/_central-textlogo.css
@@ -2,9 +2,15 @@
/* Section containing the central Wikipedia header */
+.central-textlogo-wrapper {
+ display: inline-block;
+ vertical-align: bottom;
+}
+
.central-textlogo {
- margin: 3rem 0 1.5rem 0;
- padding: 1rem 0;
+ position: relative;
+ margin: 4rem auto 0.5rem auto;
+ width: 270px; /* static width on desktop */
font-family: 'Linux Libertine', 'Hoefler Text', Georgia, 'Times New
Roman', Times, serif;
font-size: 3rem;
font-weight: normal;
@@ -20,7 +26,6 @@
.localized-slogan {
display: block;
- margin-bottom: -2rem;
font-family: var( --font-family-serif );
font-size: 1.6rem;
font-variant: normal;
@@ -34,28 +39,56 @@
text-indent: -10000px;
}
+.central-featured-logo {
+ position: absolute;
+ /* centering position of logo on desktop */
+ top: 136px;
+ left: 35px;
+}
+
@media all and ( max-width: 480px ) {
+
.central-textlogo {
position: relative;
height: 70px;
+ width: auto;
margin: 0;
- padding: 0;
+ margin-top: 2rem;
line-height: normal;
text-align: center;
+ /* visual alignment in an rtl compat way */
+ text-indent: -1.5rem;
+ }
+ .central-textlogo-wrapper {
+ position: relative;
+ /* visual alignment tweeking */
+ top: 2px;
+ left: 2px;
+ /* visual alignment in an rtl compat way */
+ text-indent: -0.5rem;
}
- .central-textlogo__image {
- margin-top: 0.8rem;
+ .svg-Wikipedia_wordmark {
+ /* modifying svg sprite size to shrink logo */
+ width: 150px;
+ height: 25px;
+ background-position: 0 -218px;
+ background-size: 100%;
}
.localized-slogan {
- margin-left: 1.8rem;
+ font-size: 1.5rem;
+ /* visual alignment tweeking */
+ line-height: 2rem;
}
-}
-@media all and ( max-width: 375px ) {
- .central-textlogo {
- margin-left: 50px;
+ .central-featured-logo {
+ position: relative;
+ display: inline-block;
+ width: 57px;
+ left: 0;
+ /* visual alignment tweeking */
+ top: 3px;
}
}
diff --git a/dev/wikipedia.org/assets/postcss/_ie.css
b/dev/wikipedia.org/assets/postcss/_ie.css
index aa333b9..b7abdc3 100644
--- a/dev/wikipedia.org/assets/postcss/_ie.css
+++ b/dev/wikipedia.org/assets/postcss/_ie.css
@@ -27,14 +27,6 @@
*width: auto;
}
-.central-featured-logo {
- *display: inline-block;
- *line-height: 26em;
- *top: 6em;
- *position: absolute;
- *left: 13.5em;
-}
-
.search-container button {
*display: inline;
}
diff --git a/dev/wikipedia.org/assets/postcss/_wm-portal.css
b/dev/wikipedia.org/assets/postcss/_wm-portal.css
index 4148656..6057d62 100644
--- a/dev/wikipedia.org/assets/postcss/_wm-portal.css
+++ b/dev/wikipedia.org/assets/postcss/_wm-portal.css
@@ -13,7 +13,7 @@
margin-top: 0;
height: 7.8rem;
position: absolute;
- top: 6.5rem;
+ top: 9rem;
left: 0;
right: 0;
max-width: 100%;
diff --git a/dev/wikipedia.org/templates/header-logo.handlebars
b/dev/wikipedia.org/templates/header-logo.handlebars
index d08fcdc..4370cd4 100644
--- a/dev/wikipedia.org/templates/header-logo.handlebars
+++ b/dev/wikipedia.org/templates/header-logo.handlebars
@@ -1,6 +1,11 @@
<h1 class="central-textlogo" style="font-variant: small-caps;" alt="WikipediA"
title="Wikipedia">
- <div class="central-textlogo__image sprite svg-Wikipedia_wordmark">
- Wikipedia
+ <!-- logo -->
+ <img class="central-featured-logo"
src="portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png"
srcset="portal/wikipedia.org/assets/img/wikipedia-logo...@1.5x.png 1.5x,
portal/wikipedia.org/assets/img/wikipedia-logo...@2x.png 2x" width="200"
alt="Wikipedia Logo">
+ <!-- wordmark -->
+ <div class="central-textlogo-wrapper">
+ <div class="central-textlogo__image sprite svg-Wikipedia_wordmark">
+ Wikipedia
+ </div>
+ <strong class="jsl10n localized-slogan" data-jsl10n="slogan" >The Free
Encyclopedia</strong>
</div>
- <strong class="jsl10n localized-slogan" data-jsl10n="slogan" >The Free
Encyclopedia</strong>
</h1>
diff --git a/dev/wikipedia.org/templates/top10.handlebars
b/dev/wikipedia.org/templates/top10.handlebars
index b417ac2..62ad274 100644
--- a/dev/wikipedia.org/templates/top10.handlebars
+++ b/dev/wikipedia.org/templates/top10.handlebars
@@ -1,11 +1,6 @@
<!-- container div for the central logo and the links to the most viewed
language editions -->
<div class="central-featured" data-el-section="primary links">
- <!-- logo -->
- <div class="central-featured-logo-wrapper">
- <img class="central-featured-logo"
src="portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png"
srcset="portal/wikipedia.org/assets/img/wikipedia-logo...@1.5x.png 1.5x,
portal/wikipedia.org/assets/img/wikipedia-logo...@2x.png 2x" width="200"
alt="Wikipedia Logo">
- </div>
-
<!-- Rankings from http://stats.wikimedia.org/EN/Sitemap.htm -->
<!-- Article counts from
http://meta.wikimedia.org/wiki/List_of_Wikipedias/Table -->
{{#each top10views}}
--
To view, visit https://gerrit.wikimedia.org/r/404438
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I58e4a9ee4644c15160d4bec4a4258933dc06540c
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/portals
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <jdrewn...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
