Page headers unified (#15158)

* fix; remove the bottom 100%

* dashboard

* fixes + magic border-radius

* everything

* fix

* fix

* spec

* split PRs

* Update app/assets/stylesheets/views/listings.scss

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

Co-authored-by: Ridhwana <ridhwana.khan16@gmail.com>

app/assets/stylesheets/base/layout.scss

@@ -32,7 +32,7 @@
   max-width: var(--site-width);
   margin: 0 auto;
   display: grid;
-  grid-gap: var(--layout-gap);
+  gap: var(--layout-gap);
   grid-template-columns: var(--layout);
   padding: var(--layout-padding);
 
@@ -284,3 +284,41 @@
 .text-padding {
   padding: var(--content-padding-y) var(--content-padding-x);
 }
+
+.crayons-page-header {
+  --layout-padding: var(--su-3);
+
+  @media (min-width: $breakpoint-l) {
+    --layout-padding: var(--su-4);
+  }
+
+  padding: var(--layout-padding);
+  max-width: var(--site-width);
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (min-width: $breakpoint-m) {
+    min-height: unset;
+  }
+}
+
+.crayons-layout--header-inside {
+  --header-span: 1 / span 1;
+  &.crayons-layout--2-cols {
+    --header-span: 1 / span 2;
+  }
+  grid-template-rows: min-content 1fr;
+  row-gap: 0;
+
+  @media (min-width: $breakpoint-m) {
+    row-gap: var(--layout-gap);
+
+    .crayons-page-header {
+      --layout-padding: 0;
+      grid-column: var(--header-span);
+    }
+  }
+}

app/assets/stylesheets/components/headers.scss

@@ -1,24 +1,24 @@
 @import '../config/import';
 
-.crayons-page-header {
-  padding: var(--su-3) var(--su-3) var(--su-1);
-
-  @media (min-width: $breakpoint-m) {
-    padding: 0;
-  }
-}
-
 .crayons-title,
 .crayons-subtitle-1,
 .crayons-subtitle-2,
 .crayons-subtitle-3 {
   font-weight: var(--fw-bold);
   color: var(--base-90);
+  line-height: var(--lh-tight);
+
+  @media (min-width: $breakpoint-s) {
+    line-height: var(--lh-base);
+  }
 }
 
 .crayons-title {
   color: var(--base-100);
   font-size: var(--fs-2xl);
+  display: inline-flex;
+  min-height: 40px;
+  align-items: center;
 
   @media (min-width: $breakpoint-s) {
     font-size: var(--fs-3xl);

app/assets/stylesheets/views/listings.scss

@@ -3,9 +3,10 @@
 
 .listings-columns {
   margin-bottom: var(--su-6);
+  display: grid;
+  gap: var(--su-2);
 
   @media (min-width: $breakpoint-m) {
-    display: grid;
     grid-gap: var(--su-4);
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
   }

app/javascript/listings/components/ListingFilters.jsx

@@ -16,7 +16,7 @@ export const ListingFilters = ({
   query,
 }) => {
   return (
-    <div className="crayons-layout__sidebar-left">
+    <div className="crayons-layout__sidebar-left pb-3">
       <ListingFiltersTags
         message={message}
         onKeyUp={onKeyUp}

app/javascript/listings/components/ListingFiltersCategories.jsx

@@ -4,7 +4,7 @@ import { CategoryLinks } from './CategoryLinks';
 import { CategoryLinksMobile } from './CategoryLinksMobile';
 
 export const ListingFiltersCategories = ({ categories, category, onClick }) => (
-  <div className="listing-filters px-2 m:px-0" id="listing-filters">
+  <div className="listing-filters px-3 s:px-0" id="listing-filters">
     <nav className="hidden m:block" aria-label="Listings by category">
       <a
         id="listings-link"

app/javascript/listings/components/ListingFiltersTags.jsx

@@ -15,7 +15,7 @@ export const ListingFiltersTags = ({
   const shouldRenderClearQueryButton = query.length > 0;
 
   return (
-    <div className="relative pb-2 m:pb-6 px-2 m:px-0">
+    <div className="relative pb-2 m:pb-3 px-3 m:px-0">
       <input
         type="text"
         placeholder="Search..."

app/javascript/listings/components/SelectedTags.jsx

@@ -3,7 +3,7 @@ import { selectedTagsPropTypes } from '../../common-prop-types';
 
 export const SelectedTags = ({ tags, onRemoveTag, onKeyPress }) => {
   return (
-    <section class="pt-2">
+    <section>
       {tags.map((tag) => (
         <span
           className="listing-tag mr-1"

app/javascript/readingList/components/ItemListItem.jsx

@@ -15,11 +15,11 @@ export const ItemListItem = ({ item, children }) => {
   // update readingTime to 1 min if the reading time is less than 1 min
   adaptedItem.readingTime = Math.max(1, adaptedItem.readingTime || null);
   return (
-    <article className="flex px-6 py-4">
+    <article className="flex p-4 m:p-6 pb-0 m:pb-2 pr-2 m:pr-6">
       <a
+        className="crayons-avatar crayons-avatar--l"
         href={`/${adaptedItem.user.username}`}
         datatestid="item-user"
-        className="crayons-avatar crayons-avatar--l shrink-0"
       >
         <img
           src={adaptedItem.user.profile_image_90}
@@ -28,10 +28,10 @@ export const ItemListItem = ({ item, children }) => {
         />
       </a>
 
-      <div className="flex-1 pl-4">
+      <div className="flex-1 pl-2 m:pl-4">
         <a href={adaptedItem.path} class="flex crayons-link">
           <h2
-            className="fs-l fw-bold m-0 break-word"
+            className="fs-base lh-tight m:fs-l fw-bold break-word"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: filterXSS(adaptedItem.title) }}
           />
@@ -53,7 +53,7 @@ export const ItemListItem = ({ item, children }) => {
             <span datatestid="item-tags">
               <span class="color-base-30"> • </span>
               {adaptedItem.tags.map((tag) => (
-                <a className="crayons-tag" href={`/t/${tag.name}`}>
+                <a className="crayons-tag" key={tag} href={`/t/${tag.name}`}>
                   {`#${tag.name}`}
                 </a>
               ))}
@@ -63,8 +63,7 @@ export const ItemListItem = ({ item, children }) => {
           )}
         </p>
       </div>
-
-      <div className="self-center">{children}</div>
+      <div className="m:self-center">{children}</div>
     </article>
   );
 };

app/javascript/readingList/components/TagList.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 function LargeScreenTagList({ availableTags, selectedTag, onSelectTag }) {
   return (
     <nav aria-label="Filter by tag">
-      <ul className="list-none grid grid-cols-1 gap-2">
+      <ul className="list-none">
         <li>
           <a
             className={`crayons-link crayons-link--block${
@@ -14,11 +14,11 @@ function LargeScreenTagList({ availableTags, selectedTag, onSelectTag }) {
             onClick={onSelectTag}
             href="/t"
           >
-            all tags
+            All tags
           </a>
         </li>
         {availableTags.map((tag) => (
-          <li>
+          <li key={tag}>
             <a
               className={`crayons-link crayons-link--block${
                 selectedTag === tag ? ' crayons-link--current' : ''
@@ -26,7 +26,6 @@ function LargeScreenTagList({ availableTags, selectedTag, onSelectTag }) {
               data-no-instant
               data-tag={tag}
               onClick={onSelectTag}
-              key={tag}
               href={`t/${tag}`}
             >
               #{tag}
@@ -62,6 +61,7 @@ export function TagList({
       {availableTags.map((tag) => (
         <option
           selected={tag === selectedTag}
+          key={tag}
           className={`crayons-link crayons-link--block ${
             tag === selectedTag ? 'crayons-link--current' : ''
           }`}

app/javascript/readingList/readingList.jsx

@@ -195,17 +195,19 @@ export class ReadingList extends Component {
       ''
     );
     return (
-      <main id="main-content">
-        <header className="crayons-layout s:flex flex-col s:flex-row p-4 pb-0 items-center justify-between">
-          <h1 class="crayons-title mb-2 s:mb-0">
-            {isStatusViewValid ? 'Reading list' : 'Archive'}
-            {` (${itemsTotal})`}
-          </h1>
-          <fieldset className="m:flex justify-end">
-            <legend className="hidden">Filter</legend>
+      <main
+        id="main-content"
+        className="crayons-layout crayons-layout--header-inside crayons-layout--2-cols"
+      >
+        <header className="crayons-page-header block s:flex">
+          <div className="flex justify-between items-center flex-1 mb-2 s:mb-0">
+            <h1 class="crayons-title flex-1">
+              {isStatusViewValid ? 'Reading list' : 'Archive'}
+              {` (${itemsTotal})`}
+            </h1>
             <Button
               onClick={(e) => this.toggleStatusView(e)}
-              className="whitespace-nowrap mb-2 w-100 s:w-auto s:mb-0"
+              className="whitespace-nowrap ml-auto s:w-auto"
               variant="outlined"
               url={READING_LIST_ARCHIVE_PATH}
               tagName="a"
@@ -213,11 +215,15 @@ export class ReadingList extends Component {
             >
               {isStatusViewValid ? 'View archive' : 'View reading list'}
             </Button>
+          </div>
+          <fieldset className="m:flex justify-end s:pl-2 w-100 s:w-auto">
+            <legend className="hidden">Filter</legend>
             <input
               aria-label="Filter reading list by text"
               onKeyUp={this.onSearchBoxType}
-              placeholder="Enter some text to filter on..."
-              className="crayons-textfield mb-2 s:mb-0 min-w-100 ml-0 s:ml-2"
+              type="text"
+              placeholder="Search..."
+              className="crayons-textfield mb-2 s:mb-0"
             />
             <MediaQuery
               query={`(max-width: ${BREAKPOINTS.Medium - 1}px)`}
@@ -240,7 +246,7 @@ export class ReadingList extends Component {
           query={`(min-width: ${BREAKPOINTS.Medium}px)`}
           render={(matches) => {
             return (
-              <div className="crayons-layout crayons-layout--2-cols">
+              <Fragment>
                 {matches && (
                   <div className="crayons-layout__sidebar-left">
                     <TagList
@@ -250,7 +256,7 @@ export class ReadingList extends Component {
                     />
                   </div>
                 )}
-                <section className="crayons-layout__content crayons-card mb-4">
+                <section className="crayons-layout__content crayons-card pb-4">
                   {items.length > 0 ? (
                     <Fragment>
                       <ItemList
@@ -274,7 +280,7 @@ export class ReadingList extends Component {
                     this.renderEmptyItems()
                   )}
                 </section>
-              </div>
+              </Fragment>
             );
           }}
         />

app/views/collections/index.html.erb

@@ -5,7 +5,7 @@
   <%= render "collections/meta", title_string: title_string, description_string: description_string, path: "#{@user.username}/series/" %>
 <% end %>
 
-<main id="main-content" class="crayons-layout crayons-layout--1-col">
+<main id="main-content" class="crayons-layout">
   <header class="px-2 m:px-0">
     <h1><%= title_string %></h1>
   </header>

app/views/collections/show.html.erb

@@ -5,7 +5,7 @@
   <%= render "collections/meta", title_string: title_string, description_string: description_string, path: @collection.path %>
 <% end %>
 
-<main id="main-content" class="crayons-layout crayons-layout--1-col">
+<main id="main-content" class="crayons-layout">
   <header class="px-2 m:px-0">
     <h1><%= title_string %></h1>
     <%= link_to t("views.series.list.back", user: @user.name), user_series_path(@user.username) %>

app/views/dashboards/_actions_mobile.html.erb

@@ -1,4 +1,4 @@
-<div class="block m:hidden px-2">
+<div class="block m:hidden pt-3">
   <select id="mobile_nav_dashboard" class="crayons-select">
     <option value="/dashboard" <%= "selected" if params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) %>><%= t("core.posts") %> (<%= @user.articles_count %>)</option>
     <option value="/dashboard/user_followers" <%= "selected" if params[:action] == "followers" %>><%= t("core.followers") %>(<%= @user.followers_count %>)</option>

app/views/dashboards/_analytics.html.erb

@@ -1,23 +1,23 @@
 <% num_views = @page_views_count %>
 
-<div class="grid grid-cols-2 m:grid-cols-4 gap-2 m:gap-4 p-2 m:p-0">
+<div class="grid grid-cols-2 m:grid-cols-4 gap-2 m:gap-4 pt-3">
   <div class="crayons-card crayons-card--secondary p-3 m:p-6">
     <strong class="fs-2xl m:fs-3xl lh-tight color-base-90"><%= number_with_delimiter(@reactions_count, delimeter: ",") %></strong>
-    <span class="color-base-60 block">Total post reactions</span>
+    <span class="color-base-60 block fs-base">Total post reactions</span>
   </div>
 
   <div class="crayons-card crayons-card--secondary p-3 m:p-6">
     <strong class="fs-2xl m:fs-3xl lh-tight color-base-90"><%= num_views > 500 ? number_with_delimiter(num_views, delimeter: ",") : "< 500" %></strong>
-    <span class="color-base-60 block">Total post views</span>
+    <span class="color-base-60 block fs-base">Total post views</span>
   </div>
 
   <div class="crayons-card crayons-card--secondary p-3 m:p-6">
     <strong class="fs-2xl m:fs-3xl lh-tight color-base-90"><%= @user.listings.size %></strong>
-    <span class="color-base-60 block">Listings created</span>
+    <span class="color-base-60 block fs-base">Listings created</span>
   </div>
 
   <div class="crayons-card crayons-card--secondary p-3 m:p-6">
     <strong class="fs-2xl m:fs-3xl lh-tight color-base-90"><%= @user.unspent_credits_count %></strong>
-    <span class="color-base-60 block">Credits available</span>
+    <span class="color-base-60 block fs-base">Credits available</span>
   </div>
 </div>

app/views/dashboards/_dashboard_article_row.html.erb

@@ -2,7 +2,7 @@
   <div class="dashboard-story__title">
     <h3 class="flex items-center">
       <% if article.archived %>
-        <span class="crayons-indicator crayons-indicator--critical mr-2 fw-normal">Archived</span>
+        <span class="crayons-indicator crayons-indicator--critical mr-2 fw-normal whitespace-nowrap">Archived</span>
       <% end %>
       <a href="<%= article.current_state_path %>" class="inline-flex items-center">
         <% if article.organization_id %>

app/views/dashboards/followers.html.erb

@@ -4,49 +4,46 @@
   data-params="<%= params.to_json(only: %i[which per_page]) %>"
   data-which="followers">
 
-  <main id="main-content">
-    <section class="crayons-layout">
-      <h1 class="p-2 pb-0 m:p-0 crayons-title"><%= t("core.dashboard") %> &raquo; <%= t("core.followers") %></h1>
+  <main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
+    <header class="crayons-page-header block">
+      <h1 class="crayons-title"><%= t("core.dashboard") %> &raquo; <%= t("core.followers") %></h1>
       <%= render "actions_mobile" %>
-    </section>
+    </header>
+    <div class="crayons-layout__sidebar-left">
+      <%= render "actions" %>
+    </div>
+    <div class="crayons-layout__content" id="user-dashboard">
+      <% if @follows.any? %>
+        <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
+          <% @follows.each do |follow| %>
+            <% user = follow.follower %>
+            <% if user %>
+              <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
+                <a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
+                  <img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" loading="lazy" />
+                </a>
 
-    <div class="crayons-layout crayons-layout--2-cols">
-      <div class="crayons-layout__sidebar-left">
-        <%= render "actions" %>
-      </div>
-      <div class="crayons-layout__content" id="user-dashboard">
-        <% if @follows.any? %>
-          <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
-            <% @follows.each do |follow| %>
-              <% user = follow.follower %>
-              <% if user %>
-                <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
-                  <a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
-                    <img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" loading="lazy" />
-                  </a>
+                <div class="pl-4 s:pl-0 self-center">
+                  <h3 class="s:mb-1 p-0">
+                    <a href="<%= user.path %>">
+                      <%= user.name %>
+                    </a>
+                  </h3>
 
-                  <div class="pl-4 s:pl-0 self-center">
-                    <h3 class="s:mb-1 p-0">
-                      <a href="<%= user.path %>">
-                        <%= user.name %>
-                      </a>
-                    </h3>
-
-                    <p class="s:mb-4">
-                      <a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
-                        @<%= user.username %>
-                      </a>
-                    </p>
-                  </div>
+                  <p class="s:mb-4">
+                    <a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
+                      @<%= user.username %>
+                    </a>
+                  </p>
                 </div>
-              <% end %>
+              </div>
             <% end %>
-          </div>
-        <% else %>
-          <div class="p-9 crayons-card crayons-card--secondary align-center fs-l"><%= t("dashboard.empty_follower") %></div>
-        <% end %>
-        <%= render "sublist" %>
-      </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="p-9 crayons-card crayons-card--secondary align-center fs-l"><%= t("dashboard.empty_follower") %></div>
+      <% end %>
+      <%= render "sublist" %>
     </div>
   </main>
 </div>

app/views/dashboards/following_organizations.html.erb

@@ -3,47 +3,44 @@
 <div id="index-container"
   data-params="<%= params.to_json(only: %i[action per_page]) %>"
   data-which="following">
-  <main id="main-content">
-    <section class="crayons-layout">
-      <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following organizations</h1>
+  <main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
+    <header class="crayons-page-header block">
+      <h1 class="crayons-title"><%= t("dashboard.page_title") %> &raquo; Following organizations</h1>
       <%= render "actions_mobile" %>
-    </section>
+    </header>
+    <div class="crayons-layout__sidebar-left">
+      <%= render "actions" %>
+    </div>
+    <div class="crayons-layout__content" id="user-dashboard">
+      <% if @followed_organizations.any? %>
+        <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
+          <% @followed_organizations.each do |follow| %>
+            <% organization = follow.followable %>
+            <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
+              <a href="<%= organization.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
+                <img alt="<%= organization.name %> logo" class="crayons-logo__image" src="<%= Images::Profile.call(organization.profile_image_url, length: 60) %>" loading="lazy" />
+              </a>
 
-    <div class="crayons-layout crayons-layout--2-cols">
-      <div class="crayons-layout__sidebar-left">
-        <%= render "actions" %>
-      </div>
-      <div class="crayons-layout__content" id="user-dashboard">
-        <% if @followed_organizations.any? %>
-          <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
-            <% @followed_organizations.each do |follow| %>
-              <% organization = follow.followable %>
-              <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
-                <a href="<%= organization.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
-                  <img alt="<%= organization.name %> logo" class="crayons-logo__image" src="<%= Images::Profile.call(organization.profile_image_url, length: 60) %>" loading="lazy" />
-                </a>
+              <div class="pl-4 s:pl-0 self-center">
+                <h3 class="s:mb-1 p-0">
+                  <a href="<%= organization.path %>">
+                    <%= organization.name %>
+                  </a>
+                </h3>
 
-                <div class="pl-4 s:pl-0 self-center">
-                  <h3 class="s:mb-1 p-0">
-                    <a href="<%= organization.path %>">
-                      <%= organization.name %>
-                    </a>
-                  </h3>
-
-                  <p>
-                    <a href="<%= organization.path %>" class="crayons-link crayons-link--secondary">
-                      @<%= organization.username %>
-                    </a>
-                  </p>
-                </div>
+                <p>
+                  <a href="<%= organization.path %>" class="crayons-link crayons-link--secondary">
+                    @<%= organization.username %>
+                  </a>
+                </p>
               </div>
-            <% end %>
-          </div>
-        <% else %>
-          <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any organizations yet...</div>
-        <% end %>
-        <%= render "sublist" %>
-      </div>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any organizations yet...</div>
+      <% end %>
+      <%= render "sublist" %>
     </div>
   </main>
 </div>

app/views/dashboards/following_podcasts.html.erb

@@ -3,47 +3,45 @@
 <div id="index-container"
   data-params="<%= params.to_json(only: %i[action per_page]) %>"
   data-which="following">
-  <main id="main-content">
-    <section class="crayons-layout">
-      <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following podcasts</h1>
+  <main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
+    <header class="crayons-page-header block">
+      <h1 class="crayons-title"><%= t("dashboard.page_title") %> &raquo; Following podcasts</h1>
       <%= render "actions_mobile" %>
-    </section>
+    </header>
 
-    <div class="crayons-layout crayons-layout--2-cols">
-      <div class="crayons-layout__sidebar-left">
-        <%= render "actions" %>
-      </div>
-      <div class="crayons-layout__content" id="user-dashboard">
-        <% if @followed_podcasts.any? %>
-          <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
-            <% @followed_podcasts.each do |follow| %>
-              <% podcast = follow.followable %>
-              <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
-                <a href="/<%= podcast.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
-                  <img alt="<%= podcast.name %> logo" class="crayons-logo__image" src="<%= podcast.image_url %>" loading="lazy" />
-                </a>
+    <div class="crayons-layout__sidebar-left">
+      <%= render "actions" %>
+    </div>
+    <div class="crayons-layout__content" id="user-dashboard">
+      <% if @followed_podcasts.any? %>
+        <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
+          <% @followed_podcasts.each do |follow| %>
+            <% podcast = follow.followable %>
+            <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
+              <a href="/<%= podcast.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
+                <img alt="<%= podcast.name %> logo" class="crayons-logo__image" src="<%= podcast.image_url %>" loading="lazy" />
+              </a>
 
-                <div class="pl-4 s:pl-0 self-center">
-                  <h3 class="s:mb-1 p-0">
-                    <a href="/<%= podcast.path %>">
-                      <%= podcast.name %>
-                    </a>
-                  </h3>
+              <div class="pl-4 s:pl-0 self-center">
+                <h3 class="s:mb-1 p-0">
+                  <a href="/<%= podcast.path %>">
+                    <%= podcast.name %>
+                  </a>
+                </h3>
 
-                  <p>
-                    <a href="/<%= podcast.path %>" class="crayons-link crayons-link--secondary">
-                      @<%= podcast.name %>
-                    </a>
-                  </p>
-                </div>
+                <p>
+                  <a href="/<%= podcast.path %>" class="crayons-link crayons-link--secondary">
+                    @<%= podcast.name %>
+                  </a>
+                </p>
               </div>
-            <% end %>
-          </div>
-        <% else %>
-          <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any podcasts yet...</div>
-        <% end %>
-        <%= render "sublist" %>
-      </div>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any podcasts yet...</div>
+      <% end %>
+      <%= render "sublist" %>
     </div>
   </main>
 </div>

app/views/dashboards/following_tags.html.erb

@@ -3,61 +3,58 @@
 <div id="index-container"
   data-params="<%= params.to_json(only: %i[action per_page]) %>"
   data-which="following">
-  <main id="main-content">
-    <section class="crayons-layout">
-      <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following tags</h1>
+  <main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
+    <header class="crayons-page-header block">
+      <h1 class="crayons-title">Dashboard &raquo; Following tags</h1>
       <%= render "actions_mobile" %>
-    </section>
+    </header>
+    <div class="crayons-layout__sidebar-left">
+      <%= render "actions" %>
+    </div>
+    <div class="crayons-layout__content mb-5" id="user-dashboard">
+      <% if @followed_tags.any? %>
+        <%= javascript_packs_with_chunks_tag "dashboardTagsDisableUnchangedButtons", defer: true %>
 
-    <div class="crayons-layout crayons-layout--2-cols">
-      <div class="crayons-layout__sidebar-left">
-        <%= render "actions" %>
-      </div>
-      <div class="crayons-layout__content mb-5" id="user-dashboard">
-        <% if @followed_tags.any? %>
-          <%= javascript_packs_with_chunks_tag "dashboardTagsDisableUnchangedButtons", defer: true %>
-
-          <div class="crayons-notice p-4 px-6 mb-4 mx-2 m:mx-0" aria-live="polite">
-              Adjust tag weight to modify your home feed. Higher values mean more appearances for that tag.
-              <span class="crayons-indicator crayons-indicator--outlined crayons-indicator--accent ml-3">Default 1.0</span>
-          </div>
-          <div id="following-wrapper" class="grid gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 px-2 m:px-0">
-            <% negative_follow_shown_once = false %>
-            <% @followed_tags.each do |follow| %>
-              <% tag = follow.followable %>
-              <% if tag %>
-                <% color = Color::CompareHex.new([tag.bg_color_hex || "#0000000", tag.text_color_hex || "#ffffff"]).brightness(0.8) %>
-                <div class="crayons-card branded-2 p-4 m:p-6 m:pt-4 flex flex-col single-article break-word content-center <% if follow.explicit_points < 0 %>opacity-75<% end %>" style="border-top-color: <%= color %>;" id="follows-<%= follow.id %>">
-                  <h3 class="s:mb-1 -ml-1 p-0 fw-medium">
-                    <a href="<%= URL.tag tag %>" class="crayons-tag crayons-tag--l">
-                      <span class="crayons-tag__prefix">#</span><%= tag.name %>
-                    </a>
-                    <% if follow.explicit_points < 0 %>
-                      <span class="crayons-indicator crayons-indicator--critical crayons-indicator--outlined" title="This tag has negative follow weight">Anti-follow</span>
-                    <% end %>
-                  </h3>
-
-                  <p class="grid-cell__summary truncate-at-2 mb-4 fs-m h-50">
-                    <%= strip_tags(tag.short_summary) %>
-                  </p>
-
-                  <%= fields(follow) do |f| %>
-                    <%= f.hidden_field(:id, name: "follows[][id]", form: "follows_update_form", id: "follow_id_#{follow.followable}") %>
-                    <%= f.number_field(:explicit_points, step: :any, required: true, class: "crayons-textfield flex-1 fs-s", name: "follows[][explicit_points]", form: "follows_update_form", "aria-label": "#{follow.followable} tag weight", id: "explicit_points_#{follow.followable}") %>
+        <div class="crayons-notice crayons-notice--info p-4 mx-3 s:mx-0 mb-3" aria-live="polite">
+            Adjust tag weight to modify your home feed. Higher values mean more appearances for that tag.
+            <span class="crayons-indicator crayons-indicator--outlined crayons-indicator--accent ml-3">Default 1.0</span>
+        </div>
+        <div id="following-wrapper" class="grid gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 px-3 m:px-0">
+          <% negative_follow_shown_once = false %>
+          <% @followed_tags.each do |follow| %>
+            <% tag = follow.followable %>
+            <% if tag %>
+              <% color = Color::CompareHex.new([tag.bg_color_hex || "#0000000", tag.text_color_hex || "#ffffff"]).brightness(0.8) %>
+              <div class="crayons-card branded-2 p-4 m:p-6 m:pt-4 flex flex-col single-article break-word content-center <% if follow.explicit_points < 0 %>opacity-75<% end %>" style="border-top-color: <%= color %>;" id="follows-<%= follow.id %>">
+                <h3 class="s:mb-1 -ml-1 p-0 fw-medium">
+                  <a href="<%= URL.tag tag %>" class="crayons-tag crayons-tag--l">
+                    <span class="crayons-tag__prefix">#</span><%= tag.name %>
+                  </a>
+                  <% if follow.explicit_points < 0 %>
+                    <span class="crayons-indicator crayons-indicator--critical crayons-indicator--outlined" title="This tag has negative follow weight">Anti-follow</span>
                   <% end %>
-                </div>
-              <% end %>
-            <% end %>
-          </div>
+                </h3>
 
-          <%= form_with url: bulk_update_follows_path, method: :patch, local: true, class: "sticky bg-base-10 pt-3 pb-1 z-elevate", html: { style: "bottom: 0;margin-left:-1px" }, id: "follows_update_form" do |f| %>
-            <button type="submit" class="crayons-btn crayons-btn--m mb-3" name="commit">Update Weights</button>
+                <p class="grid-cell__summary truncate-at-2 mb-4 fs-m h-50">
+                  <%= strip_tags(tag.short_summary) %>
+                </p>
+
+                <%= fields(follow) do |f| %>
+                  <%= f.hidden_field(:id, name: "follows[][id]", form: "follows_update_form", id: "follow_id_#{follow.followable}") %>
+                  <%= f.number_field(:explicit_points, step: :any, required: true, class: "crayons-textfield flex-1 fs-s", name: "follows[][explicit_points]", form: "follows_update_form", "aria-label": "#{follow.followable} tag weight", id: "explicit_points_#{follow.followable}") %>
+                <% end %>
+              </div>
+            <% end %>
           <% end %>
-        <% else %>
-          <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any tags yet...</div>
+        </div>
+
+        <%= form_with url: bulk_update_follows_path, method: :patch, local: true, class: "sticky bg-base-10 pt-3 pb-1 z-elevate", html: { style: "bottom: 0;margin-left:-1px" }, id: "follows_update_form" do |f| %>
+          <button type="submit" class="crayons-btn crayons-btn--m mb-3" name="commit">Update Weights</button>
         <% end %>
-        <%= render "sublist" %>
-      </div>
+      <% else %>
+        <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">You don't follow any tags yet...</div>
+      <% end %>
+      <%= render "sublist" %>
     </div>
   </main>
 </div>

app/views/dashboards/following_users.html.erb

@@ -3,51 +3,49 @@
 <div id="index-container"
   data-params="<%= params.to_json(only: %i[action per_page]) %>"
   data-which="following">
-  <main id="main-content">
-    <section class="crayons-layout">
-      <h1 class="p-2 pb-0 m:p-0 crayons-title"><%= t("dashboard.page_title") %> &raquo; <%= t("dashboard.following_users") %></h1>
+  <main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
+    <header class="crayons-page-header block">
+      <h1 class="crayons-title"><%= t("dashboard.page_title") %> &raquo; <%= t("dashboard.following_users") %></h1>
       <%= render "actions_mobile" %>
-    </section>
+    </header>
 
-    <div class="crayons-layout crayons-layout--2-cols">
-      <div class="crayons-layout__sidebar-left">
-        <%= render "actions" %>
-      </div>
-      <div class="crayons-layout__content" id="user-dashboard">
-        <% if @follows.any? %>
-          <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
-            <% @follows.each do |follow| %>
-              <% user = follow.followable %>
-              <% if user %>
-                <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
-                  <a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
-                    <img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" loading="lazy" />
-                  </a>
+    <div class="crayons-layout__sidebar-left">
+      <%= render "actions" %>
+    </div>
+    <div class="crayons-layout__content" id="user-dashboard">
+      <% if @follows.any? %>
+        <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
+          <% @follows.each do |follow| %>
+            <% user = follow.followable %>
+            <% if user %>
+              <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
+                <a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
+                  <img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" loading="lazy" />
+                </a>
 
-                  <div class="pl-4 s:pl-0 self-center">
-                    <h3 class="s:mb-1 p-0">
-                      <a href="<%= user.path %>">
-                        <%= user.name %>
-                      </a>
-                    </h3>
+                <div class="pl-4 s:pl-0 self-center">
+                  <h3 class="s:mb-1 p-0">
+                    <a href="<%= user.path %>">
+                      <%= user.name %>
+                    </a>
+                  </h3>
 
-                    <p class="s:mb-4">
-                      <a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
-                        @<%= user.username %>
-                      </a>
-                    </p>
-                  </div>
+                  <p class="s:mb-4">
+                    <a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
+                      @<%= user.username %>
+                    </a>
+                  </p>
                 </div>
-              <% end %>
+              </div>
             <% end %>
-          </div>
-        <% else %>
-          <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">
-            <%= t("dashboard.not_following_any_users") %>
-          </div>
-        <% end %>
-        <%= render "sublist" %>
-      </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">
+          <%= t("dashboard.not_following_any_users") %>
+        </div>
+      <% end %>
+      <%= render "sublist" %>
     </div>
   </main>
 </div>

app/views/dashboards/show.html.erb

@@ -1,71 +1,67 @@
 <% title "Dashboard" %>
-  <header class="crayons-layout">
-    <h1 class="p-2 pb-0 m:p-0 crayons-title"></h1>
-<main id="main-content">
-  <section class="crayons-layout">
-    <h1 class="p-2 pb-0 m:p-0 crayons-title"><%= t("core.dashboard") %></h1>
+<main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
+  <header class="crayons-page-header block">
+    <h1 class="crayons-title"><%= t("core.dashboard") %></h1>
     <%= render "actions_mobile" %>
     <%= render "analytics" %>
-  </section>
+  </header>
 
-  <div class="crayons-layout crayons-layout--2-cols">
-    <div class="crayons-layout__sidebar-left">
-      <%= render "actions" %>
+  <div class="crayons-layout__sidebar-left">
+    <%= render "actions" %>
+  </div>
+
+  <div class="crayons-layout__content">
+    <div class="flex items-center justify-between mt-3">
+      <h2 class="hidden m:block crayons-subtitle-2"><%= t("core.posts") %></h2>
+
+      <div class="flex flex-wrap px-3 gap-2">
+        <% if params[:which] != "organization" %>
+          <% if @articles.any?(&:archived) %>
+            <%= link_to "Show archived", "javascript:;", id: "toggleArchivedLink", class: "crayons-btn crayons-btn--outlined whitespace-nowrap" %>
+          <% end %>
+          <% if @articles.any? %>
+            <%= select_tag "dashboard_sort", options_for_select(sort_options, params[:sort]), "aria-label": "Sort By", class: "crayons-select w-auto" %>
+          <% end %>
+        <% end %>
+
+        <% if @organizations && @organizations.size > 0 && (params[:which].blank? || params[:which] == "organization") %>
+          <select id="dashboard_author" class="crayons-select w-auto">
+            <option value="/dashboard" <%= "selected" if params[:which].blank? %>>Personal</option>
+            <% @organizations.each do |org| %>
+              <option value="/dashboard/organization/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %> (<%= org.articles_count %>)</option>
+            <% end %>
+          </select>
+        <% end %>
+      </div>
     </div>
 
-    <div class="crayons-layout__content flex flex-col">
-      <div class="flex items-center justify-between mb-3">
-        <h2 class="hidden m:block crayons-subtitle-2"><%= t("core.posts") %></h2>
-
-        <div class="flex flex-wrap">
-          <% if params[:which] != "organization" %>
-            <% if @articles.any?(&:archived) %>
-              <%= link_to "Show archived", "javascript:;", id: "toggleArchivedLink", class: "crayons-btn crayons-btn--outlined ml-2 whitespace-nowrap my-1" %>
-            <% end %>
-            <% if @articles.any? %>
-              <%= select_tag "dashboard_sort", options_for_select(sort_options, params[:sort]), "aria-label": "Sort By", class: "crayons-select w-auto ml-2 my-1" %>
-            <% end %>
+    <% if @articles.any? %>
+      <%= javascript_packs_with_chunks_tag "dashboardDropdowns", defer: true %>
+      <div class="crayons-card mb-6 mt-3">
+        <% @articles.each do |article| %>
+          <% if params[:which] == "organization" %>
+            <%= render "dashboard_article_row", article: article, organization: article.organization, org_admin: true, manage_view: false %>
+          <% else %>
+            <%= render "dashboard_article_row", article: article, organization: nil, org_admin: false, manage_view: false %>
           <% end %>
-
-          <% if @organizations && @organizations.size > 0 && (params[:which].blank? || params[:which] == "organization") %>
-            <select id="dashboard_author" class="crayons-select w-auto ml-2 my-1">
-              <option value="/dashboard" <%= "selected" if params[:which].blank? %>>Personal</option>
-              <% @organizations.each do |org| %>
-                <option value="/dashboard/organization/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %> (<%= org.articles_count %>)</option>
-              <% end %>
-            </select>
-          <% end %>
-        </div>
+        <% end %>
       </div>
 
-      <% if @articles.any? %>
-        <%= javascript_packs_with_chunks_tag "dashboardDropdowns", defer: true %>
-        <div class="crayons-card mb-6">
-          <% @articles.each do |article| %>
-            <% if params[:which] == "organization" %>
-              <%= render "dashboard_article_row", article: article, organization: article.organization, org_admin: true, manage_view: false %>
-            <% else %>
-              <%= render "dashboard_article_row", article: article, organization: nil, org_admin: false, manage_view: false %>
-            <% end %>
+      <div class="mb-4 pl-3">
+        <%= paginate @articles, params: { i: nil } %>
+      </div>
+
+    <% else %>
+      <div class="p-6 m:p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center flex-1">
+        <div>
+          <% if Settings::General.mascot_image_url.present? %>
+            <% image_url = Images::Optimizer.call(Settings::General.mascot_image_url, width: 300, crop: "imagga_scale") %>
+            <%= image_tag(image_url, class: "sloan mb-7", alt: "Mascot image") %>
           <% end %>
+          <p class="mb-6"><%= t("dashboard.empty_post") %></p>
+          <p><a href="/new" class="crayons-btn crayons-btn--l"><%= t("dashboard.write_new_post") %></a></p>
         </div>
-
-        <div class="mb-4 pl-3">
-          <%= paginate @articles, params: { i: nil } %>
-        </div>
-
-      <% else %>
-        <div class="p-6 m:p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center flex-1">
-          <div>
-            <% if Settings::General.mascot_image_url.present? %>
-              <% image_url = Images::Optimizer.call(Settings::General.mascot_image_url, width: 300, crop: "imagga_scale") %>
-              <%= image_tag(image_url, class: "sloan mb-7", alt: "Mascot image") %>
-            <% end %>
-            <p class="mb-6"><%= t("dashboard.empty_post") %></p>
-            <p><a href="/new" class="crayons-btn crayons-btn--l"><%= t("dashboard.write_new_post") %></a></p>
-          </div>
-        </div>
-      <% end %>
-    </div>
+      </div>
+    <% end %>
   </div>
 </main>

app/views/dashboards/subscriptions.html.erb

@@ -1,6 +1,6 @@
 <% title "Subscriptions #{@source.title}" %>
 
-<div class="crayons-layout crayons-layout--1-col">
+<div class="crayons-layout">
 
   <main id="main-content">
     <section class="flex items-center justify-between p-2 m:p-0">

app/views/listings/index.html.erb

@@ -29,7 +29,7 @@
 
 <main id="main-content">
 
-  <header class="crayons-layout s:flex flex-col s:flex-row p-4 pb-0 items-center justify-between">
+  <header class="crayons-page-header s:pb-0">
     <h1 class="crayons-title"><%= t("core.listings") %></h1>
 
     <nav class="flex items-center" aria-label="Listings">

app/views/moderations/_mod_sidebar_left.html.erb

@@ -1,4 +1,4 @@
-<aside class="crayons-layout__sidebar-left crayons-page-header grid gap-1 m:block">
+<aside class="crayons-layout__sidebar-left p-3 pb-1 m:p-0 m:pb-0 grid gap-1 m:block">
   <h1 class="crayons-title mb-0 pl-0 m:pl-2 m:mb-6">
     <%= t("views.moderations.heading") %>
   </h1>

app/views/notifications/_nav_menu.html.erb

@@ -46,7 +46,7 @@
   <% end %>
 </nav>
 
-<nav class="block m:hidden px-4" aria-label="<%= t("views.notifications.nav.aria_label") %>">
+<nav class="block m:hidden px-3" aria-label="<%= t("views.notifications.nav.aria_label") %>">
   <% if @organizations.present? %>
     <select id="notifications-filter__select" class="crayons-select mb-2">
       <option value="<%= notifications_path %>"><%= @user.name %></option>

app/views/notifications/index.html.erb

@@ -43,12 +43,11 @@
 
 <% if user_signed_in? %>
   <main id="main-content">
-    <header class="crayons-layout crayons-layout--limited-l crayons-layout--1-col p-4 flex items-center justify-between">
-      <h1 class="crayons-title"><%= t("views.notifications.heading") %></h1>
-      <a href="<%= user_settings_path(tab: :notifications) %>" class="crayons-btn crayons-btn--ghost"><%= t("views.notifications.settings") %></a>
-    </header>
-
-    <div class="crayons-layout crayons-layout--limited-l crayons-layout--2-cols pt-0" id="notifications-container">
+    <div class="crayons-layout crayons-layout--header-inside crayons-layout--limited-l crayons-layout--2-cols" id="notifications-container">
+      <header class="crayons-page-header">
+        <h1 class="crayons-title"><%= t("views.notifications.heading") %></h1>
+        <a href="<%= user_settings_path(tab: :notifications) %>" class="crayons-btn crayons-btn--ghost"><%= t("views.notifications.settings") %></a>
+      </header>
       <div class="crayons-layout__sidebar-left">
         <%= render "notifications/nav_menu" %>
       </div>

app/views/podcast_episodes/index.html.erb

@@ -2,7 +2,7 @@
   <%= render "podcast_episodes/meta" %>
 <% end %>
 <% if @podcast %>
-  <div class="spec__podcast-header" style="background:#<%= @podcast.main_color_hex %>;" class="mb-4">
+  <div class="spec__podcast-header mb-3" style="background:#<%= @podcast.main_color_hex %>;" class="mb-4">
     <div class="crayons-layout relative">
       <nav class="s:absolute mt-2">
         <a href="/pod" class="crayons-btn crayons-btn--ghost crayons-btn--inverted"><%= t("views.podcasts.view_all_podcasts") %></a>
@@ -30,9 +30,9 @@
   </div>
 <% end %>
 
-<main id="main-content" class="crayons-layout podcast-index mb-8">
+<main id="main-content" class="crayons-layout <% unless @podcast %>crayons-layout--header-inside<% end %> podcast-index mb-8">
   <% unless @podcast %>
-    <header class="flex items-center justify-between p-3 pb-0 m:p-0">
+    <header class="crayons-page-header">
       <h1 class="crayons-title">
         <%= t("views.podcasts.heading") %>
       </h1>

app/views/stories/articles_search/index.html.erb

@@ -4,23 +4,28 @@
 <div id="query-wrapper"></div>
 
 <main id="main-content">
-  <div class="crayons-layout crayons-layout--limited-l crayons-layout--1-col p-3 pb-0 s:pb-3">
-    <div class="block m:hidden" id="mobile-search-container">
-      <form accept-charset="UTF-8" method="get" action="/search" role="search">
-        <div class="crayons-fields crayons-fields--horizontal">
-          <div class="crayons-field flex-1 relative">
-            <input class="crayons-textfield" type="text" name="q" placeholder="Search..." autocomplete="on" />
-            <button type="submit" aria-label="Search" class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-rounded absolute right-2 bottom-0 top-0 m-1">
-              <%= inline_svg_tag("search.svg", aria_hidden: true, width: 24, height: 24, class: "crayons-icon", title: "Search") %>
-            </button>
+  <div id="index-container"
+      class="crayons-layout crayons-layout--header-inside crayons-layout--limited-l crayons-layout--2-cols"
+      data-params="<%= params.to_json(only: %i[tag username q]) %>" data-which="<%= @list_of %>"
+      data-tag=""
+      data-feed="<%= params[:timeframe] || "base-feed" %>"
+      data-articles-since="<%= Timeframe.datetime_iso8601(params[:timeframe]) %>">
+    <div class="crayons-page-header block s:flex">
+      <div class="block m:hidden mb-2" id="mobile-search-container">
+        <form accept-charset="UTF-8" method="get" action="/search" role="search">
+          <div class="crayons-fields crayons-fields--horizontal">
+            <div class="crayons-field flex-1 relative">
+              <input class="crayons-textfield" type="text" name="q" placeholder="Search..." autocomplete="on" />
+              <button type="submit" aria-label="Search" class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-rounded absolute right-2 bottom-0 top-0 m-1">
+                <%= inline_svg_tag("search.svg", aria_hidden: true, width: 24, height: 24, class: "crayons-icon", title: "Search") %>
+              </button>
+            </div>
           </div>
-        </div>
-      </form>
-    </div>
+        </form>
+      </div>
 
-    <div class="block s:flex items-center justify-between">
-      <h1 class="crayons-title hidden s:block pl-2">
-        Search results <%= "for #{params[:q]}" unless params[:q].blank? %>
+      <h1 class="crayons-title hidden s:block">
+        Search results <%= "for #{params[:q]}" if params[:q].present? %>
       </h1>
 
       <nav id="sorting-option-tabs" aria-label="Search result sort options" class="-mx-3 m:mx-0">
@@ -36,16 +41,13 @@
           </li>
         </ul>
       </nav>
+
+      <nav class="block s:hidden -mx-3 m:mx-0">
+        <%= render "stories/articles_search/nav_menu" %>
+      </nav>
     </div>
-  </div>
 
-  <div class="crayons-layout crayons-layout--limited-l crayons-layout--2-cols pt-0" id="index-container"
-      data-params="<%= params.to_json(only: %i[tag username q]) %>" data-which="<%= @list_of %>"
-      data-tag=""
-      data-feed="<%= params[:timeframe] || "base-feed" %>"
-      data-articles-since="<%= Timeframe.datetime_iso8601(params[:timeframe]) %>">
-
-    <div class="crayons-layout__sidebar-left search-nav">
+    <div class="crayons-layout__sidebar-left s:block hidden">
       <%= render "stories/articles_search/nav_menu" %>
     </div>
 

app/views/tags/index.html.erb

@@ -19,17 +19,17 @@
   <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
 <% end %>
 
-<main id="main-content" class="crayons-layout crayons-layout--1-col">
-  <header class="flex items-center justify-between p-3 m:p-0">
+<main id="main-content" class="crayons-layout crayons-layout--header-inside">
+  <header class="crayons-page-header">
     <h1 class="crayons-title"><%= t("views.tags.heading") %></h1>
     <%= link_to t("views.tags.following_tags"), dashboard_following_tags_path, class: "crayons-btn crayons-btn--ghost" %>
   </header>
 
-  <div class="grid gap-2 m:gap-4 l:gap-6 m:grid-cols-2 l:grid-cols-3 px-2 m:px-0" data-follow-button-container="true">
+  <div class="grid gap-3 m:gap-4 l:gap-6 m:grid-cols-2 l:grid-cols-3 px-3 m:px-0 pb-3" data-follow-button-container="true">
     <% @tags.each do |tag| %>
       <% color = Color::CompareHex.new([tag.bg_color_hex || "#0000000", tag.text_color_hex || "#ffffff"]).brightness(0.8) %>
-      <div class="tag-card crayons-card branded-4 p-4 m:p-6 m:pt-4 flex flex-col relative" style="border-top-color: <%= color %>; ">
-        <h3 class="crayons-tag crayons-tag--l mb-2">
+      <div class="tag-card crayons-card branded-4 p-3 pt-2 m:p-6 m:pt-4 relative" style="border-top-color: <%= color %>; ">
+        <h3 class="crayons-tag crayons-tag--l mb-1 -ml-1">
           <a href="<%= URL.tag tag %>" class="crayons-link">
             <span class="crayons-tag__prefix">#</span><%= tag.name %>
           </a>

app/views/users/edit.html.erb

@@ -20,28 +20,28 @@
     </div>
   <% end %>
 
-  <div class="crayons-layout crayons-layout--limited-l crayons-layout--1-col p-4">
-    <% if @tab == "organization" && @organizations.present? %>
-      <h1 class="crayons-title">Settings for
-        <select class="crayons-select lh-tight w-25 align-text-top w-max" onchange="window.location.href=this.value">
-          <% options = @organizations.pluck(:slug, :id).each do |arr| %>
-            <% arr[0] = "@#{arr[0]}" %>
-            <% arr[1] = "/settings/organization/#{arr[1]}" %>
-          <% end.to_h.merge("New Organization" => "/settings/organization/new") %>
-          <%= options_for_select(options, "/settings/organization/#{params[:org_id]}") %>
-          <%# For example: %>
-          <%# <option value="/settings/organization/1>@devteam</option> %>
-          <%# <option value="/settings/organization/new" selected>New Organization</option> %>
-        </select>
-      </h1>
-    <% else %>
-      <h1 class="crayons-title">
-        Settings for <a href="<%= user_url(@user) || "#" %>">@<%= @user.username.truncate(User::USERNAME_MAX_LENGTH) %></a>
-      </h1>
-    <% end %>
-  </div>
-
-  <div class="crayons-layout crayons-layout--2-cols crayons-layout--limited-l pt-0">
+  <div class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols crayons-layout--limited-l">
+    <div class="crayons-page-header">
+      <% if @tab == "organization" && @organizations.present? %>
+        <h1 class="crayons-title">Settings for
+          <select class="ml-1 crayons-select lh-tight w-25 align-text-top w-max" onchange="window.location.href=this.value">
+            <% options = @organizations.pluck(:slug, :id).each do |arr| %>
+              <% arr[0] = "@#{arr[0]}" %>
+              <% arr[1] = "/settings/organization/#{arr[1]}" %>
+            <% end.to_h.merge("New Organization" => "/settings/organization/new") %>
+            <%= options_for_select(options, "/settings/organization/#{params[:org_id]}") %>
+            <%# For example: %>
+            <%# <option value="/settings/organization/1>@devteam</option> %>
+            <%# <option value="/settings/organization/new" selected>New Organization</option> %>
+          </select>
+        </h1>
+      <% else %>
+        <h1 class="crayons-title">
+          Settings for
+          <a class="ml-1" href="<%= user_url(@user) || "#" %>">@<%= @user.username.truncate(User::USERNAME_MAX_LENGTH) %></a>
+        </h1>
+      <% end %>
+    </div>
     <div class="crayons-layout__left-sidebar">
       <nav class="hidden m:block" aria-label="Settings">
         <% Settings.tab_list.each do |possible_tab| %>

spec/system/dashboards/user_visits_dashboard_spec.rb

@@ -22,8 +22,8 @@ RSpec.describe "Dashboard", type: :system, js: true do
 
       visit dashboard_path
 
-      within "main#main-content > section" do
-        expect(page).to have_text("1\nCredits available")
+      within "main#main-content > header" do
+        expect(page).to have_text(/1\nCredits available/)
       end
     end
   end