From e2d8f8ff05b2eb3940f06bc4ecae06e1d37c2f78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Weller?= <info@lost.design>
Date: Sun, 12 May 2019 00:53:44 +0200
Subject: [PATCH] update

---
 assets/icons-1.png         | Bin 0 -> 1521 bytes
 components/Card.vue        |  36 ++++++++++++++++
 components/Logo.vue        |  83 +++++--------------------------------
 components/Search.vue      |  17 ++++++++
 components/Sidebar.vue     |  25 +++++++++++
 layouts/default.vue        |  82 ++++++++++++++++++++++--------------
 pages/css/index.vue        |  38 ++++++++++++++++-
 pages/design/index.vue     |  39 +++++++++++++++++
 pages/html/index.vue       |  33 ++++++++++++++-
 pages/index.vue            |  20 +++------
 pages/javascript/index.vue |  33 ++++++++++++++-
 11 files changed, 281 insertions(+), 125 deletions(-)
 create mode 100644 assets/icons-1.png
 create mode 100644 components/Card.vue
 create mode 100644 components/Search.vue
 create mode 100644 components/Sidebar.vue
 create mode 100644 pages/design/index.vue

diff --git a/assets/icons-1.png b/assets/icons-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..228da2e1b6b5fe37c802cf02ab7b0dc8ce0eef90
GIT binary patch
literal 1521
zcmV<N1rGX&P)<h;3K|Lk000e1NJLTq001Tc001Tk1^@s6s6FYf00001b5ch_0Itp)
z=>Px)t4TybR9Fe6S5HhFRT%%??#%46(50ndyMQ!AU4g_ZNqh3(&7Mp=C`pa6V2l)-
zUNo%-Jv9D1^kng%Jy^9zG$sTO(u81R>IG~qZD>>e|7j^K5Lnn{|IYLK-Z0C|?94DM
zUo!LF``+(;?>BFL-<vlKJlI#9pZ&Z$_Pr}KTy{(J$G2W}!$lr1b}d|f=?6Cq_4#%K
ze9ieO#B{sj6lnquRkVtW>Mq8)+8z1yKE-r3S7P6A9#sK)FoNtDg+UUI9;EJ&xTsD(
z2V;!MTvdCjKmIT301<9SVwX4%BdI<H5OxayM-JTq#-1x+s7^i?V+_Kw#QLhvk2%J+
zC3cl_S<+U@^{Ie#6_AQGMLu0~js#gWP?qe04~K2vhApurfbTG#yAE_+IZaHO+eL5q
z&QBewRA{auD<Vc2h_A1+2x)Yfb!F@^)<Z&jE_x%dk3nbT;=QxRfx>Tec*;N;VAYi|
zh_UWLZv?l?)WV8+%0P<Zq$}#PGY@*R%Tz(ka|Z6FD?4K3^Po3trb?87G0Z?rjc7w&
zg{B;C5@-)4AI$oFkQFVw+3AXsy$r7dc+oCKMmyMsp(G#m(*8ELOuYiBV(ir6N=QVi
z1)zLk8G<Y8dZxa?epJ<88*}Pg^+-w)keyowtMeG(0g^oTM}8Q>(uo2I#~o;Ayr{+T
zu9J=DhO2K+ok-MHL#iqaT=JX1ESHDiY8(Qwwcn(lRv_>uE>|_OQZOBjmf`@nG3d24
zdNau?h@pe%`*D|Z`4|{uKpNM4BL@(}$6U))B_BP6Y_J7*Wd(qR7{|rQuC4-%PX-t~
z;UVBK6lT!!x}w7S0qs>@OZ(tP#s_iYLiQwm6aI<6rZu+jHTXmakz@^$rIKt-CqZRF
z2%<}xo4-|d@1EF@xgtZZu>ms2TST8SG78evEG|H1bW=&6)YfQ$w}1*mh|rZHz^0oD
zv+#TDS@c=f)r4|u@X+ARRsUA<uoH*_PeM*QxjFFesJ2~1*eI^rIi~@_?}G-2C?l>I
zx6Vvv#EldU#h24Xq^Mrl$Dp45jBD`=IUViA5J|Zt3rtRLx(!59R}%g0*LBPeG0pQ4
z7J{)3FqPGE6F!PrI3|E&BP&l&zwFoxd}wnyb-~zgCRWRmIPu#Epai$G8aNhkJ<`|>
zVu|EkrsgpXZH)7^EaPqPZ>Q;j&BSQjZhC7fw~6lVk|!p$RJVgM)}H#aW7^tPOpFk2
zdJFkmL1M0YF-^jGLY|*%HTkw1q^phoGre|w_QW)#z1|q^tj`DU+6A-ovGsLI{i4Gl
z=P+p1m2tc?F*m)v5VF^cG4ggjFg9L<<(x0_ynNcKE8}oyVuW(iTflc5f(*a?yO^rZ
z`j=u&Mig$MD*hv!P7J)WX!Kj_?!*XfuQvwG<qxdEtZgJUhbL6?mx8k|H~Y^FTCvvl
z?!>ea#d>Q99<>Iuww3YmV@99Q)s3kyj6SEjH)3{rlUWpxK~qkFA)6bM;_-UDzo09)
z<h*t0U@W~6qXBk$Ybl#G#4=T-r%#u32a?Kq(Up#;(mOFilioO7rK+&nU?Y~e9Tgc@
z#wQA*=gfD}i>{1O_C}0G*1>tCLPsQetOlr&ioUHZl^WGg63DtY(f{7J0>6jb-ia}m
z1wXVQxiv9QbH$2vK6z>;q51gqW?F5x_IqjXoft)puxZ=`+QkIV$j!KN#t(2-nVD%J
zUFCE5asI1AdjJ9Uek+X_#jj(%xN29hW;$`OMB+Z3BuH1ufe!7Jd*@R?mQIX9)WHRz
zw`eG@M^wfp75ufnUW%^t7*y_$n69^SsX?4L@FXEEJcf-xy3068DfRskqZvtW_}fV*
z4i?`SVOd`r^mRHNG)v*Q&oO^*edhn<&IkL9QW(DdGgxSsUKtHu&L4QCptaHiX(Rs!
XJU#jTlW-X>00000NkvXXu0mjfO8we=

literal 0
HcmV?d00001

diff --git a/components/Card.vue b/components/Card.vue
new file mode 100644
index 0000000..dbb9764
--- /dev/null
+++ b/components/Card.vue
@@ -0,0 +1,36 @@
+<template lang="pug">
+  .card
+    .card--title
+      p {{title}}
+    .card--body
+      p {{desc}}
+      a(:href="url") {{url}}
+</template>
+
+<script>
+export default {
+  props: ['title', 'desc', 'url']
+}
+</script>
+
+
+<style lang="scss" scoped>
+.card {
+  &--title {
+    font-weight: 900;
+    margin-bottom: .5rem;
+  }
+
+  &--body {
+    p {
+      font-size: 12px;
+      color: #8795A1;
+      margin-bottom: .5rem;
+    }
+    a {
+     font-size: 9px;
+     line-height: 1;
+    }
+  }
+}
+</style>
diff --git a/components/Logo.vue b/components/Logo.vue
index 6c72854..5ff1587 100644
--- a/components/Logo.vue
+++ b/components/Logo.vue
@@ -1,79 +1,16 @@
-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
+<template lang="pug">
+  nuxt-link(to="/").logo
+    img(src="~/assets/icons-1.png")
 </template>
 
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
 
-.Triangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
+<style lang="scss" scoped>
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-
-.Triangle--one {
-  border-left: 105px solid transparent;
-  border-right: 105px solid transparent;
-  border-bottom: 180px solid #41b883;
-}
-
-.Triangle--two {
-  top: 30px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 87.5px solid transparent;
-  border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3b8070;
-}
-
-.Triangle--three {
-  top: 60px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 70px solid transparent;
-  border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495e;
-}
-
-.Triangle--four {
-  top: 120px;
-  left: 70px;
-  animation: godown 0.5s linear forwards 3s;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes godown {
-  100% {
-    top: 180px;
-  }
-}
-
-@keyframes goright {
-  100% {
-    left: 70px;
-  }
+img {
+  padding: .2rem;
 }
 </style>
diff --git a/components/Search.vue b/components/Search.vue
new file mode 100644
index 0000000..be0d895
--- /dev/null
+++ b/components/Search.vue
@@ -0,0 +1,17 @@
+<template lang="pug">
+  input.search(placeholder="Search")
+</template>
+
+<style lang="scss">
+input {
+  width: 50%;
+  padding: .7rem 2rem .7rem 2rem;
+  border-radius: .5rem;
+  background: #eee;
+
+  &:focus {
+    outline:none;
+  }
+}
+
+</style>
diff --git a/components/Sidebar.vue b/components/Sidebar.vue
new file mode 100644
index 0000000..7ed1d2a
--- /dev/null
+++ b/components/Sidebar.vue
@@ -0,0 +1,25 @@
+<template lang="pug">
+  aside.sidebar
+    nuxt-link(to="/html") HTML
+    nuxt-link(to="/css") CSS
+    nuxt-link(to="/javascript") Javascript
+    nuxt-link(to="/design") Designs
+    nuxt-link(to="/devops") Devops
+    nuxt-link(to="/servers") Servers
+    nuxt-link(to="/communities") Communities
+</template>
+
+
+<style lang="scss" scoped>
+.sidebar {
+  padding-left: .5rem;
+  font-size: 14px;
+  margin: .5rem;
+
+  a {
+    display: block;
+    padding: 0 1rem 1rem 1rem;
+    text-decoration: none;
+  }
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index e197809..be67b0e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,12 +1,33 @@
-<template>
-  <div>
-    <nuxt />
-  </div>
+<template lang="pug">
+  .layout
+    Logo
+    Search
+    Sidebar
+    nuxt.content
 </template>
 
-<style>
+<script>
+import Logo from '../components/Logo'
+import Search from '../components/Search'
+import Sidebar from '../components/Sidebar'
+
+export default {
+  components: {
+    Logo,
+    Search,
+    Sidebar
+  }
+}
+</script>
+
+
+<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Poppins:400,900');
 
+body {
+  margin: 0;
+}
+
 html {
   font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -17,41 +38,38 @@ html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
+  color: #22292F;
 }
 
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
+a {
+  color: #3490DC;
   text-decoration: none;
-  padding: 10px 30px;
 }
 
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
+.layout {
+  display: grid;
+  grid-template-columns: 4vw 4vw 92vw;
+  grid-gap: 1rem;
+  margin-top: 1rem;
+  grid-template-areas:
+    'logo logo search'
+    '. . .'
+    'sidebar sidebar content';
 }
 
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
+.logo {
+  grid-area: logo;
 }
 
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
+.search {
+  grid-area: search;
+}
+
+.sidebar {
+  grid-area: sidebar;
+}
+
+.content {
+  grid-area: content;
 }
 </style>
diff --git a/pages/css/index.vue b/pages/css/index.vue
index dd9a55d..65390b2 100644
--- a/pages/css/index.vue
+++ b/pages/css/index.vue
@@ -1,10 +1,44 @@
 <template lang="pug">
-  h1 CSS resources
+  div
+    h1 CSS
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Flexbox froggy',
+          desc: 'A game to learn Flexbox',
+          url: 'https://flexboxfroggy.com'
+        },
+        {
+          title: 'CSS Gridgarden',
+          desc: 'A game to learn Grid',
+          url: 'https://cssgridgarden.com'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>
diff --git a/pages/design/index.vue b/pages/design/index.vue
new file mode 100644
index 0000000..d57fec9
--- /dev/null
+++ b/pages/design/index.vue
@@ -0,0 +1,39 @@
+<template lang="pug">
+  div
+    h1 Design
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
+</template>
+
+<script>
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Undraw',
+          desc: 'Free vector illustrations for your website.',
+          url: 'https://undraw.co'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
+</style>
diff --git a/pages/html/index.vue b/pages/html/index.vue
index e963f81..a3ad870 100644
--- a/pages/html/index.vue
+++ b/pages/html/index.vue
@@ -1,10 +1,39 @@
 <template lang="pug">
-  h1 HTML resources
+  div
+    h1 HTML
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'HTML ELEMENTS',
+          desc: 'All the HTML elemens you can use. There is more than just a div :)',
+          url: 'https://developer.mozilla.org/de/docs/Web/HTML/Element'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 9b6f4e0..d779abb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,21 +1,13 @@
 <template lang="pug">
-div(class="lg:flex lg:justify-center lg:content-center")
-  main.flex-col.max-w-md(class="lg:flex lg:justify-center lg:content-center")
-    h1.text-black.font-bold.text-xl.mb-2 What &nbsp;
+div
+  main
+    h1.text-black.font-bold.text-xl.mb-2 What is &nbsp;
       span.text-teal webgems 💎&nbsp;
-      | is you may ask?
-    p.text-grey-darker.text-base.mb-8
-      | As of now, it's a currated list of resources for developers and designers. If you want to suggest a resource, go ahead and contact me&nbsp;
+      | ?
+    p As of now, it's a currated list of resources for developers and designers.
+    p If you want to suggest a resource, go ahead and contact me&nbsp;
       a(href="https://twitter.com/lostdesign") @lostdesign
 
-    ul.list-reset.flex
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/html') HTML
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/css') CSS
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/javascript') Javascript
-
 </template>
 
 <script>
diff --git a/pages/javascript/index.vue b/pages/javascript/index.vue
index 00abba4..90bcbb4 100644
--- a/pages/javascript/index.vue
+++ b/pages/javascript/index.vue
@@ -1,10 +1,39 @@
 <template lang="pug">
-  h1 JS resources
+  div
+    h1 Javascript
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Javascript30',
+          desc: 'Free video courses about javascript. Made by WesBos',
+          url: 'https://javascript30.com'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>