From d7575b129a72432a38e774da429b69959ae0604c Mon Sep 17 00:00:00 2001 From: Thomas Date: Sat, 17 May 2025 22:22:31 +1000 Subject: [PATCH 1/8] Added a games nav page --- src/App.jsx | 2 + .../GamesHeroSection/GamesHeroSection.jsx | 19 ++++ .../GamesHeroSection/GamesHeroSection.less | 15 +++ src/components/NavBar/NavBar.jsx | 10 ++ src/routes/GamesPage/GamesPage.jsx | 46 ++++++++ src/routes/GamesPage/GamesPage.less | 106 ++++++++++++++++++ 6 files changed, 198 insertions(+) create mode 100644 src/components/GamesHeroSection/GamesHeroSection.jsx create mode 100644 src/components/GamesHeroSection/GamesHeroSection.less create mode 100644 src/routes/GamesPage/GamesPage.jsx create mode 100644 src/routes/GamesPage/GamesPage.less diff --git a/src/App.jsx b/src/App.jsx index 8e13a951..f1ce7922 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -15,6 +15,7 @@ import JobListingFormPage from 'routes/JobListingFormPage/JobListingFormPage'; import Mathsprint from 'routes/MathsprintPage/MathsprintPage'; import ArticlesPage from 'routes/ArticlesPage'; import ContactPage from 'routes/ContactPage/ContactPage'; +import GamesPage from 'routes/GamesPage/GamesPage'; const App = () => { return ( @@ -30,6 +31,7 @@ const App = () => { } /> } /> } /> + } /> {/* Private Pages: only accessibly by Google authenticated users */} }> } /> diff --git a/src/components/GamesHeroSection/GamesHeroSection.jsx b/src/components/GamesHeroSection/GamesHeroSection.jsx new file mode 100644 index 00000000..58b80a2f --- /dev/null +++ b/src/components/GamesHeroSection/GamesHeroSection.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import './GamesHeroSection.less'; + +const GamesHeroSection = ({ className = '' }) => { + return ( +
+
+

+ Level Up Your Quant Game with Interactive Challenges +

+

+ Test your speed and strategy in puzzles designed to sharpen your quantitative thinking—dive in, compete, and learn as you play! +

+
+
+ ); +}; + +export default GamesHeroSection; diff --git a/src/components/GamesHeroSection/GamesHeroSection.less b/src/components/GamesHeroSection/GamesHeroSection.less new file mode 100644 index 00000000..bbe213ad --- /dev/null +++ b/src/components/GamesHeroSection/GamesHeroSection.less @@ -0,0 +1,15 @@ +@import '../../styles/constants.less'; + +#games-hero-section { + background-image: url("../../assets/quantsoc-graphics/resource-hero.svg") !important; + + @media screen and (max-width: @tablet) { + padding: 0 15% !important; + background: unset !important; + } + + @media screen and (max-width: @mobile) { + padding: 0 3% !important; + + } +} diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index ab6d138f..9a3d21c0 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -68,6 +68,16 @@ const NavBar = () => { > Resources + + + Games + + + {/* full-width hero */} + + + {/* centred title */} +
+

Games

