feat: Ajout de la page d'accueil
This commit is contained in:
parent
031410d81d
commit
fab13bd9d0
Binary file not shown.
After Width: | Height: | Size: 626 KiB |
|
@ -1,7 +1,10 @@
|
|||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
/* #EDE0D4 */
|
||||
--color-white: #ffffff;
|
||||
--color-black: #181818;
|
||||
/*--color-black: #181818;*/
|
||||
--color-black: #000000;
|
||||
--color-green: rgb(118, 148, 67);
|
||||
|
||||
--header-size-small: 64px;
|
||||
--header-size-big: 128px;
|
||||
|
@ -9,8 +12,9 @@
|
|||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: #EDE0D4;
|
||||
--color-text: var(--color-black);
|
||||
--color-background: var(--color-black);
|
||||
--color-text: var(--color-white);
|
||||
--color-highlight: var(--color-green);
|
||||
--header-size: var(--header-size-small);
|
||||
}
|
||||
|
||||
|
|
|
@ -130,7 +130,7 @@ const result = computed(() =>
|
|||
</div>
|
||||
</template>
|
||||
</SplideSlide>
|
||||
<SplideSlide>
|
||||
<SplideSlide class="latest">
|
||||
<template v-if="displayScoreResult && result">
|
||||
<ul>
|
||||
<li>score : {{ scoreSum }}</li>
|
||||
|
@ -182,6 +182,9 @@ label
|
|||
width: 100%
|
||||
padding: .3rem
|
||||
|
||||
.latest
|
||||
background-color: var(--color-green)
|
||||
|
||||
.gradient
|
||||
width: calc(100% - 2rem)
|
||||
padding: 0 1rem
|
||||
|
|
|
@ -20,11 +20,11 @@ defineProps({
|
|||
header {
|
||||
height: var(--header-size);
|
||||
position: fixed;
|
||||
background: #ede0d4;
|
||||
background: var(--color-green);
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
border-bottom: 1px solid black;
|
||||
border-bottom: 1px solid var(--color-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
@ -39,14 +39,14 @@ a {
|
|||
align-items: center;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
border-right: 1px solid black;
|
||||
border-right: 1px solid var(--color-white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
font-size: 2rem;
|
||||
color: black;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
@ -21,25 +21,96 @@ function getTranslation(translations, key) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Ceiba Scores App</h1>
|
||||
<template v-if="scores">
|
||||
<ul>
|
||||
<li v-for="score in scores" :key="score.id">
|
||||
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
|
||||
getTranslation(score.translations, "languages_id").title
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<header>
|
||||
<h1>Ceiba Scores App</h1>
|
||||
</header>
|
||||
<main>
|
||||
<template v-if="scores">
|
||||
<ul>
|
||||
<li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
|
||||
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
|
||||
getTranslation(score.translations, "languages_id").title1
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
h1
|
||||
background: var(--color-background)
|
||||
text-align: center
|
||||
margin: 1rem
|
||||
padding: 0
|
||||
header
|
||||
height: var(--header-size)
|
||||
overflow: hidden
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
border-bottom: 2px solid var(--color-white)
|
||||
background: var(--color-green)
|
||||
|
||||
h1
|
||||
text-align: center
|
||||
|
||||
main
|
||||
width: 100%
|
||||
height: calc(100% - var(--header-size))
|
||||
padding: 1rem
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
background-color: var(--color-highlight)
|
||||
|
||||
ul
|
||||
margin: 1rem
|
||||
padding: 0 0 0 1rem
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
max-height: 100%
|
||||
|
||||
aspect-ratio: 181 / 284
|
||||
background-image: url(/arbre.png)
|
||||
background-size: 724px 1136px
|
||||
|
||||
background-position: center
|
||||
background-repeat: no-repeat
|
||||
background-size: contain
|
||||
|
||||
position: relative
|
||||
// border: 2px solid var(--color-white)
|
||||
border-radius: 10px
|
||||
|
||||
li
|
||||
display: none
|
||||
|
||||
background: rgba(0, 0, 0, .5)
|
||||
border-radius: 10px
|
||||
position: absolute
|
||||
border: 2px solid var(--color-white)
|
||||
|
||||
&#score_1
|
||||
display: flex
|
||||
top: 40%
|
||||
bottom: 35%
|
||||
left: 20%
|
||||
right: 20%
|
||||
|
||||
&#score_6
|
||||
display: flex
|
||||
top: 72%
|
||||
bottom: 5%
|
||||
left: 6%
|
||||
right: 6%
|
||||
|
||||
a
|
||||
color: var(--color-white)
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
text-align: center
|
||||
|
||||
</style>
|
||||
|
|
|
@ -3,7 +3,5 @@ import ScoresList from "@/components/ScoresList.vue";
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<ScoresList />
|
||||
</main>
|
||||
<ScoresList />
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue