Skip to content

Commit

Permalink
adjust mobile styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChangoMan
ChangoMan committed Oct 28, 2024
1 parent 6179f45 commit edb8a0f
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 74 deletions.
90 changes: 45 additions & 45 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import { useEffect, useState } from "react";
import Image from "next/image";
import { NextPage } from "next";
import liveTag from "~~/public/live-tag.svg";
import map from "~~/public/map.png";

interface ContinentData {
"North America": number;
Expand Down Expand Up @@ -31,102 +33,100 @@ const Home: NextPage = () => {
}, []);

return (
<>
<div className="container mx-auto">
{/* First row */}
<div className="flex flex-row flex-wrap lg:flex-nowrap lg:border-x-[1px] lg:border-y-[1px] border-black">
{/* Introduction section */}
<section className="bg-[#df57c4] p-10 lg:w-[45vw] border-x-[1px] border-y-[1px] border-black lg:border-none">
<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">
<div className="flex flex-col">
<p>
<p className="mt-0">
A one line command to deploy and monitor an Ethereum Node, funded and maintained by BuidlGuidl members.
</p>
<p>Mac/linux</p>
<code className="bg-black p-6 text-white text-base">{`
/bin/bash -c "$(curl -fsSL https://client.buidlguidl.com/runBuidlGuidlClient.sh)"
`}</code>
<p className="mt-0">Mac/linux</p>
<div className="bg-black p-2 lg:p-4 text-white text-sm overflow-auto">
<p className="m-2">
/bin/bash -c &quot;$(curl -fsSL https://client.buidlguidl.com/runBuidlGuidlClient.sh)&quot;
</p>
</div>
<p> or run the client from the repo:</p>
<code className="bg-black p-6 text-white text-base">{`
git clone https://github.com/BuidlGuidl/buidlguidl-client.git
cd buidlguidl-client
yarn install
node index.js
`}</code>
<div className="bg-black p-2 lg:p-4 text-white text-sm overflow-auto">
<p className="m-2 whitespace-nowrap">git clone https://github.com/BuidlGuidl/buidlguidl-client.git</p>
<p className="m-2">cd buidlguidl-client</p>
<p className="m-2">yarn install</p>
<p className="m-2">node index.js</p>
</div>
</div>
</section>

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

{/* Satellite section */}
<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">
<Image src="/satellite-10fps.gif" alt="satellite" className="object-contain" width={500} height={500} />
<Image src="/satellite-10fps.gif" alt="satellite" className="object-contain" width={436} height={535} />
</section>
</div>

{/* Second row */}
<div className="flex flex-row flex-wrap lg:flex-nowrap mb-10">
<div className="lg:grid lg:grid-cols-3 mb-10">
{/* Map section */}
<section className="bg-[#F6F6F6] p-10 border-x-[1px] border-black lg:border-b-[1px]">
<section className="col-span-2 bg-[#F6F6F6] p-6 lg:p-10 border-x-[1px] border-black lg:border-b-[1px]">
<div className="flex flex-row items-center gap-4">
<h1 className="text-lg">📡 Clients running</h1>
<Image
src="/live-tag.svg"
alt="live tag"
className="w-16 animate-pulse-fast mb-1.5"
width={500}
height={500}
/>
<h1 className="text-lg m-0">📡 Clients running</h1>
<Image src={liveTag} alt="live tag" className="w-16 animate-pulse-fast" />
</div>
<div className="relative flex items-center justify-center pt-10">
<Image src="/map.png" alt="map" className="w-auto" width={2000} height={2000} />
<Image src={map} alt="map" />
{/* Continent tags */}
<div className="text-sm lg:text-base flex items-center justify-center">
<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]">
<p className="text-center whitespace-nowrap">europe ({continentData?.Europe ?? "..."})</p>
<div className="text-xs md:text-sm lg:text-base flex items-center justify-center">
<div className="bg-[#f359d4] lg:px-3 leading-none absolute top-[26%] right-[33%] lg:right-[37%]">
<p className="m-2 xl:my-3 text-center whitespace-nowrap">europe ({continentData?.Europe ?? "..."})</p>
</div>
<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]">
<p className="text-center whitespace-nowrap">asia ({continentData?.Asia ?? "..."})</p>
<div className="bg-[#f359d4] lg:px-3 leading-none absolute top-[35%] right-[14%] xl:right-[18%] lg:top-[30%]">
<p className="m-2 xl:my-3 text-center whitespace-nowrap">asia ({continentData?.Asia ?? "..."})</p>
</div>
<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]">
<p className="text-center whitespace-nowrap">
<div className="bg-[#f359d4] lg:px-3 leading-none absolute top-[32%] left-[5%] lg:left-[6%] xl:left-[9%]">
<p className="m-2 xl:my-3 text-center whitespace-nowrap">
north america ({continentData?.["North America"] ?? "..."})
</p>
</div>
<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]">
<p className="text-center whitespace-nowrap">
<div className="bg-[#f359d4] lg:px-3 leading-none absolute bottom-[20%] left-[15%] xl:left-[20%]">
<p className="m-2 xl:my-3 text-center whitespace-nowrap">
south america ({continentData?.["South America"] ?? "..."})
</p>
</div>
<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]">
<p className="text-center whitespace-nowrap">africa ({continentData?.Africa ?? "..."})</p>
<div className="bg-[#f359d4] lg:px-3 leading-none absolute bottom-[35%] left-[43%] lg:left-[45%]">
<p className="m-2 xl:my-3 text-center whitespace-nowrap">africa ({continentData?.Africa ?? "..."})</p>
</div>
<div className="bg-[#f359d4] px-3 leading-none absolute bottom-[30px] right-[30px] lg:bottom-[80px] lg:right-[60px]">
<p className="text-center whitespace-nowrap">australia ({continentData?.Australia ?? "..."})</p>
<div className="bg-[#f359d4] lg:px-3 leading-none absolute bottom-[10%] right-[5%] lg:bottom-[13%]">
<p className="m-2 xl:my-3 text-center whitespace-nowrap">
australia ({continentData?.Australia ?? "..."})
</p>
</div>
</div>
</div>
</section>

