Skip to content

Commit 8f36ab1

Browse files
sandochesandoche
committed
🚧 Importing code from Undesign, and scripts and third party services removed
1 parent 0b3bec0 commit 8f36ab1

21 files changed

+2003
-168
lines changed

‎.eslintrc.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ module.exports = {
22
root: true,
33
env: {
44
browser: true,
5-
node: true,
5+
node: true
66
},
77
parserOptions: {
8-
parser: 'babel-eslint',
8+
parser: 'babel-eslint'
99
},
1010
extends: [
1111
'@nuxtjs',
1212
'prettier',
1313
'prettier/vue',
1414
'plugin:prettier/recommended',
15-
'plugin:nuxt/recommended',
15+
'plugin:nuxt/recommended'
1616
],
1717
plugins: ['prettier'],
1818
// add your custom rules here
19-
rules: {},
19+
rules: {}
2020
}

‎.prettierrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"semi": false,
3-
"singleQuote": true
3+
"singleQuote": true,
4+
"trailingComma": "none"
45
}

‎assets/style/_mixins.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* stylelint-disable */
2+
@mixin container($padding) {
3+
max-width: $container-width;
4+
padding: 0 $padding;
5+
margin: auto;
6+
}
7+
/* stylelint-enable */

‎assets/style/_variables.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
:root {
2+
--font-xl: 28px;
3+
--font-lg: 24px;
4+
--font-md: 20px;
5+
--font-sm: 16px;
6+
--font-xs: 14px;
7+
--font-xxs: 12px;
8+
9+
@media (max-width: 768px) {
10+
--font-xl: 26px;
11+
--font-lg: 20px;
12+
--font-md: 18px;
13+
--font-sm: 14px;
14+
--font-xs: 14px;
15+
--font-xxs: 12px;
16+
}
17+
}
18+
19+
// Variables
20+
21+
$container-width: 1200px;
22+
$container-padding: 30px;
23+
24+
$primary-color: #5a51fe;
25+
$secondary-color: #8751fe;
26+
$text-color: #222;
27+
$link-color: $primary-color;
28+
$background-color: #f6f8fa;
29+
$grey-color: #908f9e;
30+
$medium-grey-color: lighten($grey-color, 30);
31+
$light-grey-color: #f6f8fa;
32+
33+
$font-xl: var(--font-xl);
34+
$font-lg: var(--font-lg);
35+
$font-md: var(--font-md);
36+
$font-sm: var(--font-sm);
37+
$font-xs: var(--font-xs);
38+
$font-xxs: var(--font-xxs);
39+
40+
$system-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell",
41+
"Helvetica Neue", sans-serif;
42+
$primary-font-family: $system-font-family;
43+
$secondary-font-family: "Roboto Mono", monospace;

‎assets/style/main.scss

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import "normalize.css";
2+
@import "variables";
3+
@import "mixins";
4+
5+
body {
6+
font-family: $primary-font-family;
7+
color: $text-color;
8+
font-size: $font-sm;
9+
}
10+
11+
h1,
12+
h2,
13+
h3,
14+
h4,
15+
h5,
16+
h6 {
17+
font-family: $secondary-font-family;
18+
}
19+
20+
.container {
21+
/* stylelint-disable */
22+
@include container($container-padding);
23+
/* stylelint-enable */
24+
25+
box-sizing: border-box;
26+
}
27+
28+
.section-title {
29+
color: $primary-color;
30+
text-align: center;
31+
}
32+
33+
.section-description {
34+
text-align: center;
35+
font-size: $font-sm;
36+
color: $grey-color;
37+
font-weight: 400;
38+
max-width: 600px;
39+
margin: auto;
40+
margin-bottom: 32px;
41+
}
42+
43+
.hr {
44+
border: 0;
45+
margin: 0;
46+
width: 100%;
47+
height: 1px;
48+
background: $medium-grey-color;
49+
}
50+
51+
.button {
52+
background: linear-gradient(65deg, $primary-color 0, $secondary-color 100%);
53+
font-family: $secondary-font-family;
54+
color: #fff;
55+
display: inline-flex;
56+
font-size: $font-xxs;
57+
letter-spacing: 0;
58+
font-weight: 700;
59+
line-height: 16px;
60+
text-transform: uppercase;
61+
text-decoration: none !important;
62+
border: none;
63+
border-radius: 2px;
64+
cursor: pointer;
65+
justify-content: center;
66+
padding: 16px 32px;
67+
text-align: center;
68+
white-space: nowrap;
69+
box-shadow: 0 8px 24px rgba(32, 43, 54, 0.12);
70+
transition: all 0.15s ease;
71+
72+
&:hover {
73+
color: #fff;
74+
box-shadow: 0 8px 24px rgba(32, 43, 54, 0.25);
75+
}
76+
}
77+
78+
a {
79+
color: $primary-color;
80+
}