+
+ + {/* full-width card grid */} +
+ {games.map(({ title, description, path, comingSoon }) => ( +
+
+

{title}

+

{description}

+ {comingSoon ? ( + + ) : ( + + Play Now + + )} +
+
+ ))} +
+ + ); +} diff --git a/src/routes/GamesPage/GamesPage.less b/src/routes/GamesPage/GamesPage.less new file mode 100644 index 00000000..da2912c3 --- /dev/null +++ b/src/routes/GamesPage/GamesPage.less @@ -0,0 +1,106 @@ +.games-page { + padding: 3rem 1rem; + max-width: 1200px; + margin: 0 auto; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%); + + .games-title { + font-size: 3rem; + font-weight: 800; + text-align: center; + margin: 0; /* reset margin since we're only using top-padding */ + padding-bottom: 2rem; + background: linear-gradient(90deg, #2563eb, #1e3a8a); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + } + } + + /* --- break the grid out to full viewport --- */ + .game-grid { + /* let it span the full viewport */ + width: 100vw; + max-width: none; + /* horizontally centre a full-width block */ + margin-left: calc(50% - 50vw); + margin-top: 0; /* cards sit directly under title padding */ + + /* your existing flex layout */ + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 2rem; + + /* optional padding inside the full-width */ + padding: 1rem; + } + + .game-card { + position: relative; + flex: 0 1 280px; + max-width: 280px; + background: #ffffff; + border-radius: 1rem; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); + overflow: hidden; + transition: transform 0.3s, box-shadow 0.3s; + + &:hover { + transform: translateY(-6px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); + } + + &::before { + content: ''; + position: absolute; + top: 0; left: 0; + height: 6px; width: 100%; + background: #2563eb; + transition: background 0.3s; + } + &:hover::before { + background: #1e40af; + } + + .game-card-content { + padding: 2rem; + + h2 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #1e40af; + } + + .game-card-desc { + margin-bottom: 1.5rem; + color: #4b5563; + line-height: 1.4; + } + + .game-card-btn { + display: inline-block; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 0.5rem; + background: linear-gradient(90deg, #2563eb, #1e40af); + color: #fff; + font-size: 1rem; + font-weight: 600; + text-decoration: none; + cursor: pointer; + transition: background 0.3s, transform 0.2s; + + &:hover:not(:disabled) { + background: linear-gradient(90deg, #1e40af, #2563eb); + transform: translateY(-2px); + } + + &:disabled { + background-color: #cbd5e1; + cursor: not-allowed; + } + } + } + } + \ No newline at end of file From 21d41e8be443d6697b8c48bf5d82b6a5f59311d4 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sat, 17 May 2025 22:23:00 +1000 Subject: [PATCH 2/8] linted files --- src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index f1ce7922..2b54a218 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -31,7 +31,7 @@ const App = () => { } /> } /> } /> - } /> + } /> {/* Private Pages: only accessibly by Google authenticated users */} }> } /> From d0f7fa54d0b2313f4050a570a40950096d85b02f Mon Sep 17 00:00:00 2001 From: Thomas Date: Sat, 17 May 2025 22:25:35 +1000 Subject: [PATCH 3/8] add the unprefixed property before the WebKit one for widest support for background-clip --- src/routes/GamesPage/GamesPage.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/routes/GamesPage/GamesPage.less b/src/routes/GamesPage/GamesPage.less index da2912c3..373c9749 100644 --- a/src/routes/GamesPage/GamesPage.less +++ b/src/routes/GamesPage/GamesPage.less @@ -13,7 +13,9 @@ padding-bottom: 2rem; background: linear-gradient(90deg, #2563eb, #1e3a8a); -webkit-text-fill-color: transparent; + background-clip: text; -webkit-background-clip: text; + } } From d181b59b5bda08fbb9dd84e2b64371d1dc49d036 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sat, 17 May 2025 22:26:49 +1000 Subject: [PATCH 4/8] removed colour behind games title --- src/routes/GamesPage/GamesPage.less | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/routes/GamesPage/GamesPage.less b/src/routes/GamesPage/GamesPage.less index 373c9749..1986d4a8 100644 --- a/src/routes/GamesPage/GamesPage.less +++ b/src/routes/GamesPage/GamesPage.less @@ -3,7 +3,6 @@ max-width: 1200px; margin: 0 auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%); .games-title { font-size: 3rem; @@ -13,8 +12,8 @@ padding-bottom: 2rem; background: linear-gradient(90deg, #2563eb, #1e3a8a); -webkit-text-fill-color: transparent; - background-clip: text; - -webkit-background-clip: text; + background-clip: text; + -webkit-background-clip: text; } } From 0b5f293cadeca1016bdb5167b5b09a27df48cf13 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sat, 17 May 2025 22:31:02 +1000 Subject: [PATCH 5/8] Changed the cards for the games page --- src/routes/GamesPage/GamesPage.less | 144 +++++++++++----------------- 1 file changed, 58 insertions(+), 86 deletions(-) diff --git a/src/routes/GamesPage/GamesPage.less b/src/routes/GamesPage/GamesPage.less index 1986d4a8..8bf0d779 100644 --- a/src/routes/GamesPage/GamesPage.less +++ b/src/routes/GamesPage/GamesPage.less @@ -1,107 +1,79 @@ +// src/routes/GamesPage/GamesPage.less + +@primary-color: #0070f3; +@card-bg: #ffffff; +@card-shadow: rgba(0, 0, 0, 0.1); +@radius: 8px; + .games-page { - padding: 3rem 1rem; - max-width: 1200px; - margin: 0 auto; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - - .games-title { - font-size: 3rem; - font-weight: 800; - text-align: center; - margin: 0; /* reset margin since we're only using top-padding */ - padding-bottom: 2rem; - background: linear-gradient(90deg, #2563eb, #1e3a8a); - -webkit-text-fill-color: transparent; - background-clip: text; - -webkit-background-clip: text; + text-align: center; + margin: 2rem 0; - } + .games-title { + font-size: 2.5rem; + font-weight: 600; + color: @primary-color; } - - /* --- break the grid out to full viewport --- */ - .game-grid { - /* let it span the full viewport */ - width: 100vw; - max-width: none; - /* horizontally centre a full-width block */ - margin-left: calc(50% - 50vw); - margin-top: 0; /* cards sit directly under title padding */ - - /* your existing flex layout */ - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 2rem; - - /* optional padding inside the full-width */ - padding: 1rem; - } - +} + +.game-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 1.5rem; + padding: 0 1rem; + margin-bottom: 3rem; + .game-card { - position: relative; - flex: 0 1 280px; - max-width: 280px; - background: #ffffff; - border-radius: 1rem; - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); + background: @card-bg; + border-radius: @radius; + box-shadow: 0 4px 12px @card-shadow; overflow: hidden; - transition: transform 0.3s, box-shadow 0.3s; - + transition: transform 0.2s, box-shadow 0.2s; + &:hover { - transform: translateY(-6px); - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); - } - - &::before { - content: ''; - position: absolute; - top: 0; left: 0; - height: 6px; width: 100%; - background: #2563eb; - transition: background 0.3s; + transform: translateY(-4px); + box-shadow: 0 8px 24px @card-shadow; } - &:hover::before { - background: #1e40af; - } - + .game-card-content { - padding: 2rem; - - h2 { + padding: 1.5rem; + display: flex; + flex-direction: column; + height: 100%; + + .game-card-title { font-size: 1.5rem; - margin-bottom: 1rem; - color: #1e40af; + margin-bottom: 0.5rem; } - + .game-card-desc { - margin-bottom: 1.5rem; - color: #4b5563; - line-height: 1.4; + flex-grow: 1; + color: #555; } - + .game-card-btn { - display: inline-block; - padding: 0.75rem 1.5rem; - border: none; - border-radius: 0.5rem; - background: linear-gradient(90deg, #2563eb, #1e40af); + margin-top: 1rem; + align-self: flex-start; + background-color: @primary-color; color: #fff; - font-size: 1rem; - font-weight: 600; + padding: 0.5rem 1rem; + border: none; + border-radius: @radius; text-decoration: none; + font-weight: 500; cursor: pointer; - transition: background 0.3s, transform 0.2s; - - &:hover:not(:disabled) { - background: linear-gradient(90deg, #1e40af, #2563eb); - transform: translateY(-2px); - } - - &:disabled { - background-color: #cbd5e1; + transition: background-color 0.2s; + + &:disabled, + &.disabled { + background: #ddd; cursor: not-allowed; } + + &:not(:disabled):hover { + background-color: darken(@primary-color, 10%); + } } } } - \ No newline at end of file +} From 8efbbed15726d98dda4c3430efc5309059cc8b17 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 18 May 2025 03:06:07 +1000 Subject: [PATCH 6/8] changed games to be in the resources tab instead --- src/App.jsx | 2 - .../GamesHeroSection/GamesHeroSection.jsx | 19 ----- .../GamesHeroSection/GamesHeroSection.less | 15 ---- src/components/GamesSection/GameSection.jsx | 80 +++++++++++++++---- src/components/GamesSection/index.less | 65 ++++++++++----- src/components/NavBar/NavBar.jsx | 9 --- src/routes/GamesPage/GamesPage.jsx | 46 ----------- src/routes/GamesPage/GamesPage.less | 79 ------------------ 8 files changed, 106 insertions(+), 209 deletions(-) delete mode 100644 src/components/GamesHeroSection/GamesHeroSection.jsx delete mode 100644 src/components/GamesHeroSection/GamesHeroSection.less delete mode 100644 src/routes/GamesPage/GamesPage.jsx delete mode 100644 src/routes/GamesPage/GamesPage.less diff --git a/src/App.jsx b/src/App.jsx index 2b54a218..8e13a951 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -15,7 +15,6 @@ import JobListingFormPage from 'routes/JobListingFormPage/JobListingFormPage'; import Mathsprint from 'routes/MathsprintPage/MathsprintPage'; import ArticlesPage from 'routes/ArticlesPage'; import ContactPage from 'routes/ContactPage/ContactPage'; -import GamesPage from 'routes/GamesPage/GamesPage'; const App = () => { return ( @@ -31,7 +30,6 @@ const App = () => { } /> } /> } /> - } /> {/* Private Pages: only accessibly by Google authenticated users */} }> } /> diff --git a/src/components/GamesHeroSection/GamesHeroSection.jsx b/src/components/GamesHeroSection/GamesHeroSection.jsx deleted file mode 100644 index 58b80a2f..00000000 --- a/src/components/GamesHeroSection/GamesHeroSection.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import './GamesHeroSection.less'; - -const GamesHeroSection = ({ className = '' }) => { - return ( -
-
-

- Level Up Your Quant Game with Interactive Challenges -

-

- Test your speed and strategy in puzzles designed to sharpen your quantitative thinking—dive in, compete, and learn as you play! -

-
-
- ); -}; - -export default GamesHeroSection; diff --git a/src/components/GamesHeroSection/GamesHeroSection.less b/src/components/GamesHeroSection/GamesHeroSection.less deleted file mode 100644 index bbe213ad..00000000 --- a/src/components/GamesHeroSection/GamesHeroSection.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../styles/constants.less'; - -#games-hero-section { - background-image: url("../../assets/quantsoc-graphics/resource-hero.svg") !important; - - @media screen and (max-width: @tablet) { - padding: 0 15% !important; - background: unset !important; - } - - @media screen and (max-width: @mobile) { - padding: 0 3% !important; - - } -} diff --git a/src/components/GamesSection/GameSection.jsx b/src/components/GamesSection/GameSection.jsx index 038a09f7..7b585d3a 100644 --- a/src/components/GamesSection/GameSection.jsx +++ b/src/components/GamesSection/GameSection.jsx @@ -1,22 +1,68 @@ +// src/components/GamesSection/GamesSection.jsx import './index.less'; import AnimatedSquaresBackground from 'components/AnimatedSquaresBackground/AnimatedSquaresBackground'; -const GamesSection = ({ className = '' }) => { - return ( -
-

