1 files changed, 108 insertions, 0 deletions
diff --git a/skins/Vector/responsive.less b/skins/Vector/responsive.less
new file mode 100644
index 0000000..ac483d3
--- /dev/null
+++ b/skins/Vector/responsive.less
@@ -0,0 +1,108 @@
+/*
+	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.
+*/
+
+div#mw-head {
+	position: static !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 div#footer {
+	margin-left: 0;
+	padding-top: 0;
+
+	/* don't need these in the footer either... */
+	li#footer-info-lastmod,
+	li#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;
+}