feat: core structure of home page with intro and history sections
This commit is contained in:
parent
3aea00e798
commit
0d98f11e21
7 changed files with 77 additions and 65 deletions
55
src/App.vue
55
src/App.vue
|
|
@ -1,31 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
// import SideBar from './components/organisms/SideBar.vue'
|
||||
import './assets/style.scss'
|
||||
import 'bulma/css/bulma.css'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <SideBar /> -->
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo" alt="Vue logo" />
|
||||
</a>
|
||||
<div class="min-h-screen flex flex-col" style="gap: 4rem;"><!-- Main application wrapper -->
|
||||
<!-- <SideBar /> -->
|
||||
|
||||
<h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
|
||||
|
||||
<PaddingWrapper v-for="(sectionName, index) in sectionList" :key="index">
|
||||
<component :is="sectionName" />
|
||||
</PaddingWrapper>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue = bråtula!" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 10em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
<script lang="ts">
|
||||
// import SideBar from './components/organisms/SideBar.vue'
|
||||
import PaddingWrapper from './components/molecules/PaddingWrapper.vue'
|
||||
import IntroSection from './components/organisms/IntroSection.vue'
|
||||
import HistorySection from './components/organisms/HistorySection.vue'
|
||||
import './assets/style.scss'
|
||||
import 'bulma/css/bulma.css'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
PaddingWrapper,
|
||||
IntroSection,
|
||||
HistorySection
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sectionList: ['IntroSection', 'HistorySection']
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #000000aa);
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue