From 424eaa9e8098cef762b1a2a7565d37944bb25306 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Mon, 21 Oct 2019 18:25:12 +0200
Subject: Add storybook

---
 pages/kronika/index.vue | 8 --------
 1 file changed, 8 deletions(-)

(limited to 'pages/kronika')

diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index 4a89a48..cff3551 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -42,11 +42,3 @@ export default {
 }
 </script>
 
-<style scoped>
-.post-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  max-width: 900px;
-}
-</style>
\ No newline at end of file
-- 
cgit 1.4.1


From 17fc6a6b4507e5535d8b6989b66da5bac323e87b Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Mon, 21 Oct 2019 19:53:02 +0200
Subject: Add PostList

---
 .gitignore                                  |  1 +
 .storybook/decorators/index.js              |  6 +++
 assets/css/main.css                         |  3 ++
 components/PostLink.stories.js              |  8 +--
 components/PostLink.vue                     |  1 +
 components/PostList/PostList.vue            | 49 +++++++++++++++++++
 components/PostList/PurePostList.stories.js | 31 ++++++++++++
 components/PostList/PurePostList.vue        | 76 +++++++++++++++++++++++++++++
 components/PostList/index.js                |  3 ++
 components/PurePostList.stories.js          | 16 ------
 components/PurePostList.vue                 | 38 ---------------
 pages/index.vue                             | 19 +++++---
 pages/kronika/index.vue                     | 33 ++-----------
 13 files changed, 186 insertions(+), 98 deletions(-)
 create mode 100644 .storybook/decorators/index.js
 create mode 100644 components/PostList/PostList.vue
 create mode 100644 components/PostList/PurePostList.stories.js
 create mode 100644 components/PostList/PurePostList.vue
 create mode 100644 components/PostList/index.js
 delete mode 100644 components/PurePostList.stories.js
 delete mode 100644 components/PurePostList.vue

(limited to 'pages/kronika')

