Skip to content

Commit

Permalink
arranged alignment issues on page (#379)
Browse files Browse the repository at this point in the history 
* chore: add key icon to array map function

* fix: adjusted alignment of elements on the page

* chore: delete unnecessary files
  • Loading branch information
@Njong392
Njong392 authored Aug 3, 2023
1 parent f87b730 commit 077f3ad
Show file tree
Hide file tree
Showing 9 changed files with 27 additions and 518 deletions.
478 changes: 0 additions & 478 deletions public/server/db.json
View file

This file was deleted.

3 changes: 0 additions & 3 deletions public/server/idli.json
View file

This file was deleted.

3 changes: 0 additions & 3 deletions public/server/idts.json
View file

This file was deleted.

3 changes: 0 additions & 3 deletions public/server/ili.json
View file

This file was deleted.

3 changes: 0 additions & 3 deletions public/server/wdys.json
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const Form = () => {
}, [userInput]);

return (
<div className="bg-dark py-5 mb-12 md:mb-0 lg:py-12 px-[14px] dark:bg-ash">
<div className="bg-dark py-5 md:mb-0 lg:py-12 px-[14px] dark:bg-ash">
<section className="block justify-center md:pb-16 md:flex md:flex-col lg:flex lg:flex-row items-center">
<div className="md:w-full lg:pr-20 lg:w-1/2 flex flex-col">
<h2 className="lg:text-left text-center text-purple font-bold text-xl md:text-2xl lg:text-3xl dark:text-deeppurple">
Expand Down
43 changes: 21 additions & 22 deletions src/components/hero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,26 @@ import Form from "./form";

const Hero = () => {
return (
<main className="bg-dark md:px-14 lg:px-40 py-12 px-[24px] dark:bg-ash">
<main className="bg-dark md:px-14 dark:bg-ash max-w-screen px-4 py-8 sm:px-6 lg:px-8 rounded lg:bg-snow lg:shadow-md">
<header className="text-center lg:mt-12">
<div className="text-4xl md:text-5xl lg:text-7xl mb-5 relative">
<h1 className="text-purple font-bold dark:text-deeppurple">
<h1 className="text-purple font-extrabold dark:text-deeppurple">
Writing on the internet
</h1>
<h1 className="text-ash font-bold mt-2 dark:text-dark">
<h1 className="text-ash font-extrabold mt-2 dark:text-dark">
is changing. IYKYK
</h1>
<div className="absolute right-14 bottom-9 xl:visible invisible">
<div className="w-24 h-4 bg-deeppurple relative -rotate-6">
<div className="absolute top-[3px]">
<div className="absolute right-28 bottom-9 xl:visible invisible">
<div className="w-24 h-4 bg-purple relative -rotate-6">
<div className="absolute top-[4px]">
<p className="text-ash text-sm font-semibold dark:text-dark">
If You Know,
</p>
</div>
</div>
</div>
<div className="absolute right-12 bottom-3 xl:visible invisible">
<div className="right-8 w-20 h-4 bg-deeppurple relative -rotate-6">
<div className="right-9 w-20 h-4 bg-purple relative -rotate-6">
<div className="absolute top-[3px]">
<p className="text-ash text-sm font-semibold dark:text-dark">
You Know.
Expand All @@ -39,31 +39,31 @@ const Hero = () => {
</div>
</header>

<div className="flex flex-wrap justify-center animate-breeze">
<img src={btw} alt="btw" className="rotate-2 h-[20%] w-[20%]" />
<img src={fyi} alt="fyi" className="-rotate-3 h-[20%] w-[20%]" />
<img src={idk} alt="idk" className="rotate-3 h-[20%] w-[20%]" />
<img src={ig} alt="if" className="rotate-6 h-[20%] w-[20%]" />
<img src={lfg} alt="lfg" className="-rotate-6 h-[20%] w-[20%]" />
<div className="md:flex flex-wrap justify-center animate-breeze sm:hidden ">
<img src={btw} alt="btw" className="rotate-2 h-[15%] w-[15%]" />
<img src={fyi} alt="fyi" className="-rotate-3 h-[15%] w-[15%]" />
<img src={idk} alt="idk" className="rotate-3 h-[15%] w-[15%]" />
<img src={ig} alt="if" className="rotate-6 h-[15%] w-[15%]" />
<img src={lfg} alt="lfg" className="-rotate-6 h-[15%] w-[15%]" />
</div>

<Form />

<section className="block justify-center items-center md:flex md:flex-col-reverse lg:flex lg:flex-row">
<div className="lg:w-1/2 px-10 pt-5 lg:px-0 lg:pr-20 md:text-left lg:text-center text-center">
<div className="lg:w-1/2 lg:px-10 pt-5">
<p className="text-purple font-bold text-2xl lg:text-3xl dark:text-deeppurple">
<span className="text-ash dark:text-dark">
Abbreve (A-bree-vay)
Abbreve (A-bree-vay) is
</span>{" "}
is an open source dictionary for{" "}
<span className="text-ash dark:text-dark">slang.</span>{" "}
an open source dictionary{" "}
<span className="text-ash dark:text-dark">for slang.</span>{" "}
</p>
<p className="text-purple font-bold text-2xl lg:text-3xl mt-2 dark:text-deeppurple pb-8">
<p className="text-ash font-bold text-2xl lg:text-3xl mt-2 dark:text-dark pb-8">
Curated by the community, for the community.
</p>
</div>

<div className="border-2 p-4 rounded-lg border-purple lg:rotate-3 hover:lg:rotate-0 hover:lg:ease-in-out hover:lg:duration-300 relative md:mt-0 dark:border-deeppurple">
<div className="border-2 p-4 rounded-lg border-purple relative md:mt-0 dark:border-deeppurple">
<div className="flex gap-2 items-center">
<img src={nate} alt="" className="h-12 w-12 rounded-full" />
<div>
Expand Down Expand Up @@ -102,7 +102,7 @@ const Hero = () => {
</section>

<section className=" justify-center lg:gap-10 mt-10 items-center flex flex-col lg:flex-row">
<div className="border-2 p-4 rounded-lg border-purple lg:rotate-3 hover:lg:rotate-0 hover:lg:ease-in-out hover:lg:duration-300 relative md:mt-0 dark:border-deeppurple">
<div className="border-2 p-4 rounded-lg border-purple relative md:mt-0 dark:border-deeppurple w-96">
<div className="flex gap-2 items-center">
<img src={emy} alt="" className="h-12 w-12 rounded-full" />
<div>
Expand Down Expand Up @@ -143,7 +143,7 @@ const Hero = () => {
</p>
</div>

<div className="lg:w-1/2 lg:text-left text-center mt-2 md:mt-3 lg:mt-0">
<div className="lg:w-1/2 lg:text-left mt-2 md:mt-3 lg:mt-0">
<h2 className="text-purple font-bold text-xl md:text-2xl xmd:text-2xl lg:text-3xl xl:text-3xl dark:text-deeppurple">
<span className="text-ash dark:text-dark">Googling</span> in between
conversations <span className="text-ash dark:text-dark">is</span>{" "}
Expand All @@ -157,4 +157,3 @@ const Hero = () => {
};

export default Hero;
<div className="h-56 w-56 relative border-2 border-purple"></div>;
8 changes: 4 additions & 4 deletions src/components/navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ const Navbar = () => {
const icons = [
{
icon: "moon",
text: "light"
text: "light",
},
{
icon: "sunny",
text: "dark"
}
text: "dark",
},
];

useEffect(() => {
Expand All @@ -36,7 +36,7 @@ const Navbar = () => {
}, [theme]);

return (
<nav className="px-8 bg-dark">
<nav className="px-4 py-4 sm:px-6 lg:px-8 bg-dark">
<div className="flex justify-between items-center p-2">
<div className="logo">
<img
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ module.exports = {
keyframes: {
breeze: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(5%)' },
'100%': { transform: 'translateX(2%)' },
},
spinner: {
'0%': { transform: 'translate3d(-50%, -50%, 0) rotate(0deg)' },
Expand Down

1 comment on commit 077f3ad

@vercel
Copy link

@vercel vercel bot commented on 077f3ad Aug 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

abbreve – ./

abbreve-git-main-njong392.vercel.app
abbreve.vercel.app
abbreve-njong392.vercel.app
www.abbreve.tech
abbreve.tech

Please sign in to comment.