add project analysis view

app/assets/stylesheets/_base-variables.scss

@@ -2,16 +2,28 @@ $gw-column: 60px;
 $gw-gutter: 20px;
 
 $serif: Georgia, Cambria, serif;
-$sans-serif: 'museo-sans', 'proxima-nova', $helvetica;
+$sans-serif: "museo-sans", "proxima-nova", $helvetica;
 
-$base-font-color: rgb(55,55,55);
-$lighter-base-font-color: rgb(46,46,46);
+$base-font-color: rgb(55, 55, 55);
+$lighter-base-font-color: rgb(46, 46, 46);
 $muted-color: #ccc;
 
 $pink: rgb(255, 75, 126);
 $button-pink: rgb(252, 103, 147);
 
-$blue: rgb(34,122,255); //blue
+$blue: rgb(34, 122, 255); //blue
+
+$green-background: #a7f3d0;
+$green-text: #065f46;
+
+$yellow-background: #fef08a;
+$yellow-text: #854d0e;
+
+$red-background: #fecaca;
+$red-text: #7f1d1d;
+
+$base-font-color: rgb(55, 55, 55);
+$lighter-base-font-color: rgb(46, 46, 46);
 
 /***
  * Responsiveness Sizes        
@@ -22,7 +34,7 @@ $blue: rgb(34,122,255); //blue
  * mobile-small:    for additional changes that accommdate very small screens like iPhone 5S
 ***/
 
-$maximum-width: 60em;   // Equivalent to 969px;
+$maximum-width: 60em; // Equivalent to 969px;
 $tablet-standard: 60em;
 $mobile-standard: 30em; // Equivalent to 480px;
-$mobile-small: 20em;    // Equivalent to 320px;
+$mobile-small: 20em; // Equivalent to 320px;

app/assets/stylesheets/_project_analyses.scss

@@ -0,0 +1,45 @@
+// @import "base_variables";
+
+body.project-analysis-show {
+  h1 {
+    font-size: 24px;
+    margin-bottom: 16px;
+  }
+
+  .scores-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+
+    th,
+    td {
+      padding: 8px;
+      border: 1px solid #ddd;
+    }
+
+    th {
+      background-color: #f0f0f0;
+      text-align: left;
+      font-weight: bold;
+    }
+
+    // Define classes for score rows using the color variables
+    tr.score-row--high {
+      background-color: $green-background;
+      color: $green-text;
+      font-weight: 900;
+    }
+
+    tr.score-row--medium {
+      background-color: $yellow-background;
+      color: $yellow-text;
+    }
+
+    tr.score-row--low {
+      background-color: $red-background;
+      color: $red-text;
+    }
+  }
+
+  // Additional styles can be defined here, following your SCSS strategies
+}