Skip to content

95 showcase web responsiveness #98

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
romanaduraciova merged 5 commits into from
Jul 20, 2026
Merged

95 showcase web responsiveness #98

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
814e41c
fix: elter surface colors
romanaduraciova Jul 20, 2026
c59665c
fix: header responsiveness, add mobile nav
romanaduraciova Jul 20, 2026
d785fd2
fix: docs and home page responsiveness
romanaduraciova Jul 20, 2026
ee0047e
deleted dead code
romanaduraciova Jul 20, 2026
8a3e186
fix: button rendering onside Link component
romanaduraciova Jul 20, 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
5 changes: 4 additions & 1 deletion lib/components/layout/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ const ContentContainer = forwardRef<
return (
<div
ref={ref}
className={cn("space-y-8 px-10 pb-10 mx-auto max-w-7xl", className)}
className={cn(
"space-y-8 px-4 pb-10 mx-auto max-w-7xl sm:px-6 lg:px-10",
className
)}
{...props}
>
{children}
Expand Down
4 changes: 2 additions & 2 deletions lib_public/elter_setup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@

/* Surfaces */
--background: #f0f0f5; /* --base-50 */
--surface: #e3e3e8 ; /* --base-100 */
--surface-raised: #c9c9cf; /* --base-200 */
--surface: #e8e8ed ; /* --base-100 */
--surface-raised: #dbdbe1; /* --base-200 */

/* Text */
--text: #0a2033; /* --base-950 */
Expand Down
70 changes: 40 additions & 30 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,16 @@ import { ThemeProvider } from "../components/ThemeProvider";
import { ThemeSelector } from "../components/ThemeSelector";
import { ThemeInitializer } from "../components/ThemeInitializer";
import { SearchTrigger } from "../components/search/SearchTrigger";
import { MobileNav } from "../components/MobileNav";
import { Button } from "../../lib/components/primitives/button";
import { Package } from "lucide-react";

const NAV_ITEMS = [
{ href: "/", label: "Home" },
{ href: "/docs/foundations", label: "Foundations" },
{ href: "/docs/components", label: "Components" },
];

const inter = Inter({ subsets: ["latin"] });

// Roboto powers the EOSC theme; Montserrat is used for ELTER headings.
Expand Down Expand Up @@ -118,7 +125,7 @@ export default function RootLayout({
className="hidden h-20 w-auto dark:block"
/>
</Link>
<NavigationMenu>
<NavigationMenu className="hidden lg:flex">
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuLink href="/">Home</NavigationMenuLink>
Expand All @@ -137,35 +144,38 @@ export default function RootLayout({
</NavigationMenu>
</HeaderLeft>
<HeaderRight>
<Link
href="https://github.com/CERIT-SC/design-system"
target="_blank"
rel="noopener noreferrer"
>
<Button variant="ghost" size="sm" className="gap-2 text-sm">
<svg
className="w-5 h-5"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
GitHub
</Button>
</Link>
<Link
href="https://www.npmjs.com/package/@e-infra/design-system"
target="_blank"
rel="noopener noreferrer"
>
<Button variant="ghost" size="sm" className="gap-2 text-sm">
<Package className="w-5 h-5" />
NPM package
</Button>
</Link>
<SearchTrigger />
<ThemeSelector />
<div className="hidden items-center gap-2 lg:flex">
<Link
href="https://github.com/CERIT-SC/design-system"
target="_blank"
rel="noopener noreferrer"
>
<Button variant="ghost" size="sm" className="gap-2 text-sm">
<svg
className="w-5 h-5"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
GitHub
</Button>
</Link>
Comment thread
romanaduraciova marked this conversation as resolved.
<Link
href="https://www.npmjs.com/package/@e-infra/design-system"
target="_blank"
rel="noopener noreferrer"
>
<Button variant="ghost" size="sm" className="gap-2 text-sm">
<Package className="w-5 h-5" />
NPM package
</Button>
</Link>
Comment thread
romanaduraciova marked this conversation as resolved.
<SearchTrigger />
<ThemeSelector />
</div>
<MobileNav items={NAV_ITEMS} className="lg:hidden" />
</HeaderRight>
</HeaderContent>
</Header>
Expand Down
Loading
Loading