opdavies/oliverdavies.uk-old-sculpin
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Spaces

Browse source
This commit is contained in:
Oliver Davies 2018-12-18 22:57:51 +00:00
parent cfc41d2f4a
commit 57d1b8350c
13 changed files with 120 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
assets/js/components/Navbar.vue
View file

@ -1,18 +1,17 @@
<template> <template>
<div> <div>
<div class="sm:flex"> <div class="sm:flex">
<div class="w-full sm:w-1/3 lg:w-1/4 flex items-center"> <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
<div class="w-3/4 py-5"> <div class="w-3/4 py-5">
{{ siteName }} {{ siteName }}
</div>
<div class="w-1/4 text-right sm:hidden">
<button type="button" class="nav-toggle appearance-none" @click="mobileNavHidden = !mobileNavHidden" aria-label="Toggle main menu">
<svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
</button>
</div>
</div> </div>
<div class="w-1/4 text-right sm:hidden">
<button type="button" class="nav-toggle appearance-none" @click="mobileNavHidden = !mobileNavHidden" aria-label="Toggle main menu">
<svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
</button>
</div>
</div>
<nav <nav
class="w-full -mx-4 mt-px sm:mt-0 sm:mx-0 block sm:flex sm:flex-wrap sm:flex-1 sm:justify-end bg-white absolute sm:relative border-b sm:border-b-0" class="w-full -mx-4 mt-px sm:mt-0 sm:mx-0 block sm:flex sm:flex-wrap sm:flex-1 sm:justify-end bg-white absolute sm:relative border-b sm:border-b-0"
:class="{hidden: mobileNavHidden}" :class="{hidden: mobileNavHidden}"
@ -23,7 +22,7 @@
:href="item.href" :href="item.href"
class="block p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline" class="block p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline"
:class="{ :class="{
'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)), 'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)),
}" }"
> >
<span class="flex items-center h-full"> <span class="flex items-center h-full">
@ -37,40 +36,40 @@
<script> <script>
export default { export default {
props: ['siteName', 'pageUrl'], props: ['siteName', 'pageUrl'],
data() { data() {
return { return {
mobileNavHidden: true, mobileNavHidden: true,
navItems: [ navItems: [
{ {
title: 'About', title: 'About',
href: '/', href: '/',
pattern: '^/.$', pattern: '^/.$',
}, },
{ {
title: 'Talks', title: 'Talks',
href: '/talks', href: '/talks',
pattern: '^/talks/?', pattern: '^/talks/?',
}, },
{ {
title: 'Blog', title: 'Blog',
href: '/blog', href: '/blog',
pattern: '^/blog/?', pattern: '^/blog/?',
}, },
{ {
title: 'Book', title: 'Book',
href: '/test-driven-drupal', href: '/test-driven-drupal',
pattern: '^/test-driven-drupal/?$', pattern: '^/test-driven-drupal/?$',
}, },
{ {
title: 'Contact', title: 'Contact',
href: '/contact', href: '/contact',
pattern: '^/contact/?', pattern: '^/contact/?',
} }
] ]
} }
} }
} }
</script> </script>

26
assets/sass/base/base.sass
View file

@ -1,24 +1,24 @@
a a
color: inherit color: inherit
text-decoration: none text-decoration: none
&:focus, &:focus,
&:hover &:hover
text-decoration: underline
main a
text-decoration: underline text-decoration: underline
&:focus, main a
&:hover text-decoration: underline
text-decoration: none
&:focus,
&:hover
text-decoration: none
h1, h2, h3 h1, h2, h3
@apply mb-2 @apply mb-2
.content h2, .content h2,
.content h3 .content h3
@apply mt-6 @apply mt-6
p, p,
ul, ul,
@ -26,4 +26,4 @@ ol,
blockquote, blockquote,
table, table,
pre pre
@apply mb-6 @apply mb-6

14
assets/sass/base/images.sass
View file

@ -1,12 +1,12 @@
img img
&.with-border &.with-border
@apply border border-solid border-grey-light @apply border border-solid border-grey-light
&.with-padding &.with-padding
@apply p-1 @apply p-1
&.avatar &.avatar
@apply border p-1 rounded-full @apply border p-1 rounded-full
svg svg
fill: currentColor fill: currentColor

