Skip to content

Commit eaaf76b

Browse files
ChangoManChangoMan
authored
adjust mobile styles (#6)
1 parent 6179f45 commit eaaf76b

File tree

6 files changed

+57
-74
lines changed

6 files changed

+57
-74
lines changed

‎packages/nextjs/app/page.tsx

+45-45
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
import { useEffect, useState } from "react";
44
import Image from "next/image";
55
import { NextPage } from "next";
6+
import liveTag from "~~/public/live-tag.svg";
7+
import map from "~~/public/map.png";
68

79
interface ContinentData {
810
"North America": number;
@@ -31,102 +33,100 @@ const Home: NextPage = () => {
3133
}, []);
3234

3335
return (
34-
<>
36+
<div className="container mx-auto">
3537
{/* First row */}
3638
<div className="flex flex-row flex-wrap lg:flex-nowrap lg:border-x-[1px] lg:border-y-[1px] border-black">
3739
{/* Introduction section */}
38-
<section className="bg-[#df57c4] p-10 lg:w-[45vw] border-x-[1px] border-y-[1px] border-black lg:border-none">
40+
<section className="bg-[#df57c4] p-6 lg:p-10 lg:w-[45vw] border-x-[1px] border-y-[1px] border-black lg:border-none overflow-auto">
3941
<div className="flex flex-col">
40-
<p>
42+
<p className="mt-0">
4143
A one line command to deploy and monitor an Ethereum Node, funded and maintained by BuidlGuidl members.
4244
</p>
43-
<p>Mac/linux</p>
44-
<code className="bg-black p-6 text-white text-base">{`
45-
/bin/bash -c "$(curl -fsSL https://client.buidlguidl.com/runBuidlGuidlClient.sh)"
46-
`}</code>
45+
<p className="mt-0">Mac/linux</p>
46+
<div className="bg-black p-2 lg:p-4 text-white text-sm overflow-auto">
47+
<p className="m-2">
48+
/bin/bash -c &quot;$(curl -fsSL https://client.buidlguidl.com/runBuidlGuidlClient.sh)&quot;
49+
</p>
50+
</div>
4751
<p> or run the client from the repo:</p>
48-
<code className="bg-black p-6 text-white text-base">{`
49-
git clone https://github.com/BuidlGuidl/buidlguidl-client.git
50-
cd buidlguidl-client
51-
yarn install
52-
node index.js
53-
`}</code>
52+
<div className="bg-black p-2 lg:p-4 text-white text-sm overflow-auto">
53+
<p className="m-2 whitespace-nowrap">git clone https://github.com/BuidlGuidl/buidlguidl-client.git</p>
54+
<p className="m-2">cd buidlguidl-client</p>
55+
<p className="m-2">yarn install</p>
56+
<p className="m-2">node index.js</p>
57+
</div>
5458
</div>
5559
</section>
5660

5761
{/* Screenshot section */}
58-
<section className="bg-[#DDDDDD] flex-1 p-8 flex justify-center border-x-[1px] border-b-[1px] border-black lg:border-b-0">
59-
<Image src="/screenshot-2.png" alt="screenshot" className="object-contain" width={500} height={500} />
62+
<section className="bg-[#DDDDDD] flex-1 p-6 flex justify-center border-x-[1px] border-b-[1px] border-black lg:border-b-0">
63+
<Image src="/screenshot-2.png" alt="screenshot" className="object-contain" width={972} height={875} />
6064
</section>
6165

6266
{/* Satellite section */}
6367
<section className="bg-[#20F658] p-6 w-[40vw] lg:flex-1 flex justify-center border-r-[1px] border-b-[1px] border-black lg:border-r-0 lg:border-b-0">
64-
<Image src="/satellite-10fps.gif" alt="satellite" className="object-contain" width={500} height={500} />
68+
<Image src="/satellite-10fps.gif" alt="satellite" className="object-contain" width={436} height={535} />
6569
</section>
6670
</div>
6771

6872
{/* Second row */}
69-
<div className="flex flex-row flex-wrap lg:flex-nowrap mb-10">
73+
<div className="lg:grid lg:grid-cols-3 mb-10">
7074
{/* Map section */}
71-
<section className="bg-[#F6F6F6] p-10 border-x-[1px] border-black lg:border-b-[1px]">
75+
<section className="col-span-2 bg-[#F6F6F6] p-6 lg:p-10 border-x-[1px] border-black lg:border-b-[1px]">
7276
<div className="flex flex-row items-center gap-4">
73-
<h1 className="text-lg">📡 Clients running</h1>
74-
<Image
75-
src="/live-tag.svg"
76-
alt="live tag"
77-
className="w-16 animate-pulse-fast mb-1.5"
78-
width={500}
79-
height={500}
80-
/>
77+
<h1 className="text-lg m-0">📡 Clients running</h1>
78+
<Image src={liveTag} alt="live tag" className="w-16 animate-pulse-fast" />
8179
</div>
8280
<div className="relative flex items-center justify-center pt-10">
83-
<Image src="/map.png" alt="map" className="w-auto" width={2000} height={2000} />
81+
<Image src={map} alt="map" />
8482
{/* Continent tags */}
85-
<div className="text-sm lg:text-base flex items-center justify-center">
86-
<div className="bg-[#f359d4] px-3 leading-none absolute top-[90px] right-[200px] md:top-[100px] md:right-[280px] lg:top-[130px] lg:right-[420px]">
87-
<p className="text-center whitespace-nowrap">europe ({continentData?.Europe ?? "..."})</p>
83+
<div className="text-xs md:text-sm lg:text-base flex items-center justify-center">
84+
<div className="bg-[#f359d4] lg:px-3 leading-none absolute top-[26%] right-[33%] lg:right-[37%]">
85+
<p className="m-2 xl:my-3 text-center whitespace-nowrap">europe ({continentData?.Europe ?? "..."})</p>
8886
</div>
89-
<div className="bg-[#f359d4] px-3 leading-none absolute top-[120px] right-[80px] md:top-[130px] md:right-[120px] lg:top-[170px] lg:right-[220px]">
90-
<p className="text-center whitespace-nowrap">asia ({continentData?.Asia ?? "..."})</p>
87+
<div className="bg-[#f359d4] lg:px-3 leading-none absolute top-[35%] right-[14%] xl:right-[18%] lg:top-[30%]">
88+
<p className="m-2 xl:my-3 text-center whitespace-nowrap">asia ({continentData?.Asia ?? "..."})</p>
9189
</div>
92-
<div className="bg-[#f359d4] px-3 leading-none absolute top-[100px] left-[30px] md:top-[130px] md:left-[60px] lg:top-[170px] lg:left-[120px]">
93-
<p className="text-center whitespace-nowrap">
90+
<div className="bg-[#f359d4] lg:px-3 leading-none absolute top-[32%] left-[5%] lg:left-[6%] xl:left-[9%]">
91+
<p className="m-2 xl:my-3 text-center whitespace-nowrap">
9492
north america ({continentData?.["North America"] ?? "..."})
9593
</p>
9694
</div>
97-
<div className="bg-[#f359d4] px-3 leading-none absolute bottom-[40px] left-[100px] md:bottom-[80px] md:left-[160px] lg:bottom-[120px] lg:left-[220px]">
98-
<p className="text-center whitespace-nowrap">
95+
<div className="bg-[#f359d4] lg:px-3 leading-none absolute bottom-[20%] left-[15%] xl:left-[20%]">
96+
<p className="m-2 xl:my-3 text-center whitespace-nowrap">
9997
south america ({continentData?.["South America"] ?? "..."})
10098
</p>
10199
</div>
102-
<div className="bg-[#f359d4] px-3 leading-none absolute bottom-[100px] left-[220px] md:bottom-[140px] md:left-[320px] lg:bottom-[190px] lg:left-[490px]">
103-
<p className="text-center whitespace-nowrap">africa ({continentData?.Africa ?? "..."})</p>
100+
<div className="bg-[#f359d4] lg:px-3 leading-none absolute bottom-[35%] left-[43%] lg:left-[45%]">
101+
<p className="m-2 xl:my-3 text-center whitespace-nowrap">africa ({continentData?.Africa ?? "..."})</p>
104102
</div>
105-
<div className="bg-[#f359d4] px-3 leading-none absolute bottom-[30px] right-[30px] lg:bottom-[80px] lg:right-[60px]">
106-
<p className="text-center whitespace-nowrap">australia ({continentData?.Australia ?? "..."})</p>
103+
<div className="bg-[#f359d4] lg:px-3 leading-none absolute bottom-[10%] right-[5%] lg:bottom-[13%]">
104+
<p className="m-2 xl:my-3 text-center whitespace-nowrap">
105+
australia ({continentData?.Australia ?? "..."})
106+
</p>
107107
</div>
108108
</div>
109109
</div>
110110
</section>
111111

112112
{/* Docs section */}
113-
<section className="bg-black p-10 lg:w-[30vw] w-full text-white">
113+
<section className="bg-black p-6 lg:p-10 text-white">
114114
<h1 className="text-lg">Useful links | Docs</h1>
115-
<ul className="list-disc list-outside flex flex-col m-auto lg:mx-0 pl-8 lg:pl-4 ">
116-
<li>
115+
<ul className="list-disc list-outside pl-4">
116+
<li className="my-4">
117117
<a href="https://docs.rocketpool.net/guides/node/local/hardware" className="link">
118118
On how to select hardware
119119
</a>
120120
</li>
121-
<li>
121+
<li className="my-4">
122122
<a href="https://gist.github.com/yorickdowne/f3a3e79a573bf35767cd002cc977b038" className="link">
123123
All about how to buy the correct drive
124124
</a>
125125
</li>
126126
</ul>
127127
</section>
128128
</div>
129-
</>
129+
</div>
130130
);
131131
};
132132

‎packages/nextjs/components/Footer.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import Image from "next/image";
32
import { HeartIcon } from "@heroicons/react/24/solid";
43

@@ -7,14 +6,14 @@ import { HeartIcon } from "@heroicons/react/24/solid";
76
*/
87
export const Footer = () => {
98
return (
10-
<div className="min-h-0 px-1 mb-6 lg:mb-6">
11-
<div className="w-full flex flex-row">
9+
<div className="container mx-auto mb-6 lg:mb-6">
10+
<div className="w-full flex flex-col gap-6 justify-center items-center lg:flex-row lg:gap-0">
1211
<div>
13-
<Image src="crosses-1.svg" alt="crosses" className="w-[300px] lg:w-[500px]" width={306} height={50} />
12+
<Image src="crosses-1.svg" alt="crosses" className="w-[200px] lg:w-[500px]" width={306} height={50} />
1413
</div>
1514
<ul className="menu menu-horizontal w-full">
1615
{/* Footer links */}
17-
<div className="flex justify-center items-center gap-2 text-sm w-full">
16+
<div className="flex flex-col md:flex-row justify-center items-center gap-2 text-sm w-full">
1817
<div className="text-center">
1918
<a href="https://github.com/BuidlGuidl/nodes" target="_blank" rel="noreferrer" className="link">
2019
Fork me
@@ -43,7 +42,7 @@ export const Footer = () => {
4342
</div>
4443
</ul>
4544
<div>
46-
<Image src="crosses-2.svg" alt="crosses" className="w-[300px] lg:w-[500px]" width={306} height={50} />
45+
<Image src="crosses-2.svg" alt="crosses" className="w-[200px] lg:w-[500px]" width={306} height={50} />
4746
</div>
4847
</div>
4948
</div>

‎packages/nextjs/components/Header.tsx

+4-19
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
11
"use client";
22

3-
import React from "react";
43
import Image from "next/image";
5-
import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
4+
import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
65

76
/**
87
* Site header
98
*/
109
export const Header = () => {
1110
return (
12-
<header className="relative">
13-
{/* Lines at the sides */}
14-
<div className="fixed top-0 left-0 w-full h-[130px] z-20">
15-
<div className="absolute left-10 top-0 bottom-0 w-px bg-black"></div>
16-
<div className="absolute right-10 top-0 bottom-0 w-px bg-black"></div>
17-
</div>
18-
19-
{/* Logo div with mix-blend-exclusion */}
20-
<div className="fixed top-6 left-[70px] z-30 mix-blend-difference">
21-
<div>
22-
<Image src="client-logo.svg" alt="logo" width={260} height={78} />
23-
</div>
24-
</div>
25-
26-
{/* Connect button */}
27-
<div className="fixed top-10 right-[70px] z-30 flex items-center">
11+
<header className="container mx-auto">
12+
<div className="p-6 lg:p-8 flex flex-wrap items-center justify-between border-l border-r border-black">
13+
<Image className="w-40 md:w-auto" src="client-logo.svg" alt="logo" width={260} height={78} />
2814
<RainbowKitCustomConnectButton />
29-
<FaucetButton />
3015
</div>
3116
</header>
3217
);

‎packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const RainbowKitCustomConnectButton = () => {
3232
if (!connected) {
3333
return (
3434
<button
35-
className="btn bg-white border-black border-[1px] rounded-none btn-lg
35+
className="btn bg-white border-black border-[1px] rounded-none btn-sm md:btn-md lg:btn-lg
3636
font-chivo font-normal hover:bg-[#7877FF] hover:text-black hover:border-black"
3737
onClick={openConnectModal}
3838
type="button"

‎packages/nextjs/styles/globals.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
:root,
88
[data-theme] {
99
background: #DDDDDD;
10-
margin: 40px;
11-
margin-top: 130px;
10+
margin-bottom: 40px;
1211
}
1312

1413
body {

‎packages/nextjs/tailwind.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ module.exports = {
4949
"base-100": "#385183",
5050
"base-200": "#2A3655",
5151
"base-300": "#212638",
52-
"base-content": "#F9FBFF",
52+
"base-content": "#212638",
5353
info: "#385183",
5454
success: "#34EEB6",
5555
warning: "#FFCF72",

0 commit comments

Comments
 (0)