89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<article class="project">
|
||
|
|
<ProjectImage
|
||
|
|
class="project__image"
|
||
|
|
:title="title"
|
||
|
|
:url="url"
|
||
|
|
:screenshot="screenshot"
|
||
|
|
/>
|
||
|
|
<ProjectData
|
||
|
|
class="project__data"
|
||
|
|
:title="title"
|
||
|
|
:url="url"
|
||
|
|
:description="description"
|
||
|
|
:keywords="keywords"
|
||
|
|
/>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
|
||
|
|
// --------------------------------------------------
|
||
|
|
// DATA
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
title: String,
|
||
|
|
url: String,
|
||
|
|
screenshot: String,
|
||
|
|
description: String,
|
||
|
|
keywords: Array
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
|
||
|
|
// --------------------------------------------------
|
||
|
|
// STYLE
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
.project {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 2rem;
|
||
|
|
|
||
|
|
@media screen and (min-width: $desktop-media-query) {
|
||
|
|
align-items: center;
|
||
|
|
gap: 4rem;
|
||
|
|
|
||
|
|
&:nth-of-type(odd) {
|
||
|
|
flex-direction: row;
|
||
|
|
|
||
|
|
.project__data {
|
||
|
|
align-items: flex-end;
|
||
|
|
text-align: right;
|
||
|
|
|
||
|
|
ul {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(even) {
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
|
||
|
|
.project__data {
|
||
|
|
align-items: flex-start;
|
||
|
|
text-align: left;
|
||
|
|
|
||
|
|
ul {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__image {
|
||
|
|
width: 65%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__data {
|
||
|
|
width: 35%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|