Magnify elements

includes/Constants.php

@@ -22,4 +22,9 @@ final class Constants {
 	 * @var string
 	 */
 	public const CONFIG_KEY_SHOW_FOOTER_ICONS = 'FemiwikiShowFooterIcons';
+
+	/**
+	 * @var string
+	 */
+	public const COOKIE_KEY_USE_LEGACY = 'UseLegacy';
 }

includes/SkinFemiwiki.php

@@ -24,12 +24,16 @@ class SkinFemiwiki extends SkinMustache {
 	 * @inheritDoc
 	 */
 	public function __construct( $options = [] ) {
-		if ( $this->getUser()->isLoggedIn() ) {
+		$loggedIn = $this->getUser()->isLoggedIn();
+		if ( $loggedIn ) {
 			$options['scripts'][] = 'skins.femiwiki.notifications';
 		}
 		if ( $this->shouldShowShare() ) {
 			$options['scripts'][] = 'skins.femiwiki.share';
 		}
+		if ( $loggedIn && $this->getRequest()->getCookie( Constants::COOKIE_KEY_USE_LEGACY ) ) {
+			$options['styles'][] = 'skins.femiwiki.legacy';
+		}
 		parent::__construct( $options );
 	}
 

resources/skins.femiwiki.legacy/styles.less

@@ -0,0 +1,52 @@
+@import '../variables.less';
+
+// Override variables.less
+@font-size-root-default: 16.5;
+@content-width: 50rem;
+
+html {
+  font-size: unit(@font-size-root-default, px);
+}
+
+.nav-bar #mw-navigation {
+  max-width: @content-width - 1.3rem;
+}
+
+.fw-wiki-portals {
+  max-width: @content-width - @content-horizontal-padding;
+}
+
+#p-header,
+.mw-body,
+#p-lang,
+.mw-footer {
+  max-width: @content-width;
+}
+
+hr#content-end-bar {
+  max-width: 47.4em;
+}
+
+.fw-wiki-portals {
+  .mw-portlet {
+    @three-portlets-min-width: (@portal-min-width * 3) +
+      (@portal-column-gap * 2) + (@content-horizontal-padding * 2);
+    @four-portlets-min-width: (@portal-min-width * 4) + (@portal-column-gap * 3) +
+      (@content-horizontal-padding * 2);
+
+    @min-width: unit(@three-portlets-min-width * @font-size-root-default, px);
+    @max-width: unit(@four-portlets-min-width * @font-size-root-default, px);
+
+    @media (min-width: @min-width) and (max-width: @max-width) {
+      flex-basis: 40%;
+    }
+  }
+}
+
+html.ve-active,
+html.ve-activated,
+html.ve-deactivating {
+  .oo-ui-toolbar {
+    font-size: 12px !important;
+  }
+}

resources/skins.femiwiki.moduleSkinStyles/ext.visualEditor.desktopTarget.less

@@ -44,7 +44,7 @@ html.ve-deactivating {
   }
 
   .oo-ui-toolbar {
-    font-size: 12px;
+    font-size: 15px;
   }
 }
 

resources/skins.femiwiki/interface.less

@@ -424,13 +424,19 @@
 
 // End of content
 hr#content-end-bar {
+  @padding: @content-horizontal-padding * 2;
   border: 0;
   border-width: 1px;
   border-color: @color-primary2;
   background-color: #a2a9b1;
-  max-width: 47.4em;
+  max-width: @content-width - @padding;
   margin: 0 auto;
   height: 1px;
+
+  @media (max-width: @width-breakpoint-mobile-small) {
+    @padding: @content-horizontal-padding-mobile-small * 2;
+    max-width: @content-width - @padding;
+  }
 }
 
 #p-lang {

resources/variables.less

@@ -1,11 +1,12 @@
-@font-size-root-default: 16.5;
+@font-size-root-default: 19;
 
 @width-breakpoint-mobile-small: 360px;
 @width-breakpoint-mobile: 480px;
 @width-breakpoint-tablet: 640px;
 
-@content-width: 50rem;
+@content-width: 43.4rem;
 @content-horizontal-padding: 1.3rem;
+@content-horizontal-padding-mobile-small: 0.85rem;
 
 @portal-min-width: 8.8rem;
 @portal-column-gap: 0.8rem;
@@ -94,7 +95,7 @@
   padding-left: @padding;
   padding-right: @padding;
   @media (max-width: @width-breakpoint-mobile-small) {
-    @padding: 0.85rem;
+    @padding: @content-horizontal-padding-mobile-small;
     padding-left: @padding;
     padding-right: @padding;
   }

skin.json

@@ -64,6 +64,16 @@
         "print.less"
       ]
     },
+    "skins.femiwiki.legacy": {
+      "class": "ResourceLoaderSkinModule",
+      "features": {
+        "content-parser-output": false,
+        "toc": false
+      },
+      "targets": ["desktop", "mobile"],
+      "position": "top",
+      "styles": ["skins.femiwiki.legacy/styles.less"]
+    },
     "skins.femiwiki.xeicon": {
       "class": "ResourceLoaderSkinModule",
       "features": {