update
This commit is contained in:
André Weller
BIN
assets/icons-1.png
Normal file
BIN
assets/icons-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
36
components/Card.vue
Normal file
36
components/Card.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
17
components/Search.vue
Normal file
17
components/Search.vue
Normal file
@@ -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>
|
||||
25
components/Sidebar.vue
Normal file
25
components/Sidebar.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
39
pages/design/index.vue
Normal file
39
pages/design/index.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
div
|
||||
main
|
||||
h1.text-black.font-bold.text-xl.mb-2 What is
|
||||
span.text-teal webgems 💎
|
||||
| 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
|
||||
| ?
|
||||
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
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user