fixed techstack, header dropdown, footer rwd

anish1617 · Jul 12, 2022 · dc960eb · dc960eb
1 parent 23c6a0c
commit dc960eb
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 20 deletions.
diff --git a/src/App.css b/src/App.css
@@ -191,6 +191,14 @@ small {
  height: 100%;
 }
 
+.section-title {
+ margin: 0 0 0.6rem 0;
+ font-family: var(--ff-accent);
+ font-size: var(--fs-lg);
+ font-weight: var(--fw-bold);
+ color: var(--color-neutral-90);
+}
+
 /* Anchors or Links */
 .text-link-default {
  font-weight: var(--fw-semibold);
@@ -233,7 +241,7 @@ small {
 }
 
 .app-footer-body .section-title {
- margin: 1rem 0;
+ margin: 0 0 0.6rem 0;
  font-family: var(--ff-accent);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
@@ -315,7 +323,7 @@ small {
  color: var(--color-brand-primary-alt);
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 1176px) {
  .app-footer--home .app-footer-body {
  display: flex;
  flex-wrap: wrap;
@@ -528,3 +536,51 @@ small {
  width: var(--navbar-icon-size-sm);
  height: var(--navbar-icon-size-sm);
 }
+
+/* Tech Stack */
+.list-brand-tech-stack {
+ --techstack-cardsize: 250px;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin: 1rem auto 2rem auto;
+ max-width: 1280px;
+ box-sizing: border-box;
+ grid-gap: .4rem;
+ justify-content: center;
+}
+
+.brand-tech-stack {
+ display: flex;
+ flex-direction: column;
+ grid-gap: 0.4rem;
+ background-color: var(--color-neutral-10);
+ justify-content: center;
+ align-items: center;
+ width: var(--techstack-cardsize);
+ height: var(--techstack-cardsize);
+ padding: 1rem 2rem;
+ border-radius: 0.2rem;
+ /* border: solid 1px var(--color-neutral-30); */
+ box-sizing: border-box;
+ transition: all 0.16s ease-in-out;
+}
+
+.brand-tech-stack .icon {
+ fill: var(--color-neutral-50);
+}
+
+.brand-tech-stack:hover,
+.brand-tech-stack:focus {
+ border: solid 2px rgba(var(--color-brand-primary-rgb), 60%);
+ transform: scale(1.10);
+ box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb),0.12);
+ -webkit-box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb),0.12);
+ -moz-box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb),0.12);
+}
+
+.brand-tech-stack:hover .icon,
+.brand-tech-stack:focus .icon {
+ fill: var(--color-brand-primary);
+}
diff --git a/src/common/footer/Footer.jsx b/src/common/footer/Footer.jsx
@@ -50,7 +50,7 @@ const Footer = () => {
  An open-source project made with ❤️ by {' '}
  <a 
  href="https://tapasadhikary.com"
- className='social-link'
+ className='text-link-default'
  target='_blank'
  rel='noopener noreferrer'>Tapas Adhikary</a> and friends.
  </p>
@@ -118,7 +118,7 @@ const Footer = () => {
  </p>
  </div>
  <div className='body-secondary'>
- <h3 className='section-title mt-3'>About</h3>
+ <h3 className='section-title mt-0'>About</h3>
  <p className='mb-4'>
  ReactPlay is an opensource platform that helps you Learn, create and
  sharing ReactJS projects with the developer community.
@@ -159,7 +159,7 @@ const Footer = () => {
  </p>
  </div>
  <div className='body-tertiary'>
- <h3 className='section-title'>Show love</h3>
+ <h3 className='section-title mt-0'>Show love</h3>
  <p className='mb-2'>
  Enjoying ReactPlay? Please help us spreading the word You can share about
  ReactPlay on any of your favorite social media platforms.
@@ -182,7 +182,7 @@ const Footer = () => {
  </div>
  </div>}
  <hr className='separater' />
- <div className="flex justify-center items-center">
+ <div className="flex justify-center items-center py-2">
  <Link to='/tech-stacks'>
  ReactPlay - The MIT License (MIT) Copyright &copy;
  {new Date().getFullYear()} . Powered by{" "}

diff --git a/src/common/header/Header.jsx b/src/common/header/Header.jsx
@@ -23,7 +23,14 @@ const Header = () => {
  showBrowse: true,
  setHeaderStyle: false,
  }));
- } else if (pathName === "/ideas" || pathName === "/tech-stacks") {
+ } else if (pathName === "/ideas") {
+ setShowHideBits((prev) => ({
+ ...prev,
+ showSearch: false,
+ showBrowse: true,
+ setHeaderStyle: true,
+ }));
+ } else if (pathName === "/tech-stacks") {
  setShowHideBits((prev) => ({
  ...prev,
  showSearch: false,

diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
@@ -151,10 +151,10 @@ const HeaderNav = ({ showBrowse }) => {
  </button>
  </li>
  <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
- <Box sx={{ p: 3, pt: 1, borderRadius: 2, width: "360px" }}>
- <Typography sx={{ py: 1 }} variant='h5'>
+ <Box sx={{ p: 4, pt: 2, borderRadius: 2, width: "360px" }}>
+ <h3 className="section-title">
  Show Love
- </Typography>
+ </h3>
  <button
  onClick={() => {
  modalClose();
@@ -166,10 +166,11 @@ const HeaderNav = ({ showBrowse }) => {
  <IoShareSocial className='icon' />
  <span className='btn-label'>Share about ReactPlay</span>
  </button>
- <Typography className='mt-2 mb-10'>
+ <p className='mt-2 mb-8 leading-tight'><small>
  Enjoying ReactPlay? Please help us spreading the word. You can share about
  ReactPlay on any of your favorite social media platforms.
- </Typography>
+ </small>
+ </p>
  <a
  onClick={handleClose}
  target='_blank'
@@ -179,9 +180,9 @@ const HeaderNav = ({ showBrowse }) => {
  <BiMoney className='icon' />
  <span className='btn-label'>Sponsor ReactPlay</span>
  </a>
- <Typography className='mt-2 mb-4'>
- Your support means a lot to us. Want to be our Sponsor and support us?
- </Typography>
+ <p className='mt-2 mb-4 leading-tight'>
+ <small>Your support means a lot to us. Want to be our Sponsor and support us?</small>
+ </p>
  </Box>
  </Menu>
  </ul>

diff --git a/src/common/home/home.css b/src/common/home/home.css
@@ -750,6 +750,7 @@
 
 .home-anchor.home-anchor-sm {
  font-size: calc(var(--fs-rg)*1.2);
+ line-height: 1.2;
 }
 
 .home-anchor.home-anchor-sm:before {

diff --git a/src/common/techstack/techstack.jsx b/src/common/techstack/techstack.jsx
@@ -2,18 +2,20 @@ import { TechStackInfo } from "./TechStackInfo";
 
 const TechStack = () => {
  return (
- <div className='flex justify-center items-center'>
- <div className='md:w-[800px] 2xl:w-[1000px] w-full flex flex-wrap shadow-md m-8'>
+ <div className='app-body'>
+ <h2 className="section-title text-center pt-8 mt-48">ReactPlay is proudly powered by</h2>
+ <div className='list-brand-tech-stack'>
+ {/* <div className='md:w-[800px] 2xl:w-[1000px] w-full flex flex-wrap m-8'> */}
  {TechStackInfo.map((Item, idx) => {
  if (Item.type === "icon") {
  return (
  <a
  key={idx}
  target='_blank'
  href={Item.link}
- className='hover:bg-blue-100 duration-100 cursor-pointer md:w-[200px] 2xl:w-[250px] 2xl:h-[250px] sm:w-1/2 w-full border flex-wrap flex justify-center items-center flex-col p-8'
+ className='brand-tech-stack'
  >
- <Item.comp size='80' />
+ <Item.comp size='80' className='icon' />
  <p>{Item.text}</p>
  </a>
  );
@@ -23,7 +25,7 @@ const TechStack = () => {
  key={idx}
  target='_blank'
  href={Item.link}
- className='hover:bg-blue-100 duration-100 cursor-pointer md:w-[200px] 2xl:w-[250px] 2xl:h-[250px] sm:w-1/2 w-full border flex-wrap flex justify-center items-center flex-col p-8'
+ className='brand-tech-stack'
  >
  <img src={Item.comp} alt={Item.comp} />
  <p className='text-center'>{Item.text}</p>