LogalDeveloper/owncast
0
Fork 0
Code Activity

Logo now uses clamp to determine size

Browse Source
This commit is contained in:
t1enne
2022-07-03 12:34:55 +02:00
parent b279f8f707
commit e73013affb
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/ui/Logo/Logo.module.scss
View File

@@ -1,11 +1,11 @@
.logo { .root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
width: 120px; width: clamp(5vw, 90px, 120px);
height: 120px; height: clamp(5vw, 90px, 120px);
border-radius: 50%; border-radius: 50%;
border-width: 3px; border-width: 3px;
border-style: solid; border-style: solid;
@@ -26,4 +26,4 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
overflow: hidden; overflow: hidden;
} }

2
web/components/ui/Logo/Logo.tsx
View File

@@ -6,7 +6,7 @@ interface Props {
export default function Logo({ src }: Props) { export default function Logo({ src }: Props) {
return ( return (
<div className={s.logo}> <div className={s.root}>
<div className={s.container}> <div className={s.container}>
<div className={s.image} style={{ backgroundImage: `url(${src})` }} /> <div className={s.image} style={{ backgroundImage: `url(${src})` }} />
</div> </div>