studio/integration
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

integration/homepage: use less spacing utility classes for clarity

Browse Source 
utility classes are great but since these are meant to be reused easily
by copy/pasting the code I feel like having less clutter in the
classnames is better
This commit is contained in:
Emmanuel Pelletier
2024-05-07 18:45:32 +02:00
parent 07d335ac7c
commit 1385839f00
2 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/integration/src/components/HomepageContent.tsx
View File

@@ -66,17 +66,17 @@ export const HomepageContent = ({ tagline, lasuiteApiUrl, serviceId, children }:
return ( return (
<div className="lasuite-homepage__wrapper"> <div className="lasuite-homepage__wrapper">
<div className="fr-container fr-p-0 lasuite-container"> <div className="fr-container fr-p-0 lasuite-container">
<div className="lasuite-homepage__content fr-pt-8w fr-pb-6w lasuite-py-lg-16w"> <div className="lasuite-homepage__content">
<div className="fr-container--fluid"> <div className="fr-container--fluid">
<div className="fr-grid-row"> <div className="fr-grid-row">
<div className="lasuite-homepage__main-col fr-mb-4w"> <div className="lasuite-homepage__main-col">
<div className="lasuite-homepage__tagline-container fr-mt-md-4w"> <div className="lasuite-homepage__tagline-container">
<h1 className="lasuite-homepage__tagline">{parsedTagline}</h1> <h1 className="lasuite-homepage__tagline">{parsedTagline}</h1>
</div> </div>
</div> </div>
<div className="lasuite-homepage__secondary-col fr-mx-auto fr-ml-md-auto fr-mr-md-3w fr-mt-8w fr-mb-4w lasuite-mt-lg-0 lasuite-homepage__form-container"> <div className="lasuite-homepage__secondary-col">
<div className="lasuite-homepage__form"> <div className="lasuite-homepage__form-container">
<div className="lasuite-homepage__form-inner">{children}</div> <div className="lasuite-homepage__form">{children}</div>
</div> </div>
</div> </div>
</div> </div>

43
packages/integration/src/styles/homepage.css
View File

@@ -107,6 +107,19 @@
.lasuite-homepage__content { .lasuite-homepage__content {
position: relative; position: relative;
z-index: 2; z-index: 2;
padding-top: 4rem;
padding-bottom: 3rem;
}
@media screen and (min-width: 36em) {
.lasuite-homepage__content {
padding-top: 8rem;
padding-bottom: 8rem;
}
}
.lasuite-homepage__main-col {
margin-bottom: 2rem;
} }
.lasuite-homepage__tagline-container { .lasuite-homepage__tagline-container {
@@ -141,6 +154,7 @@
.lasuite-homepage__tagline-container { .lasuite-homepage__tagline-container {
padding: 1rem 2rem; padding: 1rem 2rem;
padding-left: 4rem; padding-left: 4rem;
margin-top: 2rem;
} }
.lasuite-homepage__tagline { .lasuite-homepage__tagline {
@@ -160,6 +174,7 @@
.lasuite-homepage__secondary-col { .lasuite-homepage__secondary-col {
display: flex; display: flex;
width: 100%; width: 100%;
margin: 4rem auto 2rem;
} }
@media screen and (min-width: 36em) { @media screen and (min-width: 36em) {
@@ -168,11 +183,23 @@
} }
} }
.lasuite-homepage__form { @media screen and (min-width: 48em) {
.lasuite-homepage__secondary-col {
margin-left: auto;
margin-right: 1.5rem;
}
}
@media screen and (min-width: 62em) {
.lasuite-homepage__secondary-col {
margin-top: 0 !important;
}
}
.lasuite-homepage__form-container {
width: 100%; width: 100%;
} }
.lasuite-homepage__form-inner { .lasuite-homepage__form {
background: white; background: white;
margin: auto; margin: auto;
max-width: 33rem; max-width: 33rem;
@@ -180,7 +207,7 @@
} }
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.lasuite-homepage__form-inner { .lasuite-homepage__form {
margin-left: auto; margin-left: auto;
padding-left: 3rem; padding-left: 3rem;
padding-right: 3rem; padding-right: 3rem;
@@ -279,13 +306,3 @@
.lasuite-link:not(:hover) { .lasuite-link:not(:hover) {
background-image: none; background-image: none;
} }
@media screen and (min-width: 62em) {
.lasuite-py-lg-16w {
padding-top: 8rem !important;
padding-bottom: 8rem !important;
}
.lasuite-mt-lg-0 {
margin-top: 0 !important;
}
}