fix: styles

src/app/admin-view/grades/attendence-summary/attendence-summary.component.scss

@@ -7,10 +7,10 @@
 #legend {
     display: flex;
     justify-self: center;
+    gap: 3ch;
     * {
         margin: 2px;
     }
-    gap: 3ch;
 }
 
 .circle {
@@ -28,7 +28,7 @@
 
     @for $n from 1 through 3 {
         &:nth-of-type(#{$n})::before {
-            background-color: nth($list, $n);
+            background-color: list.nth($list, $n);
         }
     }
 }

src/app/admin-view/news-edit/news-edit.component.scss

@@ -11,11 +11,11 @@ mat-card-title {
 mat-card-footer p {
     font-size: 0.8rem;
     color: #4a4a4a;
+    margin-bottom: 0;
+    text-align: end;
     @media (prefers-color-scheme: dark) {
         color: #999999
     }
-    margin-bottom: 0;
-    text-align: end;
 }
 
 mat-card-content p {

src/app/app-view/app-view.component.scss

@@ -16,12 +16,12 @@
 
 :host {
     width: 100%;
-    @supports (-webkit-touch-callout: none) {
-        height: 95vh;
-    }
     height: 100vh;
     display: flex;
     flex-direction: column;
+    @supports (-webkit-touch-callout: none) {
+        height: 95vh;
+    }
 }
 
 a {

src/app/app-view/news/news.component.scss

@@ -19,11 +19,11 @@ mat-card-title {
 mat-card-footer p {
     font-size: 0.8rem;
     color: #4a4a4a;
+    margin-bottom: 0;
+    text-align: end;
     @media (prefers-color-scheme: dark) {
         color: #999999
     }
-    margin-bottom: 0;
-    text-align: end;
 }
 
 mat-card-content p {

src/styles.scss

@@ -7,7 +7,8 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 $ipwa-palette: (
   50: #e8ebf7,