gaiety/gaiety-life
1
0
Fork 0
Code Activity

fix indentions

Browse source
This commit is contained in:
Tommy Vedvik 2019-02-28 11:11:03 +01:00
parent db4f5ce5e5
commit a5660c0740
5 changed files with 104 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Logo.vue
View file

@ -1,7 +1,5 @@
<template>
<g-link class="logo" to="/">
<g-image class="logo__image" src="~/assets/images/author.jpg" width="80" height="80" blur="5" />
<span class="logo__text">
{{ $static.metaData.siteName }}
</span>

10
src/components/PostCard.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}">
<div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}">
<div class="post-card__header">
<g-image v-if="post.poster" class="post-card__image" :src="post.poster" />
</div>
@ -9,7 +9,7 @@
<PostMeta class="post-card__meta" :post="post" />
<g-link class="post-card__link" :to="post.path">Link</g-link>
</div>
</div>
</div>
</template>
<script>
@ -18,7 +18,7 @@ export default {
components: {
PostMeta
},
props: ['post'],
props: ['post'],
}
</script>
@ -49,8 +49,8 @@ export default {
}
&:hover {
transform: translateY(-5px);
box-shadow: 1px 10px 30px 0 rgba(0,0,0,.1);
transform: translateY(-5px);
box-shadow: 1px 10px 30px 0 rgba(0,0,0,.1);
}
&__link {

10
src/components/PostMeta.vue
View file

@ -1,21 +1,21 @@
<template>
<div class="post-meta">
<div class="post-meta">
Posted {{ post.date }}.
<template v-if="post.timeToRead">
<strong>{{ post.timeToRead }} min read.</strong>
</template>
</div>
</div>
</template>
<script>
export default {
props: ['post']
props: ['post']
}
</script>
<style lang="scss">
.post-meta {
font-size: .8em;
opacity: .7;
font-size: .8em;
opacity: .7;
}
</style>

64
src/components/ToggleTheme.vue
View file

@ -1,46 +1,46 @@
<template>
<button @click.prevent="toggleTheme" class="toggle-theme">
<svg v-if="darkTheme" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</span>
</button>
<button @click.prevent="toggleTheme" class="toggle-theme">
<svg v-if="darkTheme" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</span>
</button>
</template>
<script>
export default {
data() {
return {
darkTheme: false
}
},
methods: {
toggleTheme() {
this.darkTheme = !this.darkTheme
data() {
return {
darkTheme: false
}
},
methods: {
toggleTheme() {
this.darkTheme = !this.darkTheme
// This is using a script that is added in index.html
window.__setPreferredTheme(
this.darkTheme ? 'dark' : 'light'
)
}
},
mounted() {
if (window.__theme == 'dark') this.darkTheme = true
}
// This is using a script that is added in index.html
window.__setPreferredTheme(
this.darkTheme ? 'dark' : 'light'
)
}
},
mounted() {
if (window.__theme == 'dark') this.darkTheme = true
}
}
</script>
<style lang="scss">
.toggle-theme {
background-color: transparent;
border: 0;
color: var(--body-color);
cursor: pointer;
background-color: transparent;
border: 0;
color: var(--body-color);
cursor: pointer;
&:hover {
opacity: .8
}
&:focus {
outline: none;
}
&:hover {
opacity: .8
}
&:focus {
outline: none;
}
}
</style>

121
src/templates/Post.vue
View file

@ -1,27 +1,30 @@
<template>
<Layout>
<div class="post-title">
<h1 class="post-title__text"> {{ $page.post.title }} </h1>
<PostMeta :post="$page.post" />
</div>
<div class="post content-box">
<div class="post__header">
<g-image v-if="$page.post.poster" :src="$page.post.poster" />
</div>
<p v-if="$page.post.excerpt" class="post__excerpt" v-html="$page.post.excerpt" />
<div class="post__content" v-html="$page.post.content" />
<div class="post__footer">
<!-- Add anything here -->
</div>
</div>
<Layout>
<div class="post-title">
<h1 class="post-title__text">
{{ $page.post.title }}
</h1>
<PostMeta :post="$page.post" />
</div>
<div class="post content-box">
<div class="post__header">
<g-image v-if="$page.post.poster" :src="$page.post.poster" />
</div>
<p v-if="$page.post.excerpt" class="post__excerpt" v-html="$page.post.excerpt" />
<div class="post__content" v-html="$page.post.content" />
<div class="post__footer">
<!-- Add anything here -->
</div>
</div>
<div class="post-comments">
<!-- Add comment widgets here -->
</div>
<div class="post-comments">
<!-- Add comment widgets here -->
</div>
<Author class="post-author" />
</Layout>
<Author class="post-author" />
</Layout>
</template>
<script>
@ -29,17 +32,17 @@ import PostMeta from '~/components/PostMeta'
import Author from '~/components/Author.vue'
export default {
components: {
Author,
PostMeta
}
components: {
Author,
PostMeta
}
}
</script>
<page-query>
query Post ($path: String!) {
post: post (path: $path) {
title
title
path
date (format: "D. MMMM YYYY")
timeToRead
@ -52,50 +55,50 @@ query Post ($path: String!) {
<style lang="scss">
.post-title {
padding: calc(var(--space) / 2) 0 calc(var(--space) / 2);
text-align: center;
padding: calc(var(--space) / 2) 0 calc(var(--space) / 2);
text-align: center;
}
.post {
&__header {
width: calc(100% + var(--space) * 2);
margin-left: calc(var(--space) * -1);
margin-top: calc(var(--space) * -1);
margin-bottom: calc(var(--space) / 2);
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
img {
width: 100%;
}
&:empty {
display: none;
}
}
&__header {
width: calc(100% + var(--space) * 2);
margin-left: calc(var(--space) * -1);
margin-top: calc(var(--space) * -1);
margin-bottom: calc(var(--space) / 2);
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
img {
width: 100%;
}
&:empty {
display: none;
}
}
&__excerpt {
font-size: 1.2em;
color: var(--title-color);
}
&__excerpt {
font-size: 1.2em;
color: var(--title-color);
}
&__content {
img {
width: calc(100% + var(--space) * 2);
margin-left: calc(var(--space) * -1);
display: block;
}
}
&__content {
img {
width: calc(100% + var(--space) * 2);
margin-left: calc(var(--space) * -1);
display: block;
}
}
}
.post-comments {
padding: calc(var(--space) / 2);
&:empty {
display: none;
}
padding: calc(var(--space) / 2);
&:empty {
display: none;
}
}
.post-author {
margin-top: calc(var(--space) / 2);
margin-top: calc(var(--space) / 2);
}
</style>