zoeissleeping/juls07.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix grid styling

Browse Source
This commit is contained in:
Zoe
2025-04-03 15:56:28 +00:00
parent 62de714bce
commit e92d5b91e4
6 changed files with 10101 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -10,3 +10,5 @@ dist
# Supabase # Supabase
supabase/.branches supabase/.branches
supabase/.temp supabase/.temp
.stignore

BIN
bun.lockb
View File

Binary file not shown.

4
components/ProjectCard.vue
View File

@@ -6,7 +6,7 @@ export default {
<template> <template>
<div <div
class="dark:bg-dark-slate bg-touched-lavender relative border p-6 h-[60vw] max-h-[425px] min-h-[375px] border-soft-lilac dark:border-midnight-slate/30 shadow-md rounded-lg"> class="flex flex-col dark:bg-dark-slate bg-touched-lavender relative border p-6 border-soft-lilac dark:border-midnight-slate/30 shadow-md rounded-lg">
<div class="flex mb-4 items-center" v-if="headerIcon"> <div class="flex mb-4 items-center" v-if="headerIcon">
<Icon size="64" class="text-sea-green" :name="headerIcon" /> <Icon size="64" class="text-sea-green" :name="headerIcon" />
<div class="ml-auto flex"> <div class="ml-auto flex">
@@ -24,7 +24,7 @@ export default {
<div id="body" class="mb-4"> <div id="body" class="mb-4">
<slot /> <slot />
</div> </div>
<div class="flex flex-wrap gap-2 absolute bottom-6" v-if="icons"> <div class="flex flex-wrap mt-auto gap-2" v-if="icons">
<IconTag v-for="icon in icons" size="16" :name="icon.name" :iconName="icon.icon"></IconTag> <IconTag v-for="icon in icons" size="16" :name="icon.name" :iconName="icon.icon"></IconTag>
</div> </div>
</div> </div>

10064
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

57
package.json
View File

@@ -1,28 +1,31 @@
{ {
"name": "nuxt-app", "name": "nuxt-app",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "nuxt build", "build": "nuxt build",
"dev": "nuxt dev", "dev": "nuxt dev",
"generate": "nuxt generate", "generate": "nuxt generate",
"preview": "nuxt preview", "preview": "nuxt preview",
"postinstall": "nuxt prepare" "postinstall": "nuxt prepare"
}, },
"devDependencies": { "devDependencies": {
"@nuxt/devtools": "^1.5.1", "@nuxt/devtools": "^1.6.0",
"@nuxt/image": "^1.8.0", "@nuxt/image": "^1.8.1",
"@types/rss": "^0.0.32", "@types/rss": "^0.0.32",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"nuxt": "^3.13.2", "nuxt": "^3.14.159",
"nuxt-icon": "^0.6.10", "nuxt-icon": "^0.6.10",
"postcss": "^8.4.47", "postcss": "^8.4.49",
"rss": "^1.2.2", "rss": "^1.2.2",
"sitemap": "^7.1.2", "sitemap": "^7.1.2",
"tailwindcss": "^3.4.13" "tailwindcss": "^3.4.14"
}, },
"dependencies": { "dependencies": {
"@nuxt/content": "^2.13.2", "@nuxt/content": "^2.13.4",
"sharp": "^0.33.5", "sharp": "^0.33.5",
"xml": "^1.0.1" "xml": "^1.0.1"
} },
} "trustedDependencies": [
"@parcel/watcher"
]
}

6
pages/index.vue
View File

@@ -115,7 +115,7 @@ let projects: Project[] = [
<template> <template>
<div class="min-h-screen"> <div class="min-h-screen">
<Nav class="absolute z-10 text-white" /> <Nav class="absolute z-10 text-white" />
<header class="w-full h-[50vh] sm:h-[40vh] md:h-[60vh]"> <header class="w-full h-[60vh]">
<div <div
class="p-6 bg-[#1212121A] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full blur-background"> class="p-6 bg-[#1212121A] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full blur-background">
<div <div
@@ -170,9 +170,9 @@ let projects: Project[] = [
<h2 class="md:text-4xl text-3xl mb-1">Projects</h2> <h2 class="md:text-4xl text-3xl mb-1">Projects</h2>
</div> </div>
<!-- <section <!-- <section
class="pb-6 grid mb-4 col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 grid-cols-12 gap-y-6 sm:gap-x-6 max-w-full"> --> class="pb-6 grid mb-4 col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 grid-cols-12 gap-y-6 sm:gap-x-6 max-w-full col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 pb-6 mb-4 gap-4 justify-evenly grid grid-cols-1 smyes :grid-cols-[repeat(auto-fit,_minmax(50px,_340px))] lg:grid-cols-[repeat(auto-fit,_minmax(50px,_300px))]"> -->
<section <section
class="max-w-full col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 pb-6 mb-4 gap-4 justify-evenly grid grid-cols-1 smyes :grid-cols-[repeat(auto-fit,_minmax(50px,_340px))] lg:grid-cols-[repeat(auto-fit,_minmax(50px,_300px))]"> class="max-w-full pb-6 mb-4 gap-6 grid col-start-1 col-span-12 xs:col-span-10 xs:col-start-2 auto-rows-fr grid-cols-1 xs:grid-cols-[repeat(auto-fit,_minmax(340px,_1fr))] justify-evenly">
<ProjectCard v-for="project in projects" :name="project.name" :headerIcon="project.headerIcon" <ProjectCard v-for="project in projects" :name="project.name" :headerIcon="project.headerIcon"
:icons="project.icons" :repo="project.repo" :externalLink="project.externalLink"> :icons="project.icons" :repo="project.repo" :externalLink="project.externalLink">
<slot> <slot>