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

iamge cmopression and a few small tweaks

Browse Source
This commit is contained in:
Zoe
2022-12-17 23:49:54 -06:00
parent e785c2c36c
commit 7adb93b872
19 changed files with 863 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
pages/blog/index.vue
View File

@@ -1,47 +1,52 @@
<template>
<div>
<div class="h-screen text-white">
<Nav />
<div class="gap-4 justify-evenly grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
<div v-for="article in articles"
:key="article._path"
class="mb-5 px-1.5">
<div
class="text-white bg-[#201F20] max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-zinc-700/30 shadow-md">
<img v-if="article.image.src"
:src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
<main>
<div id="main"
class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
<div v-for="article in articles"
:key="article._path"
class="mb-5 px-1.5">
<div
class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
<h3>
<nuxt-link class="text-lg"
:to="article._path">
{{ article.title }}
</nuxt-link>
</h3>
<p class="text-zinc-400">
{{ article.description }}
</p>
<p class="text-zinc-500">
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<p class="text-zinc-200 max-h-56">
<ContentDoc :head="false" :value="article"
:path="article._path"
v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start my-1">
<IconTag v-for="tag in doc.tags"
:name="tag"
:iconName='tag'
isTag="true" />
</div>
<ContentRenderer :value="doc"
:excerpt="true" />
</ContentDoc>
</p>
class="text-white bg-[#201F20] max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-zinc-700/30 shadow-md">
<img v-if="article.image.src"
:src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
<div
class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
<h3>
<nuxt-link tabindex="0"
class="text-lg"
:to="article._path">
{{ article.title }}
</nuxt-link>
</h3>
<p class="text-zinc-400">
{{ article.description }}
</p>
<p class="text-zinc-500">
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<p class="text-zinc-200 max-h-56">
<ContentDoc :head="false"
:value="article"
:path="article._path"
v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start my-1">
<IconTag v-for="tag in doc.tags"
:name="tag"
:iconName='tag'
isTag="true" />
</div>
<ContentRenderer :value="doc"
:excerpt="true" />
</ContentDoc>
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</template>