xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-08 14:09: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 Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import {ArrowLongRightIcon} from "@heroicons/react/24/outline"; import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
import SteppedSpan from "../components/SteppedSpan";
import React from "react"; import React from "react";
interface Project { interface Project {
@@ -38,10 +37,9 @@ const Home: NextPage = () => {
<link rel="icon" href="/favicon.ico"/> <link rel="icon" href="/favicon.ico"/>
</Head> </Head>
<main <main
className="flex max-h-screen min-h-screen flex-row items-center justify-center bg-zinc-900 text-zinc-50"> 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 max-w-[85%] w-[70%] 2xl:w-[70%] mx-auto"> <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"> <div className="flex h-full m-1 flex-col justify-start gap-y-4">
<SteppedSpan >Ryan Walters</SteppedSpan>
{ {
projects.map((project, index) => projects.map((project, index) =>
<div key={index} className="item"> <div key={index} className="item">
@@ -50,11 +48,11 @@ const Home: NextPage = () => {
style={{objectFit: "cover"}} style={{objectFit: "cover"}}
/> />
<div className="elements grid grid-cols-5 h-full"> <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="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-3 text-3xl">{project.title}</div> <div className="mt-1 text-xl md:mt-3 md:text-3xl">{project.title}</div>
<div className="mt-1.5 text-xl">{project.description}</div> <div className="mt-0 text-sm md:mt-1.5 md:text-xl ">{project.description}</div>
</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"> <div className="col-span-1 w-full h-full flex align-center justify-center text-zinc-50 pr-10">
<ArrowLongRightIcon <ArrowLongRightIcon
className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/> className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/>

6
src/styles/globals.scss
View File

@@ -12,7 +12,7 @@ html, body {
} }
.item { .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 { > img {
@apply rounded transition-all; @apply rounded transition-all;
} }
@@ -21,7 +21,7 @@ html, body {
@apply hidden transition-all delay-100; @apply hidden transition-all delay-100;
} }
&:hover { &:hover, &:focus, &:focus-within {
.elements { .elements {
@apply grid; @apply grid;
} }
@@ -39,7 +39,7 @@ html, body {
> span { > span {
@apply transition-colors delay-300; @apply transition-colors delay-300;
&:hover { &:hover, &:focus-within, &:focus {
@apply text-black bg-white; @apply text-black bg-white;
transition-delay: 0s; transition-delay: 0s;
} }