breadboard.scss in sass-zero-0.0.45

- old
+ new

@@ -1,8 +1,13 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
+$font-family: $font-sans;
+
+$radius-input:  $rounded;
+$radius-button: $rounded;
+
 $color-bg--main:    $white;
 $color-bg--surface: $gray-100;
 $color-primary:     $gray-900;
 $color-txt:         $gray-900;
 $color-focus-ring:  rgba($gray-900, $opacity-50);
@@ -12,26 +17,22 @@
 $image-checked-radio-white:    url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
 
 html {
   background: $color-bg--main;
   color: $color-txt;
-  font-size: 14px;
+  font-family: $font-family;
+  font-size: 16px;
 }
 
-main {
-  padding-right: $size-2;
-  padding-left:  $size-2;
-}
-
 blockquote {
   border-color: $color-primary;
   border-left-width: $border-4;
   padding: $size-3 $size-4;
 }
 
 .btn {
-  border-radius: $rounded;
+  border-radius: $radius-button;
   border-width: $border;
   display: inline-block;
   font-weight: $font-bold;
   padding: $size-2 $size-4;
   cursor: pointer;
@@ -63,11 +64,11 @@
   }
 }
 
 code {
   background-color: $color-bg--surface;
-  border-radius: $rounded;
+  border-radius: $rounded-xl;
   font-size: $text-sm;
   margin: $size-0 $size-1;
   padding: $size-1 $size-2;
   white-space: nowrap;
 }
@@ -91,11 +92,11 @@
 }
 
 .input {
   appearance: none;
   background-color: $transparent;
-  border-radius: $rounded;
+  border-radius: $radius-input;
   border-width: $border;
   padding: $size-2 $size-3;
   width: $size-full;
 
   &--select {
@@ -140,27 +141,30 @@
     box-shadow: ring($color: $color-focus-ring);
     @include outline-none;
   }
 }
 
-label, legend, dt {
-  display: inline-block;
-  margin-bottom: $size-1;
-}
-
 a {
   font-weight: $font-bold;
 }
 
+ul, ol {
+  padding-left: $size-10;
+}
+
 ul {
-  list-style: disc inside;
+  list-style: disc outside;
 }
 
 ol {
-  list-style: decimal inside;
+  list-style: decimal outside;
 }
 
+label, legend, dt {
+  margin-bottom: $size-1;
+}
+
 h1, h2, h3, h4, h5, h6, .hdg {
   margin-bottom: $size-4;
 }
 
 fieldset, .input {
@@ -206,11 +210,6 @@
   font-size: $text-lg;
 }
 
 h6, .hdg--base {
   font-size: $text-base;
-}
-
-@media (min-width: $breakpoint-md) {
-  html { font-size: 16px; }
-  main { @include make-container($size-10, $breakpoint-xl); }
 }