Add highscores page

client/styles/main.scss

@@ -223,7 +223,7 @@ p {
     margin: 0;
 }
 
-p + p {
+p+p {
     margin-top: 0.5rem;
 }
 
@@ -233,7 +233,7 @@ $heading-scale: 1.25;
 @function pow($number, $exponent) {
     $value: 1;
 
-    @if $exponent > 0 {
+    @if $exponent >0 {
         @for $i from 1 through $exponent {
             $value: $value * $number;
         }
@@ -347,6 +347,60 @@ main.page-problem {
     }
 }
 
+main.page-scores {
+    .table {
+        display: grid;
+        grid-template-columns: auto auto auto;
+
+        box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
+        border-radius: 0.5rem;
+        background: #ffffff;
+
+        user-select: none;
+
+        .icon {
+            cursor: pointer;
+            display: grid;
+            place-content: center;
+        }
+
+        overflow: hidden;
+
+        .cell {
+            text-align: center;
+            padding: 1rem 2rem;
+            display: flex;
+            align-items: center;
+
+            gap: 0.5rem;
+
+            border-left: 1px solid #ddd;
+            border-top: 1px solid #ddd;
+
+            &:nth-child(3n+1) {
+                border-left: none;
+            }
+
+            &:nth-child(1),
+            &:nth-child(2),
+            &:nth-child(3) {
+                border-top: none;
+            }
+
+            &.header {
+                font-weight: 400;
+                font-size: 22px;
+
+                background: #fdfdfd;
+
+                padding-right: 1rem;
+            }
+        }
+
+
+    }
+}
+
 //
 // Components
 //
@@ -473,6 +527,7 @@ header {
     &.correct {
         border: 4px solid #00aa00;
     }
+
     &.wrong {
         border: 4px solid #cc0000;
     }
@@ -531,10 +586,12 @@ header {
             color: #1653a3;
             font-style: italic;
         }
+
         .correct {
             color: green;
             // font-weight: 400;
         }
+
         .wrong {
             color: darkred;
             // font-weight: 400;
@@ -635,7 +692,8 @@ header {
 }
 
 // On mobile
-@media screen and (max-width: $device-s-width), (pointer: coarse) {
+@media screen and (max-width: $device-s-width),
+(pointer: coarse) {
     main {
         padding: 2rem 1rem 6rem;
 
@@ -702,7 +760,8 @@ header {
     }
 }
 
-@media screen and (max-width: $device-m-width), (pointer: coarse) {
+@media screen and (max-width: $device-m-width),
+(pointer: coarse) {
     .markdown-editor {
         grid-template-columns: auto;
         grid-template-rows: auto auto;
@@ -712,4 +771,4 @@ header {
             justify-self: center;
         }
     }
-}
+}