Skip to content

Commit

Permalink
docs: add new logo + style (#569)
Browse files Browse the repository at this point in the history 
Test urls:

-
https://media-chrome-docs-git-fork-luwes-refresh-style-logo-mux.vercel.app/en/components/media-play-button
-
https://media-chrome-docs-git-fork-luwes-refresh-style-logo-mux.vercel.app/en/themes

Todo:

- [x] Add new Media Chrome logo
- [x] Update styles to match logo
  • Loading branch information
@luwes
luwes committed May 5, 2023
1 parent 80e8a12 commit abb1738
Show file tree
Hide file tree
Showing 17 changed files with 185 additions and 159 deletions.
Binary file modified docs/public/favicon.ico
View file
Binary file not shown.
Binary file removed docs/public/favicon/favicon-16x16.png
View file
Binary file not shown.
Binary file added docs/public/favicon/favicon-256x256.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/public/favicon/favicon-32x32.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/favicon/favicon-48x48.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/public/favicon/favicon-96x96.png
View file
Binary file not shown.
4 changes: 4 additions & 0 deletions docs/public/media-chrome-logo.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 41 additions & 9 deletions docs/src/components/HeadCommon.astro
View file
Expand Up @@ -6,19 +6,51 @@
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />

<link rel="icon" sizes="16x16" href="/favicon/android-icon-16x16.png" />
<link rel="icon" sizes="32x32" href="/favicon/android-icon-32x32.png" />
<link rel="icon" sizes="96x96" href="/favicon/favicon-96x96.png" />
<link rel="icon" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" sizes="48x48" href="/favicon/favicon-48x48.png" />
<link rel="icon" sizes="96x96" href="/favicon/favicon-256x256.png" />

<link rel="sitemap" href="/sitemap.xml" />

<!-- Preload Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<style>
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

<!-- Scrollable a11y code helper -->
<script src="/make-scrollable-code-focusable.js" is:inline defer></script>
Expand Down
20 changes: 4 additions & 16 deletions docs/src/components/Header/AstroLogo.astro
View file
Expand Up @@ -5,23 +5,11 @@ type Props = {
const { size } = Astro.props as Props;
---

<svg
class="logo"
<svg class="logo"
width={size}
height={size}
viewBox="0 0 24 24"
fill="currentColor"
viewBox="0 0 48 48"
>
<path
fill-rule="evenodd"
d="M14.447 3.027a.75.75 0 01.527.92l-4.5 16.5a.75.75 0 01-1.448-.394l4.5-16.5a.75.75 0 01.921-.526zM16.72 6.22a.75.75 0 011.06 0l5.25 5.25a.75.75 0 010 1.06l-5.25 5.25a.75.75 0 11-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 010-1.06zm-9.44 0a.75.75 0 010 1.06L2.56 12l4.72 4.72a.75.75 0 11-1.06 1.06L.97 12.53a.75.75 0 010-1.06l5.25-5.25a.75.75 0 011.06 0z"
clip-rule="evenodd"></path>
<path fill="#00AA3C" d="M12 0h24c6.63 0 12 5.37 12 12v24c0 6.63-5.37 12-12 12H12C5.37 48 0 42.63 0 36V12C0 5.37 5.37 0 12 0Z"/>
<path fill="currentColor" d="m39.65 21.95-8.2-8.2a2.903 2.903 0 0 0-4.1 0 2.903 2.903 0 0 0 0 4.1L33.5 24l-6.15 6.15a2.903 2.903 0 0 0 0 4.1 2.903 2.903 0 0 0 4.1 0l8.2-8.2a2.903 2.903 0 0 0 0-4.1Zm-9.23-5.13c-.57.57-1.48.57-2.05 0-.57-.57-.57-1.48 0-2.05.57-.57 1.48-.57 2.05 0 .57.57.57 1.49 0 2.05Zm-9.77 13.33L14.5 24l6.15-6.15a2.903 2.903 0 0 0 0-4.1 2.903 2.903 0 0 0-4.1 0l-8.2 8.2c-.71.71-.97 1.69-.8 2.6.11.55.37 1.07.8 1.5l8.2 8.2a2.903 2.903 0 0 0 4.1 0 2.903 2.903 0 0 0 0-4.1Zm-1.02 3.08c-.57.57-1.48.57-2.05 0-.57-.57-.57-1.48 0-2.05.57-.57 1.48-.57 2.05 0 .57.57.56 1.48 0 2.05Z"/>
</svg>

<style>
@media (min-width: 50em) {
svg {
display: none;
}
}
</style>
104 changes: 47 additions & 57 deletions docs/src/components/Header/Header.astro
View file
Expand Up @@ -19,30 +19,30 @@ const lang = getLanguageFromURL(currentPage);
<header>
<SkipToContent />
<nav class="nav-wrapper" title="Top Navigation">
<div class="menu-toggle">
<SidebarToggle client:idle />
</div>
<div class="logo">
<div class="logo flex">
<a href="/">
<AstroLogo size={38} />
<h1>&lt;media-chrome&gt;</h1>
<AstroLogo size={40} />
<h1>media-chrome</h1>
</a>
</div>
<div class="menu-toggle">
<SidebarToggle client:idle />
</div>
<div class="menu">
<a href="/en/get-started" aria-current={currentPage === '/en/get-started'}>Basics</a>
<a href="/en/themes" aria-current={currentPage === '/en/themes'}>Themes</a>
<a href="/en/showcase" aria-current={currentPage === '/en/showcase'}>Showcase</a>
<a href="https://github.com/muxinc/media-chrome" target="_blank">GitHub</a>
</div>
<div class="search-item">
<Search client:idle />
</div>
<ThemeToggleButton client:visible />
{
KNOWN_LANGUAGE_CODES.length > 1 && (
<LanguageSelect lang={lang} client:idle />
)
}
<div class="search-item">
<Search client:idle />
</div>
</nav>
</header>

Expand All @@ -55,40 +55,42 @@ const lang = getLanguageFromURL(currentPage);
backdrop-filter: saturate(180%) blur(5px);
border-bottom: 1px solid var(--theme-divider);
display: flex;
align-items: center;
align-items: stretch;
justify-content: center;
overflow: hidden;
position: sticky;
top: 0;
}

.nav-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 0 1rem;
}

