cv boxes
This commit is contained in:
parent
e2cf382fbd
commit
bc1712196b
25
src/components/TheBox.vue
Normal file
25
src/components/TheBox.vue
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
export interface Props {
|
||||||
|
rows?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
rows: 1
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.box {
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #e5d9c7;
|
||||||
|
padding: 1em;
|
||||||
|
grid-row-end: span v-bind(props.rows);
|
||||||
|
}
|
||||||
|
</style>
|
30
src/pages/cv.vue
Normal file
30
src/pages/cv.vue
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import TheBox from '../components/TheBox.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<article>
|
||||||
|
<TheBox :rows="2">
|
||||||
|
mjau mjau mjau
|
||||||
|
mjau mjau mjau
|
||||||
|
</TheBox>
|
||||||
|
<TheBox>
|
||||||
|
mjau mjau mjau
|
||||||
|
</TheBox>
|
||||||
|
<TheBox>
|
||||||
|
mjau mjau mjau
|
||||||
|
</TheBox>
|
||||||
|
<TheBox>
|
||||||
|
mjau mjau mjau
|
||||||
|
</TheBox>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
article {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1em;
|
||||||
|
grid-auto-flow: row dense;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user