{/* Docs section */}
<section className="bg-black p-10 lg:w-[30vw] w-full text-white">
<section className="bg-black p-6 lg:p-10 text-white">
<h1 className="text-lg">Useful links | Docs</h1>
<ul className="list-disc list-outside flex flex-col m-auto lg:mx-0 pl-8 lg:pl-4 ">
<li>
<ul className="list-disc list-outside pl-4">
<li className="my-4">
<a href="https://docs.rocketpool.net/guides/node/local/hardware" className="link">
On how to select hardware
</a>
</li>
<li>
<li className="my-4">
<a href="https://gist.github.com/yorickdowne/f3a3e79a573bf35767cd002cc977b038" className="link">
All about how to buy the correct drive
</a>
</li>
</ul>
</section>
</div>
</>
</div>
);
};

Expand Down
11 changes: 5 additions & 6 deletions packages/nextjs/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import React from "react";
import Image from "next/image";
import { HeartIcon } from "@heroicons/react/24/solid";

Expand All @@ -7,14 +6,14 @@ import { HeartIcon } from "@heroicons/react/24/solid";
*/
export const Footer = () => {
return (
<div className="min-h-0 px-1 mb-6 lg:mb-6">
<div className="w-full flex flex-row">
<div className="container mx-auto mb-6 lg:mb-6">
<div className="w-full flex flex-col gap-6 justify-center items-center lg:flex-row lg:gap-0">
<div>
<Image src="crosses-1.svg" alt="crosses" className="w-[300px] lg:w-[500px]" width={306} height={50} />
<Image src="crosses-1.svg" alt="crosses" className="w-[200px] lg:w-[500px]" width={306} height={50} />
</div>
<ul className="menu menu-horizontal w-full">
{/* Footer links */}
<div className="flex justify-center items-center gap-2 text-sm w-full">
<div className="flex flex-col md:flex-row justify-center items-center gap-2 text-sm w-full">
<div className="text-center">
<a href="https://github.com/BuidlGuidl/nodes" target="_blank" rel="noreferrer" className="link">
Fork me
Expand Down Expand Up @@ -43,7 +42,7 @@ export const Footer = () => {
</div>
</ul>
<div>
<Image src="crosses-2.svg" alt="crosses" className="w-[300px] lg:w-[500px]" width={306} height={50} />
<Image src="crosses-2.svg" alt="crosses" className="w-[200px] lg:w-[500px]" width={306} height={50} />
</div>
</div>
</div>
Expand Down
23 changes: 4 additions & 19 deletions packages/nextjs/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,17 @@
"use client";

import React from "react";
import Image from "next/image";
import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";

/**
* Site header
*/
export const Header = () => {
return (
<header className="relative">
{/* Lines at the sides */}
<div className="fixed top-0 left-0 w-full h-[130px] z-20">
<div className="absolute left-10 top-0 bottom-0 w-px bg-black"></div>
<div className="absolute right-10 top-0 bottom-0 w-px bg-black"></div>
</div>

{/* Logo div with mix-blend-exclusion */}
<div className="fixed top-6 left-[70px] z-30 mix-blend-difference">
<div>
<Image src="client-logo.svg" alt="logo" width={260} height={78} />
</div>
</div>

{/* Connect button */}
<div className="fixed top-10 right-[70px] z-30 flex items-center">
<header className="container mx-auto">
<div className="p-6 lg:p-8 flex flex-wrap items-center justify-between border-l border-r border-black">
<Image className="w-40 md:w-auto" src="client-logo.svg" alt="logo" width={260} height={78} />
<RainbowKitCustomConnectButton />
<FaucetButton />
</div>
</header>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const RainbowKitCustomConnectButton = () => {
if (!connected) {
return (
<button
className="btn bg-white border-black border-[1px] rounded-none btn-lg
className="btn bg-white border-black border-[1px] rounded-none btn-sm md:btn-md lg:btn-lg
font-chivo font-normal hover:bg-[#7877FF] hover:text-black hover:border-black"
onClick={openConnectModal}
type="button"
Expand Down
3 changes: 1 addition & 2 deletions packages/nextjs/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
:root,
[data-theme] {
background: #DDDDDD;
margin: 40px;
margin-top: 130px;
margin-bottom: 40px;
}

body {
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ module.exports = {
"base-100": "#385183",
"base-200": "#2A3655",
"base-300": "#212638",
"base-content": "#F9FBFF",
"base-content": "#212638",
info: "#385183",
success: "#34EEB6",
warning: "#FFCF72",
Expand Down

0 comments on commit edb8a0f

Please sign in to comment.