{% load i18n %} {% load comments %}

{% translate "Typography" %}

{% translate "Lead paragraph to show rhythm and spacing." %}

{% translate "Body text with" %} {% translate "inline link" %}, {% translate "emphasis" %}, {% translate "italics" %}, code.

  1. {% translate "Ordered list item" %}
  2. {% translate "Second ordered item" %}

{% translate "Blockquote sample for editorial layouts." %}

{% translate "Palette & tokens" %}

{% translate "Semantic tokens define the light and dark palette. Switch color mode to review the paired values." %}

{% translate "Brand accents" %}

--cast-accent
--cast-accent-hover
--cast-accent-light

{% translate "Backgrounds" %}

--cast-bg
--cast-bg-alt
--cast-surface

{% translate "Text" %}

--cast-text
--cast-text-muted
--cast-text-light
--cast-link-on-white

{% translate "Borders" %}

--cast-border
--cast-border-strong

{% translate "Status" %}

--cast-success
--cast-warning
--cast-error

{% translate "Code" %}

--cast-code-bg
--cast-code-text

{% translate "Override example" %}

{% translate "Override tokens in a site stylesheet loaded after cast.css." %}

:root {
  --cast-accent: #0891b2;
  --cast-accent-hover: #0e7490;
  --cast-accent-light: #cffafe;
  --cast-bg: #f8fafc;
  --cast-bg-alt: #e2e8f0;
  --cast-surface: #ffffff;
  --cast-text: #0f172a;
  --cast-text-muted: #475569;
  --cast-border: #cbd5e1;
  --cast-border-strong: #94a3b8;
}

{% translate "Default palette" %}

{% translate "Primary" %} {% translate "Secondary" %}

{% translate "Override preview" %}

{% translate "Primary" %} {% translate "Secondary" %}

{% translate "Buttons & links" %}

{% translate "Primary" %} {% translate "Secondary" %}

{% translate "Forms" %}

{% translate "Search & Filters" %}

{% translate "Search trigger (navbar icon)" %}

{% translate "Default" %}

{% translate "With active filters" %}

{% translate "Search modal (static preview)" %}

{# Preview-only modal example. The live modal host is rendered once in styleguide/index.html. #}

{% translate "Active filter bar (sample)" %}

{% translate "Post list" %}

{% include "cast/"|add:template_base_dir|add:"/_list_of_posts_and_paging_controls.html" %}

{% translate "Content blocks" %}

{% include "cast/"|add:template_base_dir|add:"/post_body.html" with page=styleguide_media_post render_detail=True repository=styleguide_media_repository template_base_dir=template_base_dir podlove_load_mode="facade" %}

{% translate "Audio" %}

{% include "cast/audio/audio.html" with value=styleguide_audio page=styleguide_media_post render_for_feed=False %}
{% include "cast/"|add:template_base_dir|add:"/styleguide/_transcript.html" with styleguide_transcript=styleguide_transcript_excerpt styleguide_episode=None %}

{% translate "Video" %}

{% translate "Intro paragraph for video placement inside a longer post. Use this to judge spacing before the player." %}

{% include "cast/video/video.html" with value=styleguide_video %}

{% translate "Closing paragraph after the video for checking spacing and readability in context." %}

{% translate "Episode" %}

{% include "cast/"|add:template_base_dir|add:"/post_body.html" with page=styleguide_episode render_detail=True repository=styleguide_episode_repository template_base_dir=template_base_dir episode_transcript_url=styleguide_episode_transcript_url podlove_load_mode="facade" %}

{% translate "Transcript" %}

{% include "cast/"|add:template_base_dir|add:"/styleguide/_transcript.html" %}

{% translate "Comments" %}

{% if styleguide_comments_enabled %} {% render_comment_list for styleguide_media_post %} {% render_comment_form for styleguide_media_post %} {% else %}

{% translate "Comments are disabled. Enable CAST_COMMENTS_ENABLED to preview the comment UI." %}

{% endif %}

{% translate "Error pages" %}

{% include "cast/errors/error_content.html" with title="Bad Request" heading="Bad request!" message="Something in your request was just not right." %}
{% include "cast/errors/error_content.html" with title="Permission Denied" heading="Permission Denied!" message="Authorization failed." %}
{% include "cast/errors/error_content.html" with title="Page not found" heading="Page not found" message="This is not the page you were looking for." %}
{% include "cast/errors/error_content.html" with title="Server Error" heading="Ooops!!! 500" subheading="Looks like something went wrong!" message="We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing." %}