2018-11-19 20:11:53 +00:00
< template >
< div >
2018-11-20 13:14:40 +00:00
< div class = "bg-blue-dark" >
< div class = "py-4 text-white" >
2019-03-07 01:58:12 +00:00
< div id = "header" class = "xl:max-w-3xl mx-auto px-4 relative" >
2018-11-20 13:14:40 +00:00
< div class = "flex flex-col-reverse" >
< div class = "flex items-center" >
< img src = "img/logo.svg" alt = "" class = "mr-4" >
< div class = "text-2xl" >
2018-12-06 07:38:09 +00:00
< a href = "#0" > { { title } } < / a >
2018-11-20 13:14:40 +00:00
< / div >
2018-11-20 01:41:43 +00:00
< / div >
2018-11-19 20:11:53 +00:00
2018-11-20 13:14:40 +00:00
< div class = "text-sm flex justify-end" >
2018-12-06 07:38:09 +00:00
< a href = "#0" > Log in < / a >
2018-11-20 13:14:40 +00:00
< / div >
2018-11-19 20:11:53 +00:00
< / div >
< / div >
< / div >
2018-11-20 13:14:40 +00:00
< main-menu > < / main-menu >
< / div >
2018-11-19 20:41:47 +00:00
2018-12-28 01:11:39 +00:00
< div id = "main-content" class = "bg-white pt-6 pb-4 lg:pb-12" >
2019-03-07 01:58:12 +00:00
< div class = "xl:max-w-3xl mx-auto px-4" >
2018-12-28 13:56:14 +00:00
< drupal-message type = "status" >
< p >
A Bartik clone , built with
< a href = "https://vuejs.org" class = "text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark" > Vue . js < / a >
and < a href = "https://tailwindcss.com" class = "text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark" > Tailwind CSS < / a > .
< / p >
< / drupal-message >
2018-12-28 01:11:39 +00:00
2019-03-07 00:17:59 +00:00
< div class = "flex flex-col md:flex-row-reverse md:-mx-6 my-6" >
2018-12-06 07:38:09 +00:00
< div id = "main" class = "w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0" >
2018-11-19 20:11:53 +00:00
< div class = "font-serif" >
2018-11-20 09:12:45 +00:00
< h1 class = "font-normal" > Welcome to { { title } } < / h1 >
2018-11-19 20:11:53 +00:00
< p > No front page content has been created yet . < / p >
2018-12-06 07:38:09 +00:00
< p > Follow the < a href = "#0" class = "" > User Guide < / a > to start building your site . < / p >
2018-11-19 20:11:53 +00:00
< / div >
< div class = "mt-10" >
< a href = "#0" >
< img src = "img/feed.svg" alt = "" >
< / a >
< / div >
< / div >
2018-11-19 20:27:19 +00:00
2018-12-28 00:04:50 +00:00
< div class = "w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4" >
< sidebar-block >
2018-11-20 02:51:07 +00:00
< h2 class = "font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3" > Search < / h2 >
2018-11-19 20:27:19 +00:00
< div >
< form action = "#" class = "flex" >
< input type = "text" class = "border border-solid border-grey p-2 w-full xl:w-auto" >
2018-12-06 08:14:19 +00:00
< button type = "submit" class = "bg-grey-lighter px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none" >
2018-11-19 20:27:19 +00:00
< img src = "img/loupe.svg" class = "block" >
< / button >
< / form >
< / div >
2018-12-28 00:04:50 +00:00
< / sidebar-block >
2018-11-19 20:27:19 +00:00
< / div >
2018-11-19 20:11:53 +00:00
< / div >
< / div >
< / div >
2018-12-06 07:38:09 +00:00
< div id = "footer" class = "text-xs text-white" >
2019-03-07 01:58:12 +00:00
< div class = "xl:max-w-3xl mx-auto px-4 pt-16 pb-4" >
2018-11-19 20:11:53 +00:00
< div class = "border-t border-solid border-grey-darkest pt-6 -mb-6" >
< div class = "mb-6" >
2018-12-06 07:38:09 +00:00
< p > < a href = "#0" > Contact < / a > < / p >
2018-11-19 20:11:53 +00:00
< / div >
< div class = "mb-6" >
2018-11-19 21:09:09 +00:00
< p >
2018-12-06 07:38:09 +00:00
A clone of < a href = "https://www.drupal.org" > Drupal < / a > ’ s default theme ( Bartik ) .
Built by < a href = "https://www.oliverdavies.uk" > Oliver Davies < / a >
using < a href = "https://vuejs.org" > Vue . js < / a >
and < a href = "https://tailwindcss.com" > Tailwind CSS < / a > .
2018-11-19 21:09:09 +00:00
< / p >
2018-11-19 20:11:53 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
< / template >
< script >
2018-11-19 20:41:47 +00:00
import MainMenu from './MainMenu.vue' ;
2018-12-28 00:04:50 +00:00
import SidebarBlock from './SidebarBlock.vue'
2018-11-19 20:41:47 +00:00
2018-11-19 20:11:53 +00:00
export default {
2018-12-05 20:52:51 +00:00
components : {
2018-12-28 00:04:50 +00:00
MainMenu ,
SidebarBlock ,
2018-12-05 20:52:51 +00:00
} ,
2018-11-19 20:41:47 +00:00
2018-11-19 20:11:53 +00:00
props : {
2018-11-20 09:12:45 +00:00
title : {
2018-11-19 20:11:53 +00:00
type : String ,
required : true
}
}
}
< / script >
2018-12-06 07:38:09 +00:00
2019-03-10 00:34:21 +00:00
< style type = "postcss" >
# header a {
@ apply text - white no - underline ;
2018-12-06 07:38:09 +00:00
& : hover ,
2019-03-10 00:34:21 +00:00
& : focus {
2018-12-06 07:38:09 +00:00
@ apply underline
2019-03-10 00:34:21 +00:00
}
}
2018-12-06 07:38:09 +00:00
2019-03-10 00:34:21 +00:00
# main a {
@ apply text - blue - dark no - underline border - b border - blue border - dotted ;
2018-12-06 07:38:09 +00:00
& : hover ,
2019-03-10 00:34:21 +00:00
& : focus {
2018-12-06 07:38:09 +00:00
@ apply text - blue border - solid
2019-03-10 00:34:21 +00:00
}
}
2018-12-06 07:38:09 +00:00
2019-03-10 00:34:21 +00:00
# footer a {
@ apply text - white no - underline border - b border - dotted border - white ;
2018-12-06 07:38:09 +00:00
& : hover ,
2019-03-10 00:34:21 +00:00
& : focus {
2018-12-06 07:38:09 +00:00
@ apply border - none
2019-03-10 00:34:21 +00:00
}
}
2018-12-06 07:38:09 +00:00
< / style >