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 (
<div className="lasuite-homepage__wrapper">
<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-grid-row">
<div className="lasuite-homepage__main-col fr-mb-4w">
<div className="lasuite-homepage__tagline-container fr-mt-md-4w">
<div className="lasuite-homepage__main-col">
<div className="lasuite-homepage__tagline-container">
<h1 className="lasuite-homepage__tagline">{parsedTagline}</h1>
</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__form">
<div className="lasuite-homepage__form-inner">{children}</div>
<div className="lasuite-homepage__secondary-col">
<div className="lasuite-homepage__form-container">
<div className="lasuite-homepage__form">{children}</div>
</div>
</div>
</div>

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

@@ -107,6 +107,19 @@
.lasuite-homepage__content {
position: relative;
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 {
@@ -141,6 +154,7 @@
.lasuite-homepage__tagline-container {
padding: 1rem 2rem;
padding-left: 4rem;
margin-top: 2rem;
}
.lasuite-homepage__tagline {
@@ -160,6 +174,7 @@
.lasuite-homepage__secondary-col {
display: flex;
width: 100%;
margin: 4rem auto 2rem;
}
@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%;
}
.lasuite-homepage__form-inner {
.lasuite-homepage__form {
background: white;
margin: auto;
max-width: 33rem;
@@ -180,7 +207,7 @@
}
@media screen and (min-width: 48em) {
.lasuite-homepage__form-inner {
.lasuite-homepage__form {
margin-left: auto;
padding-left: 3rem;
padding-right: 3rem;
@@ -279,13 +306,3 @@
.lasuite-link:not(:hover) {
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;
}
}