Use separate absolute spacing unit for layout, border-radius, and a f…

…ew elements
yegor256 · Mar 4, 2021 · 094d087 · 094d087
1 parent df2c05b
commit 094d087
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/scss/_defs.scss b/scss/_defs.scss
@@ -22,6 +22,7 @@
 
 // sizes
 $em: (18 / 16) * 1rem;
+$spacing: 18px;
 
 // fonts
 $sans-serif: system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;

diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -38,7 +38,7 @@ textarea,
 select,
 button {
   @extend %sans-serif;
-  border-radius: .2 * $em;
+  border-radius: .2 * $spacing;
   display: inline-block;
   padding: .55 * $em;
 
@@ -147,7 +147,7 @@ input[type="radio"] {
   flex-grow: 0;
   height: 1.65 * $em;
   margin-left: 0;
-  margin-right: .5 * $em;
+  margin-right: .5 * $spacing;
   vertical-align: middle;
 
   + label {
@@ -156,5 +156,5 @@ input[type="radio"] {
 }
 
 select[multiple] {
-  min-width: 15 * $em;
+  min-width: 15 * $spacing;
 }
diff --git a/scss/_grid.scss b/scss/_grid.scss
@@ -44,7 +44,7 @@ body {
   @extend %sans-serif;
   background: $white;
   color: lighten($black, 10);
-  padding: 2 * $em;
+  padding: 2 * $spacing;
 }
 
 p,
@@ -65,7 +65,7 @@ address {
 section {
   margin-left: auto;
   margin-right: auto;
-  width: 50 * $em;
+  width: 50 * $spacing;
 }
 
 aside {
@@ -76,7 +76,7 @@ aside {
 article,
 header,
 footer {
-  padding: 2.4 * $em;
+  padding: 2.4 * $spacing;
 }
 
 article {
@@ -94,8 +94,8 @@ nav {
 
     li {
       display: inline-block;
-      margin-left: .5 * $em;
-      margin-right: .5 * $em;
+      margin-left: .5 * $spacing;
+      margin-right: .5 * $spacing;
       vertical-align: middle;
 
       &:first-child {
@@ -111,7 +111,7 @@ nav {
 
 ol,
 ul {
-  margin-left: 1.75 * $em;
+  margin-left: 1.75 * $spacing;
 }
 
 li {

diff --git a/scss/_pre.scss b/scss/_pre.scss
@@ -36,7 +36,7 @@ pre {
   border-left: .1 * $em solid lighten($green, 25);
   line-height: 1.4 * $em;
   overflow: auto;
-  padding-left: $em;
+  padding-left: $spacing;
 
   code {
     background: none;
@@ -49,7 +49,7 @@ pre {
 code,
 kbd {
   background: lighten($green, 60);
-  border-radius: .2 * $em;
+  border-radius: .2 * $spacing;
   color: $green;
   display: inline-block;
   line-height: $em;

diff --git a/scss/_responsive.scss b/scss/_responsive.scss
@@ -22,17 +22,17 @@
 
 @media (max-width: $mobile-width) {
   body {
-    padding: $em 0;
+    padding: $spacing 0;
   }
 
   article {
     border: 0;
-    padding: $em;
+    padding: $spacing;
   }
 
   header,
   footer {
-    padding: $em;
+    padding: $spacing;
   }
 
   textarea,