Merge pull request #3 from 19pdh/kronika

Kronika

3 files changed, 83 insertions, 6 deletions

diff --git a/components/ChroniclePost.vue b/components/ChroniclePost.vue
new file mode 100644
index 0000000..7b2c527
--- /dev/null
+++ b/components/ChroniclePost.vue
@@ -0,0 +1,60 @@
+<template>
+  <a :href="route" class="post">
+    <div>
+      <h4 class="post-title">{{title}}</h4>
+      <p class="post-description">{{shortenedDescription}}...</p>
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'ChroniclePost',
+  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 {
+  margin: 20px;
+  flex-basis: 410px;
+  text-decoration: none;
+}
+
+.post > div {
+  background: #ffffff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  padding: 20px;
+
+  text-align: left;
+}
+
+.post-title {
+  color: #181818;
+  font-size: 1.3em;
+}
+
+.post-description {
+  color: #484848;
+  font-size: 0.9em;
+}
+</style>
\ No newline at end of file
diff --git a/components/NavBar.vue b/components/NavBar.vue
index e564fb0..4bbae72 100644
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -8,14 +8,21 @@
     <button @click="toggleMenu" class="menu-toggler">Menu</button>
     <ul :class="linksClass" @click="toggleMenu">
       <!-- Loop for generating links -->
-      <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name"></NavLink>
+      <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" />
+      <NavLink
+        v-for="route in staticRoutes"
+        :key="route.path"
+        :link="route.path"
+        :name="route.name"
+        pure
+      />
       <NavLink
         v-for="route in externalRoutes"
         :key="route.path"
         :link="route.path"
         :name="route.name"
-        :external="true"
-      ></NavLink>
+        external
+      />
     </ul>
   </nav>
 </template>
@@ -30,6 +37,7 @@ export default {
   props: {
     routes: Array,
     externalRoutes: Array,
+    staticRoutes: Array,
     title: String,
     logo: String
   },
@@ -161,10 +169,10 @@ export default {
     display: flex !important;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
 
     margin-bottom: 0;
-    padding: 50px 0;
+    padding: 50px 10px;
 
     width: 100%;
     left: 0;
diff --git a/components/NavLink.vue b/components/NavLink.vue
index 253dde9..bb86ef8 100644
--- a/components/NavLink.vue
+++ b/components/NavLink.vue
@@ -1,6 +1,7 @@
 <template>
   <li class="navlink">
     <a v-if="external" class="link" target="_blank" rel="”noopener”" :href="link">{{ name }}</a>
+    <a v-else-if="pure" class="link" :href="link">{{ name }}</a>
     <nuxt-link v-else class="link" :to="link">{{ name }}</nuxt-link>
   </li>
 </template>
@@ -10,7 +11,8 @@ export default {
   props: {
     link: String,
     name: String,
-    external: { type: Boolean, default: false }
+    external: { type: Boolean, default: false },
+    pure: { type: Boolean, default: false }
   }
 }
 </script>
@@ -22,6 +24,7 @@ export default {
   font-family: 'Roboto Slab', serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-weight: bold;
 
   text-decoration: none;
   color: #181818;
@@ -45,6 +48,12 @@ export default {
   background-color: #ececec !important;
 }
 
+@media (min-width: 900px) {
+  .link {
+    font-weight: normal;
+  }
+}
+
 @media (max-width: 1300px) {
   .navlink {
     margin: 0;