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