deal with phone screens!

_sass/blogroll.scss

@@ -1,3 +1,6 @@
+$image_size: 7em;
+$left_pad: 8em;
+
 h2.blogroll-title {
     a {
         text-decoration: none;
@@ -11,50 +14,34 @@ figure.blogroll {
 }
 
 article.blogroll {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    flex-direction: row;
 
     h2 {margin-top: 0;}
 
-    // img {
-    //     object-fit: cover;
-    //     width: 7em;
-    //     height: 7em;
-    //     margin-right: 1em;
-    //     border-radius: 0.5em;
-    // }
-    // div.image-container {
-    //     width: 7em;
-    //     height: 7em;
-    //     overflow:hidden;
-    // }
+    section.title {
+        padding-left: $left_pad;
+    }
 
-    div.image-container {
+    summary {padding-left: $left_pad;}
+
+    img {
+        float:left;
         margin-right: 1em;
-        flex-shrink: 0;
-        width: 7em;
-        height: 7em;
-        position: relative;
-        
-        ::after {
-            content: "";
-            display: block;
-            padding-bottom: 100%;
-          }
+        max-width: $image_size;
+        max-height: $image_size;
+        border-radius: 0.5em;
+        }
+}
 
-        img {
-            position: absolute;
-            width: auto; 
-            max-width: 100%;
-            max-height: 100%;
-            border-radius: 0.5em;
-          }
-      }
-      
-
-      
+@media 
+    only screen and (max-width: 500px)
+    {  
+    article.blogroll {
+        summary {
+            padding-left: 0;
+        }
+        h2 {
+            font-size: 1.2em;
+        }
+    }
 
 }

index.md

@@ -8,16 +8,17 @@ head: <script type="module" src="/assets/js/model-viewer.js"></script>
 ---
 {% for post in site.posts %}
 <article class="h-entry blogroll">
-<div class="image-container">
-    <img class="u-photo" 
-        src = "{{ post.thumbnail | default: post.image }}"
-         alt="{{post.alt}}">
-</div>
 
-<section class="blogroll">
+<img class="u-photo" 
+    src = "{{ post.thumbnail | default: post.image }}"
+      alt="{{post.alt}}">
+
+<section class="title">
   <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
   <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
-  <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
 </section>
+
+<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
+
 </article>
 {% endfor %}