updated favorite projects
This commit is contained in:
parent
412bc5fca1
commit
8e9d3f138c
GPG Key ID:
04D4E2012F969213
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
|
||||
<slot />
|
||||
<div class="grid items-start grid-cols-2 gap-x-6 gap-y-5">
|
||||
<div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
|
||||
<div
|
||||
v-for="project in projects"
|
||||
:key="project.title.slug"
|
||||
class="grid grid-project relative bg-neutral-100"
|
||||
class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
|
||||
>
|
||||
<img
|
||||
v-if="project.images.small"
|
||||
class="project-image w-[12.5rem] h-[12.5rem] object-cover"
|
||||
class="project-image w-full h-[16rem] lg:w-[12.5rem] lg:h-[12.5rem] object-cover object-top rounded-t-md lg:rounded-bl-md lg:rounded-tr-none"
|
||||
:src="project.images.small"
|
||||
:alt="project.title"
|
||||
>
|
||||
@ -19,7 +19,7 @@
|
||||
:src="project.images.large"
|
||||
:alt="project.title"
|
||||
>
|
||||
<div class="p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:bottom-0 after:w-full after:h-full">
|
||||
<div class="project-content relative p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:top-0 after:w-full after:h-full">
|
||||
<header class="pb-2">
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ project.title }}
|
||||
@ -33,12 +33,15 @@
|
||||
v-html="markdownToText(project)"
|
||||
/>
|
||||
</div>
|
||||
<div class="more-button">
|
||||
<div
|
||||
class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
|
||||
>
|
||||
<BaseButton
|
||||
has-icon
|
||||
icon="eye"
|
||||
is-reverse
|
||||
class="btn"
|
||||
class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
|
||||
title="Pokaż więcej"
|
||||
@click="router.push({ name: 'Project', params: { id: project.id } })"
|
||||
>
|
||||
O projekcie
|
||||
@ -89,8 +92,6 @@ function markdownToText (project) {
|
||||
@import "scss/media";
|
||||
|
||||
.grid-project {
|
||||
grid-template-areas: 'image content';
|
||||
grid-template-columns: 200px 1fr;
|
||||
animation: load-project 2s forwards;
|
||||
|
||||
.project-image, .project-content {
|
||||
@ -103,134 +104,28 @@ function markdownToText (project) {
|
||||
|
||||
.project-content {
|
||||
grid-area: content;
|
||||
}
|
||||
}
|
||||
|
||||
.projects {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: minmax(80px, auto);
|
||||
column-gap: 25px;
|
||||
row-gap: 20px;
|
||||
|
||||
.project {
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-areas: 'image content';
|
||||
grid-template-columns: 200px 1fr;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid rgba(0, 0, 0, .025);
|
||||
border-radius: 5px;
|
||||
animation: load-project 2s forwards;
|
||||
|
||||
.project_image {
|
||||
grid-area: image;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
}
|
||||
|
||||
.project_content {
|
||||
grid-area: content;
|
||||
padding: 10px 15px;
|
||||
height: 200px;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
|
||||
.project_title {
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.project_release {
|
||||
font-size: .9em;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
|
||||
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9em;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-tablet(true) {
|
||||
.project {
|
||||
.more-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@screen lg {
|
||||
.grid-project {
|
||||
grid-template-areas: 'image content';
|
||||
grid-template-columns: 200px 1fr;
|
||||
|
||||
.project-button {
|
||||
.btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
border-radius: 5px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
color: white;
|
||||
border-style: none;
|
||||
&:hover {
|
||||
background-color: #385c8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-small {
|
||||
.project {
|
||||
display: block;
|
||||
|
||||
.project_image {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.project_content {
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.more-button {
|
||||
display: block;
|
||||
position: unset;
|
||||
margin-top: 8px;
|
||||
height: auto;
|
||||
left: unset;
|
||||
top: unset;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -247,13 +142,4 @@ function markdownToText (project) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
.projects .container {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 25px;
|
||||
column-gap: 0;
|
||||
row-gap: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
<template>
|
||||
<section class="bg-neutral-50">
|
||||
<projects :projects="select_projects">
|
||||
<div>
|
||||
<header>
|
||||
<h2 class="text-[2rem] mb-2">
|
||||
Wybrane projekty
|
||||
</h2>
|
||||
<p class="mb-5">
|
||||
Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
</projects>
|
||||
<div class="more-button">
|
||||
<GhostButton @click="router.push('projects')">
|
||||
<div class="w-full -translate-y-5 pb-5 more-button">
|
||||
<GhostButton
|
||||
class="mx-auto"
|
||||
@click="router.push('projects')"
|
||||
>
|
||||
ZOBACZ WIĘCEJ
|
||||
</GhostButton>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user