diff --git a/.gitignore b/.gitignore
index 53c3292..6937f9e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 content
+static/api
 
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template
diff --git a/.storybook/decorators/index.js b/.storybook/decorators/index.js
new file mode 100644
index 0000000..acea431
--- /dev/null
+++ b/.storybook/decorators/index.js
@@ -0,0 +1,6 @@
+export const center = () => {
+  return {
+    template:
+      '<div style="display: flex; align-items: center; justify-content: center"><story/></div>'
+  }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 21bcffb..7da562e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -8,6 +8,9 @@ body {
 
 * {
   box-sizing: border-box;
+}
+
+body {
   font-family: 'Roboto Slab', serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/components/PostLink.stories.js b/components/PostLink.stories.js
index 71d04ed..a824b35 100644
--- a/components/PostLink.stories.js
+++ b/components/PostLink.stories.js
@@ -1,4 +1,5 @@
 import { storiesOf } from '@storybook/vue'
+import { center } from '../.storybook/decorators'
 
 import PostLink from './PostLink'
 
@@ -9,13 +10,6 @@ export const postLink = {
   route: '/kronika/2019/20/11/test'
 }
 
-const center = () => {
-  return {
-    template:
-      '<div style="display: flex; align-items: center; justify-content: center"><story/></div>'
-  }
-}
-
 storiesOf('PostLink', module)
   .addDecorator(center)
   .add('default', () => {
diff --git a/components/PostLink.vue b/components/PostLink.vue
index b0aeb5a..5bc5127 100644
--- a/components/PostLink.vue
+++ b/components/PostLink.vue
@@ -40,6 +40,7 @@ export default {
   margin: 20px;
   flex-basis: 410px;
   max-width: 410px;
+  height: 250px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   background: #ffffff;
   text-align: left;
diff --git a/components/PostList/PostList.vue b/components/PostList/PostList.vue
new file mode 100644
index 0000000..206a73f
--- /dev/null
+++ b/components/PostList/PostList.vue
@@ -0,0 +1,49 @@
+<template>
+  <pure-post-list :posts="posts" :loading="loading" />
+</template>
+
+<script>
+import PurePostList from './PurePostList'
+
+export default {
+  name: 'PostList',
+  components: { PurePostList },
+  props: {
+    max: {
+      type: Number,
+      required: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      rawPosts: []
+    }
+  },
+  mounted() {
+    this.loadPostsClient()
+  },
+  computed: {
+    posts() {
+      if (this.max) {
+        return this.rawPosts.slice(0, this.max)
+      }
+      return this.rawPosts
+    }
+  },
+  methods: {
+    async loadPostsClient() {
+      let posts = await this.$axios.get(
+        `${window.location.origin}/api/posts.json`
+      )
+      this.rawPosts = posts.data
+      this.rawPosts = this.rawPosts.map(post => ({
+        title: post.content.meta.title,
+        description: post.content.description,
+        route: post.route
+      }))
+      this.loading = false
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/PostList/PurePostList.stories.js b/components/PostList/PurePostList.stories.js
new file mode 100644
index 0000000..cf812f7
--- /dev/null
+++ b/components/PostList/PurePostList.stories.js
@@ -0,0 +1,31 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import { postLink } from '../PostLink.stories'
+
+import PurePostList from './PurePostList'
+
+export const posts = Array(5).fill(postLink)
+console.log(posts)
+
+storiesOf('PurePostList', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts"/>`,
+      data: () => ({ posts })
+    }
+  })
+  .add('loading', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts" loading/>`
+    }
+  })
+  .add('no posts', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts"/>`
+    }
+  })
diff --git a/components/PostList/PurePostList.vue b/components/PostList/PurePostList.vue
new file mode 100644
index 0000000..7e70db8
--- /dev/null
+++ b/components/PostList/PurePostList.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="post-list">
+    <div v-if="loading" class="post-list-container">
+      <div class="loading-post" v-for="(_, index) in 4" :key="index"></div>
+    </div>
+    <div v-else-if="posts" class="post-list-container">
+      <post-link
+        v-for="(post, index) in posts"
+        :key="index"
+        :route="post.route"
+        :title="post.title"
+        :description="post.description"
+      />
+    </div>
+    <div v-else class="no-posts">Brak wpisów</div>
+  </div>
+</template>
+
+<script>
+import PostLink from '../PostLink'
+
+export default {
+  name: 'PurePostList',
+  components: { PostLink },
+  props: {
+    posts: {
+      type: Array,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: () => false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post-list {
+  width: 100%;
+  max-width: 900px;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.post-list-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: initial;
+}
+
+@keyframes loading {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.loading-post {
+  background: #efefef;
+  animation: loading 1.5s ease-in-out infinite;
+  margin: 20px;
+  flex-basis: 410px;
+  width: 410px;
+  height: 250px;
+  text-align: left;
+}
+
+.no-posts {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/components/PostList/index.js b/components/PostList/index.js
new file mode 100644
index 0000000..dbb515e
--- /dev/null
+++ b/components/PostList/index.js
@@ -0,0 +1,3 @@
+import PostList from './PostList'
+
+export default PostList
diff --git a/components/PurePostList.stories.js b/components/PurePostList.stories.js
deleted file mode 100644
index 134cd68..0000000
--- a/components/PurePostList.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-
-import { postLink } from './PostLink.stories'
-
-import PurePostList from './PurePostList'
-
-export const posts = Array(5).fill(postLink)
-console.log(posts)
-
-storiesOf('PurePostList', module).add('default', () => {
-  return {
-    components: { PurePostList },
-    template: `<pure-post-list :posts="posts"/>`,
-    data: () => ({ posts })
-  }
-})
diff --git a/components/PurePostList.vue b/components/PurePostList.vue
deleted file mode 100644
index a93360d..0000000
--- a/components/PurePostList.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div>
-    <div v-if="posts" class="post-list">
-      <post-link
-        v-for="(post, index) in posts"
-        :key="index"
-        :route="post.route"
-        :title="post.title"
-        :description="post.description"
-      />
-    </div>
-    <div v-else>Brak wpisów</div>
-  </div>
-</template>
-
-<script>
-import PostLink from './PostLink'
-
-export default {
-  name: 'PurePostList',
-  components: { PostLink },
-  props: {
-    posts: {
-      type: Array,
-      required: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.post-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  max-width: 900px;
-}
-</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 736e7f4..8b093df 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,16 +1,21 @@
 <template>
   <div>
-    <JoinUs />
-    <FacebookFeed />
+    <join-us />
+    <div style="width: 100%; padding-top: 50px">
+      <h1>Ostatnie wpisy z kroniki</h1>
+      <post-list :max="4" />
+    </div>
+    <facebook-feed />
   </div>
 </template>
 
 <script>
-import JoinUs from "../components/JoinUs.vue";
-import FacebookFeed from "../components/FacebookFeed.vue";
+import JoinUs from '~/components/JoinUs.vue'
+import FacebookFeed from '~/components/FacebookFeed.vue'
+import PostList from '~/components/PostList'
 
 export default {
-  name: "HomeView",
-  components: { JoinUs, FacebookFeed }
-};
+  name: 'HomeView',
+  components: { JoinUs, FacebookFeed, PostList }
+}
 </script>
\ No newline at end of file
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index cff3551..d9685c1 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,43 +1,16 @@
 <template>
   <div style="padding-top: 20px">
     <h2>Ostatnie wpisy</h2>
-    <div class="post-list">
-      <chronicle-post
-        v-for="(post, index) in posts"
-        :key="index"
-        :route="post.route"
-        :title="post.content.meta.title"
-        :description="post.content.description"
-      />
-    </div>
+    <post-list />
   </div>
 </template>
 
 <script>
-import ChroniclePost from '~/components/ChroniclePost'
-import k from '~/api'
+import PostList from '~/components/PostList'
 
 export default {
   components: {
-    ChroniclePost
-  },
-  async asyncData() {
-    return {
-      posts: k.getPosts()
-    }
-  },
-  mounted() {
-    this.getPosts()
-  },
-  methods: {
-    getPosts() {
-      if (this.posts.length < 1) {
-        this.$axios
-          .get(`${window.location.origin}/api/posts.json`)
-          .then(r => (this.posts = r.data))
-      }
-      console.log(this.posts)
-    }
+    PostList
   }
 }
 </script>
-- 
cgit 1.4.1


From 070b7725be5fb0db486e9370bea5648c16c8bbfe Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Sat, 30 Nov 2019 13:12:30 +0100
Subject: Fix posts listing

---
 .gitignore              |  1 +
 pages/kronika/index.vue | 20 ++++++++++----------
 scripts/generateApi.js  |  5 +++++
 scripts/postbuild.sh    |  1 +
 4 files changed, 17 insertions(+), 10 deletions(-)

(limited to 'pages/kronika')

diff --git a/.gitignore b/.gitignore
index 53c3292..02a490c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 content
+static/api/posts.json
 
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index 4a89a48..d28c2ca 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="padding-top: 20px">
     <h2>Ostatnie wpisy</h2>
-    <div class="post-list">
+    <div v-if="posts" class="post-list">
       <chronicle-post
         v-for="(post, index) in posts"
         :key="index"
@@ -23,20 +23,20 @@ export default {
   },
   async asyncData() {
     return {
-      posts: k.getPosts()
+      posts: process.client ? undefined : k.getPosts()
     }
   },
   mounted() {
-    this.getPosts()
+    if (process.client && this.posts === undefined) {
+      this.getPosts().then(posts => (this.posts = posts))
+    }
   },
   methods: {
-    getPosts() {
-      if (this.posts.length < 1) {
-        this.$axios
-          .get(`${window.location.origin}/api/posts.json`)
-          .then(r => (this.posts = r.data))
-      }
-      console.log(this.posts)
+    async getPosts() {
+      const r = await this.$axios.get(
+        `${window.location.origin}/api/posts.json`
+      )
+      return r.data
     }
   }
 }
diff --git a/scripts/generateApi.js b/scripts/generateApi.js
index f72745e..7635f02 100755
--- a/scripts/generateApi.js
+++ b/scripts/generateApi.js
@@ -20,4 +20,9 @@ posts.sort((a, b) => (a.route > b.route ? 1 : -1))
 fs.writeFile('./dist/api/posts.json', JSON.stringify(posts), err =>
   err ? console.log(err) : null
 )
+
+fs.writeFile('./static/api/posts.json', JSON.stringify(posts), err =>
+  err ? console.log(err) : null
+)
+
 console.log(posts)
diff --git a/scripts/postbuild.sh b/scripts/postbuild.sh
index 85e35f9..6da3659 100755
--- a/scripts/postbuild.sh
+++ b/scripts/postbuild.sh
@@ -1,6 +1,7 @@
 #!/usr/bin/env bash
 
 mkdir ./dist/api
+mkdir ./static/api
 
 node -r esm ./scripts/generateApi.js
 
-- 
cgit 1.4.1


From 34da06762e81f85c5df29fdec66e2055b8b930a9 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Tue, 3 Dec 2019 13:05:15 +0100
Subject: Add missing stories

---
 components/Buttons/PlainButton.stories.js          |  2 +-
 components/Facebook/FacebookFeed.stories.js        |  2 +-
 .../Facebook/FacebookFindUsButton.stories.js       |  2 +-
 components/PostLink.stories.js                     | 21 -----
 components/PostLink.vue                            | 74 ------------------
 components/PostList/PostList.vue                   | 55 -------------
 components/PostList/PurePostList.stories.js        | 30 -------
 components/PostList/PurePostList.vue               | 91 ----------------------
 components/PostList/index.js                       |  3 -
 components/Posts/PostLink.stories.js               | 21 +++++
 components/Posts/PostLink.vue                      | 74 ++++++++++++++++++
 components/Posts/PostList/PostList.vue             | 55 +++++++++++++
 components/Posts/PostList/PurePostList.stories.js  | 30 +++++++
 components/Posts/PostList/PurePostList.vue         | 91 ++++++++++++++++++++++
 components/Posts/PostList/index.js                 |  3 +
 components/Ranking/RankingEntry.stories.js         | 19 +++++
 components/Ranking/RankingFirstEntry.stories.js    | 16 ++++
 components/Ranking/RankingList.stories.js          | 20 +++++
 pages/index.vue                                    |  4 +-
 pages/kronika/index.vue                            |  2 +-
 20 files changed, 335 insertions(+), 280 deletions(-)
 delete mode 100644 components/PostLink.stories.js
 delete mode 100644 components/PostLink.vue
 delete mode 100644 components/PostList/PostList.vue
 delete mode 100644 components/PostList/PurePostList.stories.js
 delete mode 100644 components/PostList/PurePostList.vue
 delete mode 100644 components/PostList/index.js
 create mode 100644 components/Posts/PostLink.stories.js
 create mode 100644 components/Posts/PostLink.vue
 create mode 100644 components/Posts/PostList/PostList.vue
 create mode 100644 components/Posts/PostList/PurePostList.stories.js
 create mode 100644 components/Posts/PostList/PurePostList.vue
 create mode 100644 components/Posts/PostList/index.js
 create mode 100644 components/Ranking/RankingEntry.stories.js
 create mode 100644 components/Ranking/RankingFirstEntry.stories.js
 create mode 100644 components/Ranking/RankingList.stories.js

(limited to 'pages/kronika')

diff --git a/components/Buttons/PlainButton.stories.js b/components/Buttons/PlainButton.stories.js
index 67a657d..43efa24 100644
--- a/components/Buttons/PlainButton.stories.js
+++ b/components/Buttons/PlainButton.stories.js
@@ -7,7 +7,7 @@ const plainButton = {
   text: 'Plain Button'
 }
 
-storiesOf('PlainButton', module)
+storiesOf('Buttons/PlainButton', module)
   .addDecorator(center)
   .add('default', () => {
     return {
diff --git a/components/Facebook/FacebookFeed.stories.js b/components/Facebook/FacebookFeed.stories.js
index 4eced7f..d9ec30a 100644
--- a/components/Facebook/FacebookFeed.stories.js
+++ b/components/Facebook/FacebookFeed.stories.js
@@ -3,7 +3,7 @@ import { center } from '../../.storybook/decorators'
 
 import FacebookFeed from './FacebookFeed'
 
-storiesOf('FacebookFeed', module)
+storiesOf('Facebook/FacebookFeed', module)
   .addDecorator(center)
   .add('default', () => {
     return {
diff --git a/components/Facebook/FacebookFindUsButton.stories.js b/components/Facebook/FacebookFindUsButton.stories.js
index e76f8f9..e6a298b 100644
--- a/components/Facebook/FacebookFindUsButton.stories.js
+++ b/components/Facebook/FacebookFindUsButton.stories.js
@@ -3,7 +3,7 @@ import { center } from '../../.storybook/decorators'
 
 import FacebookFindUsButton from './FacebookFindUsButton'
 
-storiesOf('FacebookFindUsButton', module)
+storiesOf('Facebook/FacebookFindUsButton', module)
   .addDecorator(center)
   .add('default', () => {
     return {
diff --git a/components/PostLink.stories.js b/components/PostLink.stories.js
deleted file mode 100644
index a824b35..0000000
--- a/components/PostLink.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import { center } from '../.storybook/decorators'
-
-import PostLink from './PostLink'
-
-export const postLink = {
-  title: 'Test PostLink',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.',
-  route: '/kronika/2019/20/11/test'
-}
-
-storiesOf('PostLink', module)
-  .addDecorator(center)
-  .add('default', () => {
-    return {
-      components: { PostLink },
-      template: `<post-link :title="title" :description="description" :route="route"/>`,
-      data: () => postLink
-    }
-  })
diff --git a/components/PostLink.vue b/components/PostLink.vue
deleted file mode 100644
index 54cd934..0000000
--- a/components/PostLink.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div class="post-link">
-    <a :href="route">
-      <div class="post-container">
-        <h4 class="post-title">{{ title }}</h4>
-        <p class="post-description">{{ shortenedDescription }}...</p>
-      </div>
-    </a>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PostLink',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    description: {
-      type: String,
-      default: ''
-    },
-    route: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    shortenedDescription() {
-      const first30Words = this.description.split(' ').slice(0, 30)
-      return first30Words.join(' ')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.post-link {
-  margin: 20px;
-  flex-basis: 410px;
-  max-width: 410px;
-  /* height: 250px; */
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
-  background: #ffffff;
-  text-align: left;
-  transition: transform 300ms ease-in-out;
-}
-
-.post-link:hover {
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-  transform: scale(1.02);
-}
-
-.post-link > a {
-  text-decoration: none;
-  height: 100%;
-}
-
-.post-link .post-container {
-  padding: 20px;
-  height: 100%;
-}
-
-.post-link .post-title {
-  color: #181818;
-  font-size: 1.3em;
-}
-
-.post-link .post-description {
-  color: #484848;
-  font-size: 0.9em;
-}
-</style>
diff --git a/components/PostList/PostList.vue b/components/PostList/PostList.vue
deleted file mode 100644
index 781099f..0000000
--- a/components/PostList/PostList.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <pure-post-list v-if="rawPosts" :posts="posts" :loading="loading" />
-</template>
-
-<script>
-import k from '~/api'
-import PurePostList from './PurePostList'
-
-export default {
-  name: 'PostList',
-  components: { PurePostList },
-  props: {
-    max: {
-      type: Number,
-      required: false
-    }
-  },
-  data() {
-    return {
-      loading: true,
-      rawPosts: undefined
-    }
-  },
-  mounted() {
-    if (process.client && this.rawPosts === undefined) {
-      this.loadPostsClient()
-    } else {
-      this.rawPosts = k.getPosts()
-      this.loading = false
-    }
-  },
-  computed: {
-    posts() {
-      if (this.max) {
-        return this.rawPosts.slice(0, this.max)
-      }
-      return this.rawPosts
-    }
-  },
-  methods: {
-    async loadPostsClient() {
-      let posts = await this.$axios.get(
-        `${window.location.origin}/api/posts.json`
-      )
-      this.rawPosts = posts.data
-      this.rawPosts = this.rawPosts.map(post => ({
-        title: post.content.meta.title,
-        description: post.content.description,
-        route: post.route
-      }))
-      this.loading = false
-    }
-  }
-}
-</script>
diff --git a/components/PostList/PurePostList.stories.js b/components/PostList/PurePostList.stories.js
deleted file mode 100644
index 3cb07f8..0000000
--- a/components/PostList/PurePostList.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-
-import { postLink } from '../PostLink.stories'
-
-import PurePostList from './PurePostList'
-
-export const posts = Array(5).fill(postLink)
-
-storiesOf('PurePostList', module)
-  .add('default', () => {
-    return {
-      components: { PurePostList },
-      template: `<pure-post-list :posts="posts"/>`,
-      data: () => ({ posts })
-    }
-  })
-  .add('loading', () => {
-    return {
-      components: { PurePostList },
-      template: `<pure-post-list :posts="posts" loading/>`,
-      data: () => ({ posts: [] })
-    }
-  })
-  .add('no posts', () => {
-    return {
-      components: { PurePostList },
-      template: `<pure-post-list :posts="posts"/>`,
-      data: () => ({ posts: [] })
-    }
-  })
diff --git a/components/PostList/PurePostList.vue b/components/PostList/PurePostList.vue
deleted file mode 100644
index ace069f..0000000
--- a/components/PostList/PurePostList.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div class="post-list">
-    <div v-if="loading" class="post-list-container">
-      <div class="loading-post" v-for="(_, index) in 4" :key="index"></div>
-    </div>
-    <div v-else-if="!posts" class="no-posts">Brak wpisów</div>
-    <transition name="fade-in">
-      <div v-if="posts && !loading" class="post-list-container">
-        <post-link
-          v-for="(post, index) in posts"
-          :key="index"
-          :route="post.route"
-          :title="post.title"
-          :description="post.description"
-        />
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import PostLink from '../PostLink'
-
-export default {
-  name: 'PurePostList',
-  components: { PostLink },
-  props: {
-    posts: {
-      type: Array,
-      required: true
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: () => false
-    }
-  }
-}
-</script>
-
-<style scoped>
-.post-list {
-  width: 100%;
-  max-width: 900px;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-.post-list-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-@keyframes loading {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.loading-post {
-  background: #efefef;
-  animation: loading 1.5s ease-in-out infinite;
-  margin: 20px;
-  flex-basis: 410px;
-  width: 410px;
-  height: 250px;
-  text-align: left;
-}
-
-.no-posts {
-  text-align: center;
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.fade-in-enter-active {
-  animation: fade-in 0.3s reverse;
-}
-</style>
diff --git a/components/PostList/index.js b/components/PostList/index.js
deleted file mode 100644
index dbb515e..0000000
--- a/components/PostList/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import PostList from './PostList'
-
-export default PostList
diff --git a/components/Posts/PostLink.stories.js b/components/Posts/PostLink.stories.js
new file mode 100644
index 0000000..9b12c29
--- /dev/null
+++ b/components/Posts/PostLink.stories.js
@@ -0,0 +1,21 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import PostLink from './PostLink'
+
+export const postLink = {
+  title: 'Test PostLink',
+  description:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.',
+  route: '/kronika/2019/20/11/test'
+}
+
+storiesOf('Posts/PostLink', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { PostLink },
+      template: `<post-link :title="title" :description="description" :route="route"/>`,
+      data: () => postLink
+    }
+  })
diff --git a/components/Posts/PostLink.vue b/components/Posts/PostLink.vue
new file mode 100644
index 0000000..54cd934
--- /dev/null
+++ b/components/Posts/PostLink.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="post-link">
+    <a :href="route">
+      <div class="post-container">
+        <h4 class="post-title">{{ title }}</h4>
+        <p class="post-description">{{ shortenedDescription }}...</p>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PostLink',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    route: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    shortenedDescription() {
+      const first30Words = this.description.split(' ').slice(0, 30)
+      return first30Words.join(' ')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post-link {
+  margin: 20px;
+  flex-basis: 410px;
+  max-width: 410px;
+  /* height: 250px; */
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  background: #ffffff;
+  text-align: left;
+  transition: transform 300ms ease-in-out;
+}
+
+.post-link:hover {
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+  transform: scale(1.02);
+}
+
+.post-link > a {
+  text-decoration: none;
+  height: 100%;
+}
+
+.post-link .post-container {
+  padding: 20px;
+  height: 100%;
+}
+
+.post-link .post-title {
+  color: #181818;
+  font-size: 1.3em;
+}
+
+.post-link .post-description {
+  color: #484848;
+  font-size: 0.9em;
+}
+</style>
diff --git a/components/Posts/PostList/PostList.vue b/components/Posts/PostList/PostList.vue
new file mode 100644
index 0000000..781099f
--- /dev/null
+++ b/components/Posts/PostList/PostList.vue
@@ -0,0 +1,55 @@
+<template>
+  <pure-post-list v-if="rawPosts" :posts="posts" :loading="loading" />
+</template>
+
+<script>
+import k from '~/api'
+import PurePostList from './PurePostList'
+
+export default {
+  name: 'PostList',
+  components: { PurePostList },
+  props: {
+    max: {
+      type: Number,
+      required: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      rawPosts: undefined
+    }
+  },
+  mounted() {
+    if (process.client && this.rawPosts === undefined) {
+      this.loadPostsClient()
+    } else {
+      this.rawPosts = k.getPosts()
+      this.loading = false
+    }
+  },
+  computed: {
+    posts() {
+      if (this.max) {
+        return this.rawPosts.slice(0, this.max)
+      }
+      return this.rawPosts
+    }
+  },
+  methods: {
+    async loadPostsClient() {
+      let posts = await this.$axios.get(
+        `${window.location.origin}/api/posts.json`
+      )
+      this.rawPosts = posts.data
+      this.rawPosts = this.rawPosts.map(post => ({
+        title: post.content.meta.title,
+        description: post.content.description,
+        route: post.route
+      }))
+      this.loading = false
+    }
+  }
+}
+</script>
diff --git a/components/Posts/PostList/PurePostList.stories.js b/components/Posts/PostList/PurePostList.stories.js
new file mode 100644
index 0000000..e2c39de
--- /dev/null
+++ b/components/Posts/PostList/PurePostList.stories.js
@@ -0,0 +1,30 @@
+import { storiesOf } from '@storybook/vue'
+
+import { postLink } from '../PostLink.stories'
+
+import PurePostList from './PurePostList'
+
+export const posts = Array(5).fill(postLink)
+
+storiesOf('Posts/PurePostList', module)
+  .add('default', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts"/>`,
+      data: () => ({ posts })
+    }
+  })
+  .add('loading', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts" loading/>`,
+      data: () => ({ posts: [] })
+    }
+  })
+  .add('no posts', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts"/>`,
+      data: () => ({ posts: [] })
+    }
+  })
diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue
new file mode 100644
index 0000000..ace069f
--- /dev/null
+++ b/components/Posts/PostList/PurePostList.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="post-list">
+    <div v-if="loading" class="post-list-container">
+      <div class="loading-post" v-for="(_, index) in 4" :key="index"></div>
+    </div>
+    <div v-else-if="!posts" class="no-posts">Brak wpisów</div>
+    <transition name="fade-in">
+      <div v-if="posts && !loading" class="post-list-container">
+        <post-link
+          v-for="(post, index) in posts"
+          :key="index"
+          :route="post.route"
+          :title="post.title"
+          :description="post.description"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import PostLink from '../PostLink'
+
+export default {
+  name: 'PurePostList',
+  components: { PostLink },
+  props: {
+    posts: {
+      type: Array,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: () => false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post-list {
+  width: 100%;
+  max-width: 900px;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.post-list-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+@keyframes loading {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.loading-post {
+  background: #efefef;
+  animation: loading 1.5s ease-in-out infinite;
+  margin: 20px;
+  flex-basis: 410px;
+  width: 410px;
+  height: 250px;
+  text-align: left;
+}
+
+.no-posts {
+  text-align: center;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fade-in-enter-active {
+  animation: fade-in 0.3s reverse;
+}
+</style>
diff --git a/components/Posts/PostList/index.js b/components/Posts/PostList/index.js
new file mode 100644
index 0000000..dbb515e
--- /dev/null
+++ b/components/Posts/PostList/index.js
@@ -0,0 +1,3 @@
+import PostList from './PostList'
+
+export default PostList
diff --git a/components/Ranking/RankingEntry.stories.js b/components/Ranking/RankingEntry.stories.js
new file mode 100644
index 0000000..20bf6e1
--- /dev/null
+++ b/components/Ranking/RankingEntry.stories.js
@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import RankingEntry from './RankingEntry'
+
+export const rankingEntry = {
+  troop: 'Test',
+  points: 32
+}
+
+storiesOf('Ranking/RankingEntry', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { RankingEntry },
+      template: `<ranking-entry :troop="troop" :points="points" />`,
+      data: () => rankingEntry
+    }
+  })
diff --git a/components/Ranking/RankingFirstEntry.stories.js b/components/Ranking/RankingFirstEntry.stories.js
new file mode 100644
index 0000000..05fa517
--- /dev/null
+++ b/components/Ranking/RankingFirstEntry.stories.js
@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import RankingFirstEntry from './RankingFirstEntry'
+
+import { rankingEntry } from './RankingEntry.stories'
+
+storiesOf('Ranking/RankingFirstEntry', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { RankingFirstEntry },
+      template: `<ranking-first-entry :troop="troop" :points="points" />`,
+      data: () => rankingEntry
+    }
+  })
diff --git a/components/Ranking/RankingList.stories.js b/components/Ranking/RankingList.stories.js
new file mode 100644
index 0000000..c7b287d
--- /dev/null
+++ b/components/Ranking/RankingList.stories.js
@@ -0,0 +1,20 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import RankingList from './RankingList'
+
+import { rankingEntry } from './RankingEntry.stories'
+
+const rankingList = {
+  scores: Array(3).fill(rankingEntry)
+}
+
+storiesOf('Ranking/RankingList', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { RankingList },
+      template: `<ranking-list :scores="scores" />`,
+      data: () => rankingList
+    }
+  })
diff --git a/pages/index.vue b/pages/index.vue
index 12caa0c..3a19237 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,10 +12,10 @@
 <script>
 import JoinUs from '~/components/JoinUs.vue'
 import FacebookFeed from '~/components/Facebook/FacebookFeed.vue'
-import PostList from '~/components/PostList'
+import PostList from '~/components/Posts/PostList'
 
 export default {
   name: 'HomeView',
   components: { JoinUs, FacebookFeed, PostList }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index b478a75..86344c3 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import PostList from '~/components/PostList'
+import PostList from '~/components/Posts/PostList'
 
 export default {
   components: {
-- 
cgit 1.4.1


From f19763d9745723dd1f62055be9974dc34fcc719d Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Wed, 4 Dec 2019 08:33:54 +0100
Subject: Add semantic tags

---
 layouts/default.vue                              | 6 ++++--
 pages/kronika/_year/_month/_day/_title/index.vue | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

(limited to 'pages/kronika')

diff --git a/layouts/default.vue b/layouts/default.vue
index d7bbd40..f47adde 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -5,7 +5,9 @@
       title="19 PDH Puszcza"
       logo="/assets/krajka-logo.svg"
     />
-    <nuxt id="content" />
+    <main class="content">
+      <nuxt class="content" />
+    </main>
     <the-footer :routes="routes" />
   </div>
 </template>
@@ -40,7 +42,7 @@ export default {
   min-height: 100vh;
 }
 
-#content {
+.content {
   flex: 1;
   width: 100%;
 
diff --git a/pages/kronika/_year/_month/_day/_title/index.vue b/pages/kronika/_year/_month/_day/_title/index.vue
index fa9a9ab..dafa237 100644
--- a/pages/kronika/_year/_month/_day/_title/index.vue
+++ b/pages/kronika/_year/_month/_day/_title/index.vue
@@ -4,9 +4,9 @@
       <h1>404</h1>
       <p>Nie znaleziono wpisu</p>
     </div>
-    <div v-else class="article">
+    <section v-else class="article">
       <article class="content" v-html="content"></article>
-    </div>
+    </section>
   </div>
 </template>
 
@@ -79,4 +79,4 @@ export default {
     text-align: justify;
   }
 }
-</style>
\ No newline at end of file
+</style>
-- 
cgit 1.4.1


From 29a4e2488151861c10abeb0a05622e4d06e07c60 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Thu, 5 Dec 2019 17:34:44 +0100
Subject: Fix SSR on PostList

---
 components/Posts/PostList/PostList.vue   | 45 +++++++++-----------------------
 components/Posts/PostList/README.md      | 42 +++++++++++++++++++++++++++++
 components/Posts/PostList/index.js       | 19 ++++++++++++++
 components/Posts/PostList/parentMixin.js |  9 +++++++
 package-lock.json                        |  8 +++---
 package.json                             |  1 +
 pages/index.vue                          |  6 +++--
 pages/kronika/index.vue                  |  6 +++--
 8 files changed, 95 insertions(+), 41 deletions(-)
 create mode 100644 components/Posts/PostList/README.md
 create mode 100644 components/Posts/PostList/parentMixin.js

(limited to 'pages/kronika')

diff --git a/components/Posts/PostList/PostList.vue b/components/Posts/PostList/PostList.vue
index 781099f..80369a8 100644
--- a/components/Posts/PostList/PostList.vue
+++ b/components/Posts/PostList/PostList.vue
@@ -1,9 +1,8 @@
 <template>
-  <pure-post-list v-if="rawPosts" :posts="posts" :loading="loading" />
+  <pure-post-list v-if="posts" :posts="parsedPosts" :loading="loading" />
 </template>
 
 <script>
-import k from '~/api'
 import PurePostList from './PurePostList'
 
 export default {
@@ -12,43 +11,23 @@ export default {
   props: {
     max: {
       type: Number,
+      required: false,
+      default: () => 4
+    },
+    posts: {
+      type: Array,
       required: false
     }
   },
-  data() {
-    return {
-      loading: true,
-      rawPosts: undefined
-    }
-  },
-  mounted() {
-    if (process.client && this.rawPosts === undefined) {
-      this.loadPostsClient()
-    } else {
-      this.rawPosts = k.getPosts()
-      this.loading = false
-    }
-  },
   computed: {
-    posts() {
+    parsedPosts() {
       if (this.max) {
-        return this.rawPosts.slice(0, this.max)
+        return this.posts.slice(0, this.max)
       }
-      return this.rawPosts
-    }
-  },
-  methods: {
-    async loadPostsClient() {
-      let posts = await this.$axios.get(
-        `${window.location.origin}/api/posts.json`
-      )
-      this.rawPosts = posts.data
-      this.rawPosts = this.rawPosts.map(post => ({
-        title: post.content.meta.title,
-        description: post.content.description,
-        route: post.route
-      }))
-      this.loading = false
+      return this.posts
+    },
+    loading() {
+      return this.posts === undefined
     }
   }
 }
diff --git a/components/Posts/PostList/README.md b/components/Posts/PostList/README.md
new file mode 100644
index 0000000..839f9c2
--- /dev/null
+++ b/components/Posts/PostList/README.md
@@ -0,0 +1,42 @@
+## PostList
+
+This component creates a list of posts
+
+### Usage
+
+```html
+<template>
+  <post-list :posts="posts">
+</template>
+
+<script>
+import PostList, { getPosts } from '~/components/Posts/PostList';
+
+export default {
+  components: { PostList },
+  async asyncData() {
+    return {
+      posts: await getPosts()
+    }
+  }
+}
+</script>
+```
+
+Or by using the mixin
+
+```html
+<template>
+  <post-list :posts="posts">
+</template>
+
+<script>
+import PostList from '~/components/Posts/PostList';
+import postListParentMixin from '~/components/Posts/PostList/parentMixin';
+
+export default {
+  components: { PostList },
+  mixins: [postListParentMixin]
+}
+</script>
+```
diff --git a/components/Posts/PostList/index.js b/components/Posts/PostList/index.js
index dbb515e..11d44ff 100644
--- a/components/Posts/PostList/index.js
+++ b/components/Posts/PostList/index.js
@@ -1,3 +1,22 @@
+import axios from 'axios'
+
+import k from '~/api'
 import PostList from './PostList'
 
+export const getPosts = async () => {
+  if (process.client) {
+    let posts = await axios.get(`${window.location.origin}/api/posts.json`)
+    return parsePosts(posts.data)
+  } else {
+    return parsePosts(k.getPosts())
+  }
+}
+
+export const parsePosts = posts =>
+  posts.map(post => ({
+    title: post.content.meta.title,
+    description: post.content.description,
+    route: post.route
+  }))
+
 export default PostList
diff --git a/components/Posts/PostList/parentMixin.js b/components/Posts/PostList/parentMixin.js
new file mode 100644
index 0000000..e5b06ed
--- /dev/null
+++ b/components/Posts/PostList/parentMixin.js
@@ -0,0 +1,9 @@
+import { getPosts } from './index'
+
+export default {
+  async asyncData() {
+    return {
+      posts: await getPosts()
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index dc75e41..3c259df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4150,7 +4150,7 @@
       "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
       "requires": {
         "follow-redirects": "1.5.10",
-        "is-buffer": "2.0.3"
+        "is-buffer": "2.0.4"
       },
       "dependencies": {
         "debug": {
@@ -4170,9 +4170,9 @@
           }
         },
         "is-buffer": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
         },
         "ms": {
           "version": "2.0.0",
diff --git a/package.json b/package.json
index d7925a2..6522e9d 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/pwa": "^3.0.0-0",
+    "axios": "^0.19.0",
     "esm": "^3.2.25",
     "front-matter": "^3.0.2",
     "jsdom": "^15.1.1",
diff --git a/pages/index.vue b/pages/index.vue
index 3a19237..045025d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
     <join-us />
     <div style="width: 100%; padding-top: 50px">
       <h1>Ostatnie wpisy z kroniki</h1>
-      <post-list :max="4" />
+      <post-list :posts="posts" :max="4" />
     </div>
     <facebook-feed />
   </div>
@@ -13,9 +13,11 @@
 import JoinUs from '~/components/JoinUs.vue'
 import FacebookFeed from '~/components/Facebook/FacebookFeed.vue'
 import PostList from '~/components/Posts/PostList'
+import postListParentMixin from '~/components/Posts/PostList/parentMixin'
 
 export default {
   name: 'HomeView',
-  components: { JoinUs, FacebookFeed, PostList }
+  components: { JoinUs, FacebookFeed, PostList },
+  mixins: [postListParentMixin]
 }
 </script>
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index 86344c3..8142a6c 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,16 +1,18 @@
 <template>
   <div style="padding-top: 20px">
     <h2>Ostatnie wpisy</h2>
-    <post-list />
+    <post-list :posts="posts" />
   </div>
 </template>
 
 <script>
 import PostList from '~/components/Posts/PostList'
+import postListParentMixin from '~/components/Posts/PostList/parentMixin'
 
 export default {
   components: {
     PostList
-  }
+  },
+  mixins: [postListParentMixin]
 }
 </script>
-- 
cgit 1.4.1


From e84e4a2eb8985b517b706d1735a744b4e9b81518 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Thu, 5 Dec 2019 18:14:53 +0100
Subject: Fix article title on mobile

---
 pages/kronika/_year/_month/_day/_title/index.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'pages/kronika')

diff --git a/pages/kronika/_year/_month/_day/_title/index.vue b/pages/kronika/_year/_month/_day/_title/index.vue
index dafa237..9fab1d0 100644
--- a/pages/kronika/_year/_month/_day/_title/index.vue
+++ b/pages/kronika/_year/_month/_day/_title/index.vue
@@ -71,6 +71,12 @@ export default {
   width: 100%;
   border-radius: 5px;
 }
+
+.article h1 {
+  font-size: 1.5em;
+  letter-spacing: 0;
+}
+
 @media (max-width: 720px) {
   .article {
     padding: 60px 20px;
@@ -78,5 +84,9 @@ export default {
   .article p {
     text-align: justify;
   }
+  .article h1 {
+    font-size: 1.7em;
+    font-weight: 700;
+  }
 }
 </style>
-- 
cgit 1.4.1