Skip to content

Commit af4b570

Browse files
larsenworklarsenwork
committed
Add some stuff
1 parent bcad30c commit af4b570

File tree

4 files changed

+230
-10
lines changed

4 files changed

+230
-10
lines changed

‎components/navigation.vue

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@
2323
>
2424
About
2525
</nuxt-link>
26-
<div
27-
class="c-navigation-link c-navigation-link--wip"
26+
<nuxt-link
27+
class="c-navigation-link"
28+
to="/projects"
29+
@click.native="hideNavigation"
2830
>
2931
Projects
30-
</div>
32+
</nuxt-link>
3133
</div>
3234
<div
3335
class="c-navigation-links-column"
@@ -58,11 +60,13 @@
5860
>
5961
Ramblings
6062
</h3>
61-
<div
62-
class="c-navigation-link c-navigation-link--wip"
63+
<nuxt-link
64+
class="c-navigation-link"
65+
to="/blog"
66+
@click.native="hideNavigation"
6367
>
6468
Blog
65-
</div>
69+
</nuxt-link>
6670
<nuxt-link
6771
class="c-navigation-link"
6872
to="/talks"

‎pages/blog.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div
3+
class="p-blog"
4+
>
5+
<section
6+
class="p-index-section u-lineLength u-container u-section"
7+
>
8+
<h1>Blog (WIP)</h1>
9+
10+
<!-- <ul>
11+
<li
12+
v-for="blog in blogs"
13+
:key="blog.title"
14+
>
15+
<nuxt-link
16+
:to="blog.link"
17+
class="p-blog-link"
18+
append
19+
>
20+
<div>
21+
{{ blog.title }}
22+
</div>
23+
<div
24+
class="p-blog-date"
25+
>
26+
{{ blog.date }}
27+
</div>
28+
<div
29+
class="p-blog-location"
30+
>
31+
{{ blog.location }}
32+
</div>
33+
</nuxt-link>
34+
</li>
35+
</ul> -->
36+
</section>
37+
</div>
38+
</template>
39+
40+
<script>
41+
export default {
42+
transition() {
43+
return {
44+
mode: '',
45+
}
46+
},
47+
data() {
48+
return {
49+
blogs: [
50+
{
51+
link: 'piter',
52+
title: 'Easing Gradients, the Squircle of Colors',
53+
location: 'PiterCSS, Saint Petersburg',
54+
date: '2018.06.10',
55+
},
56+
],
57+
}
58+
},
59+
}
60+
</script>
61+
62+
<style>
63+
.p-blog {
64+
/* Placeholder */
65+
}
66+
67+
.p-blog-link {
68+
color: var(--color-bright);
69+
text-decoration: none;
70+
display: flex;
71+
flex-wrap: wrap;
72+
justify-content: space-between;
73+
padding-top: var(--spacer-small);
74+
}
75+
.p-blog-date {
76+
margin-left: auto;
77+
padding-left: var(--spacer-small);
78+
}
79+
80+
.p-blog-location {
81+
text-align: right;
82+
flex-basis: 100%;
83+
flex-shrink: 0;
84+
}
85+
</style>

‎pages/projects.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div
3+
class="p-projects"
4+
>
5+
<section
6+
class="p-index-section u-lineLength u-container u-section"
7+
>
8+
<h1>Projects</h1>
9+
<ul>
10+
<li
11+
v-for="project in projects"
12+
:key="project.title"
13+
>
14+
<a
15+
:href="project.link"
16+
class="p-projects-link"
17+
>
18+
<div>
19+
{{ project.title }}
20+
</div>
21+
<div
22+
class="p-projects-description"
23+
>
24+
{{ project.description }}
25+
</div>
26+
</a>
27+
</li>
28+
</ul>
29+
</section>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
transition() {
36+
return {
37+
mode: '',
38+
}
39+
},
40+
data() {
41+
return {
42+
projects: [
43+
{
44+
title: 'Gidole',
45+
link: 'https://gidole.github.io/',
46+
description: 'DIN Interpretation',
47+
},
48+
{
49+
title: 'Monoid',
50+
link: 'https://larsenwork.com/monoid/',
51+
description: 'Developer Typeface',
52+
},
53+
{
54+
title: 'AnimalNoteHeads',
55+
link: 'https://animalnoteheads.com/',
56+
description: 'Sheet Music Learning (WIP)',
57+
},
58+
{
59+
title: 'MonoMusic',
60+
link: 'https://larsenwork.com/monomusic/',
61+
description: 'Font+Tool for Chords+Tabs',
62+
},
63+
],
64+
}
65+
},
66+
}
67+
</script>
68+
69+
<style>
70+
.p-projects {
71+
/* Placeholder */
72+
}
73+
.p-projects-link {
74+
color: var(--color-bright);
75+
text-decoration: none;
76+
display: flex;
77+
flex-wrap: wrap;
78+
justify-content: space-between;
79+
padding-top: var(--spacer-small);
80+
}
81+
.p-projects-description {
82+
margin-left: auto;
83+
padding-left: var(--spacer-small);
84+
}
85+
</style>

‎pages/talks/index.vue

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,28 @@
77
>
88
<h1>Talks</h1>
99
<ul>
10-
<li>
10+
<li
11+
v-for="talk in talks"
12+
:key="talk.title"
13+
>
1114
<nuxt-link
12-
to="piter"
13-
class="c-navigation-link"
15+
:to="talk.link"
16+
class="p-talks-link"
1417
append
1518
>
16-
Piter
19+
<div>
20+
{{ talk.title }}
21+
</div>
22+
<div
23+
class="p-talks-date"
24+
>
25+
{{ talk.date }}
26+
</div>
27+
<div
28+
class="p-talks-location"
29+
>
30+
{{ talk.location }}
31+
</div>
1732
</nuxt-link>
1833
</li>
1934
</ul>
@@ -28,11 +43,42 @@ export default {
2843
mode: '',
2944
}
3045
},
46+
data() {
47+
return {
48+
talks: [
49+
{
50+
link: 'piter',
51+
title: 'Easing Gradients, the Squircle of Colors',
52+
location: 'PiterCSS, Saint Petersburg',
53+
date: '2018.06.10',
54+
},
55+
],
56+
}
57+
},
3158
}
3259
</script>
3360

3461
<style>
3562
.p-talks {
3663
/* Placeholder */
3764
}
65+
66+
.p-talks-link {
67+
color: var(--color-bright);
68+
text-decoration: none;
69+
display: flex;
70+
flex-wrap: wrap;
71+
justify-content: space-between;
72+
padding-top: var(--spacer-small);
73+
}
74+
.p-talks-date {
75+
margin-left: auto;
76+
padding-left: var(--spacer-small);
77+
}
78+
79+
.p-talks-location {
80+
text-align: right;
81+
flex-basis: 100%;
82+
flex-shrink: 0;
83+
}
3884
</style>

0 commit comments

Comments
 (0)