feat: results accordion - add basic markup and styles (#12)

Add basic markup structure for results page accordion areas, within
details / summary elements.

Author: jawinn

src/panels/results/results.html

@@ -16,10 +16,16 @@ <h1 class="cv-header__title">Carbon Visualizer</h1>
           🌱
         </div>
         <h2 class="cv-results__title">Results</h2>
-        <p class="cv-results__description">
-          This is where you'd see the results of the analysis. Coming soon!
-        </p>
-
+        <div class="cv-results__sections">
+          <h3>Page Weight</h3>
+          <details class="cv-results__details">
+            <summary class="heading-sm">Remove Unused Code</summary>
+            <div class="cv-results__group">
+              <h4 class="heading-xs">Unused CSS</h4>
+              <p>&mdash;</p>
+            </div>
+          </details>
+        </div>
         <button class="cv-btn cv-btn--primary" id="back-to-welcome-btn">
           Analyze another page
         </button>

src/styles/results.css

@@ -24,3 +24,27 @@
   color: var(--cv-white);
   line-height: 1.5;
 }
+
+.cv-results__sections {
+  text-align: start;
+  margin-bottom: 2.0rem;
+}
+
+.cv-results__group {
+  padding: 1.0rem;
+  border: 1px solid currentColor;
+  border-inline-start-width: 4px;
+  border-radius: 1.0rem;
+}
+
+.cv-results__group > *:first-child {
+  margin-block-start: 0;
+}
+
+.cv-results__group > *:last-child {
+  margin-block-end: 0;
+}
+
+.cv-results__details summary {
+  margin-block-end: 0.5rem;
+}