Update style

* Add new default style to project

* Add new BaseButton component

* Remove link to stylesheet in index.html

* Add import for default style

* Update styles and structure for project components

src/App.vue

@@ -12,29 +12,12 @@
   font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-a {
-  text-decoration: none;
-}
-h2 {
-  font-size: 1.8em;
-  margin-bottom: 5px;
-}
-p {
-  font-size: 1.1em;
-  line-height: 1.4em;
-  padding-bottom: 10px;
-}
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 15px;
+  color: var(--text-color);
 }
 </style>
 
 <script>
-import SiteHeader from '@/components/SiteHeader.vue'
+import SiteHeader from './components/SiteHeader'
 
 export default {
   name: 'App',

src/components/BaseButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <button class="btn" :class="isReverse ? 'reverse' : ''">
+    <i v-if="hasIcon" :class="classIcon"></i>
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'BaseButton',
+  props: {
+    hasIcon: Boolean,
+    classIcon: String,
+    isReverse: Boolean
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$btn-color: black;
+$hover-btn-color: white;
+
+.btn {
+  padding: 10px 15px;
+  border: 1px solid #{$btn-color};
+  background-color: transparent;
+  color: $btn-color;
+  border-radius: 0;
+  &:hover {
+    background-color: $btn-color;
+    color: $hover-btn-color;
+  }
+}
+</style>

src/components/SiteHeader.vue

@@ -1,7 +1,8 @@
 <template>
   <header id="header">
     <router-link to="/">
-      <img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
+      <!-- <img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`"> -->
+      <h1 id="nav-text">KamilCraft</h1>
     </router-link>
     <nav id="navigation">
       <ul id="menu">
@@ -18,10 +19,15 @@
 #header {
   width: 250px;
   height: 100vh;
-  background-color: #4f4f4f !important;
+  background-color: #1893D7!important;
+  background-image: linear-gradient(to top,#005C93 25%,#2C395C);
+  #nav-text {
+    color: white;
+  }
   #nav-logo {
     display: block;
     width: 250px;
+    height: 67px;
     padding: 8px 0;
     background-color: #fafafa !important;
   }

src/components/sections/About.vue

@@ -1,11 +1,12 @@
 <template>
-  <section id="about">
+  <div class="about">
     <div class="container">
       <div id="grid">
         <div id="grid-text">
           <h2 class="name">Kamil Niemczycki</h2>
           <div class="tagline">Web Developer</div>
           <p>I'm a software engineer specialised in frontend and backend development for complex scalable web apps. I write about software development on my blog. Want to know how I may help your project? Check out my project portfolio and online resume.</p>
+          <base-btn class-icon="my-class" has-icon>Wyświetl portfolio</base-btn>
         </div>
         <div id="grid-photo">
           <figure id="about-photo">
@@ -14,13 +15,18 @@
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </template>
 
 <style lang="scss">
-section#about {
+.btn {
+  i.my-class:before {
+    content: 'XD ';
+  }
+}
+div.about {
   padding: 20px 0;
-  background-color: #fafafa !important;
+  background-color: var(--gray-color) !important;
   h2.name {
     font-size: 2.1em;
     margin-bottom: 5px;
@@ -62,11 +68,16 @@ section#about {
 }
 </style>
 <script>
+import BaseButton from '../BaseButton'
+
 export default {
   data () {
     return {
       publicPath: process.env.BASE_URL
     }
+  },
+  components: {
+    'base-btn': BaseButton
   }
 }
 </script>

src/components/sections/Experiences.vue

@@ -1,10 +1,10 @@
 <template>
-  <section id="experiences">
+  <div id="experiences">
     <div class="container">
       <h2>Moje doświadczenie</h2>
       <p>I have more than 10 years' experience building software for clients all over the world. Below is a quick overview of my main technical skill sets and technologies I use. Want to find out more about my experience? Check out my online resume and project portfolio.</p>
     </div>
-  </section>
+  </div>
 </template>
 
 <script>
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style lang="scss">
-  section#experiences {
-
+  div#experiences {
+    padding: 20px 0;
   }
 </style>

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 /* import 'bootstrap' */
 /* import 'bootstrap/scss/bootstrap.scss' */
+import '../scss/default.scss'
 
 Vue.config.productionTip = false
 

src/views/About.vue

@@ -16,3 +16,9 @@ section#about {
   background-color: #fafafa !important;
 }
 </style>
+
+<script>
+export default {
+  name: 'About'
+}
+</script>

src/views/Home.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="home">
+  <section class="home">
     <About />
     <Experiences />
-  </div>
+  </section>
 </template>
 
 <script>
-import About from '@/components/sections/About.vue'
-import Experiences from '@/components/sections/Experiences.vue'
+import About from '../components/sections/About'
+import Experiences from '../components/sections/Experiences'
 
 export default {
   name: 'Home',