diff --git a/components/BaseCheatsheet.vue b/components/BaseCheatsheet.vue
new file mode 100644
index 0000000..ce22c7b
--- /dev/null
+++ b/components/BaseCheatsheet.vue
@@ -0,0 +1,65 @@
+
+
+
+.c-base-cheatsheet
+ img(
+ :src="thumbnail"
+ class="c-base-cheatsheet__thumbnail"
+ )
+ .c-base-cheatsheet__content
+ span.c-base-cheatsheet__name The {{ name }} Cheatsheet
+
+
+
+
+
+
+
+
+
diff --git a/components/BaseDivider.vue b/components/BaseDivider.vue
index 4e41ef9..ac43d4f 100644
--- a/components/BaseDivider.vue
+++ b/components/BaseDivider.vue
@@ -36,11 +36,11 @@ $c: ".c-base-divider";
align-items: center;
#{$c}__category {
- font-size: 18px;
+ margin-right: 40px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
- margin-right: 40px;
+ font-size: 18px;
}
#{$c}__line {
diff --git a/layouts/default.vue b/layouts/default.vue
index cdc735e..def537b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -42,7 +42,7 @@ $c: ".l-default";
html {
overflow-y: scroll;
box-sizing: border-box;
- padding: 60px 0 100px;
+ padding: 60px 0 40px;
min-height: 100%;
background-color: #1b2431;
color: white;
@@ -96,8 +96,8 @@ html {
#{$c} {
#{$c}__copyright {
position: fixed;
- bottom: 0;
right: 0;
+ bottom: 0;
}
}
diff --git a/pages/index.vue b/pages/index.vue
index cd2db89..a60233c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,11 +15,20 @@
section(
v-for="(category, index) in categories"
+ :key="category.name"
class="c-index__category"
)
base-divider(
:category="'0' + (index + 1) + '. ' + category.name"
+ class="c-index__divider"
)
+ .c-index__cheatsheets
+ base-cheatsheet(
+ v-for="cheatsheet in category.cheatsheets"
+ :key="cheatsheet.name"
+ :name="cheatsheet.name"
+ :thumbnail="cheatsheet.thumbnail"
+ )