diff --git a/src/App.css b/src/App.css index d64914b..37af038 100644 --- a/src/App.css +++ b/src/App.css @@ -1972,11 +1972,6 @@ h1, font-size: 2.5rem; } -h2 -.h2{ - font-size: 2.1rem; -} - h1, h2, h3, @@ -2507,27 +2502,3 @@ form input { color: #fff; } -.statRateContainer { - display: flex; - width: 100%; - gap: 0.5rem; -} - -@media (max-width: 820px) { - .statRateContainer { - margin-right: 0.5rem; - margin-left: 0.5rem; - } -} - -.stats{ - width: 100%; -} - @media (max-width: 820px) { - .stats { - flex: 0 0 16.6667%; - max-width: 30.6667%; - padding: 0%; - } - } - diff --git a/src/Components/Pages/Lore.tsx b/src/Components/Pages/Lore.tsx index 4383ea7..08cfc27 100644 --- a/src/Components/Pages/Lore.tsx +++ b/src/Components/Pages/Lore.tsx @@ -3,34 +3,6 @@ import { SectHdr, TitleCard, SectCont } from '../Styled'; import { useState, useMemo } from 'react'; import 'react-responsive-carousel/lib/styles/carousel.min.css'; import { Carousel } from 'react-responsive-carousel'; -import React from 'react'; - -const CustomCarousel = styled(Carousel)` - .control-arrow { - background-color: transparent; - } - - .control-arrow:before { - color: #FFFFFF; - font-size: 50px; - - @media (max-width: 820px){ - font-size: 32px; - } - @media (max-width: 575px) { - font-size: 20px; - } - } - - .control-prev.control-arrow:before { - content: '🞀'; - } - - .control-next.control-arrow:before { - content: '🞂'; - } -`; - const CarouselCont = styled.div` display: table-cell; @@ -49,7 +21,7 @@ const Scroll = styled.div<{ isScreen800?: boolean }>` color: #ecb602; @media (max-width: 1025px) { - font-size: 39px; + font-size: 80px; } @media (max-width: 800px) { @@ -68,7 +40,7 @@ const Scroll = styled.div<{ isScreen800?: boolean }>` text-align: center; @media (max-width: 1025px) { - font-size: 0.93rem; + font-size: 1.75rem; } @media (max-width: 800px) { @@ -83,14 +55,12 @@ const Scroll = styled.div<{ isScreen800?: boolean }>` } `; - const DemoCarousel: React.FC<{ isScreen800: boolean; isScreen650: boolean }> = ({ isScreen800, isScreen650, }) => { return ( - +
= (

-
+ ); }; diff --git a/src/Components/Pages/NFTs.tsx b/src/Components/Pages/NFTs.tsx index 9b44b61..453a3c1 100644 --- a/src/Components/Pages/NFTs.tsx +++ b/src/Components/Pages/NFTs.tsx @@ -7,40 +7,24 @@ const Content = styled.div` display: flex; flex-flow: column nowrap; width: 100%; - @media (max-width: 820px) { - flex: 7 0 25%; - } `; const RowChar = styled.div` display: flex; position: relative; flex-wrap: nowrap; - margin-right: 4.5rem; - margin-left: 6.5rem; + margin-right: 1.5rem; + margin-left: 1.5rem; gap: 2rem; justify-content: center; - @media (max-width: 820px) { - margin-right: 2rem; - margin-left: 8rem; - gap: 3rem; - } - img { display: block; height: auto; max-width: 100%; width: 100%; object-fit: cover; - - @media (max-width: 820px) { - margin-right: 14rem; - margin-left: -6rem; - } } - - `; const ColumnChar = styled.div` @@ -71,12 +55,9 @@ const NFTClasses = styled.div<{ isScreen575?: boolean }>` flex-flow: row wrap; overflow: scroll; max-width: 100%; - gap: 0.37rem } `; - - const NFTClass = styled.div<{ img: string }>` position: relative; border: 5px solid #4acae8; @@ -128,9 +109,8 @@ const StatRate: React.FC<{ count: number }> = ({ count }) => { } return ( -
{statRate}
+
{statRate}
); - }; const App: React.FC<{ isScreen800: boolean; isScreen550: boolean }> = ({ @@ -153,8 +133,8 @@ const App: React.FC<{ isScreen800: boolean; isScreen550: boolean }> = ({
{/* About Heading */} - -

NFT Characters

+ +

NFT Characters

@@ -292,9 +272,9 @@ const App: React.FC<{ isScreen800: boolean; isScreen550: boolean }> = ({ key={selectedClass} style={{ flex: '0 0 16.6666666667%', + maxWidth: '17.6666666667%', padding: '0%', }} - className='stats' >

Physical Damage diff --git a/src/Components/Pages/Partners.tsx b/src/Components/Pages/Partners.tsx index 6c61bcd..3830ee0 100644 --- a/src/Components/Pages/Partners.tsx +++ b/src/Components/Pages/Partners.tsx @@ -5,11 +5,6 @@ import { SectHdr, TitleCard, SectCont } from '../Styled'; const Card = styled.div` max-width: 14.5rem; - @media (max-width: 1025px) { - max-width: 13.5rem; - padding: 1rem; - } - @media (max-width: 800px) { max-width: 9rem; padding: 1rem;