pr@tic: experiment with #nav responsiveness

static/custom-pratic/style.css

@@ -109,3 +109,111 @@ div#nav li:after {
 div#content div.a2-block {
 	padding: 1em;
 }
+
+div#services > ul > li {
+	padding: 0;
+	width: calc(99% - 20px); /* - padding */
+}
+
+div#services > ul > li > strong {
+	background: #6A0072;
+	color: white;
+}
+
+div#services > ul > li > strong a,
+div#services > ul > li > strong a:hover {
+	color: inherit;
+	font-weight: normal;
+}
+
+div#centre ul strong {
+	margin: 0;
+}
+
+div#centre ul ul {
+	margin: 0;
+	padding: 0;
+}
+
+div#centre li li {
+	list-style: none;
+	font-size: 110%;
+	position: relative;
+}
+
+div#centre li li a {
+	display: block;
+	padding: 1.5ex 2ex;
+	border-top: 1px solid #aaa;
+}
+
+div#centre li li span { /* authentication required */
+	position: absolute;
+	right: 1ex;
+	top: 0;
+	line-height: 6ex;
+}
+
+div#centre li li:hover span {
+	color: white;
+}
+
+div#centre li li a:hover {
+	background: #6A0072;
+	color: white;
+	text-decoration: none;
+}
+
+
+@media screen and (max-width: 990px) {
+	div#header {
+		z-index: 10;
+	}
+	div#nav {
+		position: fixed;
+		top: 0;
+		left: 0;
+		background: #eee;
+		z-index: 1000;
+		height: 100vh;
+		width: 12em;
+		border: none;
+		margin: 0;
+		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
+		width: 5px;
+		transition: all ease 0.5s;
+	}
+	div#nav.toggled {
+		width: 15em;
+	}
+	div#nav:before {
+		content: "≡";
+		padding-right: 0.3ex;
+		font-size: 300%;
+		background: #eee;
+		color: #6A0072;
+		border-radius: 0 5px 5px 0;
+		cursor: pointer;
+		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
+		transition: all ease 0.5s;
+	}
+	div#nav.toggled:before {
+		box-shadow: none;
+	}
+	div#nav ul {
+		height: auto;
+		overflow: hidden;
+		border: 0;
+	}
+	div#nav li {
+		float: none;
+		display: block;
+		white-space: nowrap;
+	}
+
+	div#nav li a {
+		display: block;
+		border: none;
+	}
+}
+}