[TASK] Use px instead of pt

scss/modules/_base.scss

@@ -30,12 +30,12 @@ h3 {
 }
 
 h2, h3 {
-  padding-left: $buttondistance;
-  padding-right: $buttondistance;
+  padding-left: $button-distance;
+  padding-right: $button-distance;
 }
 
 p, pre, ul, h4 {
-  padding: 0 $buttondistance 1em;
+  padding: 0 $button-distance 1em;
 }
 
 img {

scss/modules/_button.scss

@@ -5,7 +5,7 @@ button {
   color: $color-black;
   cursor: pointer;
   font-family: $font-family-icons;
-  font-size: 20pt;
+  font-size: $button-font-size;
   height: 1.8em;
   opacity: .7;
   outline: none;
@@ -44,9 +44,9 @@ button {
     }
     color: transparentize($color-black, .5);
     float: right;
-    font-size: 20pt;
+    font-size: $button-font-size;
     height: auto;
-    margin: $buttondistance;
+    margin: $button-distance;
     width: auto;
   }
 }

scss/modules/_filter.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   font-size: .83em;
-  padding: 0 6pt 6pt;
+  padding: 0 8px 8px;
 
   li {
     align-items: center;
@@ -10,8 +10,8 @@
     border: 1px solid $color-primary;
     color: $color-primary;
     display: flex;
-    margin: 3pt;
-    padding: 0 0 0 8pt;
+    margin: 4px;
+    padding: 0 0 0 10px;
 
     label {
       cursor: pointer;
@@ -20,10 +20,10 @@
     button {
       background: none;
       color: $color-gray-light;
-      font-size: 12pt;
-      height: 18pt;
-      margin: 2pt;
-      width: 18pt;
+      font-size: $font-size-small;
+      height: 24px;
+      margin: 3px;
+      width: 24px;
 
       &:hover {
         color: $color-primary;

scss/modules/_map.scss

@@ -6,22 +6,22 @@
   .buttons {
     direction: rtl;
     position: absolute;
-    right: $buttondistance;
-    top: $buttondistance;
+    right: $button-distance;
+    top: $button-distance;
     unicode-bidi: bidi-override;
     z-index: 100;
 
     button {
-      margin-left: $buttondistance;
+      margin-left: $button-distance;
     }
-    @media screen and (max-width: $minscreenwidth) {
+    @media screen and (max-width: $min-screen-width) {
       right: -1rem;
       top: 0;
       transform: scale(.8);
     }
   }
 
-  @media screen and (max-width: $minscreenwidth) {
+  @media screen and (max-width: $min-screen-width) {
     height: calc(100vh - 150px);
     min-height: 240px;
     position: relative;

scss/modules/_sidebar.scss

@@ -2,17 +2,17 @@
   box-sizing: border-box;
   position: absolute;
   transition: left .5s;
-  width: $sidebarwidth;
+  width: $sidebar-width;
   z-index: 5;
 
   &.hidden {
-    left: -$sidebarwidth - $buttondistance;
+    left: -$sidebar-width - $button-distance;
 
     .sidebarhandle {
-      left: $buttondistance;
+      left: $button-distance;
       transform: scale(-1, 1);
     }
-    @media screen and (max-width: $minscreenwidth) {
+    @media screen and (max-width: $min-screen-width) {
       width: auto;
     }
   }
@@ -73,10 +73,10 @@
     background: $color-white;
     font-size: .8em;
     margin: 0;
-    width: $sidebarwidthsmall;
+    width: $sidebar-width-small;
 
     .sidebarhandle {
-      left: $sidebarwidthsmall + $buttondistance;
+      left: $sidebar-width-small + $button-distance;
     }
 
     .container, .infobox {
@@ -88,7 +88,7 @@
     }
   }
 
-  @media screen and (max-width: $minscreenwidth) {
+  @media screen and (max-width: $min-screen-width) {
     height: auto;
     min-height: 0;
     position: static;
@@ -107,9 +107,9 @@
 }
 
 .sidebarhandle {
-  left: $sidebarwidth + 2 * $buttondistance;
+  left: $sidebar-width + 2 * $button-distance;
   position: fixed;
-  top: $buttondistance;
+  top: $button-distance;
   transition: left .5s, box-shadow .5s, color .5s, transform .5s;
   z-index: 10;
 

scss/modules/_table.scss

@@ -1,7 +1,7 @@
 table {
   border-collapse: separate;
   border-spacing: 0 .5em;
-  padding: 0 $buttondistance;
+  padding: 0 $button-distance;
   width: 100%;
 
   &.attributes {

scss/modules/_tabs.scss

@@ -28,7 +28,7 @@
   }
 
   .visible {
-    border-bottom: 2pt solid $color-primary;
+    border-bottom: 2px solid $color-primary;
     color: $color-primary;
   }
 }

scss/modules/_variables.scss

@@ -15,12 +15,15 @@ $font-family: 'Roboto Slab', serif !default;
 $font-family-secondary: Roboto, sans-serif !default;
 $font-family-icons: ionicons !default;
 $font-family-monospace: monospace !default;
-$font-size: 11pt !default;
+$font-size: 15px !default;
+$font-size-small: $font-size / 1.4 !default;
 
-$minscreenwidth: 630pt !default;
-$sidebarwidth: 420pt !default;
-$sidebarwidthsmall: 320pt !default;
-$buttondistance: 12pt !default;
+$button-font-size: 1.6rem !default;
+$button-distance: 16px !default;
+
+$min-screen-width: 840px !default;
+$sidebar-width: 560px !default;
+$sidebar-width-small: 426px !default;
 
 // En/disable box-shadows
 $shadows: 1 !default;