From 835862fffcf3af284d1dbebad30106dde2917142 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Tue, 14 Apr 2020 10:46:11 -0700 Subject: [PATCH] Layout is separated from "common" CSS This unblocks work on the header which will rewrite the layout code. This corresponds to a 0.06kb increase in CSS size, which is zero after gzipping. Bug: T249073 Change-Id: I23f18fc5f078da3331cad540bbaf533d348f2108 --- resources/skins.vector.styles/Sidebar.less | 4 - resources/skins.vector.styles/common.less | 47 ---------- resources/skins.vector.styles/hd.less | 31 ------- resources/skins.vector.styles/index.less | 2 +- resources/skins.vector.styles/layout.less | 102 +++++++++++++++++++++ resources/skins.vector.styles/legacy.less | 2 +- 6 files changed, 104 insertions(+), 84 deletions(-) delete mode 100644 resources/skins.vector.styles/hd.less create mode 100644 resources/skins.vector.styles/layout.less diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less index ec5f07d..0d91746 100644 --- a/resources/skins.vector.styles/Sidebar.less +++ b/resources/skins.vector.styles/Sidebar.less @@ -17,10 +17,6 @@ /* Panel */ #mw-panel { - position: absolute; - top: 0; - width: 10em; - left: 0; font-size: @font-size-nav-main; /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */ diff --git a/resources/skins.vector.styles/common.less b/resources/skins.vector.styles/common.less index fddb9b9..cff58ab 100644 --- a/resources/skins.vector.styles/common.less +++ b/resources/skins.vector.styles/common.less @@ -33,11 +33,6 @@ body { direction: ltr; } -.mw-body, -#mw-data-after-content { - margin-left: 10em; -} - .mw-body { /* Border on top, left, and bottom side */ border: @border-width-base @border-style-base @border-color-content; @@ -81,11 +76,9 @@ body { } .mw-indicators { - float: right; font-size: @font-size-base; line-height: @line-height-base; position: relative; - z-index: @z-index-indicators; } .mw-indicator { @@ -94,13 +87,11 @@ body { } .mw-body-content { - position: relative; font-size: @font-size-base; // Support IE 9-11, Trident cuts values 2 digits after decimal point. // `calc` enables to set correct calculation in place again. See T102364. font-size: calc( 1em ~'*' unit( @font-size-base ) ); line-height: @line-height-base; - z-index: @z-index-base; p { margin: 0.5em 0; @@ -179,43 +170,5 @@ pre, /* Head */ #mw-page-base { background-position: bottom left; - height: 5em; .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% ); } - -#mw-head-base { - margin-top: -5em; - margin-left: 10em; - height: 5em; -} - -/* Hide, but keep accessible for screen-readers */ -#mw-navigation h2 { - position: absolute; - top: -9999px; -} - -#mw-head { - position: absolute; - top: 0; - right: 0; - width: 100%; -} - -/* Navigation Containers */ -#left-navigation { - float: left; - margin-left: 10em; - margin-top: 2.5em; - /* When right nav would overlap left nav, it's placed below it - (normal CSS floats behavior). This rule ensures that no empty space - is shown between them due to right nav's margin-top. Page layout - is still broken, but at least the nav overlaps only the page title - instead of half the content. */ - margin-bottom: -2.5em; -} - -#right-navigation { - float: right; - margin-top: 2.5em; -} diff --git a/resources/skins.vector.styles/hd.less b/resources/skins.vector.styles/hd.less deleted file mode 100644 index eb56ca3..0000000 --- a/resources/skins.vector.styles/hd.less +++ /dev/null @@ -1,31 +0,0 @@ -/* Vector screen styles for high definition displays. These rules cross the above components and are - grouped together here only for the sake of the media query common to each. */ -@media screen and ( min-width: 982px ) { - .mw-body, - #mw-head-base, - #left-navigation, - #mw-data-after-content, - #footer { - margin-left: 11em; - } - - .mw-body { - padding: 1.25em 1.5em 1.5em 1.5em; - } - - #footer { - padding: 1.25em; - } - - #mw-panel { - padding-left: 0.5em; - } - - #p-search { - margin-right: 1em; - } - - #p-personal { - right: 1em; - } -} diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less index 11ca945..24b773a 100644 --- a/resources/skins.vector.styles/index.less +++ b/resources/skins.vector.styles/index.less @@ -15,6 +15,6 @@ @import 'externalLinks.less'; } +@import 'layout.less'; @import 'watchstar-ie8.less'; -@import 'hd.less'; @import 'print.less'; diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less new file mode 100644 index 0000000..08bfd69 --- /dev/null +++ b/resources/skins.vector.styles/layout.less @@ -0,0 +1,102 @@ +// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin. +// The rules here should only define the layout, not color or typography. + +@import 'mediawiki.mixins.less'; + +@media screen { + .mw-body, + #mw-data-after-content { + margin-left: 10em; + } + + .mw-indicators { + float: right; + z-index: @z-index-indicators; + } + + .mw-body-content { + position: relative; + z-index: @z-index-base; + } + + /* Head */ + #mw-page-base { + height: 5em; + } + + #mw-head-base { + margin-top: -5em; + margin-left: 10em; + height: 5em; + } + + /* Hide, but keep accessible for screen-readers */ + #mw-navigation h2 { + position: absolute; + top: -9999px; + } + + #mw-head { + position: absolute; + top: 0; + right: 0; + width: 100%; + } + + /* Navigation Containers */ + #left-navigation { + float: left; + margin-left: 10em; + margin-top: 2.5em; + /* When right nav would overlap left nav, it's placed below it + (normal CSS floats behavior). This rule ensures that no empty space + is shown between them due to right nav's margin-top. Page layout + is still broken, but at least the nav overlaps only the page title + instead of half the content. */ + margin-bottom: -2.5em; + } + + #right-navigation { + float: right; + margin-top: 2.5em; + } + + #mw-panel { + position: absolute; + top: 0; + width: 10em; + left: 0; + } +} + +/* Vector screen styles for high definition displays. These rules cross the above components and are + grouped together here only for the sake of the media query common to each. */ +@media screen and ( min-width: 982px ) { + .mw-body, + #mw-head-base, + #left-navigation, + #mw-data-after-content, + #footer { + margin-left: 11em; + } + + .mw-body { + padding: 1.25em 1.5em 1.5em 1.5em; + } + + #footer { + padding: 1.25em; + } + + #mw-panel { + padding-left: 0.5em; + } + + #p-search { + margin-right: 1em; + } + + #p-personal { + right: 1em; + } +} diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less index 8687e54..5089f0c 100644 --- a/resources/skins.vector.styles/legacy.less +++ b/resources/skins.vector.styles/legacy.less @@ -14,6 +14,6 @@ @import 'externalLinks.less'; } +@import 'layout.less'; @import 'watchstar-ie8.less'; -@import 'hd.less'; @import 'print.less';