Skip to content

Commit 4ca63be

Browse files
dromo77dromo77
authored
Add Speaking Listing prototype (#1425)
* Add speaking listing prototype * Highlight additonal events * Fix typo * Update json * Update color text styles * Add future events * Update future events json * Increase space between elements
1 parent f125b4f commit 4ca63be

File tree

5 files changed

+451
-0
lines changed

5 files changed

+451
-0
lines changed

‎src/prototypes/speaking-listing/data/future.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
[
2+
{
3+
"event": "An Event Apart",
4+
"location": "Nashville, TN",
5+
"speaker": "Jason",
6+
"date": "2020-03-14",
7+
"note": "3 day event"
8+
},
9+
{
10+
"event": "An Event Apart",
11+
"location": "Seattle, WA",
12+
"speaker": "Jason",
13+
"date": "2020-04-14",
14+
"note": "3 day event"
15+
},
16+
{
17+
"event": "Front End PDX",
18+
"location": "Portland, OR",
19+
"speaker": "Tyler",
20+
"date": "2020-04-12"
21+
},
22+
{
23+
"event": "Smashing Conference",
24+
"location": "New York, NY",
25+
"speaker": "Jason",
26+
"date": "2020-06-14",
27+
"note": "2 day event"
28+
},
29+
{
30+
"event": "Smashing Conference",
31+
"location": "Freiburg, Germany",
32+
"speaker": "Jason",
33+
"date": "2020-09-12",
34+
"note": "2 day event"
35+
}
36+
]

‎src/prototypes/speaking-listing/data/speaking.json‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
[
2+
{
3+
"title": "Designing Progressive Web Apps",
4+
"link": "https://cloudfour.com/presents/designing-progressive-web-apps/",
5+
"author": "Jason Grigsby",
6+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
7+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2018/10/background-black-blank-733857.jpg",
8+
"description": "Presented at Artifact Conference, Smashing Conference, An Event Apart"
9+
},
10+
{
11+
"title": "Web Forms: Now You See Them, Now You Don’t!",
12+
"link": "https://cloudfour.com/presents/web-forms-now-you-see-them-now-you-dont/",
13+
"author": "Jason Grigsby",
14+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
15+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2019/12/webforms-title-page.png",
16+
"description": "Presented at An Event Apart"
17+
},
18+
{
19+
"title": "What is Modular CSS",
20+
"link": "https://cloudfour.com/thinks/perfectly-broken-code/",
21+
"author": "Scott Vandehey",
22+
"avatar": "https://cloudfour.com/wp-content/uploads/2019/03/scott.png",
23+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2019/02/legos.png",
24+
"description": "Presented at pdxFLIT, Devsigner 2016"
25+
},
26+
{
27+
"title": "The Case for Progressive Web Apps",
28+
"link": "https://cloudfour.com/presents/why-you-should-build-a-progressive-web-app-now/",
29+
"author": "Jason Grigsby",
30+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
31+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/10/the-path-forward.jpg",
32+
"description": "Presented at An Event Apart, Portland Digital Summit, PADNU",
33+
"more": "+ 2 more"
34+
},
35+
{
36+
"title": "SVG: So Very Good",
37+
"link": "https://cloudfour.com/presents/svg-so-very-good/",
38+
"author": "Tyler Sticka",
39+
"avatar": "https://cloudfour.com/wp-content/uploads/2017/06/tyler-128x128-c-default.png",
40+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/08/svg-slide-1.png",
41+
"description": "Presented at Smashing Conference, Open Source Bridge, CascadiaFest",
42+
"more": "+ 1 more"
43+
},
44+
{
45+
"title": "Responsive images are here. Now what?",
46+
"link": "https://cloudfour.com/presents/responsive-images-are-here-now-what",
47+
"author": "Jason Grigsby",
48+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
49+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/responsive-images-here.jpg",
50+
"description": "Presented at Imagecon, An Event Apart, Responsive Day Out"
51+
},
52+
{
53+
"title": "Adapting to Input",
54+
"link": "https://cloudfour.com/presents/adapting-to-input/",
55+
"author": "Jason Grigsby",
56+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
57+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/adapting-to-input.jpg",
58+
"description": "Presented at An Event Apart, Smashing Conference"
59+
},
60+
{
61+
"title": "Being Responsive",
62+
"link": "https://cloudfour.com/presents/being-responsive/",
63+
"author": "Jason Grigsby",
64+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
65+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/being-responsive.jpg",
66+
"description": "Presented at Federal Reserve UX Summit, Gore UX Summit, Epic Systems",
67+
"more": "+ 1 more"
68+
},
69+
{
70+
"title": "The virtuoso generalist",
71+
"link": "https://cloudfour.com/presents/the-virtuoso-generalist/",
72+
"author": "Lyza Gardner",
73+
"avatar": "https://cloudfour.com/wp-content/uploads/2019/02/cloudfour-avatar-default-blue.png",
74+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/virtuoso-generalist.jpg",
75+
"description": "Presented at Responsive Day Out, Web Design Day"
76+
},
77+
{
78+
"title": "Adaptive Input",
79+
"link": "https://cloudfour.com/presents/adaptive-input/",
80+
"author": "Jason Grigsby",
81+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
82+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/adaptive-input.jpg",
83+
"description": "Presented at UX Mobile Immersion, Refresh PDX, Beyond the Desktop",
84+
"more": "+ 5 more"
85+
},
86+
{
87+
"title": "Mobile First Responsive Design",
88+
"link": "https://cloudfour.com/presents/mobile-first-responsive-design/",
89+
"author": "Jason Grigsby",
90+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
91+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/mobile-first.jpg",
92+
"description": "Presented at An Event Apart, User Experience Lisbon, Respond",
93+
"more": "+ 6 more"
94+
},
95+
{
96+
"title": "Side Projects That Ships",
97+
"link": "https://cloudfour.com/presents/side-projects-that-ship/",
98+
"author": "Tyler Sticka",
99+
"avatar": "https://cloudfour.com/wp-content/uploads/2017/06/tyler-128x128-c-default.png",
100+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/feature-image-side-projects-that-ship.png",
101+
"description": "Presented at Refresh Portland, WebVisions"
102+
},
103+
{
104+
"title": "The Immobile Web",
105+
"link": "https://cloudfour.com/presents/the-immobile-web/",
106+
"author": "Jason Grigsby",
107+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
108+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/immobile-web-16-9.jpg",
109+
"description": "Presented at An Event Apart, UX Mobile Immersion, Breaking Development",
110+
"more": "+ 2 more"
111+
},
112+
{
113+
"title": "PhoneGap Self Defense for Web Developers",
114+
"link": "https://cloudfour.com/presents/phonegap-self-defense-for-web-developers/",
115+
"author": "Lyza Gardner",
116+
"avatar": "https://cloudfour.com/wp-content/uploads/2019/02/cloudfour-avatar-default-blue.png",
117+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/joyleap.jpg",
118+
"description": "Presented at PhoneGap Day US"
119+
},
120+
{
121+
"title": "Mobile Media Panel",
122+
"link": "https://cloudfour.com/presents/mobile-media-images-video-audio-and-webrtc/",
123+
"author": "Jason Grigsby",
124+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
125+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/mobile-media.jpg",
126+
"description": "Presented at Google I/O"
127+
},
128+
{
129+
"title": "The Most Common Denominator",
130+
"link": "https://cloudfour.com/presents/the-most-common-denominator-supporting-more-sucking-less/",
131+
"author": "Lyza Gardner",
132+
"avatar": "https://cloudfour.com/wp-content/uploads/2019/02/cloudfour-avatar-default-blue.png",
133+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/common-denominator.jpg",
134+
"description": "Presented at Breaking Development"
135+
},
136+
{
137+
"title": "Casting Off Our Desktop Shackles",
138+
"link": "https://cloudfour.com/presents/casting-off-our-desktop-shackles/",
139+
"author": "Jason Grigsby",
140+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
141+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/desktop-shackles.jpg",
142+
"description": "Presented at WebVisions, Talk at HP, BeerMob",
143+
"more": "+ 2 more"
144+
},
145+
{
146+
"title": "The Essence of Content of the Future Web",
147+
"link": "https://cloudfour.com/presents/performance-implications-of-responsive-design/",
148+
"author": "Jason Grigsby",
149+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
150+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/performance-responsive.jpg",
151+
"description": "Presented at Velocity"
152+
},
153+
{
154+
"title": "Responsive Design Performance",
155+
"link": "https://cloudfour.com/presents/cutting-through-the-crap-the-essence-of-content-on-the-future-web/",
156+
"author": "Lyza Gardner",
157+
"avatar": "https://cloudfour.com/wp-content/uploads/2019/02/cloudfour-avatar-default-blue.png",
158+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/cutting-crap.jpg",
159+
"description": "Presented at Mobilism"
160+
},
161+
{
162+
"title": "DOs and DONTs of Mobile Strategy",
163+
"link": "https://cloudfour.com/presents/get-me-a-mobile-strategy-of-youre-fired/",
164+
"author": "Jason Grigsby",
165+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
166+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/iStock_000001555960Medium.jpg",
167+
"description": "Presented at MIMA Summit, OCCA, Innotech",
168+
"more": "+ 7 more"
169+
},
170+
{
171+
"title": "Cup Noodle Ignite Talk",
172+
"link": "https://cloudfour.com/presents/cup-noodle-innovation-inspiration-and-manga/",
173+
"author": "Jason Grigsby",
174+
"avatar": "https://cloudfour.com/wp-content/uploads/2016/07/jason.png",
175+
"thumbnail": "https://cloudfour.com/wp-content/uploads/2016/07/freeze-drying.jpg",
176+
"description": "Presented at Google Zeitgeist, Web 2.0 Expo, Gnomedex",
177+
"more": "+ 1 more"
178+
}
179+
]

‎src/prototypes/speaking-listing/example/example.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@use "../../../compiled/tokens/scss/color";
2+
@use "../../../compiled/tokens/scss/ease";
3+
@use "../../../compiled/tokens/scss/scale";
4+
@use "../../../compiled/tokens/scss/transition";
5+
6+
#speaking-listing {
7+
.more-text {
8+
color: #{color.$brand-primary};
9+
white-space: nowrap;
10+
}
11+
12+
.media-link {
13+
text-decoration: none;
14+
}
15+
16+
.media-link {
17+
color: #{color.$text-dark};
18+
}
19+
20+
.media-link h3 {
21+
color: #{color.$brand-primary};
22+
}
23+
24+
.media-link:hover h3 {
25+
text-decoration: underline;
26+
}
27+
28+
.media-link .o-media__object {
29+
transition: transform transition.$quick ease.$out;
30+
}
31+
32+
.media-link:hover .o-media__object {
33+
transform: scale(scale.$effect-grow);
34+
}
35+
}

0 commit comments

Comments
 (0)