Merge pull request #23 from Fabulously-Optimized/fix-graph

Better control over graph bars
Fabulously-Optimized · Feb 18, 2024 · 6fb061f · 6fb061f
2 parents 33f3e25 + d8df0bc
commit 6fb061f
Showing 1 changed file with 9 additions and 28 deletions.
diff --git a/assets/graph.scss b/assets/graph.scss
@@ -7,7 +7,6 @@
   width: 100%;
   height: 100%;
 
-  // title
   h3 {
     font-size: 1.5rem;
     font-weight: 400;
@@ -17,6 +16,7 @@
   .graph {
     display: flex;
     flex-direction: row;
+    align-items: flex-end;
     gap: var(--gap-md);
     width: 100%;
 
@@ -25,7 +25,6 @@
       width: 100%;
       counter-reset: bars;
 
-      // Title on top of the bars.
       .pretitle {
         position: relative;
         font-size: 0.75rem;
@@ -38,10 +37,12 @@
       }
 
       .bar {
-        // Center the FPS number inside the bar.
         display: flex;
         justify-content: center;
         align-items: center;
+        width: 100%;
+        background-color: rgb(44, 183, 218);
+        border-radius: 0.5rem;
 
         // Add dropshadow to text.
         p {
@@ -53,36 +54,16 @@
       }
     }
 
-    // Make the 1st bar significantly bigger than the other ones.
     .item:nth-child(1) > .bar {
-      height: calc(100%) !important;
-      margin-top: -0.75rem !important;
+      height: 20em;
     }
 
-    .item:nth-child(1) > .pretitle {
-      top: -0.5rem !important;
+    .item:nth-child(2) > .bar {
+      height: 4em;
     }
 
-    @for $i from 1 through 3 {
-      .item:nth-child(#{$i}) > .pretitle {
-        display: relative;
-
-        // Offset pretitle onto the bar top.
-        // add 0.5rem padding
-        top: calc((40px * #{$i} * 2) - 0.5rem);
-      }
-
-      .item:nth-child(#{$i}) > .bar {
-        width: 100%;
-
-        height: calc(100% + (-40px * #{$i} * 2));
-
-        // offset height from top;
-        margin-top: calc((40px * #{$i} * 2));
-
-        background-color: rgb(44, 183, 218);
-        border-radius: 0.5rem;
-      }
+    .item:nth-child(3) > .bar {
+      height: 2em;
     }
   }
 }