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> <template>
<g-link class="logo" to="/"> <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"> <span class="logo__text">
{{ $static.metaData.siteName }} {{ $static.metaData.siteName }}
</span> </span>

10
src/components/PostCard.vue
View file

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

10
src/components/PostMeta.vue
View file

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

64
src/components/ToggleTheme.vue
View file

@ -1,46 +1,46 @@
<template> <template>
<button @click.prevent="toggleTheme" class="toggle-theme"> <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-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> <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> </span>
</button> </button>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
darkTheme: false darkTheme: false
} }
}, },
methods: { methods: {
toggleTheme() { toggleTheme() {
this.darkTheme = !this.darkTheme this.darkTheme = !this.darkTheme
// This is using a script that is added in index.html // This is using a script that is added in index.html
window.__setPreferredTheme( window.__setPreferredTheme(
this.darkTheme ? 'dark' : 'light' this.darkTheme ? 'dark' : 'light'
) )
} }
}, },
mounted() { mounted() {
if (window.__theme == 'dark') this.darkTheme = true if (window.__theme == 'dark') this.darkTheme = true
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.toggle-theme { .toggle-theme {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
color: var(--body-color); color: var(--body-color);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: .8 opacity: .8
} }
&:focus { &:focus {
outline: none; outline: none;
} }
} }
</style> </style>

121
src/templates/Post.vue
View file

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