Add to page

2 files changed, 66 insertions, 10 deletions

diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue
index 729c03d..96e3fbb 100644
--- a/components/GoogleDriveLink.vue
+++ b/components/GoogleDriveLink.vue
@@ -3,9 +3,11 @@
     <div class="image">
       <img src="/assets/google-drive.png" alt="Drive" />
     </div>
-    <p>
-      {{ text }}
-    </p>
+    <div class="text">
+      <p>
+        {{ text }}
+      </p>
+    </div>
     <a :href="link">
       <plain-button text="Przejdź" />
     </a>
@@ -31,30 +33,77 @@ export default {
 }
 </script>
 
-<style scoped>

+<style scoped>
 .google-drive-link {
   background: white;
   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
 
   padding: 20px;
+  margin: 10px;
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  min-width: 200px;
+  min-width: 400px;
+}
+
+.google-drive-link .text {
+  margin: 30px 0;
+}
+
+.google-drive-link button,
+.google-drive-link a {
+  width: 100%;
+  display: block;
+  margin: auto;
+  text-decoration: none;
+  max-width: 300px;
 }
 
 .google-drive-link img {
   display: block;
   margin: auto;
+  width: 40px;
 }
 
 .google-drive-link .image {
   background: #f3f3f3;
   border-radius: 50px;
-  padding: 20px;
-  margin: 20%;
+  padding: 15px;
+  margin: 0 20%;
+}
+
+@media (min-width: 480px) {
+  .google-drive-link {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .google-drive-link .text {
+    margin: 0 10px;
+    flex: 1;
+    text-align: left;
+  }
+
+  .google-drive-link .image {
+    margin: 0;
+    margin-right: 10px;
+    padding: 10px;
+  }
+
+  .google-drive-link img {
+    width: 30px;
+  }
+
+  .google-drive-link a,
+  .google-drive-link button {
+    margin-right: 0;
+  }
+
+  .google-drive-link a {
+    width: 20%;
+  }
 }
-</style>

+</style>
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index 8142a6c..dab61ba 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,17 +1,24 @@
 <template>
-  <div style="padding-top: 20px">
+  <div style="padding-top: 20px; max-width: 900px">
     <h2>Ostatnie wpisy</h2>
     <post-list :posts="posts" />
+    <google-drive-link
+      text="Zobacz również e-książkę rozkazów"
+      link="https://drive.google.com/drive/folders/1LWH4yYXpaa8kapBa2UAZTKnAAgXOHQYo?usp=sharing"
+      style="margin: 60px 10px"
+    />
   </div>
 </template>
 
 <script>
 import PostList from '~/components/Posts/PostList'
 import postListParentMixin from '~/components/Posts/PostList/parentMixin'
+import GoogleDriveLink from '~/components/GoogleDriveLink'
 
 export default {
   components: {
-    PostList
+    PostList,
+    GoogleDriveLink
   },
   mixins: [postListParentMixin]
 }