2
assets/sass/components/blockquote.sass
View file

@ -1,2 +1,2 @@
blockquote blockquote
@apply border-l-4 border-blue pl-4 px-6 py-2 @apply border-l-4 border-blue pl-4 px-6 py-2

8
assets/sass/components/button.sass
View file

@ -1,6 +1,6 @@
.button .button
@apply bg-blue inline-block rounded text-white px-4 py-2 @apply bg-blue inline-block rounded text-white px-4 py-2
&:active, &:active,
&:hover &:hover
@apply bg-blue-dark @apply bg-blue-dark

2
assets/sass/components/link.sass
View file

@ -1,2 +1,2 @@
.link .link
@apply text-blue @apply text-blue

8
assets/sass/components/listing.sass
View file

@ -1,8 +1,8 @@
.listing .listing
@apply pl-0 @apply pl-0
.listing-item .listing-item
@apply overflow-hidden pb-8 @apply overflow-hidden pb-8
&:not(:last-child) &:not(:last-child)
@apply border-b border-grey-light mb-8 @apply border-b border-grey-light mb-8

32
assets/sass/components/markdown.sass
View file

@ -1,22 +1,22 @@
.markdown .markdown
h2 h2
@apply mt-8 mb-3 text-black @apply mt-8 mb-3 text-black
h2, h3 h2, h3
@apply text-black @apply text-black
p, p,
li li
a a
@apply link @apply link
code code
@apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px border border-grey-light @apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px border border-grey-light
p:last-child p:last-child
@apply mb-0 @apply mb-0
pre code, pre code,
.hljs .hljs
@apply bg-grey-lighter block border-grey-dark border-l-4 font-mono @apply bg-grey-lighter block border-grey-dark border-l-4 font-mono
@apply leading-loose overflow-x-scroll p-6 rounded text-sm @apply leading-loose overflow-x-scroll p-6 rounded text-sm

10
assets/sass/components/note.sass
View file

@ -1,8 +1,8 @@
.note .note
@apply bg-blue-lighter border-blue border-l-4 mb-4 p-4 rounded @apply bg-blue-lighter border-blue border-l-4 mb-4 p-4 rounded
> *:last-child > *:last-child
@apply mb-0 @apply mb-0
p a p a
@apply text-black @apply text-black

22
assets/sass/components/slides.sass
View file

@ -1,15 +1,15 @@
.slides .slides
background: url("../images/loading.gif") center no-repeat background: url("../images/loading.gif") center no-repeat
min-height: 275px min-height: 275px
@screen md @screen md
& &
min-height: 375px min-height: 375px
@screen lg @screen lg
& &
min-height: 450px min-height: 450px
@screen xl @screen xl
& &
min-height: 560px min-height: 560px

22
assets/sass/components/table.sass
View file

@ -1,20 +1,20 @@
.table-collapse .table-collapse
@apply border-collapse @apply border-collapse
.table-responsive .table-responsive
@apply mb-4 border w-full overflow-x-auto overflow-y-hidden @apply mb-4 border w-full overflow-x-auto overflow-y-hidden
table table
@apply mb-0 border-0 whitespace-no-wrap @apply mb-0 border-0 whitespace-no-wrap
.table .table
@apply w-full table-collapse @apply w-full table-collapse
& tr:nth-child(odd) & tr:nth-child(odd)
@apply bg-grey-lighter @apply bg-grey-lighter
& tr th & tr th
@apply text-left p-3 bg-white @apply text-left p-3 bg-white
& td & td
@apply p-3 border-t @apply p-3 border-t

6
assets/sass/components/talk/video.sass
View file

@ -1,4 +1,4 @@
.talk-video .talk-video
iframe, iframe,
embed embed
@apply absolute h-full pin-l pin-t w-full @apply absolute h-full pin-l pin-t w-full

2
assets/sass/components/widget.sass
View file

@ -1,2 +1,2 @@
.widget .widget
@apply mb-6 block @apply mb-6 block