xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-07 09:17:07 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile scale, font size, aspect ratio & text cols

Browse Source
This commit is contained in:
Xevion
2022-12-24 12:16:11 -06:00
parent 1e43c4239f
commit 58b27fe0d4
2 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/index.tsx
View File

@@ -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"/>