Skip to content

Commit 1ca0d7c

Browse files
larsenworklarsenwork
committed
WIP
1 parent d7600ce commit 1ca0d7c

File tree

13 files changed

+266
-90
lines changed

13 files changed

+266
-90
lines changed

‎assets/css/_base.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ select {
7070
color: var(--color-themed-bg);
7171
background-color: var(--color-themed-fg);
7272
text-shadow: none;
73+
opacity: 1;
7374
}
7475

7576
:focus {

‎assets/css/_slideshow.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.eg-slide {
2+
width: calc(100% - var(--spacer-small) * 2);
3+
height: calc(100% - var(--spacer-small) * 2);
4+
position: absolute;
5+
top: 50%;
6+
left: 50%;
7+
transform: translate(-50%, -50%);
8+
}
9+
10+
.eg-slide-content {
11+
width: 100%;
12+
height: 100%;
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: center;
16+
17+
& .eg-iframe {
18+
width: 100%;
19+
height: 100%;
20+
border-radius: var(--spacer-xsmall);
21+
overflow: hidden;
22+
}
23+
24+
& iframe {
25+
width: 100%;
26+
height: 100%;
27+
}
28+
}

‎assets/css/_typography.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,18 @@ h2 {
3939
display: inline-block;
4040
padding-right: calc(var(--lineHeight-margin-xsmall) / 2);
4141
padding-left: calc(var(--lineHeight-margin-xsmall) / 2);
42+
43+
@nest .c-presentation & {
44+
color: var(--color-themed-fg);
45+
background-color: unset;
46+
padding: 0;
47+
line-height: 0.9;
48+
letter-spacing: 0;
49+
50+
&:only-child {
51+
margin-bottom: 0;
52+
}
53+
}
4254
}
4355

4456
h1 {
@@ -149,4 +161,9 @@ code {
149161
transform: translateY(-50%);
150162
z-index: 1;
151163
user-select: none;
164+
165+
@nest .c-presentation & {
166+
color: var(--color-themed-fg);
167+
transform: translateY(-53%);
168+
}
152169
}

‎assets/css/_utilities.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676

7777
.u-aspect--1-1 {
7878
&::before {
79-
padding-top: 100%;
79+
padding-top: 10%;
8080
}
8181
}
8282

‎assets/css/main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@
55
@import './_typography.css';
66
@import './_utilities.css';
77
@import './_transitions.css';
8+
@import './_slideshow.css';

‎components/slides/linear-to-easing.vue

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<div
3+
v-if="active"
4+
class="eg-slide"
5+
>
6+
<div class="eg-slide-content eg-slide-linearToEasing">
7+
<div class="u-position-relative">
8+
<div
9+
class="u-aspect--1-1"
10+
>
11+
<svg
12+
class="u-position-cover"
13+
viewBox="0 0 1 1"
14+
preserveAspectRatio="none"
15+
>
16+
<path
17+
class="eg-slide-linearToEasing-path"
18+
d="M0,1 L1,1"
19+
/>
20+
</svg>
21+
</div>
22+
</div>
23+
<div class="u-position-relative">
24+
<div
25+
class="u-aspect--1-1"
26+
>
27+
<easing-preview/>
28+
<easing-edit v-if="step >3" :show-grid="false"/>
29+
</div>
30+
</div>
31+
<div class="u-position-relative">
32+
<div
33+
class="u-aspect--1-1"
34+
>
35+
<svg
36+
class="u-position-cover"
37+
viewBox="0 0 1 1"
38+
preserveAspectRatio="none"
39+
>
40+
<path
41+
class="eg-slide-linearToEasing-path"
42+
d="M0,0 L1,0"
43+
/>
44+
</svg>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</template>
50+
51+
<script>
52+
import eagle from 'eagle.js'
53+
import easingEdit from '~/components/tools/gradient/easing-edit'
54+
import easingPreview from '~/components/tools/gradient/easing-preview'
55+
56+
export default {
57+
components: {
58+
easingEdit,
59+
easingPreview,
60+
},
61+
mixins: [eagle.slide],
62+
props: {
63+
steps: { default: 5, type: Number },
64+
},
65+
}
66+
</script>
67+
68+
<style lang="postcss">
69+
.eg-slide-linearToEasing {
70+
display: grid;
71+
align-items: center;
72+
grid-template-columns: repeat(3, 1fr);
73+
overflow: hidden;
74+
75+
& * {
76+
overflow: visible;
77+
}
78+
}
79+
80+
.eg-slide-linearToEasing-path {
81+
fill: none;
82+
stroke-width: var(--stroke-medium);
83+
stroke-linecap: round;
84+
stroke: currentColor;
85+
vector-effect: non-scaling-stroke;
86+
}
87+
</style>

‎components/tools/gradient/easing-edit.vue

Lines changed: 57 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,61 @@
77
<svg
88
class="c-easingEdit-lines u-position-cover"
99
viewBox="0 0 1 1"
10+
preserveAspectRatio="none"
1011
>
11-
<line
12-
class="c-easingEdit-thinLine"
13-
x1=".25"
14-
y1="0"
15-
x2=".25"
16-
y2="1"
17-
/>
18-
<line
19-
class="c-easingEdit-thinLine"
20-
x1=".5"
21-
y1="0"
22-
x2=".5"
23-
y2="1"
24-
/>
25-
<line
26-
class="c-easingEdit-thinLine"
27-
x1=".75"
28-
y1="0"
29-
x2=".75"
30-
y2="1"
31-
/>
32-
<line
33-
class="c-easingEdit-thinLine"
34-
x1="0"
35-
y1=".25"
36-
x2="1"
37-
y2=".25"
38-
/>
39-
<line
40-
class="c-easingEdit-thinLine"
41-
x1="0"
42-
y1=".5"
43-
x2="1"
44-
y2=".5"
45-
/>
46-
<line
47-
class="c-easingEdit-thinLine"
48-
x1="0"
49-
y1=".75"
50-
x2="1"
51-
y2=".75"
52-
/>
53-
<rect
54-
class="c-easingEdit-helpLine"
55-
x="0"
56-
y="0"
57-
width="1"
58-
height="1"
59-
/>
12+
<g
13+
v-if="showGrid"
14+
>
15+
<line
16+
class="c-easingEdit-thinLine"
17+
x1=".25"
18+
y1="0"
19+
x2=".25"
20+
y2="1"
21+
/>
22+
<line
23+
class="c-easingEdit-thinLine"
24+
x1=".5"
25+
y1="0"
26+
x2=".5"
27+
y2="1"
28+
/>
29+
<line
30+
class="c-easingEdit-thinLine"
31+
x1=".75"
32+
y1="0"
33+
x2=".75"
34+
y2="1"
35+
/>
36+
<line
37+
class="c-easingEdit-thinLine"
38+
x1="0"
39+
y1=".25"
40+
x2="1"
41+
y2=".25"
42+
/>
43+
<line
44+
class="c-easingEdit-thinLine"
45+
x1="0"
46+
y1=".5"
47+
x2="1"
48+
y2=".5"
49+
/>
50+
<line
51+
class="c-easingEdit-thinLine"
52+
x1="0"
53+
y1=".75"
54+
x2="1"
55+
y2=".75"
56+
/>
57+
<rect
58+
class="c-easingEdit-helpLine"
59+
x="0"
60+
y="0"
61+
width="1"
62+
height="1"
63+
/>
64+
</g>
6065
<line
6166
:x2="$store.state.gradient.ease1.x"
6267
:y2="1 - $store.state.gradient.ease1.y"
@@ -92,6 +97,9 @@ import mouse from '~/components/mixins/mouse'
9297
9398
export default {
9499
mixins: [mouse],
100+
props: {
101+
showGrid: { default: true, type: Boolean },
102+
},
95103
}
96104
</script>
97105

‎components/tools/gradient/easing-preview.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<div>
33
<svg
44
class="c-easingPreview u-position-cover"
5-
viewBox="0 0 1 1">
5+
viewBox="0 0 1 1"
6+
preserveAspectRatio="none"
7+
>
68
<polyline
79
v-if="$store.state.gradient.settings.easingFunction === 'steps'"
810
:points="polyline"

‎nuxt.config.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,9 +115,7 @@ module.exports = {
115115
require('postcss-import')(),
116116
require('postcss-custom-media')(),
117117
require('postcss-nesting')(),
118-
require('postcss-easing-gradients')({
119-
colorMode: 'lab',
120-
}),
118+
require('postcss-easing-gradients')(),
121119
require('autoprefixer'),
122120
],
123121

‎pages/talks.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,34 @@
1010
class="p-index-section u-lineLength u-container u-section"
1111
>
1212
<h1>Talks</h1>
13+
<ul>
14+
<li
15+
v-for="talk of talks"
16+
:key="talk"
17+
>
18+
<nuxt-link
19+
:to="`/${$route.path}/${talk}`"
20+
class="c-navigation-link"
21+
>
22+
{{ talk }}
23+
</nuxt-link>
24+
</li>
25+
</ul>
1326
</section>
1427
</div>
1528
</template>
1629

1730
<script>
1831
export default {
32+
computed: {
33+
talks() {
34+
const files = require.context('./talks', true, /\.vue$/)
35+
const filenames = files
36+
.keys()
37+
.map(name => name.replace('./', '').replace('.vue', ''))
38+
return filenames
39+
},
40+
},
1941
mounted: function() {
2042
this.$store.state.presentation.isLive =
2143
this.$route.path.split('/').length > 2

0 commit comments

Comments
 (0)