Browse Source

feat: fiddle with margins to achieve perfect spacing

master
Muthu Kumar 3 weeks ago
parent
commit
e889228e55
Failed to extract signature
  1. 24
      src/pages/main/Home.tsx

24
src/pages/main/Home.tsx

@ -14,10 +14,21 @@ const section = css`
const Home: React.FC = () => { const Home: React.FC = () => {
return ( return (
<Container> <Container
<section> className={css`
--distance: 2rem;
`}>
<section
style={{
// fiddle
marginLeft: "-0.3rem",
}}>
<h1>MKRhere</h1> <h1>MKRhere</h1>
<FlickerList <FlickerList
style={{
// fiddle
marginTop: "calc(-1.7rem - 2px + var(--distance))",
}}
list={[ list={[
{ {
text: "Designer", text: "Designer",
@ -39,6 +50,9 @@ const Home: React.FC = () => {
</section> </section>
<main <main
className={css` className={css`
/* fiddle */
margin-top: calc(-2.2rem + var(--distance));
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--distance); gap: var(--distance);
@ -52,7 +66,11 @@ const Home: React.FC = () => {
aspectRatio: "1", aspectRatio: "1",
}} }}
/> />
<article style={{ marginTop: "-0.4rem" }}> <article
style={{
// fiddle
marginTop: "-0.4rem",
}}>
<section <section
className={cx( className={cx(
section, section,

Loading…
Cancel
Save