Skip to content

Commit

Permalink
example: update Mux'y style (#241)
Browse files Browse the repository at this point in the history
  • Loading branch information
@luwes
luwes authored Apr 19, 2024
1 parent ab706b6 commit 3efcbbb
Show file tree
Hide file tree
Showing 8 changed files with 181 additions and 113 deletions.
4 changes: 2 additions & 2 deletions examples/default-provider/app/background-video/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const metadata: Metadata = {
export default function Page() {
return (
<>
<main>
<section>
<BackgroundVideo src={getStarted} disableTracking>
<h1>next-video</h1>
<p>
Expand All @@ -18,7 +18,7 @@ export default function Page() {
for automatic video optimization.
</p>
</BackgroundVideo>
</main>
</section>
</>
);
}
194 changes: 123 additions & 71 deletions examples/default-provider/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,130 +18,187 @@
--nav-icon-hover: var(--gray-9);
--main-bg: #fff;
--surface-1: #fafaf9;
--surface-2: var(--gray-1);
--border-1: var(--gray-2);
}

[data-theme='dark'] {
--nav-icon: var(--gray-5);
--nav-icon-hover: var(--gray-2);
--main-bg: #323232;
--surface-1: #383838;
--surface-2: #2f2f2f;
--border-1: var(--gray-9);
}

body {
display: grid;
grid-template:
'header header' auto
'sidebar1 sidebar1' auto
'content content' 1fr
'footer footer' auto;
grid-template-rows: auto auto 1fr;
}

header,
main,
footer {
padding-inline: .5rem;
}

.inner {
max-width: 1280px;
height: 100%;
margin: 0 auto;
border: 1px solid var(--border-1);
border-width: 0 1px;
}

header {
grid-area: header;
border-bottom: 1px solid var(--border-1);
}

header nav {
height: 5rem;
display: flex;
justify-content: flex-end;
}

header nav a {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--size-2);
padding: var(--size-3) var(--size-4);
border-bottom: 1px solid var(--surface-3);
margin: 0;
font-family: 'JetBrains Mono', monospace;
font-size: .875rem;
text-transform: uppercase;
padding: 1.3rem 2rem;
color: var(--nav-icon);
border-left: 1px solid var(--border-1);
}

