Tweaking default Skeleton theme

public/theme/skeleton/css/new.css

@@ -544,4 +544,44 @@ code {
     border: 0;
     padding: 3px 3px;
     font-size: 0.9rem;
+}
+
+
+/* Default grid, as used by the Article field type */
+.article-grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-column-gap: 2rem;
+    grid-row-gap: 1rem;
+}
+
+.article-grid + .article-grid {
+    margin-top: 1rem;
+}
+
+.article-grid figure, .article-grid img {
+    margin: 0;
+}
+
+.article-grid .col-1 { grid-column: span 1; }
+.article-grid .col-2 { grid-column: span 2; }
+.article-grid .col-3 { grid-column: span 3; }
+.article-grid .col-4 { grid-column: span 4; }
+.article-grid .col-5 { grid-column: span 5; }
+.article-grid .col-6 { grid-column: span 6; }
+.article-grid .col-7 { grid-column: span 7; }
+.article-grid .col-8 { grid-column: span 8; }
+.article-grid .col-9 { grid-column: span 9; }
+.article-grid .col-10 { grid-column: span 10; }
+.article-grid .col-11 { grid-column: span 11; }
+.article-grid .col-12 { grid-column: span 12; }
+
+@media only screen and (max-width: 600px) {
+    .article-grid {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
+        grid-column: span 1;
+        margin-bottom: 1rem;
+    }
 }

public/theme/skeleton/partials/_aside.twig

@@ -41,14 +41,15 @@
 
     </div>
 
-    {# The next section iterates over all of the content types, and prints a list
-        of the three latest records of each of them. The 'magic' happens in the
-        setcontent tag.. 'ct.slug latest limit 3' fetches 3 records with the given
-        ContentType, ordered by their descending id.
-        The 'else' in the inner for-loop is only used if there are no 'records',
+    {# The next section iterates over all of the ContentTypes, and prints a
+        list of the three latest records of each of them. The 'magic' happens in
+        the setcontent tag: `ct.slug latest limit 3` fetches 3 records from the
+        given ContentType, ordered by their descending id.
+        The `else` in the inner for-loop is only used if there are no 'records',
         so we can use it to print a helpful message.
-        Lastly, "path('listing', {'contentTypeSlug': ct.slug})" will output something like '/pages',
-        effectively creating a working link to that contenttype's listing page. #}
+        Lastly, `path('listing', {'contentTypeSlug': ct.slug})` will output
+        something like '/pages', effectively creating a working link to that
+        ContentTypes's listing page. #}
 
     {% for ct in config.get('contenttypes')|filter(ct => not ct.viewless) %}
 

public/theme/skeleton/partials/_image.twig

@@ -1,7 +1,7 @@
 {% if image %}
     <div class="imageholder">
         <a href="{{ record|image }}">
-            <img src="{{ thumbnail(image, 1368, 1026) }}" alt="{{ image.alt|default(record|title) }}">
+            <img src="{{ thumbnail(record, 1368, 1026) }}" alt="{{ (record|image).alt|default(record|title) }}">
         </a>
         {% if image.alt %}
             <small>{{ image.alt }}</small>

public/theme/skeleton/partials/_sub_menu.twig

@@ -17,7 +17,7 @@
         {{ item|current ? ' active' }}">
 
         <a href="{{ item.uri }}" title='{{ item.title }}' class='{{ item.class }}'>
-            {{- item.label -}}
+            {{- item.label|default(item.title) -}}
         </a>
 
         {% if with_submenu %}