#149: Refactor CSS styles for ledger and health components.

Author: yegor256

sass/diff.scss

@@ -1,9 +1,9 @@
-//
 // SPDX-FileCopyrightText: Copyright (c) 2018-2025 Zerocracy, Inc.
 // SPDX-License-Identifier: MIT
 
 #ledger {
   font-size: 85%;
+  width: 100%;
 
   tr {
     td,
@@ -17,7 +17,3 @@
     }
   }
 }
-
-#ledger {
-  width: 100%;
-}

sass/health.scss

@@ -1,17 +1,18 @@
-//
 // SPDX-FileCopyrightText: Copyright (c) 2018-2025 Zerocracy, Inc.
 // SPDX-License-Identifier: MIT
 
+@use "sass:color";
+
 #health {
   font-size: 75%;
   width: 100%;
 
-  @media all and (max-width: 1024px) {
+  @media all and (width <= 1024px) {
     display: none;
   }
 
   thead {
-    @media all and (max-width: 1024px) {
+    @media all and (width <= 1024px) {
       display: none;
     }
   }
@@ -31,24 +32,26 @@
       padding: 0.1em .4em;
 
       &.failure {
-        background-color: lighten(#BB342F, 40);
+        background-color: color.adjust(#bb342f, $lightness: 40%);
       }
 
       &.data {
         text-align: right;
       }
 
-      @media all and (max-width: 1024px) {
+      @media all and (width <= 1024px) {
         display: inline-block;
         border: 0;
       }
     }
-    @media all and (max-width: 1024px) {
+
+    @media all and (width <= 1024px) {
       display: inline-block;
       margin: .6em 0;
     }
   }
-  @media all and (max-width: 1024px) {
+
+  @media all and (width <= 1024px) {
     display: inline-block;
   }
 }

sass/index.scss

@@ -1,4 +1,3 @@
-//
 // SPDX-FileCopyrightText: Copyright (c) 2018-2025 Zerocracy, Inc.
 // SPDX-License-Identifier: MIT
 

sass/ledger.scss

@@ -1,4 +1,3 @@
-//
 // SPDX-FileCopyrightText: Copyright (c) 2018-2025 Zerocracy, Inc.
 // SPDX-License-Identifier: MIT
 

sass/main.scss

@@ -1,4 +1,3 @@
-//
 // SPDX-FileCopyrightText: Copyright (c) 2018-2025 Zerocracy, Inc.
 // SPDX-License-Identifier: MIT
 

sass/map.scss

@@ -1,4 +1,3 @@
-//
 // SPDX-FileCopyrightText: Copyright (c) 2018-2025 Zerocracy, Inc.
 // SPDX-License-Identifier: MIT
 
@@ -73,7 +72,7 @@ body {
     tr {
       width: 250px;
 
-      &:nth(3) {
+      &:nth-child(3) {
         margin-top: 30px;
       }
 
@@ -92,7 +91,7 @@ body {
   }
 }
 
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+@media only screen and (320px <= width <= 480px) and (resolution >= 2dppx) {
   #map {
     display: none;
   }
@@ -143,6 +142,7 @@ body {
 .blink {
   animation: blink-animation 1s steps(5, start) infinite;
 }
+
 @keyframes blink-animation {
   to {
     visibility: hidden;