docs: add labs lowdown videos and small material animation to thumbna…

…ils (#1288)

* docs: add labs lowdown videos and small material animation to thumbnails

* update screenshot test

* add card backgrounds

* remove extraneous description stuff on videos

* add durations

* update screenshot golden

packages/lit-dev-content/site/_data/videos.js

@@ -25,60 +25,126 @@ const loadVideoData = () =>
       summary: `Justin covers what Web Components are and how LitElement and lit-html add value on top of the native APIs. This talk covers the fundamentals of how and why Lit is architected the way it is.`,
       youtubeId: '9FB0GSOAESo',
       date: 'Jun 22 2019',
+      duration: '50',
     },
     {
       title: 'Chat with Lit #1 – Westbrook Johnson (Adobe)',
       summary: `Listen in on this live-recorded Twitter Space episode, hosted by Rody Davis (@rodydavis) and Elliott Marquez (@techytacos), with guest Westbrook Johnson (@WestbrookJ) from Adobe.`,
       youtubeId: 'it-NXhxkOJo',
       date: 'Jul 23 2021',
+      duration: '24',
     },
     {
       title: 'Lit 2.0 Release Livestream',
       summary: `Lit 2.0 has officially landed! Here we talk about Lit 2.0, what we've been doing, what it means to Google, and what's new. Stay tuned for a panel discussion with Lit users in the industry!`,
       youtubeId: 'nfb779XIhsU',
       date: 'Sep 21 2021',
+      duration: '98',
     },
     {
       title: 'How to build your first Lit component',
       summary: `Learn how to build your first Lit component and use it with React, Vue, and in a markdown editor.`,
       youtubeId: 'QBa1_QQnRcs',
       date: 'Apr 25 2022',
+      duration: '12',
     },
     {
       title: 'What are elements?',
       summary: `Software Engineer Elliott Marquez shares what elements are, how to make, and interact with them. Learn about the basic building block of the web in this video!`,
       youtubeId: 'x_mixcGEia4',
       date: 'Apr 27 2022',
+      duration: '9',
     },
     {
       title: 'How to build a carousel in Lit',
       summary: `In this video, we build a simple-carousel using Lit, letting us explore passing children into your web component, and web component composition.`,
       youtubeId: '2RftvylEtrE',
       date: 'May 3 2022',
+      duration: '15',
     },
     {
       title: 'Event communication between web components',
       summary: `Follow along as Lit Software Engineer Elliott Marquez shares the pros, cons, and use cases of communicating with events.`,
       youtubeId: 'T9mxtnoy9Qw',
       date: 'May 5 2022',
+      duration: '10',
     },
     {
       title: 'How to style your Lit elements',
       summary: `We cover how the Shadow DOM works, illustrate the benefits of encapsulated CSS, and show you how to use CSS inheritance, custom properties and shadow parts to expose a flexible public styling API.`,
       youtubeId: 'Xt7blcyuw5s',
       date: 'Oct 3 2022',
+      duration: '15',
     },
     {
       title: 'Introduction to Lit',
       summary: `Learn all about the Lit library in this beginner-friendly Lit University episode! We will cover all of the essentials, including custom elements, declarative templates, scoped styles, and reactive properties.`,
       youtubeId: 'uzFakwHaSmw',
       date: 'Nov 2 2022',
+      duration: '13',
     },
     {
       title: 'Lit 3.0 Launch Event',
       summary: `Join the Lit team to hear all about the Lit 3.0 release and what's new in the Lit ecosystem!`,
       youtubeId: 'ri9FEl_hRTc',
       date: 'Oct 10 2023',
+      duration: '90',
+    },
+    {
+      title: 'Lit Labs: Task (graduated)',
+      summary: `This video covers @lit-labs/task, a package under development in Lit Labs. Watch for an overview, demos, package status and more!`,
+      youtubeId: 'niWKuGhyE0M',
+      date: 'Jan 19 2023',
+      duration: '9',
+    },
+    {
+      title: 'Lit Labs: Context (graduated)',
+      summary: `In this video, we cover @lit-labs/context, a package under development in Lit Labs. Watch for an overview, an explanation of the underlying Web Components Context Protocol, use cases, demos, package status and more!`,
+      youtubeId: 'irHAr1yTE5Q',
+      date: 'Jan 19 2023',
+      duration: '15',
+    },
+    {
+      title: 'Lit Labs: Observers',
+      summary: `This video covers @lit-labs/observers, a package under development in Lit Labs. Watch for an overview, demos, package status and more!`,
+      youtubeId: 'g_9PVegjQuw',
+      date: 'Jan 19 2023',
+      duration: '7',
+    },
+    {
+      title: 'Lit Labs: SSR (server-side rendering)',
+      summary: `This video covers @lit-labs/ssr, a server-side rendering package under development in Lit Labs. Watch for an overview, demos, project status and more!`,
+      youtubeId: '_xcIEx2P8nk',
+      date: 'Jan 19 2023',
+      duration: '13',
+    },
+    {
+      title: 'Lit Labs: Framework wrapper generators',
+      summary: `This video covers framework wrapper generators, a feature of the Lit CLI under development in Lit Labs. Watch for an overview, benefits, use case, status and more!`,
+      youtubeId: 'CL_3TLFkwNE',
+      date: 'Jan 19 2023',
+      duration: '13',
+    },
+    {
+      title: 'Lit Labs: Motion',
+      summary: `This video covers @lit-labs/motion, a package under development in Lit Labs. Watch for an overview, examples, quick tips, package status and more!`,
+      youtubeId: '9jxjc-bxwfI',
+      date: 'Jan 19 2023',
+      duration: '17',
+    },
+    {
+      title: 'Lit Labs: React (graduated)',
+      summary: `This video covers @lit-labs/react, a package under development in Lit Labs. Watch for an overview, use cases, package status and more!`,
+      youtubeId: 'agBn1LW6dbM',
+      date: 'Jan 19 2023',
+      duration: '8',
+    },
+    {
+      title: 'Lit Labs: Virtualizer',
+      summary: `This video covers @lit-labs/virtualizer, a package under development in Lit Labs. Watch for an overview, examples, features, package status and more!`,
+      youtubeId: 'ay8ImAgO9ik',
+      date: 'Jan 19 2023',
+      duration: '16',
     },
   ].map((videoData) => ({
     kind: 'video',

packages/lit-dev-content/site/css/learn-catalog.css

@@ -4,17 +4,21 @@ main {
   z-index: 0;
 }
 
-#hero {
-  --card-width: 360px;
-  --_unit: calc(var(--card-width) / 10);
+:root {
+  --learn-card-width: 360px;
+  --_learn-unit: calc(var(--learn-card-width) / 10);
+  --_learn-card-padding: calc(var(--_learn-unit) / 2);
+  --_learn-card-border-radius: var(--_learn-unit);
+}
 
+#hero {
   background-color: black;
   color: #cfcfcf;
   font-family: Manrope;
   font-weight: 200;
   font-size: 20px;
   padding: 67px 0;
-  padding-left: calc(var(--_unit) + 40px);
+  padding-left: calc(var(--_learn-unit) + 40px);
   height: 160px; /* Explicitly declared to fix layout shift as font loads */
   position: relative;
 }
@@ -95,12 +99,10 @@ md-chip-set {
 }
 
 #chips {
-  margin: var(--_unit);
+  margin: var(--_learn-unit);
 }
 
 #learn-catalog {
-  --_unit: 36px;
-
   /* Prevent a large view shift if content is empty */
   min-height: 400px;
   width: 100%;
@@ -113,8 +115,8 @@ md-chip-set {
 
 .card-grid {
   display: grid;
-  padding: var(--_unit);
-  gap: var(--_unit);
+  padding: var(--_learn-unit);
+  gap: calc(var(--_learn-unit) / 2);
   grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr) minmax(360px, 1fr);
 
   align-items: stretch;
@@ -127,10 +129,29 @@ md-chip-set {
 
   /* Undo anchor tag typography */
   font-family: Manrope,sans-serif;
-  color: #646464;
+  color: #454545;
   text-decoration: none;
   font-weight: 400;
   font-size: 18px;
+  background-color: #f4f4f4;
+  padding: var(--_learn-card-padding);
+}
+
+.card,
+.card img {
+  transition: border-radius 0.3s cubic-bezier(0.2, 0, 1, 1);
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  border-radius: var(--_learn-card-border-radius);
+}
+
+.card:hover img,
+.card:focus img,
+.card:active img {
+  border-radius: calc(var(--_learn-card-border-radius) - var(--_learn-card-padding));
 }
 
 .card img {
@@ -145,7 +166,8 @@ md-chip-set {
   margin: 10px 0 0 0;
 }
 
-.card:hover h1 {
+.card:hover h1,
+.card:focus h1 {
   text-decoration: underline;
 }
 
@@ -171,8 +193,8 @@ md-chip-set {
 }
 
 /* This is the span containing the tutorial duration */
-.learn-kind-row span:nth-child(3) {
-  margin-left: auto;
+.learn-kind-row .end {
+  margin-inline-start: auto;
 }
 
 #intentionally-blank {
@@ -182,14 +204,16 @@ md-chip-set {
 
 @media (max-width: 1260px) {
   .card-grid {
-    --card-width: 300px;
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 690px) {
+  :root {
+    --learn-card-width: 300px;
+  }
+
   .card-grid {
-    --card-width: 300px;
     grid-template-columns: repeat(1, 1fr);
   }
 }

packages/lit-dev-content/site/learn/index.html

@@ -60,9 +60,11 @@ <h1>Learn</h1>
         </div>
         <div class="learn-kind-row">
           <span class="learn-kind">{{ content.kind }}</span>
-          {% if content.kind == "tutorial" %}
+          {% if content.difficulty != null  %}
           <span>&nbsp;/ {{ content.difficulty }}</span>
-          <span class="duration">{{ content.duration }} Min</span>
+          {% endif %}
+          {% if content.duration != null  %}
+          <span class="duration end">{{ content.duration }} Min</span>
           {% endif %}
         </div>
         <h1>{{ content.title }}</h1>