template: Don't render searchbar in portrait. Show link instead

Issue: #18

template/quitesimple/general_header

@@ -13,9 +13,10 @@
     <li><a href="{qswiki:config:linkrecent}">Recent changes</a></li>
     <li><a href="{qswiki:config:linkallpages}">All pages</a></li>
     <li><a href="{qswiki:config:linkallcats}">All categories</a></li>
+    <li id="searchlink"><a href="{qswiki:config:linksearch}">Search</a></li>
     </ul>
 
     <ul id="right" class="search">
-	<li><div><form action="{qswiki:config:wikipath}" method="GET"><input type="hidden" name="action" value="search"/><input type="text" name="q" value="search here" onfocus="this.value=''"></form></div></li>
+	<li><div id="searchbar"><form action="{qswiki:config:wikipath}" method="GET"><input type="hidden" name="action" value="search"/><input type="text" name="q" value="search here" onfocus="this.value=''"></form></div></li>
 	</ul>
 </nav>

template/quitesimple/page_header

@@ -13,6 +13,7 @@
     <li><a href="{qswiki:config:linkrecent}">Recent changes</a></li>
     <li><a href="{qswiki:config:linkallpages}">All pages</a></li>
     <li><a href="{qswiki:config:linkallcats}">All categories</a></li>
+    <li id="searchlink"><a href="{qswiki:config:linksearch}">Search</a></li>
     </ul>
 
     <ul>
@@ -20,6 +21,6 @@
 	</ul>
 
     <ul id="right" class="search">
-	<li><div><form action="{qswiki:config:wikipath}" method="GET"><input type="hidden" name="action" value="search"/><input type="text" value="search here" onfocus="this.value=''" name="q"/></form></div></li>
+	<li><div id="searchbar"><form action="{qswiki:config:wikipath}" method="GET"><input type="hidden" name="action" value="search"/><input type="text" value="search here" onfocus="this.value=''" name="q"/></form></div></li>
 	</ul>
-</nav>
+</nav>

template/quitesimple/style.css

@@ -23,7 +23,6 @@ h1, h2, h3
 {
 	margin: 0;
 	padding: 0;
-        display: inline;
 }
 
 nav
@@ -37,6 +36,7 @@ nav
 	grid-area: nav;
 
 }
+
 nav ul
 {
 	background-color: #062463;
@@ -47,16 +47,12 @@ nav ul
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
-
-
 }
+
 nav li
 {
 	margin: 0;
 	padding: 0;
-
-
-
 }
 
 nav a, nav a:visited
@@ -68,7 +64,6 @@ nav a, nav a:visited
 	font-weight: bold;
 	text-align: center;
 	line-height: 100%;
-
 }
 
 nav a:hover, nav a:focus
@@ -81,8 +76,6 @@ nav a:hover, nav a:focus
 	font-weight: bold;
 }
 
-
-
 a, a:visited
 {
 	color: #062463;;
@@ -92,40 +85,36 @@ a:hover
 {
 	background-color: #062463;
 	color: white;
-
 }
 
 #content
 {
-padding: 15px;
-font-family: monospace;
-font-size: 14pt;
-flex: 1;
-grid-area: main
+	padding: 15px;
+	font-family: monospace;
+	font-size: 14pt;
+	flex: 1;
+	grid-area: main
 }
 
 #sidebar
 {
-grid-area: side;
-
+	grid-area: side;
 }
 
 #sidebar ul
 {
-list-style-type: none;
-
+	list-style-type: none;
 }
 
 #sidebar a, a:visited
 {
 	color: #062463;
-
 }
 
 #sidebar a:hover
 {
-   background-color: #062463;
-   color: white;
+	background-color: #062463;
+	color: white;
 }
 
 #content a, a:visited
@@ -135,11 +124,10 @@ list-style-type: none;
 
 #content a:hover
 {
-   background-color: #062463;
-   color: white;
-
-
+	background-color: #062463;
+	color: white;
 }
+
 footer
 {
 	width: 100%;
@@ -160,6 +148,7 @@ footer ul
 	flex-wrap: wrap;
 	align-items: center;
 }
+
 footer li
 {
 	margin: 0;
@@ -168,14 +157,12 @@ footer li
 	line-height: 45px;
 	color: white;
 	font-weight: bold;
-	//flex: 1 1 0;
 	text-align: center;
 }
 
 footer a, a:visited
 {
 	text-decoration: none;
-
 	color: white;
 	display: inline-block;
 }
@@ -190,7 +177,7 @@ footer a:hover, ul#nav a:focus
 
 #cats
 {
-background-color: #062463;
+	background-color: #062463;
 }
 
 .letter_search_result
@@ -198,20 +185,27 @@ background-color: #062463;
 	text-decoration: underline;
 	font-weight: bold;
 }
+
 ol
 {
 	counter-reset: item;
 }
+
 .indexlink
 {
-display: block;
+	display: block;
 }
+
 .notexists
 {
 	color: red !important;
 	font-weight: bold;
 }
 
+#searchlink
+{
+	display: none;
+}
 
 @media screen and (orientation: portrait)
 {
@@ -219,13 +213,23 @@ display: block;
 	{
 		display: none;
 	}
+
 	#footer li:nth-child(-n+2)
 	{
 		display: none;
 	}
+
 	#footer li:nth-of-type(3)
 	{
 		text-align: center;
 		width: 100%;
 	}
+
+	#searchlink {
+		display: inline;
+	}
+
+	#searchbar {
+		display: none;
+	}
 }