From 58b27fe0d47bc70b85bc8236130ab73aebb1b231 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Sat, 24 Dec 2022 12:16:11 -0600
Subject: [PATCH] Improve mobile scale, font size, aspect ratio & text cols

---
 src/pages/index.tsx     | 14 ++++++--------
 src/styles/globals.scss |  6 +++---
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 918c7b4..b34b404 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,7 +2,6 @@ import {type NextPage} from "next";
 import Head from "next/head";
 import Image from "next/image";
 import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
-import SteppedSpan from "../components/SteppedSpan";
 import React from "react";
 
 interface Project {
@@ -38,10 +37,9 @@ const Home: NextPage = () => {
                 <link rel="icon" href="/favicon.ico"/>
             </Head>
             <main
-                className="flex max-h-screen min-h-screen flex-row items-center justify-center bg-zinc-900 text-zinc-50">
-                <div className="h-full max-w-[85%] w-[70%] 2xl:w-[70%] mx-auto">
+                className="flex py-3 max-h-screen min-h-screen flex-row md:items-center justify-center bg-zinc-900 text-zinc-50">
+                <div className="h-full w-full max-w-[95%] 2xl:max-w-[70%] mx-auto">
                     <div className="flex h-full m-1 flex-col justify-start gap-y-4">
-                        <SteppedSpan >Ryan Walters</SteppedSpan>
                         {
                             projects.map((project, index) =>
                                 <div key={index} className="item">
@@ -50,11 +48,11 @@ const Home: NextPage = () => {
                                            style={{objectFit: "cover"}}
                                     />
                                     <div className="elements grid grid-cols-5 h-full">
-                                        <div className="col-span-3 z-30 drop-shadow-2xl p-3 pl-4">
-                                            <div className="mt-3 text-3xl">{project.title}</div>
-                                            <div className="mt-1.5 text-xl">{project.description}</div>
+                                        <div className="col-span-4 md:col-span-3 z-30 drop-shadow-2xl p-0 md:p-3 pl-2 md:ml-4">
+                                            <div className="mt-1 text-xl md:mt-3 md:text-3xl">{project.title}</div>
+                                            <div className="mt-0 text-sm md:mt-1.5 md:text-xl ">{project.description}</div>
                                         </div>
-                                        <div/>
+                                        <div className="hidden md:block"/>
                                         <div className="col-span-1 w-full h-full flex align-center justify-center text-zinc-50 pr-10">
                                             <ArrowLongRightIcon
                                                 className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/>
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 943cfac..29769bd 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -12,7 +12,7 @@ html, body {
 }
 
 .item {
-  @apply w-full aspect-[5/3] h-[12rem] sm:h-[14rem] md:h-[16rem] relative pointer-events-auto cursor-pointer overflow-hidden transition-all rounded;
+  @apply w-full aspect-[7/2] sm:aspect-[5/3] sm:h-[14rem] md:h-[16rem] relative pointer-events-auto cursor-pointer overflow-hidden transition-all rounded;
   > img {
     @apply rounded transition-all;
   }
@@ -21,7 +21,7 @@ html, body {
     @apply hidden transition-all delay-100;
   }
 
-  &:hover {
+  &:hover, &:focus, &:focus-within {
     .elements {
       @apply grid;
     }
@@ -39,7 +39,7 @@ html, body {
   > span {
     @apply transition-colors delay-300;
 
-    &:hover {
+    &:hover, &:focus-within, &:focus {
       @apply text-black bg-white;
       transition-delay: 0s;
     }