Style search

Author: RascalTwo

static/assets/magnifying-glass.svg

@@ -42,6 +42,44 @@ header {
 	margin-left: 1vw;
 }
 
+.search {
+	font-size: 2rem;
+	position: relative;
+	padding: 1rem;
+	margin-left: -1rem;
+}
+
+.search[open] {
+	background: black;
+	color: white;
+}
+.search[open] summary {
+	content: "Close Search";
+}
+
+.search form {
+	position: absolute;
+	top: 0;
+	left: 100%;
+	width: 100%;
+	height: 4rem;
+}
+
+.search input:nth-of-type(1) {
+	border: 0;
+	display: inline;
+	width: 80%;
+	height: 4rem;
+}
+
+.search input:nth-of-type(2) {
+	width: 15%;
+}
+
+form {
+	background: white;
+}
+
 header ul li {
 	margin-bottom: 1rem;
 	max-width: 14vw;

static/index.css

@@ -18,7 +18,7 @@
 					<li><a href="https://techcrunch.com/"><object data="assets/logo.svg" title="Tech Crunch logo" type="image/svg+xml"></object></a></li>
 					<li><a href="https://oidc.techcrunch.com/login/?prompt=login&dest=https%3A%2F%2Ftechcrunch.com%2F">Login</a></li>
 					<li>
-						<details>
+						<details class="search">
 							<summary>Search</summary>
 
 							<form action="https://search.techcrunch.com/search">