‎commitlint.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
extends: ['@commitlint/config-conventional'],
2+
extends: ['@commitlint/config-conventional']
33
}

‎components/CategoryItem.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<nuxt-link :to="`/${slug}/`" class="category-item">
3+
<p class="icon">
4+
{{ icon }}
5+
</p>
6+
<p class="name">
7+
{{ name }}
8+
</p>
9+
</nuxt-link>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: 'CategoryItem',
15+
props: {
16+
name: {
17+
type: String,
18+
required: true
19+
},
20+
slug: {
21+
type: String,
22+
required: true
23+
},
24+
icon: {
25+
type: String,
26+
default: ''
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<style lang="scss" scoped>
33+
@import '../assets/style/variables';
34+
35+
.category-item {
36+
display: flex;
37+
background-color: #fff;
38+
padding: 42px 16px;
39+
text-align: center;
40+
text-decoration: none;
41+
border-radius: 3px;
42+
border: 1px solid $medium-grey-color;
43+
box-shadow: 0 4px 24px rgba(32, 43, 54, 0.08);
44+
color: $text-color;
45+
transform: translateX(0) translateY(0) translateZ(0);
46+
transition: all 0.4s ease;
47+
flex-direction: column;
48+
align-items: center;
49+
justify-content: center;
50+
51+
&:hover {
52+
transform: translateX(0) translateY(-8px) translateZ(0);
53+
box-shadow: 0 8px 24px rgba(32, 43, 54, 0.12);
54+
}
55+
}
56+
57+
.icon {
58+
font-size: $font-xl;
59+
margin: 0;
60+
}
61+
62+
.name {
63+
font-size: $font-sm;
64+
margin-bottom: 0;
65+
font-family: $secondary-font-family;
66+
}
67+
</style>

‎components/Logo.vue

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎components/ResourceItem.vue

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<a :href="url" target="_blank" class="resource-item">
3+
<img v-if="icon" :src="icon" alt="" class="icon" />
4+
<div v-if="!icon" class="icon icon--placeholder">
5+
{{ name | firstLetter }}
6+
</div>
7+
<div class="text">
8+
<h3 class="title">
9+
{{ name }}
10+
</h3>
11+
<p class="description">
12+
{{ description }}
13+
</p>
14+
</div>
15+
</a>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: 'ResourceItem',
21+
filters: {
22+
firstLetter(value) {
23+
if (!value) return ''
24+
value = value.toString()
25+
return value.charAt(0)
26+
}
27+
},
28+
props: {
29+
url: {
30+
type: String,
31+
required: true
32+
},
33+
name: {
34+
type: String,
35+
required: true
36+
},
37+
description: {
38+
type: String,
39+
default: ''
40+
},
41+
icon: {
42+
type: String,
43+
default: ''
44+
}
45+
}
46+
}
47+
</script>
48+
49+
<style lang="scss" scoped>
50+
@import '../assets/style/variables';
51+
52+
.resource-item {
53+
display: flex;
54+
text-decoration: none;
55+
padding: 16px 0;
56+
border-bottom: 1px solid $medium-grey-color;
57+
transform: translateX(0) translateY(0) translateZ(0);
58+
transition: all 0.4s ease;
59+
align-items: center;
60+
61+
&:hover {
62+
transform: translateX(5px) translateY(0) translateZ(0);
63+
}
64+
65+
&:last-of-type {
66+
border: none;
67+
}
68+
}
69+
70+
.title {
71+
margin-top: 4px;
72+
margin-bottom: 8px;
73+
color: $text-color;
74+
font-family: $primary-font-family;
75+
}
76+
77+
.description {
78+
margin-top: 0;
79+
margin-bottom: 8px;
80+
color: $grey-color;
81+
}
82+
83+
.icon {
84+
height: 64px;
85+
width: 64px;
86+
min-height: 64px;
87+
min-width: 64px;
88+
object-fit: contain;
89+
margin-right: 16px;
90+
background-color: $light-grey-color;
91+
border-radius: 3px;
92+
padding: 16px;
93+
box-sizing: border-box;
94+
95+
@media (max-width: 720px) {
96+
height: 32px;
97+
width: 32px;
98+
min-height: 32px;
99+
min-width: 32px;
100+
padding: 4px;
101+
}
102+
103+
&--placeholder {
104+
display: flex;
105+
align-items: center;
106+
justify-content: center;
107+
color: $grey-color;
108+
font-weight: 900;
109+
}
110+
}
111+
</style>

0 commit comments

Comments
 (0)