Skip to content

Increase navbar logo size and brand presence #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
justin808 merged 5 commits into from
Mar 23, 2026
Merged

Increase navbar logo size and brand presence #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
500063c
Increase navbar logo prominence
justin808 Mar 17, 2026
aa81978
Use larger trimmed navbar logo mark
justin808 Mar 17, 2026
9dbdc09
Resolve PR 22 conflicts and apply issue 24 follow-ups
justin808 Mar 18, 2026
f5b7795
Prominently feature logo on homepage
justin808 Mar 19, 2026
3ddbaa7
Keep flow headings semantic and styled
justin808 Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions prototypes/docusaurus/docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {GlobExcludeDefault} from '@docusaurus/utils';
const config: Config = {
title: 'React on Rails',
tagline: 'Integrate React with Rails, including SSR, RSC, and production-grade docs.',
favicon: 'img/favicon.ico',
favicon: 'img/logo-mark.png',

future: {
v4: true,
Expand Down Expand Up @@ -86,7 +86,9 @@ const config: Config = {
title: 'React on Rails',
logo: {
alt: 'React on Rails Logo',
src: 'img/logo.png',
src: 'img/logo-mark.png',
width: 40,
height: 40,
},
Comment thread
coderabbitai[bot] marked this conversation as resolved.
items: [
{
Expand Down
78 changes: 76 additions & 2 deletions prototypes/docusaurus/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
--site-soft-surface: #f6f8fa;
--site-inline-code-surface: #f6f8fa;
--site-inline-code-text: #24292f;
--site-panel-surface: #ffffff;
--site-panel-shadow: rgba(31, 35, 40, 0.08);
}

[data-theme='dark'] {
Expand All @@ -56,6 +58,8 @@
--site-soft-surface: #0d1117;
--site-inline-code-surface: #161b22;
--site-inline-code-text: #c9d1d9;
--site-panel-surface: #161b22;
--site-panel-shadow: rgba(1, 4, 9, 0.28);
}

html,
Expand All @@ -69,6 +73,23 @@ body {
box-shadow: none;
}

.navbar__brand {
display: inline-flex;
align-items: center;
gap: 0.48rem;
}

.navbar__logo {
width: 2.35rem;
height: 2.35rem;
}
Comment thread
cursor[bot] marked this conversation as resolved.

.navbar__logo img {
width: 100%;
height: 100%;
object-fit: contain;
}

.navbar__title {
font-weight: 600;
letter-spacing: 0;
Expand Down Expand Up @@ -107,7 +128,7 @@ body {
.markdown code {
background: var(--site-inline-code-surface);
border: 1px solid var(--site-border);
border-radius: 6px;
border-radius: 8px;
font-family: var(--ifm-font-family-monospace);
color: var(--site-inline-code-text);
}
Expand Down Expand Up @@ -144,7 +165,6 @@ body {
background: var(--site-soft-surface);
color: var(--ifm-color-content);
}

div[class*='announcementBar'] {
background: var(--site-soft-surface);
border-bottom: 1px solid var(--site-border);
Expand Down Expand Up @@ -179,3 +199,57 @@ div[class*='announcementBar'] a {
.theme-doc-footer-edit-meta-row {
display: none;
}

[data-theme='dark'] .button--secondary {
background: var(--site-surface);
border-color: var(--site-border);
color: var(--ifm-color-content);
}

[data-theme='dark'] .button--secondary:hover {
background: #21262d;
}

@media (max-width: 996px) {
.navbar__brand {
min-width: 0;
max-width: calc(100vw - 5rem);
gap: 0.34rem;
}

.navbar__logo {
width: 2.1rem;
height: 2.1rem;
}

.navbar__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.menu {
padding: 0.6rem;
}

.pagination-nav__link {
border-radius: 9px;
}
}

@media (max-width: 640px) {
:root {
--ifm-font-size-base: 15.5px;
}

.button--lg {
width: 100%;
justify-content: center;
}

.theme-doc-toc-mobile {
border-top: 1px solid var(--site-border);
border-bottom: 1px solid var(--site-border);
background: var(--site-surface);
}
}
8 changes: 8 additions & 0 deletions prototypes/docusaurus/src/pages/examples.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@
gap: 0.9rem;
}

.decisionGrid {
margin-bottom: 3rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

.card {
border: 1px solid var(--site-border);
border-radius: 8px;
Expand All @@ -75,6 +82,7 @@
padding: 2.1rem 0 1.7rem;
}

.decisionGrid,
.grid {
grid-template-columns: 1fr;
}
Expand Down
2 changes: 1 addition & 1 deletion prototypes/docusaurus/src/pages/examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function ExamplesPage(): ReactNode {
<p className={styles.sectionEyebrow}>Start with a decision path</p>
<h2>Choose the guide that matches your migration or evaluation goal.</h2>
</div>
<div className={styles.grid}>
<div className={styles.decisionGrid}>
{evaluationPaths.map((path) => (
<article className={styles.card} key={path.title}>
<p className={styles.cardEyebrow}>{path.eyebrow}</p>
Expand Down
71 changes: 70 additions & 1 deletion prototypes/docusaurus/src/pages/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,47 @@
max-width: 44rem;
}

.heroIdentity {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.4rem;
}

.heroLogoFrame {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 5.6rem;
height: 5.6rem;
border: 1px solid var(--site-border);
border-radius: 28px;
background: var(--site-panel-surface);
box-shadow: 0 22px 46px var(--site-panel-shadow);
}

.heroLogo {
width: 4.4rem;
height: 4.4rem;
object-fit: contain;
}

.heroIdentityText {
min-width: 0;
}

.heroName {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ifm-heading-font-family);
font-size: clamp(1.6rem, 2vw, 1.95rem);
line-height: 0.95;
}

.heroKicker {
margin-bottom: 0;
}

.heroPanel {
border: 1px solid var(--site-border);
border-radius: 8px;
Expand All @@ -33,6 +74,11 @@
font-weight: 700;
}

.cardEyebrow {
font-family: var(--ifm-font-family-base);
line-height: 1.3;
}

.kicker,
.sectionEyebrow {
color: var(--ifm-color-primary-dark);
Expand Down Expand Up @@ -136,8 +182,11 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flowGrid,
.migrationGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flowGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

Expand All @@ -164,6 +213,10 @@
color: var(--ifm-color-content-secondary);
}

.flowCard .cardEyebrow {
margin-bottom: 0.7rem;
}
Copy link
Copy Markdown

@cursor cursor Bot Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSS specificity override on eyebrow heading line-height

Low Severity

The new .cardEyebrow rule sets line-height: 1.3, but changing the flow card eyebrow from <p> to <h3> causes it to also match the pre-existing .flowCard h3 selector, which has higher specificity (0,1,1 vs 0,1,0) and sets line-height: 1.12. The .flowCard .cardEyebrow override only fixes margin-bottom but misses line-height, so the eyebrow heading inherits the generic card heading line-height despite the stated intent to avoid that.

Additional Locations (2)
Fix in Cursor Fix in Web


.inlineCode {
display: block;
margin: 0 0 1rem;
Expand Down Expand Up @@ -240,6 +293,22 @@
padding: 2.2rem 0 1.8rem;
}

.heroIdentity {
align-items: flex-start;
gap: 0.85rem;
}

.heroLogoFrame {
width: 4.8rem;
height: 4.8rem;
border-radius: 22px;
}

.heroLogo {
width: 3.7rem;
height: 3.7rem;
}

.heroLayout,
.personaGrid,
.flowGrid,
Expand Down
26 changes: 21 additions & 5 deletions prototypes/docusaurus/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {useEffect, useRef, useState, type ReactNode} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Layout from '@theme/Layout';

import styles from './index.module.css';
Expand Down Expand Up @@ -125,6 +126,7 @@ function HeroSection() {
const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
const copyResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const commandText = firstRunCommands.join('\n');
const heroLogoSrc = useBaseUrl('/img/logo-mark.png');

useEffect(
() => () => {
Expand Down Expand Up @@ -159,7 +161,23 @@ function HeroSection() {
<header className={clsx(styles.heroBanner)}>
<div className={clsx('container', styles.heroLayout)}>
<div className={styles.heroContent}>
<p className={styles.kicker}>Official documentation for one product with two tiers</p>
<div className={styles.heroIdentity}>
<div className={styles.heroLogoFrame}>
<img
className={styles.heroLogo}
src={heroLogoSrc}
alt="React on Rails logo"
width="88"
height="88"
/>
</div>
<div className={styles.heroIdentityText}>
<span className={styles.heroName}>React on Rails</span>
<p className={clsx(styles.kicker, styles.heroKicker)}>
Official documentation for one product with two tiers
</p>
</div>
</div>
<h1 className={styles.title}>React on Rails keeps Rails conventions and adds modern React.</h1>
<p className={styles.subtitle}>
Start with one recommended path, then branch into SSR, streaming, RSC, migration, or
Expand Down Expand Up @@ -239,7 +257,7 @@ function FlowSection() {
<div className={styles.flowGrid}>
{recommendedFlows.map((flow) => (
<article className={styles.flowCard} key={flow.title}>
<p className={styles.cardEyebrow}>{flow.title}</p>
<h3 className={styles.cardEyebrow}>{flow.title}</h3>
Comment thread
cursor[bot] marked this conversation as resolved.
<p className={styles.flowSummary}>{flow.summary}</p>
<code className={styles.inlineCode}>{flow.command}</code>
<Link className={styles.cardLink} to={flow.href}>
Expand Down Expand Up @@ -335,9 +353,7 @@ function TestimonialsSection() {

export default function Home(): ReactNode {
return (
<Layout
title="React on Rails"
description="Official React on Rails documentation, examples, and React on Rails Pro details.">
<Layout description="Official React on Rails documentation, examples, and React on Rails Pro details.">
<HeroSection />
<main>
<PersonaSection />
Expand Down
Binary file added prototypes/docusaurus/static/img/logo-mark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading