Edited colour scheme
This commit is contained in:
parent
28732539de
commit
a943cf8f96
@ -4,7 +4,7 @@
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-lime-600 mb-6 uncial-antiqua">
|
||||
<h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-olive-600 mb-6 uncial-antiqua">
|
||||
<slot></slot>
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<nav class="fixed bg-lime-900 text-white drop-shadow-xl w-full z-50">
|
||||
<nav class="fixed bg-olive-900 text-white drop-shadow-xl w-full z-50">
|
||||
<div class="flex relative px-2 max-w-5xl mx-auto items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<router-link class-active="" class="transition-all ease-in-out duration-500 hover:text-orange-300 active:text-orange-500 inline-flex justify-center items-center" to="/">
|
||||
@ -41,14 +41,14 @@
|
||||
</div>
|
||||
<Menu v-slot="{ open }" as="div" class="relative inline-block text-left md:hidden">
|
||||
<div>
|
||||
<MenuButton class="inline-flex justify-center w-full rounded-md drop-shadow-sm px-4 py-2 bg-lime-800 text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
|
||||
<MenuButton class="inline-flex justify-center w-full rounded-md drop-shadow-sm px-4 py-2 bg-olive-800 text-white hover:bg-olive-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
|
||||
<span class="scale-150">
|
||||
<mdiMenu/>
|
||||
</span>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
|
||||
<MenuItems class="origin-top-right absolute right-0 mt-2 p-1 space-y-2 w-56 rounded-md drop-shadow-lg bg-lime-700 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<MenuItems class="origin-top-right absolute right-0 mt-2 p-1 space-y-2 w-56 rounded-md drop-shadow-lg bg-olive-700 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div class="py-1">
|
||||
<MenuItem v-slot="{ active }" v-for="route in $router.options.routes.filter( value => value.meta.indexBase >= 0 )" :key="route.path" >
|
||||
<a :href="route.path" target="_blank" rel="noopener noreferrer" :class="[active ? 'text-orange-300' : 'text-white', 'flex px-4 py-2 active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500']" v-if="route.path.startsWith('http')">
|
||||
@ -59,7 +59,7 @@
|
||||
<span>{{ route.meta.title }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<router-link :to="route.path" :class="[active ? 'text-white bg-lime-600' : 'text-white', 'flex px-4 py-2 active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500', this.$route.fullPath == route.path ? 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white' : '']" v-else>
|
||||
<router-link :to="route.path" :class="[active ? 'text-white bg-olive-600' : 'text-white', 'flex px-4 py-2 active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500', this.$route.fullPath == route.path ? 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white' : '']" v-else>
|
||||
<div class="inline-flex px-3 py-1 space-x-1">
|
||||
<span class="scale-75">
|
||||
<svg-icon type="mdi" :path="route.meta.svgPath"></svg-icon>
|
||||
|
||||
@ -46,8 +46,8 @@ export default {
|
||||
}
|
||||
.navlink {
|
||||
@apply hover:text-orange-300;
|
||||
@apply hover:bg-lime-700;
|
||||
@apply bg-lime-800;
|
||||
@apply hover:bg-olive-700;
|
||||
@apply bg-olive-800;
|
||||
@apply active:text-orange-500;
|
||||
@apply rounded-lg;
|
||||
@apply h-fit;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col bg-lime-50 px-3 py-5 rounded-xl">
|
||||
<h1 class="text-xl my-2 border-b-2 border-lime-600 border-solid text-center uncial-antiqua md:text-left">
|
||||
<h1 class="text-xl my-2 border-b-2 border-olive-600 border-solid text-center uncial-antiqua md:text-left">
|
||||
<slot name="header"></slot>
|
||||
</h1>
|
||||
<div class="flex flex-col text-md">
|
||||
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
.navlink.active-link, .navlink.exact-active-link {
|
||||
@apply border-l-2;
|
||||
@apply border-solid;
|
||||
@apply border-lime-600;
|
||||
@apply border-olive-600;
|
||||
@apply drop-shadow-md;
|
||||
}
|
||||
.navlink {
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
</p>
|
||||
<div class="w-fit mx-auto">
|
||||
<router-link active-class="active-link" class="navlink" to="/quiz">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
|
||||
<span class="scale-75">
|
||||
<AccountQuestion/>
|
||||
</span>
|
||||
|
||||
@ -110,28 +110,28 @@
|
||||
</div>
|
||||
<div class="w-full flex mx-auto items-center justify-between max-w-sm">
|
||||
<router-link :to="`/quiz/question/${this.id-1}`" v-if="this.id > 0">
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Back">
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Back">
|
||||
<span class="scale-100">
|
||||
<ArrowLeftBold/>
|
||||
</span>
|
||||
<span class="uncial-antiqua">Back</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
|
||||
<span class="scale-100">
|
||||
<ArrowLeftBold/>
|
||||
</span>
|
||||
<span class="uncial-antiqua">Back</span>
|
||||
</div>
|
||||
<router-link :to="`/quiz/question/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1 && this.answersStore.isAnswered(this.id)">
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Next">
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Next">
|
||||
<span class="uncial-antiqua">Next</span>
|
||||
<span class="scale-100">
|
||||
<ArrowRightBold/>
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
|
||||
<span class="uncial-antiqua">Next</span>
|
||||
<span class="scale-100">
|
||||
<ArrowRightBold/>
|
||||
@ -146,7 +146,7 @@
|
||||
>
|
||||
<div v-show="this.id == this.questionStore.questions.length -1 && this.answersStore.isAnswered(this.id)" class="mx-auto my-8 w-fit transition-all">
|
||||
<button @click="this.submitAnswers()">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
|
||||
<span class="scale-75">
|
||||
<FleurDeLis/>
|
||||
</span>
|
||||
@ -178,7 +178,7 @@
|
||||
}
|
||||
|
||||
:checked + label>div {
|
||||
@apply border-lime-600;
|
||||
@apply border-olive-600;
|
||||
@apply border-solid;
|
||||
@apply border-l-2;
|
||||
@apply text-orange-600;
|
||||
@ -191,7 +191,7 @@
|
||||
}
|
||||
:checked:disabled + label>div {
|
||||
@apply border-2;
|
||||
@apply border-lime-600;
|
||||
@apply border-olive-600;
|
||||
@apply border-solid;
|
||||
}
|
||||
</style>
|
||||
@ -43,7 +43,7 @@
|
||||
</p>
|
||||
<div class="w-fit mx-auto" key="welcome-5">
|
||||
<router-link active-class="active-link" class="navlink" to="/quiz/question/0">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
|
||||
<span class="scale-75">
|
||||
<RoadVariant/>
|
||||
</span>
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
</Header>
|
||||
<Content>
|
||||
<article class="prose">
|
||||
<section v-for="playbook, index in this.resultsStore.results.playbooks" :key="Object.keys(playbook)[0]" :class="index < this.resultsStore.results.playbooks.length - 1 ? `border-solid border-b-2 border-lime-600 border-opacity-25` : ``">
|
||||
<section v-for="playbook, index in this.resultsStore.results.playbooks" :key="Object.keys(playbook)[0]" :class="index < this.resultsStore.results.playbooks.length - 1 ? `border-solid border-b-2 border-olive-600 border-opacity-25` : ``">
|
||||
<h2 class="flex justify-between">
|
||||
<span class="uncial-antiqua align-bottom">
|
||||
<span class="text-xl">The</span> <span class="text-3xl capitalize">{{ Object.keys(playbook)[0] }}</span>
|
||||
|
||||
@ -80,28 +80,28 @@
|
||||
</div>
|
||||
<div class="w-full flex mx-auto items-center justify-between max-w-sm">
|
||||
<router-link :to="`/results/answers/${this.id-1}`" v-if="this.id > 0">
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Back">
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Back">
|
||||
<span class="scale-100">
|
||||
<ArrowLeftBold/>
|
||||
</span>
|
||||
<span class="uncial-antiqua">Back</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
|
||||
<span class="scale-100">
|
||||
<ArrowLeftBold/>
|
||||
</span>
|
||||
<span class="uncial-antiqua">Back</span>
|
||||
</div>
|
||||
<router-link :to="`/results/answers/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1">
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Next">
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Next">
|
||||
<span class="uncial-antiqua">Next</span>
|
||||
<span class="scale-100">
|
||||
<ArrowRightBold/>
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
|
||||
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
|
||||
<span class="uncial-antiqua">Next</span>
|
||||
<span class="scale-100">
|
||||
<ArrowRightBold/>
|
||||
@ -117,7 +117,7 @@
|
||||
</template>
|
||||
<style scoped>
|
||||
.option-selected {
|
||||
@apply border-lime-600;
|
||||
@apply border-olive-600;
|
||||
@apply border-solid;
|
||||
@apply border-l-2;
|
||||
@apply text-orange-600;
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
</p>
|
||||
<div class="w-fit mx-auto">
|
||||
<router-link active-class="active-link" class="navlink" to="/results/answers/0">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
|
||||
<span class="scale-75">
|
||||
<FeatureSearch/>
|
||||
</span>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
const { white } = require('tailwindcss/colors');
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
@ -11,7 +13,28 @@ module.exports = {
|
||||
lg: '976px',
|
||||
xl: '1440px'
|
||||
},
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
olive: {
|
||||
50: '#d6ffb7',
|
||||
100: '#b0c087',
|
||||
200: '#9eb26c',
|
||||
600: '#8ca054',
|
||||
700: '#5d6b38',
|
||||
800: '#4f5d2f',
|
||||
900: '#2e361b',
|
||||
1000: '#171b0e'
|
||||
},
|
||||
darkorange: {
|
||||
300: '#e3924f',
|
||||
500: '#d99830',
|
||||
600: '#dda448',
|
||||
700: '#ff9c33',
|
||||
800: '#cc6900',
|
||||
900: '#a35400'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user