initial commit

startpage/style.css

@@ -0,0 +1,103 @@
+:root {
+	--bg: #161617;
+	--fg: #c9c7cd;
+	--bg-dark: #131314;
+
+	/* Normal */
+	--black: #27272a;
+	--red: #f5a191;
+	--green: #90b99f;
+	--yellow: #e6b99d;
+	--blue: #aca1cf;
+	--magenta: #e29eca;
+	--cyan: #ea83a5;
+	--white: #c1c0d4;
+	/* Bright */
+	--bright-black: #353539;
+	--bright-red: #ffae9f;
+	--bright-green: #9dc6ac;
+	--bright-yellow: #f0c5a9;
+	--bright-blue: #b9aeda;
+	--bright-magenta: #ecaad6;
+	--bright-cyan: #f591b2;
+	--bright-white: #cac9dd;
+	/* Grays */
+	--gray01: #1b1b1d;
+	--gray02: #2a2a2d;
+	--gray03: #3e3e43;
+	--gray04: #57575f;
+	--gray05: #757581;
+	--gray06: #9998a8;
+	--gray07: var(--white);
+}
+
+html, body {
+	background-color: var(--bg-dark);
+	max-width: 80ch;
+	max-height: 100%;
+	margin: auto;
+}
+
+@media (orientation: portrait) {
+	html, body {
+		max-width: 100% !important;
+		padding: 5px !important;
+	}
+}
+
+#font, p, ul, ol, h1, h2, h3, h4, h5, table {
+	font-family: sans-serif;
+	color: white;
+}
+pre {
+	color: white;
+}
+h1 {
+	font-size: 3em;
+}
+a {
+	font-family: sans-serif;
+	text-decoration: none;
+	color: var(--cyan);
+}
+a:hover, a:active {
+	text-decoration: underline;
+}
+
+#search {
+	display: flex;
+	align-items: center;
+
+	#search-bar, #search-btn {
+		height: 2.25em;
+		background-color: var(--bg);
+		color: white;
+		padding: 0 15px;
+		border: none;
+	}
+	#search-bar {
+		width: 100%;
+	}
+	#search-bar:focus {
+		outline: none;
+		background-color: var(--gray01);
+	}
+	#search-btn {
+		background-color: var(--yellow);
+		color: var(--bg);
+		font-weight: bold;
+		cursor: pointer;
+	}
+	#search-btn:focus {
+		outline: none;
+		background-color: var(--bright-yellow);
+	}
+}
+#search-results {
+	height: 15lh;
+	margin-top: 0px;
+	margin-bottom: 0px;
+	padding: 15px;
+	overflow: scroll;
+	background-color: #111112;
+}