chad/chadsreactproject
1
0
Fork 0
mirror of https://github.com/DevEhChad/chadsreactproject.git synced 2025-11-08 21:41:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: chad:06cdbe12f27a523ec9d470f8b8168cd73c378c85
Branches Tags
chad:main
..
compare: chad:main
Branches Tags
chad:main

3 Commits
06cdbe12f2 ... main

Author SHA1 Message Date
Chad Doty
354db72f2b fixed youtube link, also the Logo on mobile devices 2025-07-20 10:00:47 -04:00
Chad Doty
198bb35725 youtube is broken... 2025-07-18 10:38:39 -04:00
Chad Doty
3af3ce9162 added more social items/fixed page 2025-07-18 10:32:09 -04:00
24 changed files with 1421 additions and 832 deletions
Expand all files Collapse all files

17
build/asset-manifest.json
View File

@@ -1,8 +1,8 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.8d70043b.css", "main.css": "/static/css/main.049c856a.css",
"main.js": "/static/js/main.887257a6.js", "main.js": "/static/js/main.d77081df.js",
"static/js/787.650836a3.chunk.js": "/static/js/787.650836a3.chunk.js", "static/js/453.58533d90.chunk.js": "/static/js/453.58533d90.chunk.js",
"static/media/MytwitchBanner.png": "/static/media/MytwitchBanner.7e6d238fe1f72356cd5a.png", "static/media/MytwitchBanner.png": "/static/media/MytwitchBanner.7e6d238fe1f72356cd5a.png",
"static/media/Tokyo-Ghoul-Wallpaper-For-PC.jpg": "/static/media/Tokyo-Ghoul-Wallpaper-For-PC.3a4eb3e1677a0231dbb6.jpg", "static/media/Tokyo-Ghoul-Wallpaper-For-PC.jpg": "/static/media/Tokyo-Ghoul-Wallpaper-For-PC.3a4eb3e1677a0231dbb6.jpg",
"static/media/1132066.jpg": "/static/media/1132066.830e0815c15f9fb74063.jpg", "static/media/1132066.jpg": "/static/media/1132066.830e0815c15f9fb74063.jpg",
@@ -12,16 +12,17 @@
"static/media/1132051.jpg": "/static/media/1132051.55dcf24d3e6ca150fab3.jpg", "static/media/1132051.jpg": "/static/media/1132051.55dcf24d3e6ca150fab3.jpg",
"static/media/favicon.jpg": "/static/media/favicon.f1607da6137d99db2c5c.jpg", "static/media/favicon.jpg": "/static/media/favicon.f1607da6137d99db2c5c.jpg",
"static/media/Banner.jpg": "/static/media/Banner.e1c34bcb454d45c70e97.jpg", "static/media/Banner.jpg": "/static/media/Banner.e1c34bcb454d45c70e97.jpg",
"static/media/TikTokLogo.png": "/static/media/TikTokLogo.82e81c81a106816c53ca.png",
"static/media/Twitter-XLogo.jpg": "/static/media/Twitter-XLogo.622dce5c55c5484fe412.jpg", "static/media/Twitter-XLogo.jpg": "/static/media/Twitter-XLogo.622dce5c55c5484fe412.jpg",
"static/media/youtube.png": "/static/media/youtube.eaa1e3811ce413b2444f.png", "static/media/youtube.png": "/static/media/youtube.eaa1e3811ce413b2444f.png",
"static/media/TwitchLogo.png": "/static/media/TwitchLogo.69436ff2355ef440cde9.png", "static/media/TwitchLogo.png": "/static/media/TwitchLogo.69436ff2355ef440cde9.png",
"index.html": "/index.html", "index.html": "/index.html",
"main.8d70043b.css.map": "/static/css/main.8d70043b.css.map", "main.049c856a.css.map": "/static/css/main.049c856a.css.map",
"main.887257a6.js.map": "/static/js/main.887257a6.js.map", "main.d77081df.js.map": "/static/js/main.d77081df.js.map",
"787.650836a3.chunk.js.map": "/static/js/787.650836a3.chunk.js.map" "453.58533d90.chunk.js.map": "/static/js/453.58533d90.chunk.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.8d70043b.css", "static/css/main.049c856a.css",
"static/js/main.887257a6.js" "static/js/main.d77081df.js"
] ]
} }

2
build/index.html
View File

@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="EhChadServices Official Website"/><link rel="apple-touch-icon" href="/favicon.ico"/><link rel="manifest" href="/manifest.json"/><title>Eh Chad Services</title><script defer="defer" src="/static/js/main.887257a6.js"></script><link href="/static/css/main.8d70043b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="EhChadServices Official Website"/><link rel="apple-touch-icon" href="/favicon.ico"/><link rel="manifest" href="/manifest.json"/><title>Eh Chad Services</title><script defer="defer" src="/static/js/main.d77081df.js"></script><link href="/static/css/main.049c856a.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

