Globally set box-sizing to border-box (and improve code snippet copy button)

.changeset/gorgeous-months-attack.md

@@ -0,0 +1,11 @@
+---
+"water.css": major
+---
+
+Globally set box-sizing to border-box
+
+This is a breaking change because of the potential to break many layouts/sites
+
+We made this change because it makes many facets of writing CSS easier and more convenient
+
+If it's an issue, you can apply `html { box-sizing: content-box; }` 

dist/dark.css

@@ -237,5 +237,3 @@ tbody tr:nth-child(even) {
 ::-webkit-scrollbar-thumb:hover {
   background: #415c73;
 }
-
-/*# sourceMappingURL=dark.css.map */

docs/scripts/docs.js

@@ -327,18 +327,12 @@ for (const category of categories) {
     const pre = document.createElement('pre')
     const code = document.createElement('code')
     code.innerText = snippet.code.trim()
-    code.style.position = 'relative'
+    pre.style.position = 'relative'
+    pre.appendChild(code)
 
     const button = document.createElement('button')
     button.innerText = 'Copy'
-    Object.assign(button.style, {
-      position: 'absolute',
-      top: '0',
-      right: '0',
-      margin: '6px',
-      padding: '8px'
-    })
-
+    button.className = 'snippet-copy'
     let timeout = null
     button.addEventListener('click', () => {
       navigator.clipboard.writeText(snippet.code.trim())
@@ -347,9 +341,7 @@ for (const category of categories) {
       timeout = setTimeout(() => { button.innerText = 'Copy' }, 1000)
     })
 
-    code.appendChild(button)
-
-    pre.appendChild(code)
+    pre.appendChild(button)
     demosContainer.appendChild(pre)
 
     const details = document.createElement('details')

docs/style.css

@@ -36,13 +36,6 @@
   transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1) 220ms;
 }
 
-/* This is a really *really* evil hack to get around a half-char of overflow. */
-@media only screen and (min-width: 840px) {
-  #link-snippet-container > pre > code {
-    overflow: hidden;
-  }
-}
-
 #link-snippet-container > pre[hidden] {
   display: block;
   visibility: hidden;
@@ -69,7 +62,6 @@ body > footer {
   justify-content: space-between;
 }
 
-/* Hmmm yes great class name */
 .top-theme-form {
   padding: 10px 0;
   top: 0;
@@ -79,3 +71,16 @@ body > footer {
   z-index: 999;
   background: var(--background-body);
 }
+
+.snippet-copy {
+  opacity: 0.5;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 6px;
+  padding: 8px;
+}
+
+.snippet-copy:hover {
+  opacity: 1;
+}

src/parts/_base.css

@@ -1,3 +1,13 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 body {
   font-family:
     system-ui,
@@ -31,5 +41,6 @@ textarea {
     border-color var(--animation-duration) linear,
     color var(--animation-duration) linear,
     box-shadow var(--animation-duration) linear,
-    transform var(--animation-duration) ease;
+    transform var(--animation-duration) ease-in-out,
+    opacity var(--animation-duration) linear;
 }

src/parts/_forms.css

@@ -88,7 +88,6 @@ textarea {
 textarea {
   display: block;
   margin-right: 0;
-  box-sizing: border-box;
   resize: vertical;
 }