Resources

- -
- ); -}; +const games = [ + { + title: 'Mock Trading Game', + description: '', + path: 'https://mtg.quantsoc.org', + size: 'large', + className: 'mock-trading-card', + comingSoon: false, + }, + { + title: 'MathSprint', + description: 'A fast paced calculation game', + path: '/mathsprint', + size: 'small', + className: 'mathsprint-card', + comingSoon: false, + background: , + }, + { + title: 'Sum Game', + description: 'Coming soon…', + path: '#', + size: 'small', + className: 'sum-game-card', + comingSoon: true, + }, + { + title: 'Sequence Game', + description: 'Coming soon…', + path: '#', + size: 'small', + className: 'sequence-game-card', + comingSoon: true, + }, + { + title: 'Pendominoes Game', + description: 'Coming soon…', + path: '#', + size: 'small', + className: 'pendominoes-game-card', + comingSoon: true, + }, +]; + +const GamesSection = ({ className = '' }) => ( +
+

Resources

+
+ {games.map(({ title, description, path, size, className: cardClass, comingSoon, background }) => ( + +
{title}
+ {description &&
{description}
} + {background} + + ))} +
+
+); export default GamesSection; diff --git a/src/components/GamesSection/index.less b/src/components/GamesSection/index.less index 5fe5b299..0b661f56 100644 --- a/src/components/GamesSection/index.less +++ b/src/components/GamesSection/index.less @@ -4,7 +4,6 @@ display: flex; flex-direction: row; flex-wrap: wrap; - } .games-section__header { @@ -19,23 +18,22 @@ .game-box { display: flex; + flex-direction: column; justify-content: center; align-items: center; color: white; margin: 10px; border-radius: 15px; - height: 150px; flex: 1 1 100%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); - margin-top: 5px; - height: 250px; text-align: center; cursor: pointer; text-decoration: none; font-size: 30px; - transition: font-size 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease-out; /* Add this line for transitions */ + transition: font-size 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease-out; overflow: hidden; - position: relative; /* Add this line to position .area relative to .game-box */ + position: relative; + height: 250px; &:hover { box-shadow: inset 0 0 20px @quantsoc-primary, 0 0 20px @quantsoc-primary; @@ -63,36 +61,29 @@ } @media (max-width: 768px) { - .large, .small { + .large, + .small { flex: 1 1 100%; width: 100%; padding: 20%; } - .games-container, .row { + .games-container, + .row { flex-direction: column; } } - .mock-trading-card { - // background: linear-gradient(130deg, @quantsoc-accent,@quantsoc-secondary); - background: url('../../assets/quantsoc-graphics/new-mock-trading-optimised.svg'); - - background: - url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmxoOWZ1ejlnYmYwYnpsN3Z3ajdhNTNoNnl2N3B4MXpjNmxzdDQwdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/d1Gvd3wrtBcaMkhO/giphy.gif'), - url("https://i.gifer.com/KM74.gif"), - linear-gradient(145deg, @mid-purple ,@lightest-purple); - - + background: url('../../assets/quantsoc-graphics/new-mock-trading-optimised.svg'), + url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmxoOWZ1ejlnYmYwYnpsN3Z3ajdhNTNoNnl2N3B4MXpjNmxzdDQwdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/d1Gvd3wrtBcaMkhO/giphy.gif'), + url("https://i.gifer.com/KM74.gif"), + linear-gradient(145deg, @mid-purple, @lightest-purple); background-blend-mode: overlay; - background-size: cover; background-position: center; font-family: 'Consolas', 'Courier New', Courier, monospace; text-shadow: 2px 2px 12px @dark-purple; - - } .mathsprint-card { @@ -102,4 +93,34 @@ font-family: 'Consolas', 'Courier New', Courier, monospace; color: white; text-shadow: 2px 2px 12px @dark-purple; -} \ No newline at end of file +} + +/* NEW GAME CARDS */ +.sum-game-card { + background-color: #FF9800; /* Orange for Sum Game */ +} + +.sequence-game-card { + background-color: #9C27B0; /* Purple for Sequence Game */ +} + +.pendominoes-game-card { + background-color: #673AB7; /* Deep purple for Pendominoes Game */ +} + +/* Title & description inside each card */ +.game-box__title { + font-size: 1.5rem; + font-weight: bold; +} + +.game-box__desc { + font-size: 1rem; + margin-top: 0.5rem; +} + +/* Coming-soon styling */ +.game-box.coming-soon { + opacity: 0.6; + cursor: not-allowed; +} diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index 9a3d21c0..0ca5caba 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -69,15 +69,6 @@ const NavBar = () => { Resources - - Games - - - {/* full-width hero */} - - - {/* centred title */} -
-

Games

-
- - {/* full-width card grid */} -
- {games.map(({ title, description, path, comingSoon }) => ( -
-
-

{title}

-

{description}

- {comingSoon ? ( - - ) : ( - - Play Now - - )} -
-
- ))} -
- - ); -} diff --git a/src/routes/GamesPage/GamesPage.less b/src/routes/GamesPage/GamesPage.less deleted file mode 100644 index 8bf0d779..00000000 --- a/src/routes/GamesPage/GamesPage.less +++ /dev/null @@ -1,79 +0,0 @@ -// src/routes/GamesPage/GamesPage.less - -@primary-color: #0070f3; -@card-bg: #ffffff; -@card-shadow: rgba(0, 0, 0, 0.1); -@radius: 8px; - -.games-page { - text-align: center; - margin: 2rem 0; - - .games-title { - font-size: 2.5rem; - font-weight: 600; - color: @primary-color; - } -} - -.game-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 1.5rem; - padding: 0 1rem; - margin-bottom: 3rem; - - .game-card { - background: @card-bg; - border-radius: @radius; - box-shadow: 0 4px 12px @card-shadow; - overflow: hidden; - transition: transform 0.2s, box-shadow 0.2s; - - &:hover { - transform: translateY(-4px); - box-shadow: 0 8px 24px @card-shadow; - } - - .game-card-content { - padding: 1.5rem; - display: flex; - flex-direction: column; - height: 100%; - - .game-card-title { - font-size: 1.5rem; - margin-bottom: 0.5rem; - } - - .game-card-desc { - flex-grow: 1; - color: #555; - } - - .game-card-btn { - margin-top: 1rem; - align-self: flex-start; - background-color: @primary-color; - color: #fff; - padding: 0.5rem 1rem; - border: none; - border-radius: @radius; - text-decoration: none; - font-weight: 500; - cursor: pointer; - transition: background-color 0.2s; - - &:disabled, - &.disabled { - background: #ddd; - cursor: not-allowed; - } - - &:not(:disabled):hover { - background-color: darken(@primary-color, 10%); - } - } - } - } -} From 57ab16a4040e221237b4d88e896f6031bc2c937a Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 18 May 2025 03:12:38 +1000 Subject: [PATCH 7/8] linted files --- src/components/GamesSection/GameSection.jsx | 1 - src/components/GamesSection/index.less | 18 ++++++++---------- src/components/NavBar/NavBar.jsx | 1 - 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/GamesSection/GameSection.jsx b/src/components/GamesSection/GameSection.jsx index 7b585d3a..42356c30 100644 --- a/src/components/GamesSection/GameSection.jsx +++ b/src/components/GamesSection/GameSection.jsx @@ -1,4 +1,3 @@ -// src/components/GamesSection/GamesSection.jsx import './index.less'; import AnimatedSquaresBackground from 'components/AnimatedSquaresBackground/AnimatedSquaresBackground'; diff --git a/src/components/GamesSection/index.less b/src/components/GamesSection/index.less index 0b661f56..3a37442f 100644 --- a/src/components/GamesSection/index.less +++ b/src/components/GamesSection/index.less @@ -30,10 +30,10 @@ cursor: pointer; text-decoration: none; font-size: 30px; - transition: font-size 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease-out; + transition: font-size 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease-out; /* Add this line for transitions */ overflow: hidden; - position: relative; - height: 250px; + position: relative; /* Add this line for transitions */ + height: 200px; &:hover { box-shadow: inset 0 0 20px @quantsoc-primary, 0 0 20px @quantsoc-primary; @@ -61,15 +61,13 @@ } @media (max-width: 768px) { - .large, - .small { + .large, .small { flex: 1 1 100%; width: 100%; padding: 20%; } - .games-container, - .row { + .games-container, .row { flex-direction: column; } } @@ -97,15 +95,15 @@ /* NEW GAME CARDS */ .sum-game-card { - background-color: #FF9800; /* Orange for Sum Game */ + background-color: #FF9800; } .sequence-game-card { - background-color: #9C27B0; /* Purple for Sequence Game */ + background-color: #9C27B0; } .pendominoes-game-card { - background-color: #673AB7; /* Deep purple for Pendominoes Game */ + background-color: #673AB7; } /* Title & description inside each card */ diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index 0ca5caba..ab6d138f 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -68,7 +68,6 @@ const NavBar = () => { > Resources - Date: Sun, 18 May 2025 03:51:22 +1000 Subject: [PATCH 8/8] changed spacing to be more even in the cards --- src/components/GamesSection/index.less | 91 +++++++++++++++----------- 1 file changed, 52 insertions(+), 39 deletions(-) diff --git a/src/components/GamesSection/index.less b/src/components/GamesSection/index.less index 3a37442f..e82eccbe 100644 --- a/src/components/GamesSection/index.less +++ b/src/components/GamesSection/index.less @@ -1,82 +1,81 @@ @import '../../styles/constants.less'; .games-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: grid; + /* 3 “small” units per row */ + grid-template-columns: repeat(3, 1fr); + /* gap between columns (and rows) */ + gap: 20px; } .games-section__header { margin-bottom: 1rem; } +/* no longer needed, but you can keep if used elsewhere */ .row { - display: flex; - width: 100%; - flex-wrap: wrap; } +/* base card styles */ .game-box { display: flex; flex-direction: column; justify-content: center; align-items: center; + + /* spacing is handled by the grid’s `gap` */ + margin: 0; + color: white; - margin: 10px; border-radius: 15px; - flex: 1 1 100%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); text-align: center; cursor: pointer; text-decoration: none; font-size: 30px; - transition: font-size 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease-out; /* Add this line for transitions */ + transition: + font-size 0.3s ease, + box-shadow 0.3s ease, + transform 0.3s ease-out; overflow: hidden; - position: relative; /* Add this line for transitions */ + position: relative; height: 200px; &:hover { - box-shadow: inset 0 0 20px @quantsoc-primary, 0 0 20px @quantsoc-primary; + box-shadow: + inset 0 0 20px @quantsoc-primary, + 0 0 20px @quantsoc-primary; font-size: 40px; transform: scale(1.03); } } -.large { - flex: 3 1 50%; - background-color: #4CAF50; +/* only controls grid-span now, no colours */ +.game-box.small { + grid-column: span 1; } -.small { - flex: 1 1 25%; - background-color: #2196F3; -} - -.row:nth-child(even) .large { - width: 30%; -} - -.row:nth-child(even) .small { - width: 60%; +.game-box.large { + grid-column: span 2; } @media (max-width: 768px) { - .large, .small { - flex: 1 1 100%; + .games-container { + grid-template-columns: 1fr; + } + .game-box { width: 100%; padding: 20%; } - - .games-container, .row { - flex-direction: column; - } } +/* Card-specific colours/backgrounds */ .mock-trading-card { - background: url('../../assets/quantsoc-graphics/new-mock-trading-optimised.svg'), - url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmxoOWZ1ejlnYmYwYnpsN3Z3ajdhNTNoNnl2N3B4MXpjNmxzdDQwdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/d1Gvd3wrtBcaMkhO/giphy.gif'), - url("https://i.gifer.com/KM74.gif"), - linear-gradient(145deg, @mid-purple, @lightest-purple); + background: + url('../../assets/quantsoc-graphics/new-mock-trading-optimised.svg'), + url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmxoOWZ1ejlnYmYwYnpsN3Z3ajdhNTNoNnl2N3B4MXpjNmxzdDQwdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/d1Gvd3wrtBcaMkhO/giphy.gif'), + url("https://i.gifer.com/KM74.gif"), + linear-gradient(145deg, @mid-purple, @lightest-purple); background-blend-mode: overlay; background-size: cover; background-position: center; @@ -93,17 +92,31 @@ text-shadow: 2px 2px 12px @dark-purple; } -/* NEW GAME CARDS */ .sum-game-card { - background-color: #FF9800; + background-color: #FF9800; + background-size: cover; + font-weight: 400; + font-family: 'Consolas', 'Courier New', Courier, monospace; + color: white; + text-shadow: 2px 2px 12px @dark-purple; } .sequence-game-card { - background-color: #9C27B0; + background-color: #9C27B0; + background-size: cover; + font-weight: 400; + font-family: 'Consolas', 'Courier New', Courier, monospace; + color: white; + text-shadow: 2px 2px 12px @dark-purple; } .pendominoes-game-card { - background-color: #673AB7; + background-color: #673AB7; + background-size: cover; + font-weight: 400; + font-family: 'Consolas', 'Courier New', Courier, monospace; + color: white; + text-shadow: 2px 2px 12px @dark-purple; } /* Title & description inside each card */