opdavies/rebuilding-bartik
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Adjust colours

Browse source
This commit is contained in:
Oliver Davies 2019-03-10 12:00:23 +00:00
parent 0d10a9150c
commit e1622db074
4 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/DrupalMessage.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]"> <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
<div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes"> <div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
<svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-30 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg> <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-3 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -16,13 +16,13 @@ export default {
computed: { computed: {
classes: function () { classes: function () {
return { return {
status: 'border-green-20 text-green-40 bg-green-10', status: 'border-green-2 text-green-4 bg-green-1',
}[this.type] }[this.type]
}, },
wrapperClasses: function () { wrapperClasses: function () {
return { return {
status: 'bg-green-30', status: 'bg-green-3',
}[this.type] }[this.type]
}, },
} }

4
src/components/MainMenu.vue
View file

@ -2,7 +2,7 @@
<div> <div>
<button <button
type="button" type="button"
class="w-full p-3 block sm:hidden bg-blue-10 text-sm text-grey-60 text-left focus:outline-none" class="w-full p-3 block sm:hidden bg-blue-1 text-sm text-grey-6 text-left focus:outline-none"
@click="open = !open" @click="open = !open"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@ -25,7 +25,7 @@
> >
<a <a
class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center" class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
:class="[ index == activeTab ? 'bg-white' : 'bg-blue-10 hover:bg-white' ]" :class="[ index == activeTab ? 'bg-white' : 'bg-blue-1 hover:bg-white' ]"
:href="link.href" :href="link.href"
> >
{{ link.title }} {{ link.title }}

2
src/components/SidebarBlock.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="bg-grey-10 p-4 mb-4"> <div class="bg-grey-1 p-4 mb-4">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

18
src/components/Welcome.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="bg-blue-30"> <div class="bg-blue-3">
<div class="py-4 text-white"> <div class="py-4 text-white">
<div id="header" class="xl:max-w-6xl mx-auto px-4 relative"> <div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
<div class="flex flex-col-reverse"> <div class="flex flex-col-reverse">
@ -26,8 +26,8 @@
<drupal-message type="status"> <drupal-message type="status">
<p> <p>
A Bartik clone, built with A Bartik clone, built with
<a href="https://vuejs.org" class="text-blue-30 hover:text-blue-20 no-underline border-b border-dotted hover:border-solid border-blue-30">Vue.js</a> <a href="https://vuejs.org" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Vue.js</a>
and <a href="https://tailwindcss.com" class="text-blue-30 hover:text-blue-20 no-underline border-b border-dotted hover:border-solid border-blue-30">Tailwind CSS</a>. and <a href="https://tailwindcss.com" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Tailwind CSS</a>.
</p> </p>
</drupal-message> </drupal-message>
@ -48,13 +48,13 @@
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4"> <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4">
<sidebar-block> <sidebar-block>
<h2 class="font-serif font-normal text-base text-grey-60 border-b border-solid border-grey-30 mb-3">Search</h2> <h2 class="font-serif font-normal text-base text-grey-6 border-b border-solid border-grey-3 mb-3">Search</h2>
<div> <div>
<form action="#" class="flex"> <form action="#" class="flex">
<input type="text" class="border border-solid border-grey-40 p-2 w-full xl:w-auto"> <input type="text" class="border border-solid border-grey-4 p-2 w-full xl:w-auto">
<button type="submit" class="bg-grey-20 px-3 rounded-full border-b border-solid border-grey-50 ml-2 flex-none"> <button type="submit" class="bg-grey-2 px-3 rounded-full border-b border-solid border-grey-5 ml-2 flex-none">
<img src="img/loupe.svg" class="block"> <img src="img/loupe.svg" class="block">
</button> </button>
</form> </form>
@ -67,7 +67,7 @@
<div id="footer" class="text-xs text-white"> <div id="footer" class="text-xs text-white">
<div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4"> <div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4">
<div class="border-t border-solid border-grey-60 pt-6 -mb-6"> <div class="border-t border-solid border-grey-6 pt-6 -mb-6">
<div class="mb-6"> <div class="mb-6">
<p><a href="#0">Contact</a></p> <p><a href="#0">Contact</a></p>
</div> </div>
@ -114,11 +114,11 @@ export default {
@apply underline @apply underline
#main a #main a
@apply text-blue-30 no-underline border-b border-blue-10 border-dotted @apply text-blue-3 no-underline border-b border-blue-1 border-dotted
&:hover, &:hover,
&:focus &:focus
@apply text-blue-10 border-solid @apply text-blue-1 border-solid
#footer a #footer a
@apply text-white no-underline border-b border-dotted border-white @apply text-white no-underline border-b border-dotted border-white