Add .dropdown class (#29) and fix #36

dist/chota.css

@@ -24,10 +24,8 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 body {
-  letter-spacing: 0.01em;
   line-height: 1.6;
   font-size: var(--font-size);
-  font-weight: 400;
   font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
   font-family: var(--font-family);
   margin: 0;
@@ -67,6 +65,9 @@ a {
 a:hover:not(.button) {
   opacity: 0.75;
 }
+button {
+  font-family: inherit;
+}
 p {
   margin-top: 0;
 }
@@ -718,6 +719,7 @@ button:disabled:hover {
 .card {
     padding: 1rem 2rem;
     border-radius: 4px;
+    background: white;
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
@@ -778,6 +780,15 @@ button:disabled:hover {
 .tag+.tag {
   margin-left: 1rem;
 }
+details.dropdown {
+  position: relative;
+  display: inline-block;
+}
+details.dropdown > :last-child {
+  position: absolute;
+  left: 0;
+  white-space: nowrap;
+}
 /* Colors */
 .bg-primary {
     background-color: var(--color-primary) !important;

src/_base.css

@@ -25,10 +25,8 @@ html {
 }
 
 body {
-  letter-spacing: 0.01em;
   line-height: 1.6;
   font-size: var(--font-size);
-  font-weight: 400;
   font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
   font-family: var(--font-family);
   margin: 0;
@@ -78,6 +76,10 @@ a:hover:not(.button) {
   opacity: 0.75;
 }
 
+button {
+  font-family: inherit;
+}
+
 p {
   margin-top: 0;
 }

src/_card.css

@@ -1,6 +1,7 @@
 .card {
     padding: 1rem 2rem;
     border-radius: 4px;
+    background: white;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 

src/_dropdown.css

@@ -0,0 +1,10 @@
+details.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+details.dropdown > :last-child {
+  position: absolute;
+  left: 0;
+  white-space: nowrap;
+}

src/chota.css

@@ -7,5 +7,6 @@
 @import "_card.css";
 @import "_tab.css";
 @import "_tag.css";
+@import "_dropdown.css";
 
 @import "_util.css";