improve styles, handle r4-search with redirect /:slug → slug.domain

index.css

@@ -2,7 +2,9 @@
 html {
 	box-sizing: border-box;
 }
-*, *:before, *:after {
+*,
+*:before,
+*:after {
 	box-sizing: inherit;
 }
 
@@ -11,13 +13,14 @@ html {
 :host {
 	--size-font: 18px;
 	--size: 1.3em;
-	--sinze-font-0: 1rem;
-	--sinze-font-h1: 2rem;
-	--sinze-font-h2: 1.8rem;
-	--sinze-font-h2: 1.6rem;
-	--sinze-font-h3: 1.4rem;
-	--sinze-font-s1: 0.9rem;
-	--sinze-font-s2: 0.8rem;
+	--size-container: 40rem;
+	--size-font-0: 1rem;
+	--size-font-h1: 2rem;
+	--size-font-h2: 1.8rem;
+	--size-font-h2: 1.6rem;
+	--size-font-h3: 1.4rem;
+	--size-font-s1: 0.9rem;
+	--size-font-s2: 0.8rem;
 }
 @media screen (min-width: 50rem) {
 	:root,
@@ -30,7 +33,7 @@ html {
 	r4-app {
 		--color-text: white;
 		--color-background: black;
-		--color-link: purple;
+		--color-link: darkgray;
 	}
 }
 @media (prefers-color-scheme: light) {
@@ -64,28 +67,51 @@ body {
 
 /* text */
 a {
-	color: var(--color-text);
+	color: var(--color-link);
+	text-decoration: none;
+}
+
+fieldset {
+	border: none;
+}
+fieldset label {
+	padding: calc(var(--size) / 3);
+}
+input,
+textarea,
+button {
+	padding: calc(var(--size) / 3);
+	font-size: var(--size-font);
 }
 
 /* app */
 r4-radio {
 	padding: var(--size);
 	flex-grow: 1;
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 }
 
 r4-radio-home {
 	flex-grow: 1;
 	display: flex;
+	justify-content: center;
 	align-items: center;
+	flex-wrap: wrap;
+}
+r4-radio-home section {
+	display: flex;
+	flex-wrap: wrap;
 	justify-content: center;
+	align-items: center;
+	align-self: flex-end;
 }
+
 r4-radio-home h1,
 r4-radio-home r4-title {
 	font-size: var(--size-font-0);
 	margin: 0;
-	padding: var(--size);
+	padding: calc(var(--size) / 2);
 }
 
 r4-app-firebase {
@@ -97,3 +123,54 @@ r4-app-firebase {
 r4-app-firebase > iframe {
 	flex-grow: 1;
 }
+
+r4-channel-search {
+	flex-grow: 1;
+	flex-basis: 100%;
+	align-self: flex-start;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+r4-channel-search ul {
+	max-width: var(--size-container);
+}
+
+r4-favicon {
+	display: flex;
+	flex-basis: 100%;
+	justify-content: center;
+}
+r4-favicon svg {
+	fill: var(--color-link);
+	max-width: calc(var(--size) * 3);
+	max-height: calc(var(--size) * 3);
+}
+
+r4-search-form,
+r4-search-form fieldset {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+r4-channel-card {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	padding: calc(var(--size) / 3);
+}
+r4-channel-card a {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+r4-channel-card r4-avatar,
+r4-channel-card r4-name,
+r4-channel-card r4-slug {
+	padding: calc(var(--size) / 4);
+}
+
+r4-avatar {
+	display: inline-flex;
+}