diff --git a/public/themes/classic.css b/public/themes/classic.css
index ddecf786..5a27683a 100644
--- a/public/themes/classic.css
+++ b/public/themes/classic.css
@@ -1,19 +1,44 @@
/* A theme resembling classic R4 */
/* Maison Neue regular/italic + bold/italic from Cloudinary */
-@font-face{font-family:"Maison Neue";src:url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-book_ee98sm.woff2) format("woff2");font-weight:400;font-style:normal}
-@font-face{font-family:"Maison Neue";src:url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bookitalic_szjrvl.woff2) format("woff2");font-weight:400;font-style:italic}
-@font-face{font-family:"Maison Neue";src:url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bold_rvmbzr.woff2) format("woff2");font-weight:700;font-style:normal}
-@font-face{font-family:"Maison Neue";src:url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bolditalic_awvcg5.woff2) format("woff2");font-weight:700;font-style:italic}
+@font-face {
+ font-family: 'Maison Neue';
+ src: url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-book_ee98sm.woff2) format('woff2');
+ font-weight: 400;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Maison Neue';
+ src: url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bookitalic_szjrvl.woff2)
+ format('woff2');
+ font-weight: 400;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'Maison Neue';
+ src: url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bold_rvmbzr.woff2) format('woff2');
+ font-weight: 700;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Maison Neue';
+ src: url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bolditalic_awvcg5.woff2)
+ format('woff2');
+ font-weight: 700;
+ font-style: italic;
+}
/* the theme */
r4-app {
+ --font: 'Maison Neue', system-ui, segoe ui, sans-serif, 'Segoe UI Symbol';
--s-font: 18px;
--s: 1rem;
+ --s-line-height: 1.3125;
--s-radius: 4px;
--s-form: calc(var(--s) * 36);
--s-textarea: calc(var(--s) * 5);
- --font: "Maison Neue", system-ui, segoe ui, sans-serif, "Segoe UI Symbol";
- --s-line-height: 1.3125;
+ --s-container: 75rem;
+ --s-container--list: 50rem;
+ --s-container--channel-card: 45rem;
--c-light: hsl(0deg 0% 98%);
--c-dark: hsl(0deg 0% 8%);
--c-purple: #5d1ae6;
@@ -74,7 +99,6 @@ r4-app a:has(r4-avatar) {
/* Default button */
r4-app button {
display: inline-block;
- font-size: calc(16 / 18 * 1rem);
font-weight: bold;
border: 1px solid var(--c-border);
border-radius: var(--s-radius);
@@ -150,6 +174,10 @@ r4-layout::part(panel) {
r4-layout [slot='main'] {
z-index: 1;
}
+r4-layout header[slot='menu'] {
+ z-index: 1;
+ justify-content: center;
+}
r4-layout::part(playback-summary) {
background-color: var(--c-bg2);
@@ -161,11 +189,27 @@ r4-page-header {
z-index: 1;
align-self: flex-start;
background-color: var(--c-bg);
+ align-self: center;
+}
+r4-page-main {
+ flex-grow: 1;
}
r4-page-main,
r4-page-footer {
padding-left: var(--s);
padding-right: var(--s);
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ & section {
+ max-width: var(--s-container);
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
}
r4-page-main,
r4-page-footer,
@@ -181,10 +225,7 @@ r4-page-channel-tracks r4-page-header {
r4-app section header {
padding-top: calc(var(--s) / 2);
padding-bottom: calc(var(--s) / 2);
-}
-
-r4-page-main {
- flex-grow: 1;
+ text-align: center;
}
/* same size header */
@@ -203,7 +244,6 @@ r4-page-header {
/* Main menu */
r4-app-menu {
- /* so it aligns left */
display: flex;
}
@@ -217,9 +257,11 @@ r4-app-menu menu {
r4-app menu {
border: 1px solid var(--c-border);
border-radius: var(--s-radius);
+
+ justify-content: center;
}
r4-app menu a {
- padding: calc(var(--s)) calc(var(--s) / 2);
+ padding: calc(var(--s) / 2) calc(var(--s) / 3);
text-decoration: none;
background: none;
display: flex;
@@ -238,6 +280,10 @@ r4-app-menu a {
background: none;
}
+r4-query {
+ justify-content: center;
+}
+
/* elements to text wrap */
r4-channel-card-body r4-channel-name,
r4-channel-card-body r4-channel-slug {
@@ -283,19 +329,9 @@ r4-channel-card r4-button-play {
/* track */
r4-track {
padding: calc(var(--s) / 2);
- r4-app[color-scheme='light'] & {
- background-color: var(--c-bg2);
- }
+ background-color: var(--c-bg2);
}
-@media (max-width: 600px) {
- r4-track-body {
- font-size: calc(15 / 16 * 1rem);
- }
-}
-r4-track-body {
- font-size: calc(16 / 18 * 1rem);
-}
r4-track a {
background-color: transparent;
text-decoration: none;
@@ -303,6 +339,7 @@ r4-track a {
r4-track-title a {
padding: 0;
+ /* font-weight: bold; */
}
r4-track-title a,
@@ -311,7 +348,6 @@ r4-track-title a,
}
r4-track-description {
- font-size: calc(16 / 16 * 1em);
display: block;
word-break: break-word;
color: var(--c-fg2);
@@ -358,22 +394,6 @@ r4-list r4-channel-description {
r4-list r4-channel-card r4-button-play {
order: -1;
}
-/* container query for r4-list and its children */
-r4-list:has(r4-channel-card) {
- container-type: inline-size;
- /* If the container is larger than 700px */
-}
-@container (min-width: 700px) {
- r4-list r4-channel-card {
- & r4-channel-description {
- overflow: hidden;
- white-space: initial;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- }
- }
-}
r4-list r4-channel-url {
display: none;
}
@@ -456,28 +476,8 @@ r4-page-channel-tracks r4-page-header h1 a::before,
r4-page-channel r4-page-header h1 a::before,
r4-channel-card r4-channel-slug::before {
content: '@';
- font-size: 1em;
-}
-r4-page-channel r4-channel-card {
- max-width: 50rem;
-}
-r4-page-channel r4-channel-name {
- font-size: 1.5rem;
-}
-/* Add "Listen" to the play button */
-r4-page-channel r4-channel-card r4-button-play button {
- font-size: 1.2rem;
}
-r4-page-channel r4-channel-card r4-button-play button::after {
- display: inline;
- content: ' Listen';
-}
-
-r4-page-channel-track r4-track a {
- /* we're on this tracck's page */
- text-decoration: underline;
-}
r4-page-home {
justify-content: center;
& r4-favicon {
@@ -497,16 +497,77 @@ r4-page-add {
}
r4-page-channel {
& r4-list:has(r4-track) {
- max-width: 50rem;
+ max-width: var(--s-container--list);
+ width: 100%;
+ }
+ & r4-channel-card r4-button-play {
+ & button::after {
+ display: inline;
+ content: ' Listen';
+ }
+ }
+ & r4-channel-card {
+ max-width: var(--s-container--channel-card);
+ background-color: transparent;
+ border: none;
+ & r4-channel-card-body {
+ flex-direction: column;
+ flex-basis: 100%;
+ background-color: var(--c-bg2);
+ padding: var(--s);
+ & r4-channel-description {
+ align-self: flex-start;
+ }
+ & > a {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ width: 100%;
+ }
+ & r4-channel-url {
+ font-style: italic;
+ }
+ & r4-channel-slug {
+ padding: calc(var(--s) / 3);
+ color: var(--c-fg);
+ }
+ }
+ & r4-avatar {
+ transform: translate(calc(var(--s) * -1), calc(var(--s) * 1));
+ }
+ & r4-channel-name {
+ /* color: var(--c-link); */
+ font-size: 2em;
+ }
+ & r4-channel-url {
+ align-self: flex-start;
+ & a {
+ text-decoration: none;
+ padding-left: 0;
+ }
+ }
}
}
-
r4-map {
& r4-channel-card {
flex-direction: column;
+ max-width: calc(var(--s-container--channel-card) / 2);
& r4-channel-url a {
white-space: pre-wrap;
word-break: break-all;
}
}
}
+r4-page-channel-followers,
+r4-page-channel-followings,
+r4-page-home,
+r4-page-explore {
+ & r4-list {
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ & r4-list-item {
+ margin: calc(var(--s) / 3);
+ }
+}
diff --git a/public/themes/hash.css b/public/themes/hash.css
index 60266e1f..085b8e76 100644
--- a/public/themes/hash.css
+++ b/public/themes/hash.css
@@ -4,16 +4,16 @@ r4-app {
--c-light: cornsilk;
--c-dark: black;
--c-dim: dimgray;
- --c-intense: chartreuse;
- --c-moderate: rebeccapurple;
- --s-container: 50rem;
+ --c-intense: #00ff00;
+ --c-moderate: #ff00ff;
+ --s-container: 65rem;
--s-form: 35rem;
--s-radius: calc(var(--s) / 3);
+ --s-font: 16px;
}
/* color schemes */
-r4-app[color-scheme='os'] {
-}
+r4-app[color-scheme='os'],
r4-app[color-scheme='dark'] {
color-scheme: dark;
--c-bg: var(--c-dark);
@@ -21,6 +21,8 @@ r4-app[color-scheme='dark'] {
--c-link: var(--c-intense);
--c-menu-bg: var(--c-dim);
--c-form-bg: var(--c-dim);
+ --c-bg--channel-card: var(--c-dim);
+ --c-bg--track: var(--c-dim);
}
r4-app[color-scheme='light'] {
color-scheme: light;
@@ -29,12 +31,16 @@ r4-app[color-scheme='light'] {
--c-link: var(--c-moderate);
--c-menu-bg: var(--c-intense);
--c-form-bg: var(--c-intense);
+ --c-bg--channel-card: var(--c-intense);
+ --c-bg--track: var(--c-intense);
}
/* app scheme theming */
-r4-app:not([color-scheme='os']) a {
- text-decoration: none;
- color: var(--c-link);
+r4-app {
+ & a {
+ text-decoration: none;
+ color: var(--c-link);
+ }
}
/* app layout */
@@ -55,12 +61,18 @@ r4-app h3 {
margin-top: 0;
}
-r4-app menu li {
- padding: calc(var(--s) / 3);
+r4-app menu {
+ justify-content: center;
+ & li {
+ padding: calc(var(--s) / 3);
+ }
+ & a {
+ background-color: var(--c-menu-bg);
+ padding: calc(var(--s) / 2);
+ }
}
-r4-app menu a {
- background-color: var(--c-menu-bg);
- padding: calc(var(--s) / 2);
+r4-app r4-app-user-menu menu {
+ flex-wrap: wrap;
}
r4-app a[aria-current='page'] {
background-color: var(--c-bg);
@@ -81,7 +93,7 @@ r4-app summary {
r4-app form {
max-width: calc(var(--s) * 100);
- padding: var(--s);
+ padding: calc(var(--s) / 2);
border-radius: var(--s-radius);
}
r4-app summary,
@@ -113,19 +125,52 @@ r4-app textarea {
r4-page-header h1 {
margin-bottom: 0;
}
+r4-page-header menu {
+ justify-content: center;
+}
r4-app-menu {
display: flex;
justify-content: center;
+ background-color: transparent;
}
+
r4-list {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--s-container);
+ & r4-channel-card {
+ & r4-channel-url {
+ display: none;
+ }
+ }
}
r4-list-item + r4-list-item {
margin-top: var(--s);
}
+r4-track {
+ border: 1px solid transparent;
+ background-color: var(--c-bg--track);
+ padding: calc(var(--s) / 2);
+}
+r4-track-body {
+ display: flex;
+ flex-direction: column;
+}
+r4-track-title {
+ font-weight: bold;
+ flex-grow: 1;
+}
+r4-track-description {
+ word-break: break-word;
+ & a {
+ padding: calc(var(--s) / 3);
+ color: var(--c-fg);
+ text-decoration: underline;
+ text-underline-offset: calc(var(--s) / 2);
+ text-decoration-color: var(--c-link);
+ }
+}
r4-track-mentions a::before,
r4-track-tags a::before {
color: var(--c-bg);
@@ -133,6 +178,7 @@ r4-track-tags a::before {
r4-query {
display: flex;
flex-wrap: wrap;
+ justify-content: center;
}
r4-button-play {
margin: calc(var(--s) / 2);
@@ -145,13 +191,19 @@ r4-layout::part(controls-button) {
margin-left: calc(var(--s) / 2);
}
r4-layout::part(playback-summary) {
- background-color: var(--c-menu-bg);
+ background-color: var(--c-bg);
}
r4-layout::part(menu) {
position: sticky;
bottom: 0;
}
+r4-layout header[slot='menu'] {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ background-color: var(--c-bg);
+}
r4-router > * {
justify-content: center;
}
@@ -164,6 +216,10 @@ r4-page-footer {
& section {
width: 100%;
max-width: var(--s-container);
+ padding: calc(var(--s) / 2);
+ &:not(:only-child) {
+ flex-grow: 1;
+ }
}
}
r4-page-main {
@@ -186,9 +242,9 @@ r4-page-add {
width: 100%;
display: flex;
align-items: center;
+ justify-content: center;
& form {
max-width: var(--s-form);
- width: 100%;
padding: calc(var(--s) / 2);
border: 1px solid var(--c-fg);
border-radius: var(--s-radius);
@@ -212,3 +268,24 @@ r4-page-map {
height: 100%;
}
}
+
+r4-channel-card {
+ display: flex;
+ align-items: stretch;
+ border: 1px solid var(--c-fg);
+ background: var(--c-bg--channel-card);
+ & r4-button-play {
+ order: -1;
+ display: flex;
+ justify-content: center;
+ }
+ & r4-avatar {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ padding: calc(var(--s) / 2);
+ }
+ & r4-channel-name {
+ font-weight: bold;
+ }
+}
diff --git a/src/components/r4-app-user-menu.js b/src/components/r4-app-user-menu.js
index 2cd3b9d3..af2606bf 100644
--- a/src/components/r4-app-user-menu.js
+++ b/src/components/r4-app-user-menu.js
@@ -50,7 +50,7 @@ export default class R4AppUserMenu extends LitElement {
renderChannelLinks() {
if (this.channel) {
return html`@${this.channel.slug}${this.channel.slug}`
} else {
return html`New radio`
diff --git a/src/index.css b/src/index.css
index 86117df1..fcaece67 100644
--- a/src/index.css
+++ b/src/index.css
@@ -383,6 +383,7 @@ r4-map .ol-viewport {
flex-direction: column;
flex-grow: 1;
padding: 0;
+ width: 100%;
}
r4-map .ol-viewport {
min-height: 30vh;
@@ -501,7 +502,6 @@ r4-channel-card {
background-color: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--s-radius);
- container: card / inline-size;
}
r4-channel-card r4-avatar {
width: 100%;
@@ -690,7 +690,7 @@ r4-query {
}
}
& fieldset {
- padding: calc(var(--s) / 2);
+ padding: calc(var(--s) / 3);
}
}
r4-supabase-filter-search {
diff --git a/src/pages/r4-page-channel.js b/src/pages/r4-page-channel.js
index 7194bd94..f9df9931 100644
--- a/src/pages/r4-page-channel.js
+++ b/src/pages/r4-page-channel.js
@@ -93,7 +93,7 @@ export default class R4PageChannel extends BaseChannel {
doms.push(html`Last updated ${relativeDate(lastTrack?.updated_at)}.`)
doms.push(' ')
}
- doms.push(html`Brodcasting since ${formatDate(this.channel?.created_at)}.`)
+ doms.push(html`Broadcasting since ${formatDate(this.channel?.created_at)}.`)
return html`${doms}`
}
}