noham/lanyard-profile-readme
1
0
Fork 0
mirror of https://github.com/NohamR/lanyard-profile-readme.git synced 2026-05-26 04:17:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix CLS in FooterStat

Browse Source
This commit is contained in:
cnrad
2022-05-24 14:02:53 -04:00
parent 4fb4c986f8
commit 3a1db2f104
2 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,4 +1,5 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
.env
# dependencies # dependencies
/node_modules /node_modules

17
pages/index.tsx
View File

@@ -8,7 +8,7 @@ export default function Home({ userCount }: { userCount: number }) {
const [userId, setUserId] = useState<null | string>(null); const [userId, setUserId] = useState<null | string>(null);
const [userError, setUserError] = useState<string>(); const [userError, setUserError] = useState<string>();
const [copyState, setCopyState] = useState("Copy"); const [copyState, setCopyState] = useState("Copy");
const countRef = useRef<HTMLSpanElement | null>(null); const countRef = useRef<HTMLDivElement | null>(null);
const counter = useSmoothCount({ ref: countRef, target: userCount, duration: 3, curve: [0, 1, 0, 1] }); const counter = useSmoothCount({ ref: countRef, target: userCount, duration: 3, curve: [0, 1, 0, 1] });
@@ -91,7 +91,8 @@ export default function Home({ userCount }: { userCount: number }) {
</Container> </Container>
</Main> </Main>
<FooterStat> <FooterStat>
Lanyard Profile Readme has <span style={{ fontWeight: "bold" }} ref={countRef} /> total users! Lanyard Profile Readme has <div style={{ fontWeight: "bold", width: "2.75rem" }} ref={countRef} /> total
users!
</FooterStat> </FooterStat>
</> </>
); );
@@ -226,6 +227,10 @@ const Example = styled.img`
const FooterStat = styled.div` const FooterStat = styled.div`
position: absolute; position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 1rem; line-height: 1rem;
bottom: 1rem; bottom: 1rem;
left: 50%; left: 50%;
@@ -236,7 +241,13 @@ const FooterStat = styled.div`
border-radius: 0.5rem; border-radius: 0.5rem;
text-align: center; text-align: center;
box-shadow: 0 2px 15px -10px #a21caf; box-shadow: 0 2px 15px -10px #a21caf;
min-width: 275px; min-width: 400px;
@media (max-width: 400px) {
font-size: 14px;
min-width: 365px;
padding: 0.75rem 1rem;
}
&:before { &:before {
content: ""; content: "";