Styling

public/themes/classic.css

@@ -71,10 +71,6 @@ r4-app a:has(r4-avatar) {
 	padding: initial;
 }
 
-r4-app li {
-	/* margin-bottom: calc(var(--s) / 3); */
-}
-
 /* Default button */
 r4-app button {
 	display: inline-block;
@@ -123,6 +119,7 @@ r4-app {
 	[type='tel'],
 	[type='text'],
 	[type='url'],
+	[type='number'],
 	textarea {
 		background-color: var(--c-bg-input);
 		border: 1px solid var(--c-border);
@@ -221,11 +218,6 @@ r4-app menu {
 	border: 1px solid var(--c-border);
 	border-radius: var(--s-radius);
 }
-r4-app menu li {
-	margin: 0;
-	align-items: center;
-	height: 100%;
-}
 r4-app menu a {
 	padding: calc(var(--s)) calc(var(--s) / 2);
 	text-decoration: none;
@@ -246,12 +238,7 @@ r4-app-menu a {
 	background: none;
 }
 
-r4-list-item + r4-list-item {
-	margin-top: calc(var(--s) / 4);
-}
-
 /* elements to text wrap  */
-
 r4-channel-card-body r4-channel-name,
 r4-channel-card-body r4-channel-slug {
 	word-break: break-all;
@@ -405,7 +392,7 @@ r4-app summary {
 	padding: calc(var(--s) / 4);
 }
 r4-app form slot[name='submit'] fieldset:last-of-type {
-	margin: var(--s);
+	margin: var(--s) calc(var(--s) / 2) calc(var(--s) / 2) var(--s);
 	justify-content: flex-end;
 }
 

src/index.css

@@ -53,20 +53,17 @@ r4-app ol {
 r4-app-menu {
 	background-color: var(--c-bg);
 }
-r4-app-menu li {
-	display: inline-flex;
-}
-
 r4-app menu {
 	margin: 0;
 	padding: 0;
 	display: flex;
 	flex-wrap: wrap;
-	align-items: center;
 	list-style: none;
+	background: var(--c-bg2);
 }
 r4-app menu li {
-	display: inline-flex;
+	display: flex;
+	align-items: center;
 }
 r4-app menu a[aria-current] {
 	/* Use this selector to style active menu items */

src/pages/r4-page-home.js

@@ -17,7 +17,7 @@ export default class R4PageHome extends R4Page {
 			.from('channels')
 			.select()
 			.limit(10)
-			.order('updated_at', {ascending: true})
+			.order('updated_at', {ascending: false})
 		this.featuredChannels = channels
 
 		const {data: tracks} = await sdk.supabase
@@ -69,7 +69,7 @@ export default class R4PageHome extends R4Page {
 
 	renderSignIn() {
 		return html`
-			<p><a href="${this.config.href}/sign/in">Sign in</a> to create, import or manage a radio 4000 channel.</p>
+			<p><a href="${this.config.href}/sign/in">Sign in to your existing account</a> or <a href="${this.config.href}/sign/up">register a new account</a> to create, import or manage a Radio4000 channel.</p>
 			${this.featuredChannels?.length ? this.renderFeaturedChannels() : nothing}
 			${this.latestTracks?.length ? this.renderTracks() : nothing}
 		`
@@ -133,8 +133,7 @@ export default class R4PageHome extends R4Page {
 						Welcome to the new <strong><r4-title></r4-title></strong>, version 2 (<strong>v2</strong>).
 					</p>
 					<p>
-						To import a radio channel from v1 to v2, see
-						<a href="${this.config.hrefMigrate}">migrate</a>.
+						To import a radio channel from v1 to v2, <a href="${this.config.hrefMigrate}">migrate</a>.
 					</p>
 					<p>
 						All previous radio channels are still available on the

src/pages/r4-page-settings.js

@@ -32,7 +32,6 @@ export default class R4PageSettings extends R4Page {
 					</h1>
 				</li>
 			</menu>
-			<p>Application configuration and user settings.</p>
 		`
 	}
 
@@ -55,13 +54,13 @@ export default class R4PageSettings extends R4Page {
 			<section href="account">
 				<header>
 					<h2><a href="#account">Account</a></h2>
-					<p>Your are signed out.</p>
+					<p>With a Radio4000 account you can create your own radio, save your favorites and customize it as you wish.</p>
 				</header>
 				<ul>
-					<li><a href="${this.config.href}/sign/in">Sign in</a> to an existing account</li>
-					<li><a href="${this.config.href}/sign/up">Sign up</a> to register a new account</li>
-					<li><a href="${this.config.hrefMigrate}">Migrate </a> from version 1 to a version 2 radio channel</li>
+					<li><a href="${this.config.href}/sign/in">Sign in to your account</a></li>
+					<li><a href="${this.config.href}/sign/up">Create new account</a></li>
 				</ul>
+				<p>Already have a radio from the old site? <a href="${this.config.hrefMigrate}">Migrate</a> from version 1 to a version 2 radio channel.</p>
 			</section>
 		`
 	}
@@ -129,6 +128,7 @@ export default class R4PageSettings extends R4Page {
 			</section>
 		`
 	}
+
 	renderUserDelete() {
 		return html`
 			<section id="account">