Rewrite Startpage

startpage/styles/styles.css

@@ -5,15 +5,30 @@
  * Distributed under terms of the MIT license.
  */
 
+/* GLOBALS */
+
+h3 {
+	font-size: 70%;
+	letter-spacing: 1em;
+	margin: auto;
+	padding-top: 2em 0 1em 0;
+	text-align: center;
+	text-transform: uppercase;
+}
+h4 {
+	margin: auto;
+	text-align: center;
+}
+
+/* SEARCH BAR */
+
 .search-form {
 	margin: auto;
 	max-width: 32em;
 	padding: 2em;
 	text-align: center;
 }
-
 .search-input {
-	background: var(--background-dark);
 	border: none;
 	border-bottom: 1px solid var(--link);
 	color: var(--text-color);
@@ -28,46 +43,24 @@
 	border-bottom: 1px solid var(--link-hover);
 }
 
-.section-wrapper-header {
-	font-size: 70%;
-	letter-spacing: 1em;
-	margin: auto;
-	padding-top: 2em 0 1em 0;
+/* SECTIONS */
+
+div.spsection{
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	grid-template-rows: auto auto auto auto auto;
+	margin: 1em;
+}
+div.spsubsection a {
+	background: var(--background-bright);
+	border-radius: 8px;
+	box-shadow: 5px 5px var(--shadow);
+	display: block;
+	margin: 0.25em;
+	padding: 0.5em;
 	text-align: center;
-	text-transform: uppercase;
 }
-
-.section-wrapper {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	margin: auto;
-}
-
-.section {
-	break-inside: avoid;
-	min-width: 10em;
-	max-width: 20em;
-	padding: 1em 0 1em 0;
-}
-
-.section-header {
-	column-span: all;
-	margin: 0 0 0.25em 0;
-	text-transform: uppercase;
-}
-
-.section-links {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-	line-height: 1.3;
-}
-.section-links a {
-	color: var(--link);
-	text-decoration: none;
-	transition: .08s ease-in;
-}
-.section-links a:hover {
-	color: var(--link-hover);
+div.spsubsection a:hover {
+	background: var(--link-hover);
+	color: var(--background);
 }