Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reduce the height of the header

Browse Source
This commit is contained in:
Gabe Kangas 2022-12-08 14:16:05 -08:00
parent 19632f31fe
commit 047e61133a
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/ui/Header/Header.module.scss
View File

@ -6,20 +6,24 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
z-index: 20; z-index: 20;
padding: 0.4rem 0.7rem; padding: 1rem 0.7rem;
box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%); box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
background-color: var(--theme-color-background-header); background-color: var(--theme-color-background-header);
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
svg {
padding: 0.2rem;
}
span { span {
color: var(--theme-color-components-text-on-dark); color: var(--theme-color-components-text-on-dark);
font-family: var(--theme-text-display-font-family); font-family: var(--theme-text-display-font-family);
margin-left: 0.5rem; margin-left: 0.5rem;
font-size: clamp(1rem, 4vw, 2rem); font-size: clamp(1rem, 4vw, 1.6rem);
font-weight: 600; font-weight: 600;
} }
} }
} }

4
web/components/ui/Header/Header.tsx
View File

@ -20,7 +20,9 @@ export const Header: FC<HeaderComponentProps> = ({
}) => ( }) => (
<AntHeader className={cn([`${styles.header}`], 'global-header')}> <AntHeader className={cn([`${styles.header}`], 'global-header')}>
<div className={`${styles.logo}`}> <div className={`${styles.logo}`}>
<OwncastLogo variant="contrast" /> <div id="header-logo">
<OwncastLogo variant="contrast" />
</div>
<span className="global-header-text">{name}</span> <span className="global-header-text">{name}</span>
</div> </div>
{chatAvailable && !chatDisabled && <UserDropdown />} {chatAvailable && !chatDisabled && <UserDropdown />}

2
web/styles/globals.scss
View File

@ -9,7 +9,7 @@
:root { :root {
--content-padding: 12px; --content-padding: 12px;
--module-spacing: 12px; // margin size between lines of stuff, if needed --module-spacing: 12px; // margin size between lines of stuff, if needed
--header-height: 4rem; // needed for making main content scrollable; --header-height: 2.5rem; // needed for making main content scrollable;
--footer-height: 2.5rem; // needed for making main content scrollable; --footer-height: 2.5rem; // needed for making main content scrollable;
--content-height: calc(100vh - var(--header-height)); --content-height: calc(100vh - var(--header-height));
} }