1 files changed, 110 insertions, 0 deletions
diff --git a/www/wiki/skins/Vector/responsive.less b/www/wiki/skins/Vector/responsive.less
new file mode 100644
index 00000000..17e683c4
--- /dev/null
+++ b/www/wiki/skins/Vector/responsive.less
@@ -0,0 +1,110 @@
+/*
+	The styles below essentially place the navigation menu below the content,
+	instead of to the side of it. They also hide the logo, as there's no space
+	left for it.
+*/
+
+@media screen and ( max-width: @deviceWidthTablet ) {
+	div#mw-head {
+		position: static !important; /* stylelint-disable-line declaration-no-important */
+		margin-top: 0.5em;
+	}
+
+	/* Move the panel to the bottom and display it as in-line lists */
+	div#mw-navigation {
+		div#mw-panel {
+			display: table;
+			position: static;
+			table-layout: fixed;
+			width: 100%;
+			overflow: hidden;
+			font-size: 150%;
+
+			.portal {
+				display: block;
+				width: 100%;
+			}
+
+			ul li {
+				list-style: none;
+			}
+		}
+	}
+
+	/* Hide the logo and tabs */
+	div#p-logo {
+		display: none;
+	}
+
+	/* Rearrange various page elements to fill the now-available space */
+	body #footer {
+		margin-left: 0;
+		padding-top: 0;
+
+		/* don't need these in the footer either... */
+		#footer-info-lastmod,
+		#footer-info-viewcount {
+			display: none;
+		}
+	}
+	div#p-personal {
+		display: table;
+		position: relative;
+		width: 100%;
+		top: inherit;
+		left: inherit;
+		right: inherit;
+
+		ul {
+			padding-left: 0;
+		}
+	}
+	div#right-navigation {
+		position: absolute;
+		top: inherit;
+		right: 0;
+		margin-top: 0;
+		float: none;
+	}
+	div#left-navigation {
+		position: absolute;
+		top: inherit;
+		margin: 0;
+		display: block;
+		float: none;
+	}
+	div#p-namespaces,
+	div#p-views,
+	div#p-variants {
+		position: relative;
+		top: 2.5em;
+	}
+	div#p-namespaces {
+		padding-left: 0;
+	}
+	div#p-cactions {
+		top: 2.5em;
+		float: right;
+	}
+	div#p-search {
+		float: none;
+		position: absolute;
+		right: 0;
+		width: 100vw;
+		margin: 0;
+	}
+	div#simpleSearch {
+		margin: 0 3em;
+		width: 80vw;
+		padding: 0;
+	}
+	div.vectorMenu div.menu {
+		left: inherit;
+		right: -1px;
+	}
+	div#content {
+		/* Hide the 1px blue border on the left side */
+		border-left: 0;
+		margin-left: 0;
+	}
+}