daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-05 01:38:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #562 from storytold/bug/grid-css-fix

Browse Source 
grid css conflict fix
This commit is contained in:
Brandon Thomas authored and GitHub committed 2024-05-14 12:20:55 -07:00
2 parents 5d5a7d0dda 31636b4ed5
commit 21c1fa6c8b
2 files changed
+25 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss
+5 -5
View File
@@ -1,6 +1,6 @@
@import "scss/colours.scss";
.grid-container {
.prelaunch-grid-container {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(7, calc(100vw / 7 * (9 / 16)));
@@ -23,7 +23,7 @@
}
}
.grid-item {
.prelaunch-grid-item {
position: relative;
background-color: rgba($white, 0.06);
display: flex;
@@ -48,7 +48,7 @@
height: 6rem;
}
&.grid-item-custom {
&.prelaunch-grid-item-custom {
overflow: visible;
position: relative;
@@ -86,7 +86,7 @@
font-weight: 500;
color: #fff;
background-color: $primary;
border-radius: 50px;
border-radius: 1rem;
cursor: pointer;
transition: all 0.2s;
width: 84%;
@@ -115,7 +115,7 @@
}
}
.grid-item.blank {
.prelaunch-grid-item.blank {
background-color: transparent;
border: none;
}
packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx
+20 -12
View File
@@ -86,14 +86,17 @@ const PrelaunchLanding: React.FC = () => {
gridItems.push(
<div
key="10-12"
className={`grid-item triple-grid grid-item-custom ${
className={`prelaunch-grid-item triple-grid prelaunch-grid-item-custom ${
isBlank ? "blank" : ""
}`}
>
<button className="waitlist-button">
<a
href="https://7mjlxvmjq8u.typeform.com/to/ZQTkv9ha"
className="waitlist-button text-center"
>
Join the Waitlist
<FontAwesomeIcon icon={faArrowRight} className="ms-2 fs-6" />
</button>
</a>
</div>
);
i += 2;
@@ -104,14 +107,17 @@ const PrelaunchLanding: React.FC = () => {
gridItems.push(
<div
key="17-19"
className={`grid-item triple-grid grid-item-custom ${
className={`prelaunch-grid-item triple-grid prelaunch-grid-item-custom ${
isBlank ? "blank" : ""
}`}
>
<button className="waitlist-button">
<a
href="https://7mjlxvmjq8u.typeform.com/to/ZQTkv9ha"
className="waitlist-button text-center"
>
Join the Waitlist
<FontAwesomeIcon icon={faArrowRight} className="ms-2 fs-6" />
</button>
</a>
</div>
);
i += 2;
@@ -122,12 +128,14 @@ const PrelaunchLanding: React.FC = () => {
gridItems.push(
<div
key="22-23"
className={`grid-item double-grid grid-item-custom ${
className={`prelaunch-grid-item double-grid prelaunch-grid-item-custom ${
isBlank ? "blank" : ""
}`}
>
<a href="https://7mjlxvmjq8u.typeform.com/to/ZQTkv9ha"
className="btn waitlist-button">
<a
href="https://7mjlxvmjq8u.typeform.com/to/ZQTkv9ha"
className="waitlist-button text-center"
>
Join the Waitlist
<FontAwesomeIcon icon={faArrowRight} className="ms-2 fs-6" />
</a>
@@ -151,8 +159,8 @@ const PrelaunchLanding: React.FC = () => {
gridItems.push(
<div
key={i}
className={`grid-item ${isBlank ? "blank" : ""} ${
i === customGridItemIndex ? "grid-item-custom" : ""
className={`prelaunch-grid-item ${isBlank ? "blank" : ""} ${
i === customGridItemIndex ? "prelaunch-grid-item-custom" : ""
}`.trim()}
>
{isBlank ? (
@@ -179,7 +187,7 @@ const PrelaunchLanding: React.FC = () => {
return gridItems;
};
return <div className="grid-container">{renderGridItems()}</div>;
return <div className="prelaunch-grid-container">{renderGridItems()}</div>;
};
export default PrelaunchLanding;