Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fixed spacing issues on mobile and large view and fixed text siz… #207

Merged
merged 2 commits into from
Jan 11, 2023
Merged

fix: fixed spacing issues on mobile and large view and fixed text siz… #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21be5c8
fix: fixed spacing issues on mobile and large view and fixed text siz…
dev-phantom Jan 10, 2023
6f0cff5
fix: fixed issues generated in the pr
dev-phantom Jan 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/components/form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,16 @@ const Form = () => {
}, [userInput]);

return (
<div className="bg-dark py-12 px-[14px] dark:bg-ash">
<div className="bg-dark py-5 lg:py-12 px-[14px] dark:bg-ash">
<section className="block justify-center md:pb-16 md:flex items-center">
<div className="md:w-1/2 md:pr-20 md:text-left text-center">
<h2 className="text-purple font-bold text-3xl dark:text-deeppurple">
<h2 className="text-purple font-bold text-xl lg:text-3xl dark:text-deeppurple">
<span className="text-ash dark:text-dark">
Start by entering a slang,
</span>{" "}
and our dictionary will spit out an abbreviation.{" "}
</h2>
<p className="text-gray text-sm mt-5">
<p className="text-gray text-left lg:text-center text-sm mt-5">
*For now, abbreviations are one-way. For example, Idk can only
translate to 'I don't know', and not the other way round.
</p>
Expand Down Expand Up @@ -122,16 +122,16 @@ const Form = () => {
{isLoading && <LoadingSpinner />}

{data && (
<>
<div className="mt-2 text-purple font-bold text-xl ml-2 dark:text-deeppurple">
<div className="bg-ash shadow-lg border-2 border-deeppurple py-2 pl-2 rounded-lg mt-4">
<div className="mt-1 font-bold text-xl ml-2 text-deeppurple">
<p role="region" aria-live="assertive">
{data.definition}
</p>
</div>
<div className="mt-2 text-purple font-bold text-xs ml-2 dark:text-deeppurple">
<div className="mt-2 text-gray font-bold text-md ml-2 dark:text-gray">
<p>{data.alternatives}</p>
</div>
</>
</div>
)}

{error && (
Expand Down
60 changes: 40 additions & 20 deletions src/components/hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,30 @@ import Form from "./form";

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

<Form />

<section className="block justify-center gap-10 items-center md:flex">
<section className="block justify-center items-center md:flex">
<div className="md:w-1/2 md:pr-20 md:text-left text-center">
<p className="text-purple font-bold text-3xl dark:text-deeppurple">
<span className="text-ash dark:text-dark">Abbreve (A-bree-vay)</span> is an open
source dictionary for <span className="text-ash dark:text-dark">slang.</span>{" "}
<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)
</span>{" "}
is an open source dictionary for{" "}
<span className="text-ash dark:text-dark">slang.</span>{" "}
</p>
<p className="text-purple font-bold text-3xl mt-2 dark:text-deeppurple">
<p className="text-purple font-bold text-2xl lg:text-3xl mt-2 dark:text-deeppurple pb-8">
Curated by the community, for the community.
</p>
</div>
Expand All @@ -65,16 +76,21 @@ const Hero = () => {
</div>
</div>

<p className="mt-4">
<p className="mt-2">
<span className="text-gray">Replying to</span>{" "}
<span className="text-purple dark:text-deeppurple">@DunsinWebDev and @njongemy</span>
<span className="text-purple dark:text-deeppurple">
@DunsinWebDev and @njongemy
</span>
</p>
<p className="mt-2 text-ash dark:text-dark">
idk wtf ur on about... ICYMI IMHO RTFM, KISS, SHIT or GTFO.
</p>
<p className="text-sm text-gray">
18:31 . 07 Sep 22 .{" "}
<span className="text-purple dark:text-deeppurple"> Twitter Web App</span>
<span className="text-purple dark:text-deeppurple">
{" "}
Twitter Web App
</span>
</p>

<div className="absolute w-32 border-2 border-purple rounded-lg p-2 -top-14 -right-4 bg-dark rotate-6 invisible lg:visible dark:border-deeppurple">
Expand All @@ -85,7 +101,7 @@ const Hero = () => {
</div>
</section>

<section className="block justify-center gap-10 mt-20 items-center md:flex">
<section className=" justify-center gap-10 mt-10 items-center flex flex-col lg:flex-row">
<div className="border-2 p-4 rounded-lg border-purple md:rotate-3 relative md:mt-0 dark:border-deeppurple">
<div className="flex gap-2 items-center">
<img src={emy} alt="" className="h-12 w-12 rounded-full" />
Expand Down Expand Up @@ -120,14 +136,18 @@ const Hero = () => {

<p className="text-sm text-gray mt-2">
18:11 . 07 Sep 22 .{" "}
<span className="text-purple dark:text-deeppurple"> Twitter for Android</span>
<span className="text-purple dark:text-deeppurple">
{" "}
Twitter for Android
</span>
</p>
</div>

<div className="md:w-1/2 md:text-left text-center mt-5 md:mt-0">
<h2 className="text-purple font-bold 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> fast becoming{" "}
<div className="md:w-1/2 md:text-left text-center mt-2 md: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>{" "}
fast becoming{" "}
<span className="text-ash dark:text-dark">the new normal.</span>
</h2>
</div>
Expand Down
8 changes: 8 additions & 0 deletions tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,14 @@ module.exports = {
breeze: 'breeze 8s alternate-reverse infinite',
spinner: 'spinner 2s linear infinite',
},
screens: {
sm: '320px',
md: '640px',
xmd: '840px',
lg: '1024px',
xl: '1280px',
_2k: '2000px',
},
extend: {
keyframes: {
breeze: {
Expand Down