second design

lit · Aug 9, 2023 · a643e55 · a643e55
1 parent 1ee716b
commit a643e55
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git a/packages/lit-dev-content/site/css/learn-catalog.css b/packages/lit-dev-content/site/css/learn-catalog.css
@@ -61,18 +61,21 @@ main {
   display: inline-block;
   padding: 10px;
 
-  border-radius: 0px;
-  transition: border-radius 50ms;
-
   /* Undo anchor tag typography */
   font-family: Manrope;
   color: black;
   text-decoration: none;
   font-weight: 400;
 
-  border: 1px solid #d1d1d1;
-  box-shadow: rgb(0 0 0 / 10%) 0 0 5px 0;
+  max-height: 400px;
+  overflow: hidden;
+}
+
+.card:hover .card-header {
+  border-radius: 10px;
+  overflow: hidden;
 }
+
 .card img {
   width: 100%;
   height: auto;
@@ -88,12 +91,27 @@ main {
   color: #646464;
 }
 
+.card-header {
+  aspect-ratio: 16 / 9;
+  width: auto;
+  display: flex;
+  align-items: flex-end;
+
+  background-color: rgba(50, 79, 255, 1);
+}
+
+.card-header h1 {
+  margin: 10px;
+  color: white;
+}
+
 .learn-kind-row {
   display: flex;
   color: #9e9e9e;
   font-weight: 400;
   font-size: 16px;
   text-transform: uppercase;
+  margin-top: 16px;
 }
 
 .learn-kind-row span:first-child {

diff --git a/packages/lit-dev-content/site/learn/index.html b/packages/lit-dev-content/site/learn/index.html
@@ -22,19 +22,26 @@ <h1>Learn</h1>
     <div class="card-grid">
       {% for content in learn %}
         <a class="card" href="#">
+          <div class="card-header {{content.kind}}">
+            {% if content.kind == "video" %}
+            <img
+              src="https://i.ytimg.com/vi/{{ content.youtubeId }}/mqdefault.jpg"
+              alt="Video thumbnail for '{{content.title}}'"
+              title="{{content.title}}"
+            >
+            {% else %}
+            <h1>{{content.title}}</h1>
+            {% endif %}
+          </div>
           <div class="learn-kind-row">
             <span class="learn-kind">{{content.kind}}</span>
             {% if content.kind == "tutorial" %}
             <span>&nbsp;/ {{content.difficulty}}</span>
             <span class="duration">{{content.duration}} Min</span>
             {% endif %}
           </div>
-          <h1>{{content.title}}</h1>
-          {% if content.kind == "video" %}
-          <img src="https://i.ytimg.com/vi/{{ content.youtubeId }}/mqdefault.jpg">
-          {% else %}
-          <p>{{content.summary|markdownWithoutHtml|safe}}</p>
-          {% endif %}
+
+          <p>{{content.summary|markdown}}</p>
         </a>
       {% endfor %}
     </div>