4
build/static/css/main.8d70043b.css → build/static/css/main.049c856a.css
View File

File diff suppressed because one or more lines are too long

1
build/static/css/main.049c856a.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
build/static/css/main.8d70043b.css.map
View File

File diff suppressed because one or more lines are too long

2
build/static/js/453.58533d90.chunk.js Normal file
View File

@@ -0,0 +1,2 @@
"use strict";(self.webpackChunkchadstestsite=self.webpackChunkchadstestsite||[]).push([[453],{453:(e,t,n)=>{n.r(t),n.d(t,{getCLS:()=>y,getFCP:()=>h,getFID:()=>C,getLCP:()=>P,getTTFB:()=>D});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver(function(e){return e.getEntries().map(t)});return n.observe({type:e,buffered:!0}),n}}catch(e){}},s=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},f=function(e){addEventListener("pageshow",function(t){t.persisted&&e(t)},!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,d=function(){return"hidden"===document.visibilityState?0:1/0},p=function(){s(function(e){var t=e.timeStamp;v=t},!0)},l=function(){return v<0&&(v=d(),p(),f(function(){setTimeout(function(){v=d(),p()},0)})),{get firstHiddenTime(){return v}}},h=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(s&&s.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],s=o?null:c("paint",a);(o||s)&&(n=m(e,r,t),o&&a(o),f(function(i){r=u("FCP"),n=m(e,r,t),requestAnimationFrame(function(){requestAnimationFrame(function(){r.value=performance.now()-i.timeStamp,n(!0)})})}))},g=!1,T=-1,y=function(e,t){g||(h(function(e){T=e.value}),g=!0);var n,i=function(t){T>-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},d=c("layout-shift",v);d&&(n=m(i,r,t),s(function(){d.takeRecords().map(v),n(!0)}),f(function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)}))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach(function(t){t(e)}),o=[]}},b=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach(function(t){return e(t,b,E)})},C=function(e,t){var n,a=l(),v=u("FID"),d=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),n(!0))},p=c("first-input",d);n=m(e,v,t),p&&s(function(){p.takeRecords().map(d),p.disconnect()},!0),p&&f(function(){var a;v=u("FID"),n=m(e,v,t),o=[],r=-1,i=null,F(addEventListener),a=d,o.push(a),S()})},k={},P=function(e,t){var n,i=l(),r=u("LCP"),a=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},o=c("largest-contentful-paint",a);if(o){n=m(e,r,t);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,n(!0))};["keydown","click"].forEach(function(e){addEventListener(e,v,{once:!0,capture:!0})}),s(v,!0),f(function(i){r=u("LCP"),n=m(e,r,t),requestAnimationFrame(function(){requestAnimationFrame(function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,n(!0)})})})}},D=function(e){var t,n=u("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",function(){return setTimeout(t,0)})}}}]);
//# sourceMappingURL=453.58533d90.chunk.js.map

1
build/static/js/453.58533d90.chunk.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
build/static/js/787.650836a3.chunk.js
View File

