Use semantic classes rather than h1/h2/h3 in cards

This makes it easier to style the cards separately from the rest of the Markdown-generated site content. It's also more obvious which element to use ("is a card title an H1 or an H2? I can never remember... ")
gsquaredxc · May 26, 2021 · ed17980 · ed17980
1 parent 65a85e1
commit ed17980
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/content/css/categories.scss b/content/css/categories.scss
@@ -145,27 +145,27 @@ $header-height: 90px;
   padding-bottom: 10px;
   margin-bottom: 1.5em;
   order: 2;
-  a h1,
-  h1 {
+  .card-title {
     padding-top: 10px;
     padding-left: 5%;
     font-size: 18px;
     line-height: 20px;
     font-weight: 600;
     letter-spacing: 0.5px;
+    a { color: inherit; }
   }
-  h1 + * {
+  .card-title + * {
     padding-top: 0;
   }
-  h2 {
+  .card-subtitle {
     padding-left: 5%;
     font-size: 14px;
     line-height: 14px;
     font-weight: 500;
     font-style: italic;
     color: $gray-light;
   }
-  h2 + * {
+  .card-subtitle + * {
     padding-top: 0;
   }
   a img,
@@ -210,7 +210,7 @@ $header-height: 90px;
   justify-content: center;
   margin-bottom: 25px;
   margin-left: 1%;
-  h3 {
+  .card-fact {
     color: $aqua;
     font-size: 12px;
     line-height: 12px;

diff --git a/layouts/robots.html.erb b/layouts/robots.html.erb
@@ -129,10 +129,12 @@
               <img src="<%= robot_image_url(robot, :image) %>">
               <% end %>
             </a>
-            <a href="<%= robot_url(robot) %>">
-              <h1><%= robot[:title] %></h1>
-            </a>
-            <h2><%= robot[:subtitle] %></h2>
+            <div class='card-title'>
+              <a href="<%= robot_url(robot) %>"><%= robot[:title] %></a>
+            </div>
+            <div class='card-subtitle'>
+              <%= robot[:subtitle] %>
+            </div>
             <% if robot[:summary] %>
             <div class="card-description">
               <p><%= robot[:summary] %></p>
@@ -142,14 +144,14 @@
             <% if !robot_features(robot).empty? %>
             <div class="card-facts">
               <% robot[:features].each do |feature| %>
-              <h3><%= feature %></h3>
+              <div class='card-fact'><%= feature %></div>
               <% end %>
             </div>
             <% end %>
           </div>
         </div>
         <% end %>
-        
+
       </div>
     </div>
   </div>