Skip to content

Commit

Permalink
fixed mobile issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThaMacroMan
ThaMacroMan committed May 26, 2024
1 parent 375ca93 commit d68040d
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 64 deletions.
90 changes: 46 additions & 44 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -517,71 +517,73 @@ const Home: NextPage = () => {

return (
<>
<div className="header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 1rem' }}>
<div className="header">
<a
href="https://catsky.io/"
target="_blank"
rel="noopener noreferrer"
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flexShrink: 1 }}
>
<Image
src={logo.src}
alt="Logo"
width={60}
height={60}
style={{ marginRight: '8px' }}
/>
<div className="text-wrapper">
<span id="gradient-text2">InfinityMint V2.0</span>
<span className="subtext">Neolithic Nexus Era</span>
</div>
</a>

<div className="hide-on-mobile" style={{ display: 'flex', alignItems: 'center', flexShrink: 1 }}>
<a
href="https://catsky.io/"
target="_blank"
rel="noopener noreferrer"
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
>
<Image
src={logo.src}
alt="Logo"
width={60}
height={60}
style={{ marginRight: '8px' }}
/>

<div className="text-wrapper">
<span id="gradient-text2">InfinityMint V2.0</span>
<span className="subtext">Neolithic Nexus Era</span>
</div>
</a>



<a
href="https://catsky.io/"
target="_blank"
rel="noopener noreferrer"
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
>
<Image
src={pwdby.src}
alt="Logo"
width={60}
height={60}
style={{ marginRight: '2px' }}
/>
<span id="gradient-text">Powered by Catsky AI </span>

<span id="gradient-text">Powered by Catsky AI</span>
<Image
src={pwdby2.src}
alt="Logo"
width={40}
height={40}
style={{ marginLeft: '16px' }}
/>
</a>

<a
href="https://www.taptools.io/charts/token/0be55d262b29f564998ff81efe21bdc0022621c12f15af08d0f2ddb1.76ab3fb1e92b7a58ee94b712d1c1bff0e24146e8e508aa0008443e1db1f2244e"
target="_blank"
rel="noopener noreferrer"
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
>
<Image
src={catskylogo.src}
alt="Logo"
width={40}
height={40}
style={{ marginRight: '8px' }}
/>
<p style={{ color: 'green', fontSize:' .75 rem' }}>$CATSKY: ₳ {formattedPrice}</p>

</a>
</div>

<a
href="https://www.taptools.io/charts/token/0be55d262b29f564998ff81efe21bdc0022621c12f15af08d0f2ddb1.76ab3fb1e92b7a58ee94b712d1c1bff0e24146e8e508aa0008443e1db1f2244e"
target="_blank"
rel="noopener noreferrer"
className="cat-logo-wrapper"
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexGrow: 1 }}
>
<Image
src={catskylogo.src}
alt="Logo"
width={40}
height={40}
style={{ marginRight: '8px' }}
className="cat-logo"
/>
<div className="text-wrapper2">
<p style={{ color: 'green', fontSize: '0.75rem' }}>$CATSKY: ₳ {formattedPrice}</p>
</div>
</a>
</div>


<div className="wrapper">
{/* Form Section */}
<div className="form">
Expand All @@ -606,7 +608,7 @@ const Home: NextPage = () => {
: ""
}`}
>
<div id='gradient-text'>
<div id='gradient-text2'>
<p> Refuel: ₳ 1 </p> {/*{tokenPerUse} calculated in checkPrice component */}
</div>
</button>
Expand Down Expand Up @@ -796,7 +798,7 @@ const Home: NextPage = () => {
className={`button animated-gradient ${
isLoading || !connected || !prompt.trim() || userUses === '0' ? 'disabled-button' : ''
}`}
disabled={isLoading || !connected || !prompt.trim() || userUses === '0'} // Disable the button if loading, balance is insufficient, not connected, no prompt text, or no usage available
disabled={isLoading || !connected || !prompt.trim() || userUses <= '0'} // Disable the button if loading, balance is insufficient, not connected, no prompt text, or no usage available
>
<span id="gradient-text">Build Idea</span> {/* update for brand */}
</button>
Expand Down
97 changes: 77 additions & 20 deletions pages/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,13 @@

/* Rajdhani, Exo 2, Saira Condensed */

body {
html, body {
width: 100%;
margin: 0;
padding: 0;
background-color: #191970; /* dark blue #191970, light blue #0073CF, light grey #a2a7b0 */
cursor: auto;
overflow-x: hidden;
}

/*Primary Dark Blue: #1B263B
Expand All @@ -27,15 +31,46 @@ Light Gray (Secondary Text): #ECF0F1
.header {
background-color: black;
height: 7vh;
padding: .5rem;
margin-bottom: .5rem;
width: 100%;
padding: 0.5rem 1rem;
margin-bottom: 0.5rem;
text-align: center;
align-items: center;
font-family: 'Public-Pixel';
justify-content: space-evenly;
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
justify-content: space-between;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
font-size: clamp(0.5rem, 2vw, 1.25rem);
border-bottom: #b87f0d;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}

.header a {
display: flex;
align-items: center;
cursor: pointer;
flex-shrink: 1;
}
.text-wrapper {
display: flex;
flex-direction: column;
align-items: center;
white-space: nowrap; /* Prevent text wrapping */
}

.text-wrapper2 {
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
}

.cat-logo-wrapper {
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
}

.form {
Expand Down Expand Up @@ -520,45 +555,67 @@ Light Gray (Secondary Text): #ECF0F1
.wrapper {
flex-direction: column;
}

.hide-on-mobile {
display: none !important;
}
.form, .creation-container {
width: 100%;
margin: 0.5rem 0;
margin: 0;
}

.form {
min-height: auto;
height: auto;
}

.creation-container {
min-height: 850px;
height: auto;
width: auto;
min-height: 90vh; /* Adjust the height for mobile */
height: auto; /* Ensure it adapts to the content */
padding: 1rem; /* Adjust padding if necessary */
border-radius: 1rem; /* Adjust border radius for a better look on mobile */
}

.header {
font-size: clamp(0.5rem, 4vw, 2vh);
text-align: center;
flex-direction: row;
font-size: clamp(0.4rem, 3vw, 1rem);
padding: 0.25rem;
justify-content: space-between;
flex-wrap: nowrap;
}
.header a {
flex: 1;
display: flex;
align-items: center;

#gradient-text {
font-size: clamp(0.5rem, 4vw, 2vh);
}
.header img {
width: 40px;
height: 40px;
}
#gradient-text2 {
font-size: clamp(0.4rem, 3vw, 1rem);
display: flex;
align-items: center;
justify-content: center;
}

.subtext {
font-size: clamp(0.3rem, 2vw, 0.75rem);
}
.text-wrapper {
font-size: clamp(0.4rem, 3vw, 1rem); /* Scale text for mobile */
}
.button, .button2, .infobutton, .tag, .tag2, .tag3, .tag4, .tag5 {
font-size: clamp(0.5rem, 4vw, 2vh);
padding: .25rem;
}

.textarea {
font-size: clamp(0.5rem, 4vw, 2vh);
}
}

@media screen and (max-width: 450px) {
.cat-logo {
display: none !important;
}
}

#gradient-text2 {
background: linear-gradient(270deg, #8a2be2, #4b0082, #8a2be2, #4b0082);
background-size: 200% 200%;
Expand Down Expand Up @@ -599,4 +656,4 @@ Light Gray (Secondary Text): #ECF0F1
100% {
background-position: 0% 50%;
}
}
}

0 comments on commit d68040d

Please sign in to comment.