Skip to content

Commit b09e6cc

Browse files
PaebakPaebak
committed
changed small screen layout
changed layout for small screens as it relates to the grid.
1 parent 7daefd8 commit b09e6cc

2 files changed

Lines changed: 78 additions & 185 deletions

File tree

‎src/App.jsx‎

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,30 @@ export default function App() {
3939
</div>
4040
</div>
4141

42-
{/* RIGHT: two stacked tiles */}
43-
<div className="col-12 col-md-4 d-flex flex-column gap-3">
44-
{/* Top: theme toggle (smaller box) */}
45-
<div className="tile tile--right tile--cta d-flex align-items-center justify-content-center" style={{ minHeight: "8rem" }}>
46-
<ThemeToggle />
47-
</div>
42+
{/* RIGHT: THE FIX — Side-by-side on mobile, stacked on md+ */}
43+
<div className="col-12 col-md-4">
44+
<div className="d-flex flex-row flex-md-column gap-3">
45+
46+
{/* Theme toggle tile */}
47+
<div
48+
className="tile tile--right tile--cta d-flex align-items-center justify-content-center flex-fill"
49+
style={{ minHeight: "8rem" }}
50+
>
51+
<ThemeToggle />
52+
</div>
53+
54+
{/* Neofound tile */}
55+
<div
56+
className="tile tile--right tile--cta d-flex align-items-center justify-content-center flex-fill"
57+
style={{ minHeight: "8rem" }}
58+
>
59+
<div className="fw-semibold">neofound</div>
60+
</div>
4861

49-
{/* Bottom: neofound */}
50-
<div className="tile tile--right tile--cta d-flex align-items-center justify-content-center" style={{ minHeight: "8rem" }}>
51-
<div className="fw-semibold">neofound</div>
5262
</div>
5363
</div>
5464

55-
{/* BELOW: the rest of your tiles in a 2x2 grid */}
65+
{/* BELOW: 2-column grid */}
5666
<div className="col-12 col-md-6">
5767
<div id="about" className="tile tile--cta h-100">
5868
<h5 className="mb-1">About 👋</h5>
@@ -94,37 +104,37 @@ export default function App() {
94104
</a>
95105
</div>
96106

97-
<div className="col-12 col-md-6 d-flex flex-column gap-3">
98-
{/* Top half: Experience */}
99-
<div id="experience" className="tile tile--cta flex-fill d-flex flex-column">
100-
<h5 className="mb-1">Experience 🧰</h5>
101-
<div className="text-secondary large mb-2">
102-
Working in a fast paced Threat Detection and Log Management engineering position for a
103-
Fortune 100 Company. Building pipelines, automations, and dashboards to help
104-
security teams identify and mitigate risks. 🛡️
105-
</div>
106-
<div className="mt-auto">
107-
<Button href="#experience-full" size="sm">See roles</Button>
108-
</div>
109-
</div>
110-
111-
{/* Bottom half: Photography Projects */}
112-
<div id="photo-projects" className="tile tile--cta flex-fill d-flex flex-column">
113-
<h5 className="mb-1">Photography Projects 📷</h5>
114-
<div className="text-secondary small mb-2">
115-
Darkroom workflows, film tests, and dev charts.
116-
</div>
117-
<div className="d-flex flex-wrap gap-2 small">
118-
<Button href="#photo-app" size="sm" variant="outline-primary">R2 App</Button>
119-
<Button href="#dev-notes" size="sm" variant="outline-secondary">Dev Notes</Button>
120-
<Button href="#gallery" size="sm">Gallery</Button>
121-
</div>
122-
</div>
123-
</div>
124-
125-
{/* SNAKE GAME TILE */}
107+
{/* EXPERIENCE + PHOTO PROJECTS */}
108+
<div className="col-12 col-md-6 d-flex flex-column gap-3">
109+
110+
<div id="experience" className="tile tile--cta flex-fill d-flex flex-column">
111+
<h5 className="mb-1">Experience 🧰</h5>
112+
<div className="text-secondary large mb-2">
113+
Working in a fast paced Threat Detection and Log Management engineering position for a
114+
Fortune 100 Company. Building pipelines, automations, and dashboards to help
115+
security teams identify and mitigate risks. 🛡️
116+
</div>
117+
<div className="mt-auto">
118+
<Button href="#experience-full" size="sm">See roles</Button>
119+
</div>
120+
</div>
121+
122+
<div id="photo-projects" className="tile tile--cta flex-fill d-flex flex-column">
123+
<h5 className="mb-1">Photography Projects 📷</h5>
124+
<div className="text-secondary small mb-2">
125+
Darkroom workflows, film tests, and dev charts.
126+
</div>
127+
<div className="d-flex flex-wrap gap-2 small">
128+
<Button href="#photo-app" size="sm" variant="outline-primary">R2 App</Button>
129+
<Button href="#dev-notes" size="sm" variant="outline-secondary">Dev Notes</Button>
130+
<Button href="#gallery" size="sm">Gallery</Button>
131+
</div>
132+
</div>
133+
134+
</div>
135+
136+
{/* SNAKE GAME */}
126137
<div className="col-12 col-md-6">
127-
{/* SnakeCard renders its own Bootstrap Card; we wrap it in your tile container for consistent spacing */}
128138
<div className="tile tile--cta h-100 p-0">
129139
<SnakeCard />
130140
</div>
@@ -133,6 +143,7 @@ export default function App() {
133143
</div>
134144
</div>
135145
</section>
146+
136147
<footer className="text-center py-3 text-secondary small">
137148
© {new Date().getFullYear()} Matt Downs. All rights reserved.
138149
</footer>

‎src/theme.css‎

Lines changed: 27 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
--bs-secondary-color-rgb: 75, 85, 101;
3030
}
3131

32-
/* DARK */
32+
/* DARK MODE */
3333
:root[data-bs-theme="dark"] {
3434
--nf-gray-0: #0f1115;
3535
--nf-gray-1: #585a5e;
@@ -63,7 +63,7 @@ body { margin: 0; }
6363
.underline-thick { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
6464

6565
/* =========================
66-
Full-viewport Tile Dashboard
66+
Tile Dashboard
6767
========================= */
6868
.tiles-root {
6969
min-height: 100vh;
@@ -73,52 +73,31 @@ body { margin: 0; }
7373
align-items: center;
7474
}
7575

76-
/* Keep the tile grid fixed at 2 columns max and centered */
77-
.tile-grid {
78-
display: grid;
79-
gap: 12px;
80-
grid-template-columns: repeat(2, minmax(0, 1fr));
81-
grid-auto-rows: minmax(120px, auto);
82-
width: 100%;
83-
max-width: 760px;
84-
margin: 0 auto;
85-
justify-content: center;
86-
grid-auto-flow: dense;
87-
}
88-
89-
/* Responsive: single column for narrow screens */
90-
@media (max-width: 575.98px) {
91-
.tile-grid {
92-
grid-template-columns: 1fr;
93-
max-width: 560px;
94-
}
95-
}
96-
97-
/* Base tile */
9876
.tile {
99-
background: var(--bs-tertiary-bg);
100-
border: 1px solid var(--bs-card-border-color);
77+
background: #000 !important;
78+
border: 1px solid #000 !important;
10179
border-radius: 16px;
10280
box-shadow: 0 6px 18px rgba(0,0,0,.18);
103-
overflow: hidden;
10481
padding: 18px;
10582
display: flex;
10683
flex-direction: column;
10784
justify-content: center;
108-
position: relative;
109-
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
85+
transition: transform .15s ease, box-shadow .15s ease;
86+
}
87+
.tile:hover {
88+
transform: translateY(-2px);
89+
box-shadow: 0 14px 28px rgba(0,0,0,.28);
11090
}
111-
.tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.28); }
11291

11392
/* CTA arrow */
114-
.tile--cta::after { content: none !important; display: none !important; }
11593
.tile--cta::before {
11694
content: "";
11795
position: absolute;
11896
top: 12px; right: 15px;
11997
width: 34px; height: 34px;
12098
border-radius: 999px;
121-
display: grid; place-items: center;
99+
display: grid;
100+
place-items: center;
122101
background:
123102
url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7v8' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
124103
center/18px 18px no-repeat;
@@ -130,146 +109,49 @@ body { margin: 0; }
130109
box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 0 2px color-mix(in oklab, var(--nf-green) 35%, transparent);
131110
}
132111

133-
/* Spans */
134-
.tile--hero { grid-column: span 2; grid-row: span 2; }
135-
@media (max-width: 991.98px) { .tile--hero { grid-column: span 2; grid-row: span 1; } }
136-
@media (max-width: 575.98px) { .tile--hero { grid-column: span 1; grid-row: span 1; } }
137-
138-
.tile--tall { grid-row: span 2; }
139-
@media (max-width: 575.98px) { .tile--tall { grid-row: span 1; } }
112+
.tile--hero { min-height: 360px; }
140113

141-
.tile--right { align-items: center; justify-content: center; }
142-
.tile .btn { padding: .35rem .75rem; }
143-
144-
/* =========================
145-
GitHub Tile — solid + watermark
146-
========================= */
114+
/* GitHub Tile */
147115
.tile--github {
148116
position: relative;
149-
border: 1px solid var(--bs-card-border-color);
150-
border-radius: 16px;
151117
color: #fff !important;
152-
overflow: hidden;
153118
box-shadow: 0 8px 20px rgba(0,0,0,.35);
154-
transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease;
155119
}
156-
.tile--github:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
157-
158-
.tile--github::before {
159-
content:"";
160-
position:absolute; inset:0;
161-
background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff18' d='M8 0C3.58 0 0 3.58 0 8a8 8 0 005.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.01.08-2.1 0 0 .67-.21 2.2.82a7.6 7.6 0 012-.27 7.6 7.6 0 012 .27c1.53-1.03 2.2-.82 2.2-.82.44 1.09.16 1.9.08 2.1.51.56.82 1.28.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.45.55.38A8 8 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E");
162-
background-repeat:no-repeat;
163-
background-position:right -10% bottom -10%;
164-
background-size:160px;
165-
opacity:.22;
166-
z-index:0;
120+
.tile--github:hover {
121+
transform: translateY(-3px);
167122
}
168-
.tile--github .tile-content, .tile--github .tile-icon { position: relative; z-index: 1; }
169-
170-
/* =========================
171-
Tile Overrides
172-
========================= */
173-
.tile { background: #000 !important; border-color: #000 !important; color: #fff; }
174-
.tile a { color: inherit; }
175-
.tile .tile-icon { color: inherit; }
176123

177-
.tile--cta:hover {
178-
border-color: color-mix(in oklab, var(--nf-green) 60%, transparent);
179-
box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 0 2px color-mix(in oklab, var(--nf-green) 35%, transparent);
180-
}
181-
.tile--github.tile--cta:hover {
182-
box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 0 2px color-mix(in oklab, var(--nf-green) 35%, transparent);
183-
border-color: color-mix(in oklab, var(--nf-green) 60%, transparent);
184-
}
185-
186-
/* =========================
187-
Minimalist Theme Toggle
188-
========================= */
124+
/* Theme Toggle styling */
189125
.theme-toggle {
190126
display: inline-grid;
191127
place-items: center;
192128
width: 52px;
193129
height: 52px;
194130
border: none;
195131
background: transparent;
196-
color: inherit;
197132
cursor: pointer;
198-
transition: transform 0.15s ease, opacity 0.15s ease;
199133
}
200-
.theme-toggle:hover { opacity: 0.85; transform: scale(1.05); }
201-
.theme-toggle svg { width: 46px; height: 46px; display: block; }
202-
.theme-toggle span, .tile-title, .appearance-label { display: none !important; }
203-
:root[data-bs-theme="dark"] .theme-toggle { color: #a3d1fecc; }
204-
:root[data-bs-theme="light"] .theme-toggle { color: #cee994; }
205-
.tile .theme-toggle { margin: auto; display: flex; justify-content: center; align-items: center; }
206-
207-
/* =========================
208-
Responsive Width Control
209-
========================= */
210-
211-
/* From tablets (≥768px) up — cap layout width */
212-
@media (min-width: 768px) {
213-
.tiles-root .page-wrap {
214-
max-width: 1120px !important;
215-
margin-left: auto !important;
216-
margin-right: auto !important;
217-
width: 100%;
218-
}
219-
}
220-
221-
/* Prevent rows from expanding past the cap */
222-
.tiles-root .page-wrap > .row {
223-
max-width: 100%;
224-
margin-left: 0;
225-
margin-right: 0;
226-
}
227-
228-
/* Tame hero text size */
229-
.hero-title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
230-
.hero-blurb { font-size: clamp(1rem, 1.4vw, 1.125rem); }
231-
@media (max-width: 991.98px) {
232-
.tile--hero { grid-row: span 2; }
233-
}@media (min-width: 1440px) {
234-
.tiles-root { padding: 40px; }
134+
.theme-toggle:hover {
135+
opacity: 0.85;
136+
transform: scale(1.05);
235137
}
236138

237-
/* ===== Lock the layout from tablet (>=768px) and up ===== */
238-
239-
/* 1) Fix the overall canvas width and center it */
139+
/* Responsive width locks */
240140
@media (min-width: 768px) {
241141
.tiles-root .page-wrap {
242-
/* Pick the exact canvas width you liked in the screenshot */
243142
max-width: 1120px !important;
244143
margin-inline: auto !important;
245144
width: 100%;
246145
}
247-
}
248146

249-
/* 2) Normalize gaps and prevent Bootstrap rows/gutters from re-expanding */
250-
.tiles-root .page-wrap > .row {
251-
max-width: 100%;
252-
margin-left: 0;
253-
margin-right: 0;
254-
row-gap: 1.25rem; /* keep vertical rhythm consistent */
147+
.tile--hero { min-height: 360px; }
148+
.tile--right { min-height: 160px; }
149+
.tile { height: 100%; }
255150
}
256151

257-
/* 3) Lock tile heights so the hero/right stack always reads the same */
258-
@media (min-width: 768px) {
259-
.tile--hero { min-height: 360px; } /* hero stays the same height */
260-
.tile--right { min-height: 160px; } /* small stacked tiles */
261-
.tile { height: 100%; } /* equalize tile cards in rows */
152+
.hero-title {
153+
font-size: clamp(2rem, 3.6vw, 3rem);
262154
}
263-
264-
/* 4) Tame hero typography so line breaks don't change with width */
265-
.hero-title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
266-
.hero-blurb { font-size: clamp(1rem, 1.4vw, 1.125rem); }
267-
268-
/* Smooth transition between light/dark modes */
269-
html, body, .tile, .card, .navbar, .btn, .theme-toggle, .hero-title, .hero-blurb {
270-
transition:
271-
background-color 1s ease,
272-
color 1s ease,
273-
border-color 1s ease,
274-
box-shadow 1s ease;
155+
.hero-blurb {
156+
font-size: clamp(1rem, 1.4vw, 1.125rem);
275157
}

0 commit comments

Comments
 (0)