juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: change portfolio image height (#190)

Browse source 
Co-authored-by: hoolek77 <szymon.kin@gmail.com>
This commit is contained in:
angbur 2023-01-31 14:38:40 +01:00 committed by GitHub
parent 6fb26101b0
commit 544ad70d87
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/types/sections/portfolio-section.types.ts
View file

@ -11,9 +11,9 @@ export interface Project {
* *
* **Ratio**: 1:1 * **Ratio**: 1:1
* *
* **Display size**: 120x120px * **Display size**: 56x56px
*/ */
image: Photo; image?: Photo;
/** /**
* Date range when you were working on the project. * Date range when you were working on the project.

35
src/web/sections/portfolio/project.astro
View file

@ -18,24 +18,29 @@ const alt = `${name} project thumbnail`;
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex gap-6"> <div class="flex gap-6">
<Photo
src={image}
alt={alt}
width={200}
height={200}
class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden"
/>
<div class="flex w-full flex-col gap-4"> <div class="flex w-full flex-col gap-4">
<div class="flex justify-between"> <div class="flex gap-4">
<div> {
<Typography variant="item-title">{name}</Typography> image && (
<Timestamp dates={dates} /> <Photo
</div> src={image}
<div class="flex gap-2"> alt={alt}
{links.map((link) => <LinkButton {...link} />)} width={108}
height={108}
class="hidden h-14 w-14 flex-shrink-0 rounded-lg object-cover sm:block"
/>
)
}
<div class="flex w-full justify-between">
<div>
<Typography variant="item-title">{name}</Typography>
<Timestamp dates={dates} />
</div>
<div class="flex gap-2">
{links.map((link) => <LinkButton {...link} />)}
</div>
</div> </div>
</div> </div>
<Photo class="rounded-lg object-cover max-w-[120px] sm:hidden" src={image} alt={alt} />
<div class="inline-grid w-full xl:grid-cols-[auto_auto]"> <div class="inline-grid w-full xl:grid-cols-[auto_auto]">
{details.map((detail) => <LabelledValue {...detail} />)} {details.map((detail) => <LabelledValue {...detail} />)}
</div> </div>