Rename .section to .section-card

To keep the classes more organized, by having better scoping of classes.

Fixes #121

assets/css/bobastyle.css

@@ -618,7 +618,7 @@ figcaption {
   gap: 10px;
 }
 
-.section {
+.section-card {
   background-color: var(--background-1);
   color: var(--text-1);
   border-radius: 12px;
@@ -628,33 +628,33 @@ figcaption {
   justify-content: space-between;
 }
 
-.section:hover {
+.section-card:hover {
   background-color: var(--background-2);
   color: var(--text-2);
 }
 
-.section-title {
+.section-card-title {
   margin: 10px 0;
 }
 
-.section-anchor {
+.section-card-anchor {
   color: inherit;
 }
 
-.section-anchor:hover {
+.section-card-anchor:hover {
   text-decoration: none;
 }
 
-.section-description {
+.section-card-description {
   margin-bottom: 5px;
 }
 
-.section-arrow {
+.section-card-arrow {
   margin-block: auto;
   max-height: fit-content;
   float: right;
 }
-.section-arrow > .icon {
+.section-card-arrow > .icon {
   height: 48px;
   width: 48px;
 }

layouts/section.summary.html

@@ -1,19 +1,19 @@
-<a class="section-anchor" href="{{ .Permalink }}">
-    <div class="section">
+<a class="section-card-anchor" href="{{ .Permalink }}">
+    <div class="section-card">
         <div>
-            <h2 class="section-title">
+            <h2 class="section-card-title">
                 {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
                 {{ .Title | markdownify }}
             </h2>
 
             {{ with .Summary }}
-                <div class="section-description">
+                <div class="section-card-description">
                     {{ . }}
                 </div>
             {{ end }}
         </div>
 
-        <div class="section-arrow">
+        <div class="section-card-arrow">
             {{ partial "icon.html" "arrow-right" }}
         </div>
     </div>