@@ -1,2 +0,0 @@
"use strict";(self.webpackChunkchadstestsite=self.webpackChunkchadstestsite||[]).push([[787],{787:(e,t,n)=>{n.r(t),n.d(t,{getCLS:()=>y,getFCP:()=>h,getFID:()=>C,getLCP:()=>P,getTTFB:()=>D});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},s=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},f=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,d=function(){return"hidden"===document.visibilityState?0:1/0},p=function(){s((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=d(),p(),f((function(){setTimeout((function(){v=d(),p()}),0)}))),{get firstHiddenTime(){return v}}},h=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(s&&s.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],s=o?null:c("paint",a);(o||s)&&(n=m(e,r,t),o&&a(o),f((function(i){r=u("FCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},g=!1,T=-1,y=function(e,t){g||(h((function(e){T=e.value})),g=!0);var n,i=function(t){T>-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},d=c("layout-shift",v);d&&(n=m(i,r,t),s((function(){d.takeRecords().map(v),n(!0)})),f((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(t){t(e)})),o=[]}},b=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),d=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),n(!0))},p=c("first-input",d);n=m(e,v,t),p&&s((function(){p.takeRecords().map(d),p.disconnect()}),!0),p&&f((function(){var a;v=u("FID"),n=m(e,v,t),o=[],r=-1,i=null,F(addEventListener),a=d,o.push(a),S()}))},k={},P=function(e,t){var n,i=l(),r=u("LCP"),a=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},o=c("largest-contentful-paint",a);if(o){n=m(e,r,t);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),s(v,!0),f((function(i){r=u("LCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,n(!0)}))}))}))}},D=function(e){var t,n=u("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]);
//# sourceMappingURL=787.650836a3.chunk.js.map

1
build/static/js/787.650836a3.chunk.js.map
View File

File diff suppressed because one or more lines are too long

3
build/static/js/main.887257a6.js
View File

File diff suppressed because one or more lines are too long

1
build/static/js/main.887257a6.js.map
View File

File diff suppressed because one or more lines are too long

3
build/static/js/main.d77081df.js Normal file
View File

File diff suppressed because one or more lines are too long

8
build/static/js/main.887257a6.js.LICENSE.txt → build/static/js/main.d77081df.js.LICENSE.txt
View File

@@ -44,14 +44,6 @@ object-assign
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
/**
* @mui/styled-engine v5.12.0
*
* @license MIT
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** /**
* @remix-run/router v1.6.0 * @remix-run/router v1.6.0
* *

1
build/static/js/main.d77081df.js.map Normal file
View File

File diff suppressed because one or more lines are too long

BIN
build/static/media/TikTokLogo.82e81c81a106816c53ca.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

2085
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -10,6 +10,8 @@
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",

BIN
src/assets/Kicklogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 576 B

BIN
src/assets/TikTokLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/gitealogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

4
src/components/Navbar.js
View File

@@ -14,8 +14,8 @@ function Navbar() {
return ( return (
<div className='navbar'> <div className='navbar'>
<div className='leftSide' id={openLinks ? "open" : "close"}> <div className='leftSide' id={openLinks ? "open" : "close"}>
<a href='https://localhost:3000'> <a href='/'>
<img src={Logo} href="https://localhost:3000" /> <img src={Logo} href="/" />
</a> </a>
<div className='hiddenLinks'> <div className='hiddenLinks'>
<NavLink to="/"> Home </NavLink> <NavLink to="/"> Home </NavLink>

28
src/helpers/SocialList.js
View File

@@ -1,8 +1,11 @@
import TwitchLogo from "../assets/TwitchLogo.png"; import TwitchLogo from "../assets/TwitchLogo.png";
import KickLogo from "../assets/Kicklogo.png";
import TikTokLogo from "../assets/TikTokLogo.png"
import TwitterXLogo from "../assets/Twitter-XLogo.jpg"; import TwitterXLogo from "../assets/Twitter-XLogo.jpg";
import InstagramLogo from "../assets/InstagramLogo.png"; import InstagramLogo from "../assets/InstagramLogo.png";
import YoutubeLogo from "../assets/youtube.png"; import YoutubeLogo from "../assets/youtube.png";
import GitHubLogo from "../assets/GithubLogo.png"; import GitHubLogo from "../assets/GithubLogo.png";
import GiteaLogo from "../assets/gitealogo.png";
export const SocialList = [ export const SocialList = [
{ {
@@ -12,6 +15,20 @@ export const SocialList = [
link: <a href="https://www.twitch.tv/ehchad" target="_blank">Check Out My Twitch!</a> link: <a href="https://www.twitch.tv/ehchad" target="_blank">Check Out My Twitch!</a>
}, },
{
hiddenLink: <a href="https://kick.com/ehchad" target="_blank" />,
name: "Kick",
image: KickLogo,
link: <a href="https://kick.com/ehchad" target="_blank">Check Out My Kick!</a>
},
{
hiddenLink: <a href="https://www.tiktok.com/@eh_chad" target="_blank" />,
name: "TikTok",
image: TikTokLogo,
link: <a href="https://www.tiktok.com/@eh_chad" target="_blank">Check Out My TikTok!</a>
},
{ {
hiddenLink: <a href="https://x.com/EhChad_real" target="_blank" />, hiddenLink: <a href="https://x.com/EhChad_real" target="_blank" />,
name: "Twitter-X", name: "Twitter-X",
@@ -27,10 +44,10 @@ export const SocialList = [
}, },
{ {
hiddenLink: <a href="https://youtube.com/@ehchadreal?si=NS8Fk9PWINFnBCF0" target="_blank" />, hiddenLink: <a href="https://www.youtube.com/channel/UC3H33ordT_-qpMjUvY95ILg" target="_blank" />,
name: "Youtube", name: "Youtube",
image: YoutubeLogo, image: YoutubeLogo,
link: <a href="https://youtube.com/@ehchadreal?si=NS8Fk9PWINFnBCF0" target="_blank">Check Out My YouTube!</a> link: <a href="https://www.youtube.com/channel/UC3H33ordT_-qpMjUvY95ILg" target="_blank">Check Out My YouTube!</a>
}, },
{ {
@@ -38,5 +55,12 @@ export const SocialList = [
name: "GitHub", name: "GitHub",
image: GitHubLogo, image: GitHubLogo,
link: <a href="https://github.com/DevEhChad" target="_blank">Check Out My GitHub!</a> link: <a href="https://github.com/DevEhChad" target="_blank">Check Out My GitHub!</a>
},
{
hiddenLink: <a href="https://gitea.ecsgameservers.com/chad" target="_blank" />,
name: "Gitea (Self Hosted)",
image: GiteaLogo,
link: <a href="https://gitea.ecsgameservers.com/chad" target="_blank">Check Out My Gitea!</a>
} }
]; ];

24
src/styles/Shop.css
View File

@@ -1,10 +1,12 @@
.shop { .shop {
width: 100%; width: 100%;
height: auto; min-height: 100vh; /* Ensure it takes at least full screen height */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 100px 15px; /* Add padding for navbar/footer */
box-sizing: border-box; /* Include padding in height/width calculation */
} }
.shop .shopTitle { .shop .shopTitle {
@@ -13,21 +15,25 @@
} }
.shopList { .shopList {
width: 70vw; width: 100%;
max-width: 1200px; /* Set a max-width for very large screens */
height: auto; height: auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
place-items: center; justify-items: center; /* Center items horizontally, align-items will default to stretch */
} }
/* SHOP ITEM STYLING */ /* SHOP ITEM STYLING */
.shopItem { .shopItem {
border-radius: 15px; border-radius: 15px;
width: 300px; width: 100%;
height: 350px; max-width: 300px;
/* The grid now controls the height, so we can remove the explicit height property */
margin: 20px; margin: 20px;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
display: flex; /* Use flexbox for better content alignment */
flex-direction: column; /* Stack children vertically */
} }
.shopItem:hover { .shopItem:hover {
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5);
@@ -46,8 +52,14 @@
} }
.shopItem h1, .shopItem h1,
.shopItem p { .shopItem p { /* This rule applies to both the title and price */
margin-left: 20px; margin-left: 20px;
margin-right: 20px; /* Add right margin for better text wrapping */
}
.shopItem p {
margin-top: auto; /* This pushes the price to the bottom of the card */
padding-bottom: 20px; /* Add some space below the price */
} }
@media only screen and (max-width: 1300px) { @media only screen and (max-width: 1300px) {

63
src/styles/Socials.css
View File

@@ -1,11 +1,13 @@
.social { .social {
background-color: gray; background-color: rgb(194, 187, 187);
width: 100%; width: 100%;
height: 100svh; min-height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 100px 15px; /* Added padding for navbar/footer and side margins */
box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
} }
.social .socialTitle { .social .socialTitle {
@@ -14,57 +16,82 @@
} }
.socialList { .socialList {
width: 70vw; width: 100%;
max-width: 1200px; /* Use max-width for better responsiveness */
height: auto; height: auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
place-items: center; justify-items: center; /* Center items horizontally, align-items will default to stretch */
align-items: stretch; /* Explicitly force all items in a row to be the same height */
} }
/* social ITEM STYLING */ /* social ITEM STYLING */
.socialItem { .socialItem {
background-color: lightgray; background-color: #e0e0e0; /* A softer, off-white background */
border-radius: 15px; border-radius: 15px;
width: 300px; border: 1px solid #000000; /* A light border for definition */
height: 350px; width: 100%; /* Ensure item fills its grid column */
max-width: 300px;
margin: 20px; margin: 20px;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* A more subtle, modern shadow */
display: flex; /* Use flexbox for better content alignment */
flex-direction: column; /* Stack children vertically */
position: relative; /* Establishes a positioning context for the link */
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
} }
.socialItem:hover { .socialItem:hover {
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 12px rgb(36, 36, 36); /* A slightly larger, soft shadow on hover */
transition: 0.3s ease-in;
cursor: pointer; cursor: pointer;
transform: translateY(-5px);
} }
.socialItem div { .socialItem div {
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
width: 100%; /* Pull the image over the parent's border to hide it on the top and sides */
width: calc(100% + 2px);
height: 200px; height: 200px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
margin: -1px -1px 0 -1px;
} }
/* Style the link to look like normal text */
.socialItem a { .socialItem a {
text-decoration: none; text-decoration: none;
color: black; color: inherit;
margin: 20px; }
font-size: 20px;
/* This is the magic part: stretch the link's clickable area */
.socialItem a::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
.socialItem h1, .socialItem h1,
.socialItem p { .socialItem p {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; /* Add right margin for better text wrapping */
}
.socialItem h1 {
color: #212529; /* Dark gray for headings */
}
.socialItem p {
margin-top: auto; /* This pushes the paragraph to the bottom of the card */
padding-bottom: 20px; /* Add some space for aesthetics */
color: #495057; /* A slightly lighter gray for body text */
} }
@media only screen and (max-width: 1300px) { @media only screen and (max-width: 1300px) {
.social {
height: 100%;
}
.socialList { .socialList {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }