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/.branches
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>
<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">
<Icon size="64" class="text-sea-green" :name="headerIcon" />
<div class="ml-auto flex">
@@ -24,7 +24,7 @@ export default {
<div id="body" class="mb-4">
<slot />
</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>
</div>
</div>

10064
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
package.json
View File

@@ -9,20 +9,23 @@
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/devtools": "^1.5.1",
"@nuxt/image": "^1.8.0",
"@nuxt/devtools": "^1.6.0",
"@nuxt/image": "^1.8.1",
"@types/rss": "^0.0.32",
"autoprefixer": "^10.4.20",
"nuxt": "^3.13.2",
"nuxt": "^3.14.159",
"nuxt-icon": "^0.6.10",
"postcss": "^8.4.47",
"postcss": "^8.4.49",
"rss": "^1.2.2",
"sitemap": "^7.1.2",
"tailwindcss": "^3.4.13"
"tailwindcss": "^3.4.14"
},
"dependencies": {
"@nuxt/content": "^2.13.2",
"@nuxt/content": "^2.13.4",
"sharp": "^0.33.5",
"xml": "^1.0.1"
}
},
"trustedDependencies": [
"@parcel/watcher"
]
}

6
pages/index.vue
View File

@@ -115,7 +115,7 @@ let projects: Project[] = [
<template>
<div class="min-h-screen">
<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
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
@@ -170,9 +170,9 @@ let projects: Project[] = [
<h2 class="md:text-4xl text-3xl mb-1">Projects</h2>
</div>
<!-- <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
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"
:icons="project.icons" :repo="project.repo" :externalLink="project.externalLink">
<slot>