Skip to content

Commit 823de3d

Browse files
CFsylvesterCFsylvester
committed
update grid overlay logic to css
1 parent 5216c51 commit 823de3d

File tree

2 files changed

+76
-51
lines changed

2 files changed

+76
-51
lines changed

‎src/app/layout.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ReactNode, useState } from 'react';
44
import { Montserrat } from 'next/font/google';
55

66
// components
7-
import { GridOverlay, GridToggle } from '@/components/Grid';
7+
import GridOverlayToggle from '@/components/GridOverlayToggle';
88

99
const montserrat = Montserrat({
1010
subsets: ['latin'],
@@ -22,18 +22,15 @@ const RootLayout = ({ children }: { children: ReactNode }) => {
2222
<body>
2323
{/* DEV GRID TOGGLE */}
2424
{devMode && (
25-
<GridToggle
25+
<GridOverlayToggle
2626
active={showGrid}
2727
onChange={setShowGrid}
2828
className="fixed bottom-8 right-4 z-20"
2929
/>
3030
)}
3131

32-
{/* DEV GRID OVERLAY */}
33-
<GridOverlay active={showGrid} />
34-
3532
{/* MAIN CONTENT */}
36-
<main className="z-0 grid-layout">{children}</main>
33+
<main className={`layout ${showGrid ? 'grid-overlay' : ''}`}>{children}</main>
3734
</body>
3835
</html>
3936
);

‎src/styles/utilities/layout.scss‎

Lines changed: 73 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,90 @@
1-
// Base layout
2-
body {
3-
@apply bg-brand-light-gray min-h-screen;
4-
}
1+
:root {
2+
// dynamic variables
3+
--layout-cols: 4;
4+
--layout-padding: theme('spacing.4');
5+
6+
// hardcoded gap
7+
--layout-gap: theme('spacing.4');
58

6-
// Apply layout to the grid
7-
.grid-layout {
8-
@apply min-h-screen h-full w-full mx-auto px-2 gap-2 grid grid-cols-4 sm:px-4 md:px-10 md:grid-cols-12 md:gap-4;
9+
// clamp layout col width
10+
--layout-col-width: clamp(
11+
60px,
12+
calc(
13+
(100vw - (2 * var(--layout-padding)) - ((var(--layout-cols) - 1) * var(--layout-gap))) /
14+
var(--layout-cols)
15+
),
16+
124px
17+
);
918

10-
// Overrides the grid padding to be full width
11-
.full-width-override {
12-
@apply w-screen -mx-2 sm:-mx-4 md:-mx-10;
19+
@screen md {
20+
--layout-cols: 6;
21+
--layout-padding: theme('spacing.6');
1322
}
1423

15-
// Overrides the left half of the grid to be full width
16-
.remove-left-padding {
17-
@apply -ml-2;
18-
width: calc(100% + 0.5rem);
24+
@screen lg {
25+
--layout-cols: 8;
26+
--layout-padding: theme('spacing.8');
27+
}
1928

20-
@screen sm {
21-
@apply -ml-4;
22-
width: calc(100% + 1rem);
23-
}
29+
@screen xl {
30+
--layout-cols: 10;
31+
--layout-padding: theme('spacing.10');
32+
}
2433

25-
@screen md {
26-
@apply -ml-10;
27-
width: calc(100% + 2.5rem);
28-
}
34+
@screen 2xl {
35+
--layout-cols: 12;
36+
--layout-padding: theme('spacing.12');
37+
}
38+
39+
@screen 3xl {
40+
--layout-cols: 14;
41+
--layout-padding: theme('spacing.14');
2942
}
3043

31-
// Overrides the right half of the grid to be full width
32-
.remove-right-padding {
33-
@apply -mr-2;
34-
width: calc(100% + 0.5rem);
44+
@screen 4xl {
45+
--layout-cols: 16;
46+
--layout-padding: theme('spacing.16');
47+
}
48+
}
49+
50+
.layout {
51+
@apply grid
52+
h-full
53+
justify-center
54+
gap-x-[var(--layout-gap)]
55+
px-[var(--layout-padding)]
56+
grid-cols-[repeat(var(--layout-cols),var(--layout-col-width))];
57+
58+
// Module container with automatic spacing behavior
59+
> .module {
60+
@apply h-fit z-0;
3561

36-
@screen sm {
37-
@apply -mr-4;
38-
width: calc(100% + 1rem);
62+
// When there are multiple modules, add consistent vertical padding
63+
&:not(:only-child) {
64+
@apply py-module;
3965
}
4066

41-
@screen md {
42-
@apply -mr-10;
43-
width: calc(100% + 2.5rem);
67+
// When it's the only module on the page, center it vertically
68+
&:only-child {
69+
@apply my-auto;
4470
}
4571
}
72+
}
4673

47-
// Overrides the left gap of the grid
48-
.remove-left-gap {
49-
@apply -ml-2;
50-
width: calc(100% + 0.5rem);
74+
.grid-overlay {
75+
@apply mx-auto bg-repeat-x z-10;
5176

52-
@screen md {
53-
width: calc(100% + 1rem);
54-
@apply -ml-4;
55-
}
56-
}
77+
width: calc(
78+
var(--layout-cols) * var(--layout-col-width) + (var(--layout-cols) - 1) * var(--layout-gap)
79+
);
5780

58-
// Overrides the right gap of the grid
59-
.remove-right-gap {
60-
@apply -mr-2 md:-mr-4;
61-
}
81+
background-image: repeating-linear-gradient(
82+
to right,
83+
rgba(255, 0, 0, 0.2) 0,
84+
rgba(255, 0, 0, 0.2) var(--layout-col-width),
85+
transparent var(--layout-col-width),
86+
transparent calc(var(--layout-col-width) + var(--layout-gap))
87+
);
88+
background-size: calc(var(--layout-col-width) + var(--layout-gap)) 100%;
89+
transition: background-image 0.3s ease-in-out;
6290
}

0 commit comments

Comments
 (0)