breadboard.scss in sass-zero-1.4.1

- old
+ new

@@ -28,26 +28,26 @@
 
 *, ::before, ::after {
   border-color: var(--color-border);
 }
 
-body {
+html {
   accent-color: var(--color-primary);
   background: var(--color-bg--main);
   color: var(--color-text);
   font-family: $font-family;
 }
 
-@media (max-width: $breakpoint-md - 1) {
-  body { font-size: $text-sm; }
+@media (min-width: $breakpoint-md) {
+  html { font-size: $text-xl; }
 }
 
 .btn {
   border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
-  padding: $size-1-5 $size-4;
+  padding: $size-1 $size-3;
   font-weight: $font-medium;
   cursor: pointer;
 
   &--primary {
     background-color: var(--color-primary);
@@ -84,11 +84,11 @@
   appearance: none;
   resize: none;
   background-color: var(--color-bg--surface);
   border-radius: $radius-secondary;
   border-width: $border;
-  padding: $size-2-5;
+  padding: $size-2;
   width: $w-full;
 
   &--select {
     background-image:
       linear-gradient(45deg, transparent 49%, var(--color-text) 51%),
@@ -105,23 +105,22 @@
 }
 
 .dropdown {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-6;
-  box-shadow: $shadow-lg;
+  padding: $size-4;
   position: absolute;
   z-index: $z-10;
 }
 
 [type="checkbox"], [type="radio"] {
-  transform: scale(1.7); margin: $size-1;
+  transform: scale(1.35); margin: $size-1;
 }
 
 blockquote {
   border-left-width: $border-4;
-  padding: $size-3;
+  padding: $size-2-5;
 }
 
 code {
   background-color: var(--color-bg--main);
   border-radius: $rounded;
@@ -136,11 +135,11 @@
   overflow-y: hidden;
 
   > code {
     border-radius: $rounded-none;
     display: block;
-    padding: $size-3;
+    padding: $size-2-5;
     white-space: pre;
   }
 }
 
 kbd {
@@ -157,15 +156,16 @@
   padding: $size-1;
   color: inherit;
 }
 
 hr {
-  margin: $size-6 $size-0;
+  border-color: var(--color-primary);
+  margin: $size-5 $size-0;
 }
 
 menu, ul, ol {
-  padding-left: $size-8;
+  padding-left: $size-10;
 }
 
 menu, ul {
   list-style: disc outside;
 }
@@ -177,25 +177,25 @@
 dt {
   font-weight: $font-bold;
 }
 
 fieldset, .input {
-  margin-bottom: $size-6;
+  margin-bottom: $size-5;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-6;
+  margin-bottom: $size-5;
 }
 
 table, progress, blockquote, pre, menu, ul, ol, dl, p {
-  margin-bottom: $size-6;
+  margin-bottom: $size-5;
 }
 
 dialog {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-6;
+  padding: $size-4;
   box-shadow: $shadow-lg;
   color: inherit;
 }
 
 dialog::backdrop {
@@ -218,37 +218,36 @@
   width: $w-full;
 }
 
 td, th {
   border-bottom-width: $border;
-  padding: $size-4;
+  padding: $size-2-5;
   text-align: left;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  font-weight: $font-bold;
-  line-height: $leading-tight;
+  font-weight: $font-bold; line-height: $leading-none;
 }
 
 h1, .hdg--xx-large {
-  font-size: $text-5xl;
+  font-size: $text-4xl;
 }
 
 h2, .hdg--x-large {
-  font-size: $text-4xl;
+  font-size: $text-3xl;
 }
 
 h3, .hdg--large {
-  font-size: $text-3xl;
+  font-size: $text-2xl;
 }
 
 h4, .hdg--medium {
-  font-size: $text-2xl;
+  font-size: $text-xl;
 }
 
 h5, .hdg--small {
-  font-size: $text-xl;
+  font-size: $text-lg;
 }
 
 h6, .hdg--x-small {
-  font-size: $text-lg;
+  font-size: $text-base;
 }