.logo {
display: flex;
align-self: stretch;
overflow: hidden;
width: 40px;
font-size: 1.8rem;
font-size: 1.4rem;
font-weight: 600;
line-height: 1;
color: hsla(var(--color-base-white), 100%, 1);
gap: 0.25em;
z-index: -1;
}

.logo a {
display: block;
padding: 0.5em 0.25em;
margin: -0.5em -0.25em;
display: flex;
align-items: center;
justify-content: center;
gap: .5em;
text-decoration: none;
}

:is(.logo, .menu) a {
transition: color 100ms ease-out;
font-weight: 600;
color: var(--theme-text);
}

:is(.logo, .menu) :is(a:hover, a:focus) {
color: var(--theme-text-accent);
}

.logo h1 {
display: none;
font: inherit;
Expand All @@ -98,48 +100,35 @@ const lang = getLanguageFromURL(currentPage);
}

.menu {
flex: 1;
font-family: var(--font-mono);
margin-left: 1rem;
display: flex;
align-self: stretch;
align-items: stretch;
}

.menu a {
display: flex;
display: none;
font-size: 0.9em;
line-height: 1.4;
font-size: 0.95em;
text-decoration: none;
padding: 0.4em 0.7em;
margin-left: -.8em;
border-radius: 5px;
transition: background-color 100ms ease-out;
text-transform: uppercase;
vertical-align: middle;
font-weight: 700;
padding: 1.75rem 1.75rem;
color: var(--theme-text);
border-right: 1px solid var(--theme-divider);
}

.menu :is(a:hover, a:focus) {
background-color: var(--theme-bg-accent);
}

.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
width: 100%;
max-width: 96rem;
padding: 0 1rem;
background-color: var(--theme-accent);
color: var(--theme-text-invert);
}

