Embed widths are now the same width as all content

spec/components/page_content_spec.cr

@@ -246,10 +246,10 @@ describe PageContent do
     html = PageContent.new(page: page).render_to_string
 
     html.should eq stripped_html <<-HTML
-      <div class="iframe-wrapper">
+      <figure>
         <iframe src="https://example.com" width="800" height="480" frameborder="0" allowfullscreen="true">
         </iframe>
-      </div>
+      </figure>
     HTML
   end
 
@@ -270,9 +270,9 @@ describe PageContent do
 
     html.should eq stripped_html <<-HTML
       <p>
-        <div class="embedded">
+        <figure>
           <a href="https://example.com">Embedded content at example.com</a>
-        </div>
+        </figure>
       </p>
     HTML
   end
@@ -299,9 +299,11 @@ describe PageContent do
 
     html.should eq stripped_html <<-HTML
       <p>
-        <div class="embedded">
+        <blockquote>
+          <p>
             <a href="https://example.com">Mixtape</a>
-        </div>
+          </p>
+        </blockquote>
       </p>
     HTML
   end

src/components/page_content.cr

@@ -32,7 +32,7 @@ class PageContent < BaseComponent
   end
 
   def render_child(child : EmbeddedContent)
-    div class: "iframe-wrapper" do
+    figure do
       iframe(
         src: child.src,
         width: child.width,
@@ -44,7 +44,7 @@ class PageContent < BaseComponent
   end
 
   def render_child(child : EmbeddedLink)
-    div class: "embedded" do
+    figure do
       a href: child.href do
         text "Embedded content at #{child.domain}"
       end
@@ -98,8 +98,8 @@ class PageContent < BaseComponent
   end
 
   def render_child(node : MixtapeEmbed)
-    div class: "embedded" do
-      render_children(node.children)
+    blockquote do
+      para { render_children(node.children) }
     end
   end
 

src/css/app.css

@@ -6,3 +6,7 @@ p.meta {
   font-size: 1.2rem;
   line-height: 1;
 }
+
+figure iframe {
+  max-width: 100%;
+}