fix(layouts): replace holy-grail layout with tailwind config + widen public podcast layout

- add rounded classes with conditional border-radius depending on screen width
- add ring-castopod
class to use on focus states

app/Helpers/components_helper.php

@@ -26,7 +26,7 @@ if (! function_exists('hint_tooltip')) {
         $tooltip =
             '<span data-toggle="tooltip" data-placement="bottom" tabindex="0" title="' .
             $hintText .
-            '" class="inline-block text-gray-500 align-middle outline-none focus:ring';
+            '" class="inline-block text-gray-500 align-middle focus:ring-castopod';
 
         if ($class !== '') {
             $tooltip .= ' ' . $class;

app/Language/en/Common.php

@@ -23,7 +23,6 @@ return [
     'explicit' => 'Explicit',
     'mediumDate' => '{0,date,medium}',
     'powered_by' => 'Powered by {castopod}',
-    'actions' => 'Actions',
     'pageInfo' => 'Page {currentPage} out of {pageCount}',
     'go_back' => 'Go back',
     'play_episode_button' => [

app/Language/en/Episode.php

@@ -19,7 +19,7 @@ return [
         one {# person}
         other {# persons}
     }',
-    'persons_list' => 'Persons',
+    'persons_list' => 'Persons for {episodeTitle}',
     'back_to_episodes' => 'Back to episodes of {podcast}',
     'comments' => 'Comments',
     'activity' => 'Activity',

app/Resources/js/modules/xml-editor.ts

@@ -56,7 +56,7 @@ export class XMLEditor extends LitElement {
   }
 
   static styles = css`
-    .cm-wrap {
+    .cm-editor {
       border-radius: 0.5rem;
       overflow: hidden;
       border: 3px solid #000000;

app/Resources/styles/breadcrumb.css

@@ -13,6 +13,10 @@
   &:hover {
     @apply underline;
   }
+
+  &:focus {
+    @apply ring-castopod;
+  }
 }
 
 .breadcrumb-item.active {

app/Resources/styles/choices.css

@@ -155,7 +155,7 @@
 
   .is-focused .choices__inner,
   .is-open .choices__inner {
-    @apply ring-inset ring-1 ring-blue-600;
+    @apply ring-castopod ring-inset;
   }
 
   .is-open .choices__inner {

app/Resources/styles/custom.css

@@ -0,0 +1,20 @@
+@layer components {
+  .ring-castopod {
+    @apply outline-none ring-2 ring-pine-500 ring-offset-2 ring-offset-pine-100;
+  }
+
+  .rounded-conditional-b-xl {
+    border-bottom-right-radius: max(
+      0px,
+      min(0.75rem, calc((100vw - 0.75rem - 100%) * 9999))
+    );
+    border-bottom-left-radius: max(
+      0px,
+      min(0.75rem, calc((100vw - 0.75rem - 100%) * 9999))
+    );
+  }
+
+  .rounded-conditional-2xl {
+    border-radius: max(0px, min(1rem, calc((100vw - 1rem - 100%) * 9999)));
+  }
+}

app/Resources/styles/index.css

@@ -1,6 +1,6 @@
 @import "./tailwind.css";
+@import "./custom.css";
 @import "./fonts.css";
-@import "./layout.css";
 @import "./breadcrumb.css";
 @import "./dropdown.css";
 @import "./choices.css";

app/Resources/styles/layout.css

@@ -1,36 +0,0 @@
-/* Admin layout */
-@layer base {
-  .holy-grail-grid {
-    @apply grid min-h-screen overflow-y-auto;
-    grid-template: 40px 1fr / 300px 1fr;
-
-    & .holy-grail__header {
-      @apply h-10 col-start-1 col-end-4 row-start-1 row-end-2;
-    }
-
-    & .holy-grail__sidebar {
-      @apply col-start-1 col-end-2 row-start-2 row-end-4;
-
-      width: 300px;
-      max-height: calc(100vh - 2.5rem);
-    }
-
-    & .holy-grail__main {
-      @apply col-start-1 col-end-3 row-start-2 row-end-3;
-    }
-
-    & .holy-grail__footer {
-      @apply col-start-1 col-end-3 row-start-3 row-end-3;
-    }
-
-    @screen md {
-      & .holy-grail__main {
-        @apply col-start-2;
-      }
-
-      & .holy-grail__footer {
-        @apply col-start-2;
-      }
-    }
-  }
-}

app/Resources/styles/radioBtn.css

@@ -1,10 +1,14 @@
 @layer components {
   .form-radio-btn {
-    @apply absolute mt-3 ml-3 border-black border-3 text-pine-500 focus:ring-2 focus:ring-pine-800;
+    @apply absolute mt-3 ml-3 border-black border-3 text-pine-500 focus:ring-castopod;
   }
 
   .form-radio-btn:focus + label {
-    @apply ring ring-pine-100;
+    @apply ring-castopod;
+  }
+
+  .form-radio-btn:focus {
+    @apply ring-0;
   }
 
   .form-radio-btn + label {
@@ -12,6 +16,10 @@
   }
 
   .form-radio-btn:checked + label {
-    @apply text-black border-pine-500;
+    @apply text-white bg-pine-500;
+  }
+
+  .form-radio-btn:checked {
+    @apply ring-2 ring-black;
   }
 }

app/Resources/styles/switch.css

@@ -7,7 +7,7 @@
     }
 
     &:focus + .form-switch-slider {
-      @apply ring ring-offset-2 ring-pine-500 ring-offset-pine-100;
+      @apply ring-castopod;
     }
 
     &:checked + .form-switch-slider::before {

app/Views/Components/Button.php

@@ -28,7 +28,7 @@ class Button extends Component
     public function render(): string
     {
         $baseClass =
-            'flex-shrink-0 inline-flex items-center justify-center font-semibold shadow-xs rounded-full focus:outline-none focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100';
+            'flex-shrink-0 inline-flex items-center justify-center font-semibold shadow-xs rounded-full focus:ring-castopod';
 
         $variantClass = [
             'default' => 'text-black bg-gray-300 hover:bg-gray-400',

app/Views/Components/DropdownMenu.php

@@ -29,7 +29,7 @@ class DropdownMenu extends Component
             switch ($item['type']) {
                 case 'link':
                     $menuItems .= anchor($item['uri'], $item['title'], [
-                        'class' => 'px-4 py-1 hover:bg-gray-100' . (array_key_exists('class', $item) ? ' ' . $item['class'] : ''),
+                        'class' => 'px-4 py-1 hover:bg-gray-100 focus:ring-castopod focus:ring-inset' . (array_key_exists('class', $item) ? ' ' . $item['class'] : ''),
                     ]);
                     break;
                 case 'html':

app/Views/Components/Forms/Checkbox.php

@@ -21,7 +21,7 @@ class Checkbox extends FormComponent
             [
                 'id' => $this->value,
                 'name' => $this->name,
-                'class' => 'form-checkbox text-pine-500 border-black border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 w-6 h-6',
+                'class' => 'form-checkbox text-pine-500 border-black border-3 focus:ring-castopod w-6 h-6',
             ],
             'yes',
             old($this->name) ? old($this->name) === $this->value : $this->isChecked,

app/Views/Components/Forms/DatetimePicker.php

@@ -18,9 +18,9 @@ class DatetimePicker extends FormComponent
         $closeIcon = icon('close');
 
         return <<<HTML
-            <div class="flex border-3 rounded-lg border-black focus-within:ring-2 focus-within:ring-pine-500 focus-within:ring-offset-2 focus-within:ring-offset-pine-100 {$this->class}" data-picker="datetime">
+            <div class="flex border-3 rounded-lg border-black focus-within:ring-castopod {$this->class}" data-picker="datetime">
                 {$dateInput}
-                <button class="p-3 bg-white hover:bg-pine-100 focus:outline-none rounded-r-md focus:ring-inset focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100" type="button" aria-label="{$clearLabel}" title="{$clearLabel}" data-clear="">
+                <button class="p-3 bg-white hover:bg-pine-100 rounded-r-md focus:ring-inset focus:ring-castopod" type="button" aria-label="{$clearLabel}" title="{$clearLabel}" data-clear="">
                     {$closeIcon}
                 </button>
             </div>

app/Views/Components/Forms/Input.php

@@ -10,7 +10,7 @@ class Input extends FormComponent
 
     public function render(): string
     {
-        $class = 'px-3 py-2 bg-white border-black rounded-lg focus:border-black border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 ' . $this->class;
+        $class = 'px-3 py-2 bg-white border-black rounded-lg focus:border-black border-3 focus:ring-castopod ' . $this->class;
 
         $this->attributes['class'] = $class;
 

app/Views/Components/Forms/MarkdownEditor.php

@@ -8,9 +8,9 @@ class MarkdownEditor extends FormComponent
 {
     public function render(): string
     {
-        $editorClass = 'w-full flex flex-col bg-white border-3 border-black rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-offset-2 focus-withing:ring-offset-pine-100 focus-within:ring-pine-500 ' . $this->class;
+        $editorClass = 'w-full flex flex-col bg-white border-3 border-black rounded-lg overflow-hidden focus-within:ring-castopod ' . $this->class;
 
-        $this->attributes['class'] = 'border-none outline-none focus:border-none focus:outline-none focus:ring-0 w-full h-full';
+        $this->attributes['class'] = 'border-none focus:border-none focus:outline-none focus:ring-0 w-full h-full';
         $this->attributes['rows'] = 6;
 
         $textarea = form_textarea($this->attributes, old($this->name, html_entity_decode($this->value), null));
@@ -39,23 +39,23 @@ class MarkdownEditor extends FormComponent
                 <header class="px-2">
                     <div class="sticky top-0 z-20 flex flex-wrap justify-between bg-white border-b border-gray-300">
                         <markdown-write-preview for="{$this->id}" class="relative inline-flex h-8">
-                            <button type="button" slot="write" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">{$translations['write']}</button>
+                            <button type="button" slot="write" class="px-2 font-semibold focus:ring-inset focus:ring-castopod">{$translations['write']}</button>
-                            <button type="button" slot="preview" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">{$translations['preview']}</button>
+                            <button type="button" slot="preview" class="px-2 font-semibold focus:ring-inset focus:ring-castopod">{$translations['preview']}</button>
                         </markdown-write-preview>
                         <markdown-toolbar for="{$this->id}" class="flex gap-4 px-2 py-1">
                             <div class="inline-flex text-2xl gap-x-1">
-                                <md-header class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['heading']}</md-header>
+                                <md-header class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['heading']}</md-header>
-                                <md-bold class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['bold']}</md-bold>
+                                <md-bold class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['bold']}</md-bold>
-                                <md-italic class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['italic']}</md-italic>
+                                <md-italic class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['italic']}</md-italic>
                             </div>
                             <div class="inline-flex text-2xl gap-x-1">
-                                <md-unordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['list-unordered']}</md-unordered-list>
+                                <md-unordered-list class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['list-unordered']}</md-unordered-list>
-                                <md-ordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['list-ordered']}</md-ordered-list>
+                                <md-ordered-list class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['list-ordered']}</md-ordered-list>
                             </div>
                             <div class="inline-flex text-2xl gap-x-1">
-                                <md-quote class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['quote']}</md-quote>
+                                <md-quote class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['quote']}</md-quote>
-                                <md-link class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['link']}</md-link>
+                                <md-link class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['link']}</md-link>
-                                <md-image class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['image-add']}</md-image>
+                                <md-image class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['image-add']}</md-image>
                             </div>
                         </markdown-toolbar>
                     </div>

app/Views/Components/Forms/MultiSelect.php

@@ -37,6 +37,7 @@ class MultiSelect extends FormComponent
             'data-no-choices-text' => lang('Common.forms.multiSelect.noChoicesText'),
             'data-max-item-text' => lang('Common.forms.multiSelect.maxItemText'),
         ];
+        $this->attributes['class'] .= ' border-3 border-black rounded-lg';
         $extra = array_merge($defaultAttributes, $this->attributes);
 
         return form_dropdown($this->name, $this->options, $this->selected, $extra);

app/Views/Components/Forms/Radio.php

@@ -19,7 +19,7 @@ class Radio extends FormComponent
             [
                 'id' => $this->value,
                 'name' => $this->name,
-                'class' => 'text-pine-500 border-black border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 w-6 h-6',
+                'class' => 'text-pine-500 border-black border-3 focus:ring-castopod w-6 h-6',
             ],
             $this->value,
             old($this->name) ? old($this->name) === $this->value : $this->isChecked,

app/Views/Components/Forms/Select.php

@@ -21,7 +21,7 @@ class Select extends FormComponent
     public function render(): string
     {
         $defaultAttributes = [
-            'class' => 'focus:border-black focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 border-3 rounded-lg border-black ' . $this->class,
+            'class' => 'focus:border-black focus:ring-castopod border-3 rounded-lg border-black ' . $this->class,
             'data-class' => $this->class,
             'data-select-text' => lang('Common.forms.multiSelect.selectText'),
             'data-loading-text' => lang('Common.forms.multiSelect.loadingText'),

app/Views/Components/Forms/Textarea.php

@@ -17,7 +17,7 @@ class Textarea extends FormComponent
     {
         unset($this->attributes['value']);
 
-        $this->attributes['class'] = 'focus:border-black focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 rounded-lg border-3 border-black ' . $this->class;
+        $this->attributes['class'] = 'focus:border-black focus:ring-castopod rounded-lg border-3 border-black ' . $this->class;
 
         $textarea = form_textarea(
             $this->attributes,

app/Views/errors/html/error_404.php

@@ -19,7 +19,7 @@
             Sorry! Cannot seem to find the page you were looking for.
         <?php endif; ?>
     </p>
-    <button class="inline-flex items-center justify-center px-3 py-1 text-sm font-semibold text-white rounded-full shadow-xs focus:outline-none focus:ring md:px-4 md:py-2 md:text-base bg-pine-500 hover:bg-pine-800"><?= lang('Common.go_back') ?></button>
+    <button class="inline-flex items-center justify-center px-3 py-1 text-sm font-semibold text-white rounded-full shadow-xs focus:ring-castopod md:px-4 md:py-2 md:text-base bg-pine-500 hover:bg-pine-800"><?= lang('Common.go_back') ?></button>
 </body>
 
 </html>

package.json

@@ -42,10 +42,10 @@
     "choices.js": "^9.0.1",
     "flatpickr": "^4.6.9",
     "leaflet": "^1.7.1",
-    "leaflet.markercluster": "^1.5.1",
+    "leaflet.markercluster": "^1.5.3",
     "lit": "^2.0.2",
     "marked": "^3.0.7",
-    "xml-formatter": "^2.4.1"
+    "xml-formatter": "^2.5.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.2.1",
@@ -60,12 +60,12 @@
     "@tailwindcss/typography": "^0.4.1",
     "@types/leaflet": "^1.7.5",
     "@types/marked": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.8",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.2",
@@ -73,17 +73,17 @@
     "lint-staged": "^11.2.3",
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^6.7.0",
-    "postcss-reporter": "^7.0.3",
+    "postcss-reporter": "^7.0.4",
     "prettier": "2.4.1",
     "prettier-plugin-organize-imports": "^2.3.4",
     "semantic-release": "^18.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "svgo": "^2.7.0",
-    "tailwindcss": "^2.2.16",
+    "tailwindcss": "^2.2.17",
     "tailwindcss-scroll-snap": "^1.1.0",
-    "typescript": "^4.4.3",
+    "typescript": "^4.4.4",
-    "vite": "^2.6.5"
+    "vite": "^2.6.9"
   },
   "lint-staged": {
     "*.{js,ts,css,md,json}": "prettier --write",

tailwind.config.js

@@ -48,9 +48,14 @@ module.exports = {
         112: "28rem",
       },
       gridTemplateColumns: {
-        podcastLayout: "1fr minmax(auto, 768px) 1fr",
+        admin: "300px calc(100% - 300px)",
+        podcast: "1fr minmax(auto, 960px) 1fr",
+        podcastMain: "1fr minmax(200px, 300px)",
         podcasts: "repeat(auto-fill, minmax(14rem, 1fr))",
       },
+      gridTemplateRows: {
+        admin: "40px 1fr",
+      },
       zIndex: {
         "-10": "-10",
       },

themes/cp_admin/_layout.php

@@ -17,28 +17,13 @@
         ->asset('js/admin-audio-player.ts', 'js') ?>
 </head>
 
-<body class="relative bg-pine-50 holy-grail-grid">
+<body class="relative grid items-start min-h-screen bg-pine-50 grid-cols-admin grid-rows-admin">
     <div id="sidebar-backdrop" role="button" tabIndex="0" aria-label="Close" class="fixed z-50 hidden w-full h-full bg-gray-900 bg-opacity-50 md:hidden"></div>
     <?= $this->include('_partials/_nav_header') ?>
-    <aside id="admin-sidebar" class="sticky z-50 flex flex-col text-white transition duration-200 ease-in-out transform -translate-x-full border-r top-10 border-pine-900 bg-pine-800 holy-grail__sidebar md:translate-x-0">
+    <?= $this->include('_partials/_nav_aside') ?>
-        <?php if (isset($podcast) && isset($episode)): ?>
+    <main class="relative max-w-full col-start-1 row-start-2 col-span-full md:col-start-2 md:col-span-1">
-            <?= $this->include('episode/_sidebar') ?>
-        <?php elseif (isset($podcast)): ?>
-            <?= $this->include('podcast/_sidebar') ?>
-        <?php else: ?>
-            <?= $this->include('_sidebar') ?>
-        <?php endif; ?>
-        <footer class="px-2 py-2 mx-auto text-xs text-right">
-            <?= lang('Common.powered_by', [
-                'castopod' =>
-                    '<a class="inline-flex font-semibold hover:underline" href="https://castopod.org/" target="_blank" rel="noreferrer noopener">Castopod' . icon('social/castopod', 'ml-1 text-lg') . '</a> ' .
-                    CP_VERSION,
-            ]) ?>
-        </footer>
-    </aside>
-    <main class="relative holy-grail__main">
         <header class="z-40 flex items-center px-4 bg-white border-b md:px-12 sticky-header-outer border-pine-100">
-            <div class="container flex flex-col justify-end mx-auto -mt-4 sticky-header-inner">
+            <div class="flex flex-col justify-end w-full -mt-4 sticky-header-inner">
                 <?= render_breadcrumb('text-gray-800 text-xs items-center flex') ?>
                 <div class="flex justify-between py-1">
                     <div class="flex flex-wrap items-center">
@@ -49,7 +34,7 @@
                 </div>
             </div>
         </header>
-        <div class="container px-2 py-8 mx-auto md:px-12">
+        <div class="px-2 py-8 mx-auto md:px-12">
             <?= view('_message_block') ?>
             <?= $this->renderSection('content') ?>
         </div>
@@ -57,6 +42,6 @@
     <button
         type="button"
         id="sidebar-toggler"
-        class="fixed bottom-0 left-0 z-50 p-3 mb-3 ml-3 text-xl transition duration-300 ease-in-out bg-white border-2 rounded-full shadow-lg focus:outline-none md:hidden hover:bg-gray-100 focus:ring"
+        class="fixed bottom-0 left-0 z-50 p-3 mb-3 ml-3 text-xl transition duration-300 ease-in-out bg-white border-2 rounded-full shadow-lg md:hidden hover:bg-gray-100 focus:ring-castopod"
         style="transform: translateX(0px);"><?= icon('menu') ?></button>
 </body>

themes/cp_admin/_partials/_nav_aside.php

@@ -0,0 +1,16 @@
+<aside id="admin-sidebar" class="h-full max-h-[calc(100vh-40px)] sticky z-50 flex flex-col row-start-2 col-start-1 text-white transition duration-200 ease-in-out transform -translate-x-full border-r top-10 border-pine-900 bg-pine-800 md:translate-x-0">
+    <?php if (isset($podcast) && isset($episode)): ?>
+        <?= $this->include('episode/_sidebar') ?>
+    <?php elseif (isset($podcast)): ?>
+        <?= $this->include('podcast/_sidebar') ?>
+    <?php else: ?>
+        <?= $this->include('_sidebar') ?>
+    <?php endif; ?>
+    <footer class="px-2 py-2 mx-auto text-xs text-right">
+        <?= lang('Common.powered_by', [
+            'castopod' =>
+                '<a class="inline-flex font-semibold hover:underline" href="https://castopod.org/" target="_blank" rel="noreferrer noopener">Castopod' . icon('social/castopod', 'ml-1 text-lg') . '</a> ' .
+                CP_VERSION,
+        ]) ?>
+    </footer>
+</aside>

themes/cp_admin/_partials/_nav_header.php

@@ -1,20 +1,20 @@
-<header class="sticky top-0 z-50 flex items-center justify-between h-10 text-white border-b holy-grail__header bg-pine-800 border-pine-900">
+<header class="sticky top-0 z-50 flex items-center justify-between h-10 text-white border-b col-span-full bg-pine-800 border-pine-900">
     <div class="inline-flex items-center h-full">
         <a href="<?= route_to(
     'admin',
-) ?>" class="inline-flex items-center h-full px-2 border-r border-pine-900">
+) ?>" class="inline-flex items-center h-full px-2 border-r border-pine-900 focus:ring-inset focus:ring-castopod">
             <?= (isset($podcast) ? icon('arrow-left', 'mr-2') : '') . svg('castopod-logo-base', 'h-6') ?>
         </a>
         <a href="<?= route_to(
     'home',
-) ?>" class="inline-flex items-center h-full px-6 text-sm font-semibold outline-none hover:underline focus:ring">
+) ?>" class="inline-flex items-center h-full px-6 text-sm font-semibold hover:underline focus:ring-inset focus:ring-castopod">
                 <?= lang('AdminNavigation.go_to_website') ?>
                 <?= icon('external-link', 'ml-1 opacity-60') ?>
         </a>
     </div>
     <button
         type="button"
-        class="inline-flex items-center h-full px-3 text-sm font-semibold outline-none focus:ring gap-x-2"
+        class="inline-flex items-center h-full px-3 text-sm font-semibold focus:ring-inset focus:ring-castopod gap-x-2"
         id="my-account-dropdown"
         data-dropdown="button"
         data-dropdown-target="my-account-dropdown-menu"

themes/cp_admin/_sidebar.php

@@ -27,7 +27,7 @@ $navigation = [
 <nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
     <?php foreach ($navigation as $section => $data): ?>
     <div>
-        <button class="inline-flex items-center w-full px-4 py-1 font-semibold outline-none focus:ring" type="button">
+        <button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-castopod" type="button">
             <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') ?>
             <?= lang('AdminNavigation.' . $section) ?>
         </button>
@@ -35,7 +35,7 @@ $navigation = [
             <?php foreach ($data['items'] as $item): ?>
                 <?php $isActive = url_is(route_to($item)); ?>
             <li class="inline-flex">
-                <a class="w-full py-1 pl-14 pr-2 text-sm outline-none hover:opacity-100 focus:ring<?= $isActive
+                <a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-castopod<?= $isActive
                     ? ' font-semibold opacity-100 inline-flex items-center'
                     : ' opacity-75' ?>" href="<?= route_to($item) ?>"><?= ($isActive ? icon('chevron-right', 'mr-2') : '') . lang(
                         'AdminNavigation.' . $item,

themes/cp_admin/episode/_sidebar.php

@@ -7,7 +7,7 @@ $podcastNavigation = [
     ],
 ]; ?>
 
-<a href="<?= route_to('podcast-view', $podcast->id) ?>" class="flex items-center px-4 py-2 border-b border-pine-900 focus:ring">
+<a href="<?= route_to('podcast-view', $podcast->id) ?>" class="flex items-center px-4 py-2 border-b border-pine-900 focus:ring-castopod">
     <?= icon('arrow-left', 'mr-2') ?>
     <img
     src="<?= $podcast->image->thumbnail_url ?>"
@@ -28,7 +28,7 @@ $podcastNavigation = [
     'episode',
     $podcast->handle,
     $episode->slug,
-) ?>" class="inline-flex items-center text-xs outline-none hover:underline focus:ring"><?= lang(
+) ?>" class="inline-flex items-center text-xs hover:underline focus:ring-castopod"><?= lang(
     'EpisodeNavigation.go_to_page',
 ) ?>
         <?= icon('external-link', 'ml-1 opacity-60') ?>
@@ -38,7 +38,7 @@ $podcastNavigation = [
 <nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
     <?php foreach ($podcastNavigation as $section => $data): ?>
     <div>
-        <button class="inline-flex items-center w-full px-4 py-1 font-semibold outline-none focus:ring" type="button">
+        <button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-castopod" type="button">
             <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') .
                 lang('EpisodeNavigation.' . $section) ?>
         </button>
@@ -46,7 +46,7 @@ $podcastNavigation = [
             <?php foreach ($data['items'] as $item): ?>
                 <?php $isActive = url_is(route_to($item, $podcast->id, $episode->id)); ?>
             <li class="inline-flex">
-                <a class="w-full py-1 pl-14 pr-2 text-sm outline-none hover:opacity-100 focus:ring <?= $isActive
+                <a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-castopod <?= $isActive
                     ? 'font-semibold opacity-100 inline-flex items-center'
                     : 'opacity-75' ?>" href="<?= route_to(
                         $item,

themes/cp_admin/episode/list.php

@@ -36,20 +36,19 @@
                             '</time>' .
                             '<img loading="lazy" src="' . $episode->image->thumbnail_url . '" alt="' . $episode->title . '" class="object-cover w-20 h-20 rounded-lg" />' .
                         '</div>' .
-                        '<a class="text-sm hover:underline" href="' . route_to(
+                        '<a class="overflow-x-hidden text-sm hover:underline" href="' . route_to(
                             'episode-view',
                             $podcast->id,
                             $episode->id,
                         ) . '">' .
-                        '<h2 class="inline-flex w-full font-semibold leading-none group">' .
+                        '<h2 class="inline-flex items-baseline w-full font-semibold leading-none gap-x-1 group">' .
                         episode_numbering(
                             $episode->number,
                             $episode->season_number,
-                            'text-xs font-semibold text-gray-600',
+                            'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500',
                             true,
                         ) .
-                        '<span class="mx-1">-</span>' .
+                        '<span class="mr-1 truncate group-hover:underline">' . $episode->title . '</span>' .
-                        '<span class="mr-1 group-hover:underline">' . $episode->title . '</span>' .
                         '</h2>' .
                         '<p class="max-w-sm text-xs text-gray-600 line-clamp-2">' . $episode->description . '</p>' .
                         '</a>' .
@@ -74,7 +73,7 @@
             [
                 'header' => lang('Episode.list.actions'),
                 'cell' => function ($episode, $podcast) {
-                    return '<button id="more-dropdown-' . $episode->id . '" type="button" class="inline-flex items-center p-1 outline-none focus:ring" data-dropdown="button" data-dropdown-target="more-dropdown-' . $episode->id . '-menu" aria-haspopup="true" aria-expanded="false">' .
+                    return '<button id="more-dropdown-' . $episode->id . '" type="button" class="inline-flex items-center p-1 focus:ring-castopod" data-dropdown="button" data-dropdown-target="more-dropdown-' . $episode->id . '-menu" aria-haspopup="true" aria-expanded="false">' .
                         icon('more') .
                         '</button>' .
                         '<DropdownMenu id="more-dropdown-' . $episode->id . '-menu" labelledby="more-dropdown-' . $episode->id . '" items="' . esc(json_encode([

themes/cp_admin/episode/persons.php

@@ -14,6 +14,42 @@
 
 <?= $this->section('content') ?>
 
+<form action="<?= route_to('episode-persons-manage', $podcast->id, $episode->id) ?>" method="POST">
+    <?= csrf_field() ?>
+
+    <Forms.Section
+        title="<?= lang('Person.episode_form.add_section_title') ?>"
+        subtitle="<?= lang('Person.episode_form.add_section_subtitle') ?>"
+    >
+
+    <Forms.Field
+        as="MultiSelect"
+        id="persons"
+        name="persons[]"
+        label="<?= lang('Person.episode_form.persons') ?>"
+        hint="<?= lang('Person.episode_form.persons_hint') ?>"
+        options="<?= htmlspecialchars(json_encode($personOptions)) ?>"
+        selected="<?= htmlspecialchars(json_encode(old('persons', []))) ?>"
+        required="true"
+    />
+
+    <Forms.Field
+        as="MultiSelect"
+        id="roles"
+        name="roles[]"
+        label="<?= lang('Person.episode_form.roles') ?>"
+        hint="<?= lang('Person.episode_form.roles_hint') ?>"
+        options="<?= htmlspecialchars(json_encode($taxonomyOptions)) ?>"
+        selected="<?= htmlspecialchars(json_encode(old('roles', []))) ?>"
+        required="true"
+    />
+
+    <Button variant="primary" type="submit" class="self-end"><?= lang('Person.episode_form.submit_add') ?></Button>
+
+    </Forms.Section>
+
+</form>
+
 <?= data_table(
     [
         [
@@ -55,43 +91,7 @@
         ],
     ],
     $episode->persons,
-    'max-w-xl'
+    'max-w-xl mt-6'
 ) ?>
 
-<form action="<?= route_to('episode-persons-manage', $podcast->id, $episode->id) ?>" method="POST" class="mt-6">
-<?= csrf_field() ?>
-
-<Forms.Section
-    title="<?= lang('Person.episode_form.add_section_title') ?>"
-    subtitle="<?= lang('Person.episode_form.add_section_subtitle') ?>"
->
-
-<Forms.Field
-    as="MultiSelect"
-    id="persons"
-    name="persons[]"
-    label="<?= lang('Person.episode_form.persons') ?>"
-    hint="<?= lang('Person.episode_form.persons_hint') ?>"
-    options="<?= htmlspecialchars(json_encode($personOptions)) ?>"
-    selected="<?= htmlspecialchars(json_encode(old('persons', []))) ?>"
-    required="true"
-/>
-
-<Forms.Field
-    as="MultiSelect"
-    id="roles"
-    name="roles[]"
-    label="<?= lang('Person.episode_form.roles') ?>"
-    hint="<?= lang('Person.episode_form.roles_hint') ?>"
-    options="<?= htmlspecialchars(json_encode($taxonomyOptions)) ?>"
-    selected="<?= htmlspecialchars(json_encode(old('roles', []))) ?>"
-    required="true"
-/>
-
-<Button variant="primary" type="submit" class="self-end"><?= lang('Person.episode_form.submit_add') ?></Button>
-
-</Forms.Section>
-
-</form>
-
 <?= $this->endSection() ?>

themes/cp_admin/episode/publish.php

@@ -49,7 +49,7 @@
                     <?= episode_numbering(
         $episode->number,
         $episode->season_number,
-        'text-xs font-semibold text-gray-600',
+        'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500',
         true,
     ) ?>
                 </div>
@@ -76,7 +76,7 @@
     <Forms.Radio value="now" name="publication_method" isChecked="<?= old('publication_method') ? old('publish') === 'now' : true ?>"><?= lang('Episode.publish_form.publication_method.now') ?></Forms.Radio>
     <div class="inline-flex flex-wrap items-center radio-toggler">
         <input
-            class="w-6 h-6 border-black text-pine-500 border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100"
+            class="w-6 h-6 border-black text-pine-500 border-3 focus:ring-castopod"
             type="radio" id="schedule" name="publication_method" value="schedule" <?= old('publication_method') && old('publication_method') === 'schedule' ? 'checked' : '' ?> />
         <Label for="schedule" class="pl-2 leading-8"><?= lang('Episode.publish_form.publication_method.schedule') ?></label>
         <div class="w-full mt-2 radio-toggler-element">

themes/cp_admin/episode/publish_edit.php

@@ -51,7 +51,7 @@
                     <?= episode_numbering(
                     $episode->number,
                     $episode->season_number,
-                    'text-xs font-semibold text-gray-600',
+                    'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500',
                     true,
                 ) ?>
                 </div>
@@ -80,7 +80,7 @@
     <Forms.Radio value="now" name="publication_method" isChecked="<?= old('publication_method') && old('publish') === 'now' ?>"><?= lang('Episode.publish_form.publication_method.now') ?></Forms.Radio>
     <div class="inline-flex flex-wrap items-center radio-toggler">
         <input
-            class="w-6 h-6 border-black text-pine-500 border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100"
+            class="w-6 h-6 border-black text-pine-500 border-3 focus:ring-castopod"
             type="radio" id="schedule" name="publication_method" value="schedule" <?= old('publication_method') ? old('publication_method') === 'schedule' : 'checked' ?> />
         <Label for="schedule" class="pl-2 leading-8"><?= lang('Episode.publish_form.publication_method.schedule') ?></label>
         <div class="w-full mt-2 radio-toggler-element">

themes/cp_admin/podcast/_sidebar.php

@@ -46,7 +46,7 @@ $podcastNavigation = [
         <a href="<?= route_to(
     'podcast-activity',
     $podcast->handle,
-) ?>" class="inline-flex items-center text-sm outline-none hover:underline focus:ring"
+) ?>" class="inline-flex items-center text-sm hover:underline focus:ring-castopod"
         data-toggle="tooltip" data-placement="bottom" title="<?= lang(
     'PodcastNavigation.go_to_page',
 ) ?>">@<?= $podcast->handle ?>
@@ -57,7 +57,7 @@ $podcastNavigation = [
 <nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
     <?php foreach ($podcastNavigation as $section => $data): ?>
     <div>
-        <button class="inline-flex items-center w-full px-4 py-1 font-semibold outline-none focus:ring" type="button">
+        <button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-castopod" type="button">
             <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') .
                 lang('PodcastNavigation.' . $section) ?>
         </button>
@@ -65,7 +65,7 @@ $podcastNavigation = [
             <?php foreach ($data['items'] as $item): ?>
                 <?php $isActive = url_is(route_to($item, $podcast->id)); ?>
             <li class="inline-flex">
-                <a class="w-full py-1 pl-14 pr-2 text-sm outline-none hover:opacity-100 focus:ring <?= $isActive
+                <a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-castopod <?= $isActive
                     ? 'font-semibold opacity-100 inline-flex items-center'
                     : 'opacity-75' ?>" href="<?= route_to(
                         $item,

themes/cp_admin/podcast/latest_episodes.php

@@ -30,21 +30,19 @@
     $podcast->id,
     $episode->id,
 ) ?>"
-                        class="text-sm font-semibold truncate hover:underline"
+                        class="text-sm font-semibold truncate hover:underline focus:ring-castopod"
                         >
                         <?= episode_numbering(
     $episode->number,
     $episode->season_number,
-    'font-semibold text-gray-600',
+    'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500 mr-1',
     true,
-) ?>
+) . $episode->title ?>
-                        <span class="mx-1">-</span>
-                        <?= $episode->title ?>
                         </a>
                     </div>
                     <button
                         type="button"
-                        class="inline-flex items-center p-1 outline-none focus:ring"
+                        class="inline-flex items-center p-1 focus:ring-castopod"
                         id="more-dropdown-<?= $episode->id ?>"
                         data-dropdown="button"
                         data-dropdown-target="more-dropdown-<?= $episode->id ?>-menu"

themes/cp_admin/podcast/list.php

@@ -19,7 +19,7 @@
 <div class="grid gap-4 grid-cols-podcasts">
     <?php if ($podcasts !== null): ?>
         <?php foreach ($podcasts as $podcast): ?>
-            <article class="relative h-full overflow-hidden transition bg-white shadow border-3 border-pine-100 rounded-xl group hover:shadow-xl">
+            <article class="relative h-full overflow-hidden transition bg-white shadow border-3 border-pine-100 rounded-xl group hover:shadow-xl focus-within:ring-castopod">
                 <div class="w-full h-full overflow-hidden">
                     <img
                     alt="<?= $podcast->title ?>"

themes/cp_admin/podcast/persons.php

@@ -14,6 +14,39 @@
 
 <?= $this->section('content') ?>
 
+<form action="<?= route_to('podcast-persons-manage', $podcast->id) ?>" method="POST">
+    <?= csrf_field() ?>
+
+    <Forms.Section
+        title="<?= lang('Person.podcast_form.add_section_title') ?>"
+        subtitle="<?= lang('Person.podcast_form.add_section_subtitle') ?>"
+    >
+
+    <Forms.Field
+        as="MultiSelect"
+        id="persons"
+        name="persons[]"
+        label="<?= lang('Person.podcast_form.persons') ?>"
+        hint="<?= lang('Person.podcast_form.persons_hint') ?>"
+        options="<?= esc(json_encode($personOptions)) ?>"
+        selected="<?= esc(json_encode(old('persons', []))) ?>"
+        required="true" />
+    
+    <Forms.Field
+        as="MultiSelect"
+        id="roles"
+        name="roles[]"
+        label="<?= lang('Person.podcast_form.roles') ?>"
+        hint="<?= lang('Person.podcast_form.roles_hint') ?>"
+        options="<?= esc(json_encode($taxonomyOptions)) ?>"
+        selected="<?= esc(json_encode(old('roles', []))) ?>"
+        required="true" />
+
+    <Button variant="primary" class="self-end" type="submit"><?= lang('Person.podcast_form.submit_add') ?></Button>
+
+    </Forms.Section>
+</form>
+
 <?= data_table(
     [
         [
@@ -55,40 +88,7 @@
         ],
     ],
     $podcast->persons,
-    'max-w-xl'
+    'max-w-xl mt-6'
 ) ?>
 
-<form action="<?= route_to('podcast-persons-manage', $podcast->id) ?>" method="POST" class="mt-6">
-    <?= csrf_field() ?>
-
-    <Forms.Section
-        title="<?= lang('Person.podcast_form.add_section_title') ?>"
-        subtitle="<?= lang('Person.podcast_form.add_section_subtitle') ?>"
-    >
-
-    <Forms.Field
-        as="MultiSelect"
-        id="persons"
-        name="persons[]"
-        label="<?= lang('Person.podcast_form.persons') ?>"
-        hint="<?= lang('Person.podcast_form.persons_hint') ?>"
-        options="<?= esc(json_encode($personOptions)) ?>"
-        selected="<?= esc(json_encode(old('persons', []))) ?>"
-        required="true" />
-    
-    <Forms.Field
-        as="MultiSelect"
-        id="roles"
-        name="roles[]"
-        label="<?= lang('Person.podcast_form.roles') ?>"
-        hint="<?= lang('Person.podcast_form.roles_hint') ?>"
-        options="<?= esc(json_encode($taxonomyOptions)) ?>"
-        selected="<?= esc(json_encode(old('roles', []))) ?>"
-        required="true" />
-
-    <Button variant="primary" class="self-end" type="submit"><?= lang('Person.podcast_form.submit_add') ?></Button>
-
-    </Forms.Section>
-</form>
-
 <?= $this->endSection() ?>

themes/cp_admin/user/list.php

@@ -47,9 +47,29 @@
         [
             'header' => lang('Common.actions'),
             'cell' => function ($user) {
-                return '<Button uri="' . route_to('user-force_pass_reset', $user->id) . '" variant="secondary" size="small">' . lang('User.forcePassReset') . '</Button>' .
+                return '<button id="more-dropdown-' . $user->id . '" type="button" class="inline-flex items-center p-1 focus:ring-castopod" data-dropdown="button" data-dropdown-target="more-dropdown-' . $user->id . '-menu" aria-haspopup="true" aria-expanded="false">' . icon('more') . '</button>' .
-                '<Button uri="' . route_to($user->isBanned() ? 'user-unban' : 'user-ban', $user->id) . '" variant="warning" size="small">' . lang('User.' . ($user->isBanned() ? 'unban' : 'ban')) . '</Button>' .
+                '<DropdownMenu id="more-dropdown-' . $user->id . '-menu" labelledby="more-dropdown-' . $user->id . '" items="' . esc(json_encode([
-                '<Button uri="' . route_to('user-delete', $user->id) . '" variant="danger" size="small">' . lang('User.delete') . '</Button>';
+                    [
+                        'type' => 'link',
+                        'title' => lang('User.forcePassReset'),
+                        'uri' => route_to('user-force_pass_reset', $user->id),
+                    ],
+                    [
+                        'type' => 'link',
+                        'title' => lang('User.' . ($user->isBanned() ? 'unban' : 'ban')),
+                        'uri' => route_to($user->isBanned() ? 'user-unban' : 'user-ban', $user->id),
+                    ],
+                    [
+                        'type' => 'separator',
+                    ],
+                    [
+                        'type' => 'link',
+                        'title' => lang('User.delete'),
+                        'uri' => route_to('user-delete', $user->id),
+                        'class' => 'font-semibold text-red-600',
+                    ],
+
+                ])) . '" />';
             },
         ],
     ],

themes/cp_app/_admin_navbar.php

@@ -1,9 +1,9 @@
 <div class="sticky top-0 left-0 z-50 flex items-center justify-between w-full h-10 text-white border-b shadow bg-pine-800 border-pine-900">
         <div class="inline-flex items-center h-full">
-            <a href="<?= route_to('home') ?>" class="inline-flex items-center h-full px-2 border-r border-pine-900">
+            <a href="<?= route_to('home') ?>" class="inline-flex items-center h-full px-2 border-r border-pine-900 focus:ring-inset focus:ring-castopod">
                     <?= svg('castopod-logo-base', 'h-6') ?>
             </a>
-            <a href="<?= route_to('admin', ) ?>" class="inline-flex items-center h-full px-6 text-sm font-semibold outline-none hover:underline focus:ring">
+            <a href="<?= route_to('admin', ) ?>" class="inline-flex items-center h-full px-6 text-sm font-semibold hover:underline focus:ring-inset focus:ring-castopod">
                 <?= lang('AdminNavigation.go_to_admin') ?>
                 <?= icon('external-link', 'ml-1 opacity-60') ?>
             </a>
@@ -12,7 +12,7 @@
         <div class="inline-flex items-center h-full">
         <button
             type="button"
-            class="inline-flex items-center h-full px-3 text-sm font-semibold outline-none focus:ring gap-x-2"
+            class="inline-flex items-center h-full px-3 text-sm font-semibold focus:ring-inset focus:ring-castopod gap-x-2"
             id="my-account-dropdown"
             data-dropdown="button"
             data-dropdown-target="my-account-dropdown-menu"

themes/cp_app/_persons_modal.php

@@ -19,7 +19,7 @@
                 <div class="flex gap-x-2">
                     <img src="<?= $person->image->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-10 h-10 rounded-full" />
                     <div class="flex flex-col">
-                        <h4 class="text-sm font-semibold hover:underline focus:ring">
+                        <h4 class="text-sm font-semibold hover:underline focus:ring-castopod">
                             <?php if ($person->information_url): ?>
                                 <a href="<?= $person->information_url ?>" target="_blank" rel="noopener noreferrer"><?= $person->full_name ?></a>
                             <?php else: ?>

themes/cp_app/embeddable_player.php

@@ -43,15 +43,14 @@
         <a href="<?= $episode->link ?>" class="flex items-center mb-2" style="color: <?= $themeData[
     'text'
 ] ?>;" target="_blank">
-            <h1 class="mr-2 text-lg font-semibold truncate opacity-100 hover:opacity-75">
-                <?= $episode->title ?>
-            </h1>
             <?= episode_numbering(
     $episode->number,
     $episode->season_number,
-    'text-xs',
+    'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500 mr-1',
     true,
-) ?>
+) ?><h1 class="mr-2 text-lg font-semibold truncate opacity-100 hover:opacity-75">
+<?= $episode->title ?>
+</h1>
         </a>
         <vm-player
                 id="castopod-vm-player"

themes/cp_app/episode/_layout.php

@@ -24,7 +24,7 @@
         ->asset('js/audio-player.ts', 'js') ?>
 </head>
 
-<body class="grid items-start mx-auto grid-cols-podcastLayout bg-pine-50">
+<body class="grid items-start mx-auto grid-cols-podcast bg-pine-50">
     <?php if (can_user_interact()): ?>
         <div class="col-span-full">
             <?= $this->include('_admin_navbar') ?>
@@ -60,7 +60,7 @@
                             'width' => 420,
                             'height' => 620,
                             'class' =>
-                                'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:outline-none focus:ring bg-rose-600',
+                                'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:ring-castopod bg-rose-600',
                         ],
                     ) ?>
         </div>
@@ -124,8 +124,8 @@
         <?php endif; ?>
     </div>
     <?= $this->include('episode/_partials/navigation') ?>
-    <div class="relative grid items-start grid-cols-3 col-start-2 pt-6 pb-12 gap-x-6">
+    <div class="relative grid items-start col-start-2 pt-6 pb-4 grid-cols-podcastMain gap-x-6">
-        <main class="col-span-full sm:col-span-2">
+        <main class="w-full col-span-full md:col-span-1">
             <?= $this->renderSection('content') ?>
         </main>
         <?= $this->include('podcast/_partials/sidebar') ?>

themes/cp_app/episode/_partials/card.php

@@ -1,29 +1,27 @@
-<article class="w-full bg-white shadow sm:rounded-lg">
+<article class="flex w-full p-4 bg-white shadow rounded-conditional-2xl gap-x-2">
-    <div class="flex p-4 gap-x-2">
+    <div class="relative">
-        <div class="relative">
+        <time class="absolute px-1 text-xs font-semibold text-white rounded bottom-2 right-2 bg-black/50" datetime="PT<?= $episode->audio_file_duration ?>S">
-            <time class="absolute px-1 text-xs font-semibold text-white rounded bottom-2 right-2 bg-black/50" datetime="PT<?= $episode->audio_file_duration ?>S">
+            <?= format_duration($episode->audio_file_duration) ?>
-                <?= format_duration($episode->audio_file_duration) ?>
+        </time>
-            </time>
+        <img loading="lazy" src="<?= $episode->image
-            <img loading="lazy" src="<?= $episode->image
+                ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="object-cover w-20 h-20 rounded-lg" />
-                    ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="object-cover w-20 h-20 rounded-lg" />
+    </div>
-        </div>
+    <div class="flex items-center flex-1 gap-x-4">
-        <div class="flex items-center flex-1 gap-x-4">
+        <div class="flex flex-col flex-1">
-            <div class="flex flex-col flex-1">
+            <div class="inline-flex items-center">
-                <div class="inline-flex items-center">
+                <?= episode_numbering($episode->number, $episode->season_number, 'text-xs font-semibold text-gray-700 px-1 border mr-2 !no-underline', true) ?>
-                    <?= episode_numbering($episode->number, $episode->season_number, 'text-xs font-semibold text-gray-700 px-1 border mr-2 !no-underline', true) ?>
+                <?= relative_time($episode->published_at, 'text-xs whitespace-nowrap') ?>
-                    <?= relative_time($episode->published_at, 'text-xs whitespace-nowrap') ?>
-                </div>
-                <h2 class="flex-1 font-semibold line-clamp-2"><a class="hover:underline" href="<?= $episode->link ?>"><?= $episode->title ?></a></h2>
             </div>
-            <play-episode-button
+            <h2 class="flex-1 font-semibold line-clamp-2"><a class="hover:underline" href="<?= $episode->link ?>"><?= $episode->title ?></a></h2>
-                id="<?= $episode->id ?>"
-                imageSrc="<?= $episode->image->thumbnail_url ?>"
-                title="<?= $episode->title ?>"
-                podcast="<?= $episode->podcast->title ?>"
-                src="<?= $episode->audio_file_web_url ?>"
-                mediaType="<?= $episode->audio_file_mimetype ?>"
-                playLabel="<?= lang('Common.play_episode_button.play') ?>"
-                playingLabel="<?= lang('Common.play_episode_button.playing') ?>"></play-episode-button>
         </div>
+        <play-episode-button
+            id="<?= $episode->id ?>"
+            imageSrc="<?= $episode->image->thumbnail_url ?>"
+            title="<?= $episode->title ?>"
+            podcast="<?= $episode->podcast->title ?>"
+            src="<?= $episode->audio_file_web_url ?>"
+            mediaType="<?= $episode->audio_file_mimetype ?>"
+            playLabel="<?= lang('Common.play_episode_button.play') ?>"
+            playingLabel="<?= lang('Common.play_episode_button.playing') ?>"></play-episode-button>
     </div>
 </article>

themes/cp_app/episode/_partials/comment.php

@@ -1,4 +1,4 @@
-<article class="relative z-10 flex w-full px-4 py-2 sm:rounded-2xl">
+<article class="relative z-10 flex w-full px-4 py-2 rounded-conditional-2xl">
     <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />
     <div class="flex-1">
         <header class="w-full mb-2 text-sm">

themes/cp_app/episode/_partials/comment_card.php

@@ -1,4 +1,4 @@
-<article class="relative z-10 flex w-full p-4 bg-white shadow sm:rounded-2xl">
+<article class="relative z-10 flex w-full p-4 bg-white shadow rounded-conditional-2xl">
     <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
     <div class="flex-1">
         <header class="w-full mb-2 text-sm">

themes/cp_app/episode/_partials/comment_with_replies.php

@@ -15,7 +15,7 @@
                 'actorUsername' => $comment->actor->username,
             ]) ?>"
             rows="1" />
-        <Button variant="primary" size="small" type="submit" name="action" value="reply" iconRight="send-plane"><?= lang('Comment.form.submit_reply') ?></Button>
+        <Button variant="primary" size="small" type="submit" name="action" value="reply" class="self-end" iconRight="send-plane"><?= lang('Comment.form.submit_reply') ?></Button>
     </div>
 </form>
 <?php endif; ?>

themes/cp_app/episode/_partials/navigation.php

@@ -13,10 +13,10 @@ $navigationItems = [
     ],
 ]
 ?>
-<nav class="sticky z-40 flex col-start-2 px-4 pt-4 bg-white shadow md:px-8 gap-x-2 md:gap-x-4 -top-4 md:rounded-b-xl">
+<nav class="sticky z-40 flex col-start-2 px-4 pt-4 bg-white shadow md:px-8 gap-x-2 md:gap-x-4 -top-4 rounded-conditional-b-xl">
     <?php foreach ($navigationItems as $item): ?>
         <?php $isActive = url_is($item['uri']); ?>
         <a href="<?= $item['uri'] ?>" class="px-4 py-1 text-sm font-semibold uppercase border-b-4<?= $isActive ? ' border-b-4 text-pine-500 border-pine-500' : ' text-gray-500 hover:text-gray-900 hover:border-gray-200 border-transparent' ?>"><?= $item['label'] ?><span class="px-2 ml-1 font-semibold rounded-full <?= $isActive ? ' bg-pine-100' : ' bg-gray-100' ?>"><?= $item['labelInfo'] ?></span></a>
     <?php endforeach; ?>
-    <button type="button" class="p-2 ml-auto rotate-180 rounded-full sm:hidden focus:outline-none focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100" data-toggle="podcast-sidebar" data-toggle-class="absolute sticky top-0 right-0 hidden bg-white top-12"><?= icon('menu') ?></button>
+    <button type="button" class="p-2 ml-auto rotate-180 rounded-full md:hidden focus:ring-castopod" data-toggle="podcast-sidebar" data-toggle-class="absolute sticky top-0 right-0 hidden bg-white top-12"><?= icon('menu') ?></button>
 </nav>

themes/cp_app/episode/activity.php

@@ -34,9 +34,8 @@
 
 <?= $this->section('content') ?>
 
-<div class="flex flex-col gap-y-4">
 <?php if (can_user_interact()): ?>
-    <form action="<?= route_to('post-attempt-create', $podcast->handle) ?>" method="POST" class="flex p-4 bg-white shadow sm:rounded-2xl">
+    <form action="<?= route_to('post-attempt-create', $podcast->handle) ?>" method="POST" class="flex p-4 bg-white shadow rounded-conditional-2xl">
         <?= csrf_field() ?>
 
         <?= view('_message_block') ?>
@@ -54,15 +53,17 @@
             <Button variant="primary" size="small" type="submit" class="self-end" iconRight="send-plane"><?= lang('Post.form.submit') ?></Button>
         </div>
     </form>
+    <hr class="my-4 border-2 border-pine-100">
 <?php endif; ?>
 
-<?php foreach ($episode->posts as $key => $post): ?>
+<div class="flex flex-col gap-y-4">
-    <?= view('post/_partials/card', [
+    <?php foreach ($episode->posts as $key => $post): ?>
+        <?= view('post/_partials/card', [
     'index' => $key,
-        'post' => $post,
+            'post' => $post,
-        'podcast' => $podcast,
+            'podcast' => $podcast,
 ]) ?>
-<?php endforeach; ?>
+    <?php endforeach; ?>
 </div>
 
 <?= $this->endSection() ?>

themes/cp_app/episode/comments.php

@@ -36,8 +36,7 @@
 
 <?= $this->section('content') ?>
 
-<div class="flex flex-col gap-y-4">
+<?php if (can_user_interact()): ?>
-    <?php if (can_user_interact()): ?>
     <form action="<?= route_to('comment-attempt-create', $podcast->id, $episode->id)  ?>" method="POST" class="flex p-4">
         <?= csrf_field() ?>
 
@@ -55,15 +54,14 @@
             <Button class="self-end" variant="primary" size="small" type="submit" iconRight="send-plane"><?= lang('Comment.form.submit') ?></Button>
         </div>
     </form>
-    <?php endif; ?>
+<?php endif; ?>
 
-    <?php foreach ($episode->comments as $comment): ?>
+<?php foreach ($episode->comments as $comment): ?>
     <?= view('episode/_partials/comment', [
     'comment' => $comment,
         'podcast' => $podcast,
 ]) ?>
-    <?php endforeach; ?>
+<?php endforeach; ?>
-</div>
 
 <?= $this->endSection()
 ?>

themes/cp_app/podcast/_layout.php

@@ -24,7 +24,7 @@
         ->asset('js/audio-player.ts', 'js') ?>
 </head>
 
-<body class="grid items-start mx-auto grid-cols-podcastLayout bg-pine-50">
+<body class="grid items-start mx-auto grid-cols-podcast bg-pine-50">
     <?php if (can_user_interact()): ?>
         <div class="col-span-full">
             <?= $this->include('_admin_navbar') ?>
@@ -55,14 +55,14 @@
                         'width' => 420,
                         'height' => 620,
                         'class' =>
-                            'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:outline-none focus:ring bg-rose-600',
+                            'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:ring-castopod bg-rose-600',
                     ],
                 ) ?>
         </div>
     </header>
     <?= $this->include('podcast/_partials/navigation') ?>
-    <div class="grid items-start grid-cols-3 col-start-2 pb-12 mt-6 gap-x-6">
+    <div class="grid items-start col-start-2 pb-4 mt-6 grid-cols-podcastMain gap-x-6">
-        <main class="col-span-full sm:col-span-2">
+        <main class="w-full max-w-xl mx-auto col-span-full md:col-span-1">
             <?= $this->renderSection('content') ?>
         </main>
         <?= $this->include('podcast/_partials/sidebar') ?>

themes/cp_app/podcast/_partials/navigation.php

@@ -15,10 +15,10 @@ $navigationItems = [
     ],
 ]
 ?>
-<nav class="sticky z-40 flex col-start-2 px-4 pt-8 bg-white shadow gap-x-2 md:gap-x-4 md:px-8 -top-8 md:-top-12 md:rounded-b-xl md:pt-12 ">
+<nav class="sticky z-40 flex col-start-2 px-4 pt-8 bg-white shadow gap-x-2 md:gap-x-4 md:px-8 -top-8 md:-top-12 rounded-conditional-b-xl md:pt-12 ">
     <?php foreach ($navigationItems as $item): ?>
         <?php $isActive = url_is($item['uri']); ?>
         <a href="<?= $item['uri'] ?>" class="px-4 py-1 text-sm font-semibold uppercase border-b-4<?= $isActive ? ' border-b-4 text-pine-500 border-pine-500' : ' text-gray-500 hover:text-gray-900 hover:border-gray-200 border-transparent' ?>"><?= $item['label'] ?></a>
     <?php endforeach; ?>
-    <button type="button" class="p-2 ml-auto rotate-180 rounded-full sm:hidden focus:outline-none focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100"><?= icon('menu') ?></button>
+    <button type="button" class="p-2 ml-auto rotate-180 rounded-full md:hidden focus:ring-castopod"><?= icon('menu') ?></button>
 </nav>

themes/cp_app/podcast/_partials/sidebar.php

@@ -1,4 +1,4 @@
-<aside id="podcast-sidebar" class="sticky hidden col-span-1 sm:block top-12">
+<aside id="podcast-sidebar" class="sticky hidden col-span-1 md:block top-12">
     <div class="absolute z-0 w-full h-full sm:hidden bg-pine-800/50"></div>
     <div class="z-10 bg-pine-50">
         <a href="<?= route_to('podcast_feed', $podcast->handle) ?>" class="inline-flex items-center mb-6 text-sm font-semibold text-pine-800 group" target="_blank" rel="noopener noreferrer">

themes/cp_app/podcast/about.php

@@ -30,43 +30,43 @@
 <?= $this->section('content') ?>
 
 <div class="px-2 sm:px-4">
-<div class="mb-2"><?= $podcast->description_html ?></div>
+    <div class="mb-2"><?= $podcast->description_html ?></div>
-<div class="flex gap-x-4 gap-y-2">
+    <div class="flex gap-x-4 gap-y-2">
-    <span class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border">
-        <?= lang(
-        'Podcast.category_options.' . $podcast->category->code,
-    ) ?>
-    </span>
-    <?php foreach ($podcast->other_categories as $other_category): ?>
         <span class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border">
             <?= lang(
-        'Podcast.category_options.' . $other_category->code,
+        'Podcast.category_options.' . $podcast->category->code,
     ) ?>
         </span>
-    <?php endforeach; ?>
+        <?php foreach ($podcast->other_categories as $other_category): ?>
-</div>
+            <span class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border">
+                <?= lang(
+        'Podcast.category_options.' . $other_category->code,
+    ) ?>
+            </span>
+        <?php endforeach; ?>
+    </div>
 
-<div class="flex items-center mt-4 gap-x-8">
+    <div class="flex items-center mt-4 gap-x-8">
-    <?php if ($podcast->persons !== []): ?>
+        <?php if ($podcast->persons !== []): ?>
-        <button class="flex items-center text-xs font-semibold gap-x-2 hover:underline" data-toggle="persons-list" data-toggle-class="hidden">
+            <button class="flex items-center text-xs font-semibold gap-x-2 hover:underline" data-toggle="persons-list" data-toggle-class="hidden">
-            <div class="inline-flex flex-row-reverse">
+                <div class="inline-flex flex-row-reverse">
-                <?php $i = 0; ?>
+                    <?php $i = 0; ?>
-                <?php foreach ($podcast->persons as $person): ?>
+                    <?php foreach ($podcast->persons as $person): ?>
-                    <img src="<?= $person->image->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-5 border-2 rounded-full border-pine-100 last:ml-0" />
+                        <img src="<?= $person->image->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-5 border-2 rounded-full border-pine-100 last:ml-0" />
-                    <?php $i++; if ($i === 3) {
+                        <?php $i++; if ($i === 3) {
         break;
     }?>
-                <?php endforeach; ?>
+                    <?php endforeach; ?>
-            </div>
+                </div>
-            <?= lang('Podcast.persons', [
+                <?= lang('Podcast.persons', [
-                'personsCount' => count($podcast->persons),
+                    'personsCount' => count($podcast->persons),
-            ]) ?>
+                ]) ?>
-        </button>
+            </button>
-    <?php endif; ?>
+        <?php endif; ?>
-    <?php if ($podcast->location): ?>
+        <?php if ($podcast->location): ?>
-        <?= location_link($podcast->location, 'text-xs font-semibold p-2') ?>
+            <?= location_link($podcast->location, 'text-xs font-semibold p-2') ?>
-    <?php endif; ?>
+        <?php endif; ?>
-</div>
+    </div>
 </div>
 
 

themes/cp_app/podcast/activity.php

@@ -27,11 +27,8 @@
 
 <?= $this->section('content') ?>
 
-<section class="w-full">
-
 <?php if (can_user_interact()): ?>
-
+    <form action="<?= route_to('post-attempt-create', interact_as_actor()->username) ?>" method="POST" class="flex p-4 bg-white shadow rounded-conditional-2xl">
-    <form action="<?= route_to('post-attempt-create', interact_as_actor()->username) ?>" method="POST" class="flex p-4 bg-white shadow rounded-xl">
     <?= csrf_field() ?>
 
     <?= view('_message_block') ?>
@@ -55,7 +52,7 @@
 <hr class="my-4 border-2 border-pine-100">
 
 <?php endif; ?>
-<div class="flex flex-col gap-y-6">
+<div class="flex flex-col gap-y-4">
     <?php foreach ($posts as $key => $post): ?>
         <?php if ($post->reblog_of_id !== null): ?>
             <?= view('post/_partials/reblog', [
@@ -73,6 +70,4 @@
     <?php endforeach; ?>
 </div>
 
-</section>
-
 <?= $this->endSection() ?>

themes/cp_app/podcast/episodes.php

@@ -27,29 +27,28 @@
 
 <?= $this->section('content') ?>
 
-<section class="flex flex-col max-w-2xl gap-y-4">
+<?php if ($episodes): ?>
-    <?php if ($episodes): ?>
+    <div class="flex items-center justify-between px-2">
-        <div class="flex items-center justify-between">
+        <h1 class="font-semibold">
-            <h1 class="font-semibold">
+            <?php if ($activeQuery['type'] === 'year'): ?>
-                <?php if ($activeQuery['type'] === 'year'): ?>
+                <?= lang('Podcast.list_of_episodes_year', [
-                    <?= lang('Podcast.list_of_episodes_year', [
     'year' => $activeQuery['value'],
-                        'episodeCount' => count($episodes),
+                    'episodeCount' => count($episodes),
 ]) ?>
-                <?php elseif ($activeQuery['type'] === 'season'): ?>
+            <?php elseif ($activeQuery['type'] === 'season'): ?>
-                    <?= lang('Podcast.list_of_episodes_season', [
+                <?= lang('Podcast.list_of_episodes_season', [
     'seasonNumber' => $activeQuery['value'],
-                        'episodeCount' => count($episodes),
+                    'episodeCount' => count($episodes),
 ]) ?>
-                <?php endif; ?>
+            <?php endif; ?>
-            </h1>
+        </h1>
-            <?php if ($activeQuery): ?>
+        <?php if ($activeQuery): ?>
-                <button id="episode-lists-dropdown" type="button" class="inline-flex items-center px-2 py-1 text-sm font-semibold outline-none focus:ring" data-dropdown="button" data-dropdown-target="episode-lists-dropdown-menu" aria-label="<?= lang('Common.more') ?>" aria-haspopup="true" aria-expanded="false">
+            <button id="episode-lists-dropdown" type="button" class="inline-flex items-center px-2 py-1 text-sm font-semibold focus:ring-castopod" data-dropdown="button" data-dropdown-target="episode-lists-dropdown-menu" aria-label="<?= lang('Common.more') ?>" aria-haspopup="true" aria-expanded="false">
-                    <?= $activeQuery['label'] . icon('caret-down', 'ml-2 text-xl') ?>
+                <?= $activeQuery['label'] . icon('caret-down', 'ml-2 text-xl') ?>
-                </button>
+            </button>
-                <nav id="episode-lists-dropdown-menu" class="flex flex-col py-2 text-black bg-white border rounded shadow" aria-labelledby="episode-lists-dropdown" data-dropdown="menu" data-dropdown-placement="bottom-end">
+            <nav id="episode-lists-dropdown-menu" class="flex flex-col py-2 text-black bg-white border rounded shadow" aria-labelledby="episode-lists-dropdown" data-dropdown="menu" data-dropdown-placement="bottom-end">
-                    <?php foreach ($episodesNav as $link): ?>
+                <?php foreach ($episodesNav as $link): ?>
-                        <?= anchor(
+                    <?= anchor(
     $link['route'],
     $link['label'] . ' (' . $link['number_of_episodes'] . ')',
     [
@@ -60,23 +59,24 @@
                 : 'text-gray-600 hover:text-gray-900'),
     ],
 ) ?>
-                    <?php endforeach; ?>
+                <?php endforeach; ?>
-                </nav>
+            </nav>
-            <?php endif; ?>
+        <?php endif; ?>
-        </div>
+    </div>
+    <div class="flex flex-col mt-4 gap-y-4">
         <?php foreach ($episodes as $episode): ?>
             <?= view('episode/_partials/card', [
                 'episode' => $episode,
                 'podcast' => $podcast,
             ]) ?>
         <?php endforeach; ?>
-    <?php else: ?>
+    </div>
-        <h1 class="px-4 mb-2 text-xl text-center"><?= lang(
+<?php else: ?>
+    <h1 class="px-4 mb-2 text-xl text-center"><?= lang(
                 'Podcast.no_episode',
             ) ?></h1>
-        <p class="italic text-center"><?= lang('Podcast.no_episode_hint') ?></p>
+    <p class="italic text-center"><?= lang('Podcast.no_episode_hint') ?></p>
-    <?php endif; ?>
+<?php endif; ?>
-</section>
 
 <?= $this->endSection()
 ?>

themes/cp_app/post/_partials/actions.php

@@ -27,7 +27,7 @@
         ) ?>"><?= icon('heart', 'text-2xl mr-1 text-gray-400') .
         $post->favourites_count ?></button>
             <button id="<?= $post->id .
-                '-more-dropdown' ?>" type="button" class="px-2 py-1 text-2xl text-gray-500 outline-none focus:ring" data-dropdown="button" data-dropdown-target="<?= $post->id .
+                '-more-dropdown' ?>" type="button" class="px-2 py-1 text-2xl text-gray-500 focus:ring-castopod" data-dropdown="button" data-dropdown-target="<?= $post->id .
         '-more-dropdown-menu' ?>" aria-label="<?= lang(
             'Common.more',
         ) ?>" aria-haspopup="true" aria-expanded="false"><?= icon('more') ?>

themes/cp_app/post/_partials/card.php

@@ -1,4 +1,4 @@
-<article class="relative z-10 w-full bg-white shadow sm:rounded-2xl">
+<article class="relative z-10 w-full bg-white shadow sm:rounded-conditional-2xl">
     <header class="flex px-6 py-4">
         <img src="<?= $post->actor
     ->avatar_image_url ?>" alt="<?= $post->actor->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />

themes/cp_app/post/_partials/reblog.php

@@ -1,4 +1,4 @@
-<article class="relative z-10 w-full bg-white shadow sm:rounded-2xl">
+<article class="relative z-10 w-full bg-white shadow rounded-conditional-2xl">
     <p class="inline-flex px-6 pt-4 text-xs text-gray-700"><?= icon(
     'repeat',
     'text-lg mr-2 text-gray-400',

themes/cp_app/post/_partials/reply_actions.php

@@ -27,7 +27,7 @@
             ) ?>"><?= icon('heart', 'text-xl mr-1 text-gray-400') .
             $reply->favourites_count ?></button>
                 <button id="<?= $reply->id .
-                    '-more-dropdown' ?>" type="button" class="text-xl text-gray-500 outline-none focus:ring" data-dropdown="button" data-dropdown-target="<?= $reply->id .
+                    '-more-dropdown' ?>" type="button" class="text-xl text-gray-500 focus:ring-castopod" data-dropdown="button" data-dropdown-target="<?= $reply->id .
             '-more-dropdown-menu' ?>" aria-label="<?= lang(
                 'Common.more',
             ) ?>" aria-haspopup="true" aria-expanded="false"><?= icon('more') ?>