@media (min-width: 50em) {
header {
padding: 2rem 0rem;
.nav-wrapper {
padding: 0 2.5rem;
}

.logo {
width: auto;
margin: 0;
flex: 0 0 248px;
z-index: 0;
border-right: 1px solid var(--theme-divider);
}

.logo h1 {
Expand All @@ -162,18 +151,19 @@ const lang = getLanguageFromURL(currentPage);
}

.search-item {
display: none;
display: flex;
align-self: stretch;
align-items: center;
position: relative;
z-index: 10;
flex-grow: 1;
padding-right: 0.7rem;
display: flex;
max-width: 200px;
flex-grow: 2;
padding: 0 .75rem;
}

@media (min-width: 50em) {
.search-item {
max-width: 400px;
max-width: none;
padding: 0 1.75rem;
}
}
</style>
Expand Down
8 changes: 5 additions & 3 deletions docs/src/components/Header/Search.css
View file
Expand Up @@ -4,22 +4,24 @@
--docsearch-logo-color: var(--theme-text);
}
.search-input {
position: relative;
flex-grow: 1;
box-sizing: border-box;
width: 100%;
max-width: 30rem;
margin: 0;
padding: 0.33em 0.5em;
overflow: visible;
font-weight: 500;
font-size: 1rem;
font-family: inherit;
line-height: inherit;
background-color: var(--theme-divider);
background-color: var(--theme-bg);
border-color: var(--theme-divider);
color: var(--theme-text-light);
color: var(--theme-text-lighter);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
border-radius: 9999px;
outline: 0;
cursor: pointer;
transition-timing-function: ease-out;
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/Header/ThemeToggleButton.css
View file
Expand Up @@ -4,7 +4,7 @@
gap: 0.25em;
padding: 0.33em 0.67em;
border-radius: 99em;
background-color: var(--theme-code-inline-bg);
background-color: var(--theme-toggle-bg);
}

.theme-toggle > label:focus-within {
Expand All @@ -13,7 +13,7 @@
}

.theme-toggle > label {
color: var(--theme-code-inline-text);
color: var(--theme-text);
position: relative;
display: flex;
align-items: center;
Expand Down
1 change: 0 additions & 1 deletion docs/src/components/LeftSidebar/LeftSidebar.astro
View file
Expand Up @@ -55,7 +55,6 @@ const sidebar = SIDEBAR[langCode];
<style>
nav {
width: 100%;
margin-right: 1rem;
border-right: 1px solid var(--theme-divider);
}

Expand Down
4 changes: 2 additions & 2 deletions docs/src/config.ts
View file
Expand Up @@ -6,8 +6,8 @@ export const SITE = {

export const OPEN_GRAPH = {
image: {
src: 'https://www.media-chrome.org/favicon/android-icon-48x48.png',
alt: 'closing html tag on a pink background',
src: 'https://www.media-chrome.org/favicon/favicon-48x48.png',
alt: 'html tag on a green background',
},
twitter: 'MuxHQ',
};
Expand Down
20 changes: 13 additions & 7 deletions docs/src/layouts/MainLayout.astro
View file
Expand Up @@ -67,7 +67,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;

#grid-left {
position: fixed;
background-color: var(--theme-bg);
background-color: var(--theme-navbar-bg);
z-index: 10;
display: none;
}
Expand All @@ -87,8 +87,8 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
@media (min-width: 50em) {
.layout {
overflow: initial;
grid-template-columns: 20rem minmax(0, var(--max-width));
gap: 3%;
grid-template-columns: 18rem minmax(0, var(--max-width));
gap: 3rem;
}

#grid-left {
Expand All @@ -97,14 +97,20 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
position: sticky;
grid-column: 1;
}

#grid-main {
padding: var(--doc-padding) 3rem var(--doc-padding) var(--gutter);
}
}

@media (min-width: 72em) {
.layout {
grid-template-columns: 20rem minmax(0, var(--max-width)) 18rem;
padding-left: 0;
padding-right: 0;
margin: 0 auto;
grid-template-columns: 18rem minmax(0, var(--max-width)) 18rem;
gap: 4rem;
}

#grid-main {
padding: var(--doc-padding) var(--gutter);
}

#grid-right {
Expand Down

1 comment on commit abb1738

@vercel
Copy link

@vercel vercel bot commented on abb1738 May 5, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

media-chrome – ./

media-chrome-mux.vercel.app
media-chrome-git-main-mux.vercel.app
media-chrome.vercel.app
media-chrome.mux.dev

Please sign in to comment.