host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit projects section

Browse source
This commit is contained in:
Paul Nicoué 2023-03-03 12:00:04 +01:00
parent 6c9c179283
commit 51fe86d804
13 changed files with 380 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

88
components/Project.vue Normal file
View file

@ -0,0 +1,88 @@
<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>