aside {
grid-area: sidebar1;
padding: var(--size-4) 0;
background-color: var(--main-bg);
header nav :is(a, button):hover {
text-decoration: none;
background: var(--surface-2);
}

main {
grid-area: content;
padding: var(--size-4);
background-color: var(--main-bg);
main > .inner {
display: grid;
grid-template-columns: 1fr;
}

@media (width >= 768px) {
body {
grid-template:
'header header' auto
'sidebar1 content' 1fr
'footer footer' auto / 290px auto;
header,
main,
footer {
padding-inline: 1.5rem;
}
aside {
padding: var(--size-8) var(--size-6);

main > .inner {
grid-template-columns: 300px auto;
}
main {
padding: var(--size-8);

section {
border-left: 1px solid var(--border-1);
}
}

aside nav ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1.25;
footer {
border-top: 1px solid var(--border-1);
}

aside nav a {
aside,
section {
background: var(--main-bg);
padding: 2rem;
}

aside h1 {
display: flex;
padding: 0.375rem var(--size-4);
margin: 0;
color: var(--text-1);
font-weight: 700;
border-radius: 100vh;
align-items: center;
font-size: var(--font-size-2);
font-weight: var(--font-weight-4);
margin-bottom: 2rem;
}

aside nav a:hover {
background-color: var(--surface-2);
text-decoration: none;
aside h1 code {
color: var(--surface-1);
background-color: var(--mux-pink);
padding: 0 var(--size-2);
margin-right: var(--size-2);
}

footer {
grid-area: footer;
aside h1 span {
font-size: var(--font-size-1);
font-family: var(--font-mono);
text-transform: uppercase;
}

.logo {
font-size: var(--font-size-3);
color: var(--text-1);
aside p {
font-size: var(--font-size-0);
color: var(--gray-6);
}

.logo code {
color: var(--surface-1);
background-color: var(--mux-pink);
padding: 0 var(--size-2);
margin-right: var(--size-2);
footer .inner {
display: flex;
align-items: flex-end;
justify-content: center;
padding-block: 3rem 2rem;
fill: #242628;
}

.logo:hover {
text-decoration: none;
.mux-svg {
width: 2.2rem;
}

.logo:hover code {
background-color: hsl(var(--pink-5-hsl) / 100%);
aside nav ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1.25;
}

.logo span {
font-size: var(--font-size-3);
aside nav li {
padding: 0;
}

nav {
aside nav a {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--size-4);
padding: .375rem var(--size-4) .375rem .75rem;
margin: 0;
color: var(--text-1);
font-size: var(--font-size-1);
border-radius: 100vh;
border: 1px solid transparent;
}

.github-icon {
fill: var(--nav-icon);
stroke: none;
aside nav a:hover {
background-color: var(--surface-1);
text-decoration: none;
}

aside nav a.active {
background-color: var(--surface-2);
border: 1px solid var(--border-1);
}

aside nav a::before {
content: '';
display: block;
width: .45rem;
height: .45rem;
border-radius: 100%;
margin-right: .7rem;
}

.github-icon:hover > .github-icon {
fill: var(--nav-icon-hover);
aside nav a.active::before {
background-color: var(--text-1);
}

.theme-toggle {
transition: none;
box-shadow: none;
background: none;
border-radius: 0;
border: none;
box-shadow: none;
border-left: 1px solid var(--border-1);
padding-inline: 2rem;
}

#moon,
Expand All @@ -150,11 +207,6 @@ nav {
stroke: none;
}

#moon:hover,
#sun:hover {
fill: var(--nav-icon-hover);
}

#sun {
transition: transform 0.5s var(--ease-4);
transform-origin: center center;
Expand Down
46 changes: 21 additions & 25 deletions examples/default-provider/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { fileURLToPath } from 'node:url';
import * as fs from 'node:fs/promises';

import type { Metadata } from 'next';
import Link from 'next/link';
import { DM_Sans, JetBrains_Mono } from 'next/font/google';
import Nav from './nav';
import SidebarNav from './sidebar-nav';
import './globals.css';

const dmSans = DM_Sans({ subsets: ['latin'], variable: '--sans' });
Expand Down Expand Up @@ -34,31 +34,27 @@ export default async function RootLayout({
<body>
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
<header>
<Link className="logo" href="/">
<code>next-video</code>
<span> playground</span>
</Link>
<Nav />
<div className="inner">
<Nav />
</div>
</header>
<aside>
<nav>
<ul>
<li>
<Link href="/">Basic example</Link>
</li>
<li>
<Link href="/background-video">Background Video</Link>
</li>
<li>
<Link href="/slotted-poster">Slotted Poster</Link>
</li>
<li>
<Link href="/string-source">String video source</Link>
</li>
</ul>
</nav>
</aside>
{children}
<main>
<div className="inner">
<aside>
<h1><code>next-video</code> <span>Playground</span></h1>
<SidebarNav />
</aside>
{children}
</div>
</main>
<footer>
<div className="inner">
<a className="mux-link" href="https://www.mux.com/" target="_blank">
<span hidden>Made by Mux</span>
<svg className="mux-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77 24"><path d="M47.73 0c-1.64 0-2.97 1.34-2.97 3v9c0 3.31-2.67 6-5.94 6-3.28 0-5.94-2.69-5.94-6V3c0-1.66-1.33-3-2.97-3s-2.97 1.34-2.97 3v9c0 6.62 5.33 12 11.88 12S50.7 18.62 50.7 12V3c.01-1.66-1.32-3-2.97-3M60.92 12l-6.81 6.88a3.02 3.02 0 0 0 0 4.24 2.95 2.95 0 0 0 4.2 0l6.81-6.88 6.81 6.88a2.95 2.95 0 0 0 4.2 0 3.02 3.02 0 0 0 0-4.24L69.32 12l6.81-6.88a3.02 3.02 0 0 0 0-4.24 2.95 2.95 0 0 0-4.2 0l-6.81 6.88L58.3.88a2.95 2.95 0 0 0-4.2 0 3.02 3.02 0 0 0 0 4.24zM21.93.23a2.96 2.96 0 0 0-3.24.65l-6.81 6.88L5.07.88A2.94 2.94 0 0 0 1.83.23 2.99 2.99 0 0 0 0 3v18c0 1.66 1.33 3 2.97 3s2.97-1.34 2.97-3V10.24l3.84 3.88a2.95 2.95 0 0 0 4.2 0l3.84-3.88V21c0 1.66 1.33 3 2.97 3s2.97-1.34 2.97-3V3c.01-1.21-.72-2.31-1.83-2.77"/></svg>
</a>
</div>
</footer>
</body>
</html>
);
Expand Down
4 changes: 1 addition & 3 deletions examples/default-provider/app/nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ export default function Nav() {
</svg>
</button>
<a href="https://github.com/muxinc/next-video" title="Source on Github">
<svg className="github-icon" width="24" height="24" viewBox="0 0 16 16">
<path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
GitHub
</a>
</nav>
}
6 changes: 3 additions & 3 deletions examples/default-provider/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ export const metadata: Metadata = {
export default function Page() {
return (
<>
<main>
<Video src={getStarted} style={{ maxWidth: 800 }}>
<section>
<Video src={getStarted}>
<track kind="captions" src="/get-started.vtt" srcLang="en" label="English" default />
</Video>
</main>
</section>
</>
);
}
25 changes: 25 additions & 0 deletions examples/default-provider/app/sidebar-nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link';

export default function SidebarNav() {
const pathname = usePathname()

return <nav>
<ul>
<li>
<Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">Basic example</Link>
</li>
<li>
<Link className={`link ${pathname === '/background-video' ? 'active' : ''}`} href="/background-video">Background Video</Link>
</li>
<li>
<Link className={`link ${pathname === '/slotted-poster' ? 'active' : ''}`} href="/slotted-poster">Slotted Poster</Link>
</li>
<li>
<Link className={`link ${pathname === '/string-source' ? 'active' : ''}`} href="/string-source">String video source</Link>
</li>
</ul>
</nav>
}
Loading

0 comments on commit 3efcbbb

Please sign in to comment.