@fraziersoft/wisp 1.0.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Chris Frazier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+<a name="readme-top"></a>
+
+<!-- PROJECT LOGO -->
+<div align="center">
+  <a href="https://github.com/Frazier-Software/wisp">
+    <img src="private/logo.png" alt="Logo" width="254" height="258">
+  </a>
+
+<h3 align="center">Wisp</h3>
+
+  <p align="center">
+    A dead simple CSS boilerplate.
+    <br />
+    <a href="https://wisp.frazier.software"><strong>Explore the docs »</strong></a>
+  </p>
+</div>
+
+<!-- BADGES -->
+
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+- Light as a feather at ~500 lines & built with mobile in mind.
+- Styles designed to be a starting point, not a UI framework.
+- Quick to start with zero compiling or installing necessary.
+
+You should use Wisp if you're embarking on a smaller project or just don't feel like you need all
+the utility of larger frameworks. Wisp only styles a handful of standard HTML elements, but that's
+often more than enough to get started.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+To start using Wisp, just link to the CSS stylesheet (and optional JS file):
+
+```html
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/@fraziersoft/wisp@latest/dist/wisp.css"
+/>
+```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LICENSE -->
+
+## License
+
+Distributed under the MIT License. See `LICENSE.txt` for more information.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- ACKNOWLEDGMENTS -->
+
+## Acknowledgments
+
+This project started as a fork of a CSS boilerplate by [Dave Gamache][dave-url]. I wanted to update some of
+the base classes, remove some of the obsolete cruft, and add a few common web UI components that I thought
+warranted an inclusion. The original project was named Skeleton, but due to the rising popularity of the
+similarly named [Skeleton][skeleton-url] svelte toolkit, I decided a re-branding was also in order.
+
+Thank you Dave for all the hard work. The original version of Skeleton was useful for a ton of old projects
+and customer sites. Hopefully someone enjoys this refreshed edition as much as I enjoyed the original.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- MARKDOWN LINKS & IMAGES -->
+
+[issues-shield]: https://img.shields.io/github/issues/Frazier-Software/wisp.svg?style=for-the-badge
+[issues-url]: https://github.com/Frazier-Software/wisp/issues
+[license-shield]: https://img.shields.io/github/license/Frazier-Software/wisp.svg?color=44CC11&style=for-the-badge
+[license-url]: https://github.com/Frazier-Software/wisp/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/linkedin_username
+[dave-url]: https://github.com/dhg
+[skeleton-url]: https://www.skeleton.dev/

package/dist/wisp.css

@@ -0,0 +1,8 @@
+/*
+ * Wisp v1.0.0
+ * https://wisp.frazier.software/
+ *
+ * Copyright (c) 2024 Chris Frazier
+ * Licensed under the MIT license
+ */
+:root{--color-bg:#FDFDFD;--color-font:#222;--color-font-light:#FFF;--color-primary:#1EAEDB;--color-primary-light:#33C3F0;--color-primary-dark:#0FA0CE;--color-secondary:#B90E0A;--color-secondary-light:#D21404;--color-secondary-dark:#990F02;--color-neutral-1:#F1F1F1;--color-neutral-2:#D1D1D1;--color-neutral-3:#BBB;--color-neutral-4:#888;--color-neutral-5:#555;--color-neutral-6:#333;--font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;--border-radius:4px}html{font-size:62.5%}body{background:var(--color-bg);font-size:1.6em;line-height:1.6;font-weight:400;font-family:var(--font-family);color:var(--color-font)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.6rem;line-height:1.6;letter-spacing:0;font-weight:400}@media (min-width:640px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.6rem}}p{margin-top:0}a{color:var(--color-primary)}a:hover{color:var(--color-primary-dark)}.btn,button:not(.hljs-copy-button),input[type=button],input[type=reset],input[type=submit]{display:inline-block;height:38px;padding:0 30px;color:var(--color-neutral-5);text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:var(--border-radius);border:1px solid var(--color-neutral-3);cursor:pointer;box-sizing:border-box;transition:background .4s,color .4s}.btn:hover,button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{color:var(--color-neutral-6);border-color:var(--color-neutral-4);outline:0}.btn.btn--primary,button.btn--primary,input[type=button].btn--primary,input[type=reset].btn--primary,input[type=submit].btn--primary{color:var(--color-font-light);background-color:var(--color-primary-light);border-color:var(--color-primary-light)}.btn.btn--primary:hover,button.btn--primary:hover,input[type=button].btn--primary:hover,input[type=reset].btn--primary:hover,input[type=submit].btn--primary:hover{color:var(--color-font-light);background-color:var(--color-primary);border-color:var(--color-primary)}.btn.btn--warning,button.btn--warning,input[type=button].btn--warning,input[type=reset].btn--warning,input[type=submit].btn--warning{color:var(--color-secondary-light);border-color:var(--color-secondary-light)}.btn.btn--warning:hover,button.btn--warning:hover,input[type=button].btn--warning:hover,input[type=reset].btn--warning:hover,input[type=submit].btn--warning:hover{color:var(--color-secondary-dark);border-color:var(--color-secondary-dark)}.btn.btn--danger,button.btn--danger,input[type=button].btn--danger,input[type=reset].btn--danger,input[type=submit].btn--danger{color:var(--color-font-light);background:var(--color-secondary-light);border-color:var(--color-secondary-light)}.btn.btn--danger:hover,button.btn--danger:hover,input[type=button].btn--danger:hover,input[type=reset].btn--danger:hover,input[type=submit].btn--danger:hover{background:var(--color-secondary);border-color:var(--color-secondary)}.btn--ripple{position:relative;overflow:hidden}.btn--ripple .ripple{position:absolute;border-radius:50%;background-color:rgba(255,255,255,.4);transform:scale(0);animation:ripple .6s linear}@keyframes ripple{to{transform:scale(4);opacity:0}}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{height:38px;padding:6px 10px;background-color:var(--color-bg);border:1px solid var(--color-neutral-2);border-radius:var(--border-radius);box-shadow:none;box-sizing:border-box}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border:1px solid var(--color-primary-light);outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;cursor:pointer;margin-left:.5rem;font-weight:400}.toggle{font-size:61%;position:relative;top:.2em}.toggle input[type=checkbox]{appearance:none;position:relative;display:inline-block;box-sizing:content-box;width:4.5em;height:2em;padding:.2em;margin-bottom:0;border:none;cursor:pointer;border-radius:1.5em;overflow:hidden;background-color:var(--color-neutral-4);transition:background ease .3s}.toggle input[type=checkbox]:before{content:"on off";display:block;position:absolute;z-index:2;width:2em;height:2em;font-family:system-ui;font-size:1em;line-height:2em;font-weight:500;text-transform:uppercase;text-indent:-2em;word-spacing:2.55em;text-shadow:-1px -1px rgba(0,0,0,.15);white-space:nowrap;background:var(--color-font-light);color:var(--color-font-light);border-radius:1.5em;transition:transform cubic-bezier(.3, 1.5, .7, 1) .3s}.toggle input[type=checkbox]:checked{background-color:var(--color-primary-light)}.toggle input[type=checkbox]:checked:before{transform:translateX(2.5em)}.accordion-tab{border:1px solid var(--color-neutral-2);border-radius:var(--border-radius);margin-bottom:.5rem}.accordion-tab input{display:none}.accordion-tab label{display:flex;justify-content:space-between;margin-bottom:0;padding:5px 5px 5px 10px;cursor:pointer}.accordion-tab:not(.accordion-tab--close) label::after{content:"\276F";color:var(--color-neutral-5);width:1em;height:1em;text-align:center}.accordion-tab:not(.accordion-tab--close) input:checked+label::after{transform:rotate(90deg)}.accordion-tab.accordion-tab--close{border:none;margin-top:12px}.accordion-tab.accordion-tab--close label{font-size:75%;padding:0 0 0 10px}.accordion-content{max-height:0;overflow:hidden;padding:0 5px 0 10px;transition:max-height 650ms}.accordion-content p{margin-bottom:10px}.accordion-content p:first-child{margin-top:15px}.accordion-tab input:checked~.accordion-content{max-height:500rem}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem}li{margin-bottom:1rem}code{padding:2px 5px;margin:0 2px;font-size:90%;white-space:nowrap;background:var(--color-neutral-1);border:1px solid var(--color-neutral-2);border-radius:var(--border-radius)}pre>code{display:block;padding:10px 15px;white-space:pre}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid var(--color-neutral-2)}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.tooltip{cursor:help;border-bottom:1px dotted var(--color-neutral-5);position:relative}.tooltip::after,.tooltip::before{position:absolute;left:50%;opacity:0;z-index:-100}.tooltip:focus::after,.tooltip:focus::before,.tooltip:hover::after,.tooltip:hover::before{opacity:1;transform:scale(1) translateY(0);z-index:100}.tooltip::before{content:"";border-style:solid;border-width:1em .75em 0 .75em;border-color:var(--color-neutral-6) transparent transparent transparent;bottom:100%;margin-left:-.5em;transition:all .65s cubic-bezier(.84, -.18, .31, 1.26),opacity .65s .5s;transform:scale(.6) translateY(-90%)}.tooltip:focus::before,.tooltip:hover::before{transition:all .65s cubic-bezier(.84,-.18,.31,1.26) .2s}.tooltip::after{background:var(--color-neutral-6);border-radius:var(--border-radius);bottom:180%;color:var(--color-font-light);content:attr(data-tip);margin-left:-8.75em;padding:1em;transition:all .65s cubic-bezier(.84,-.18,.31,1.26) .2s;transform:scale(.6) translateY(50%);font-size:.9em;width:16em}.tooltip:focus::after,.tooltip:hover::after{transition:all .65s cubic-bezier(.84,-.18,.31,1.26)}.tooltip.tooltip--sm::after{font-size:.75em;margin-left:-5em;width:10em}@media (max-width:768px){.tooltip::after{font-size:.75em;margin-left:-5em;width:10em}}.btn,button:not(.hljs-copy-button){margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}hr{margin-top:30px;margin-bottom:35px;border-width:0;border-top:1px solid var(--color-neutral-2)}#back-to-top{display:inline-block;background-color:var(--color-primary-light);width:50px;height:50px;text-align:center;border-radius:var(--border-radius);position:fixed;bottom:30px;right:30px;transition:background-color .3s,opacity .5s,visibility .5s;opacity:0;visibility:hidden;z-index:1000}#back-to-top::after{content:"\276F";font-weight:400;font-style:normal;font-size:32px;line-height:50px;color:var(--color-bg);display:inline-block;transform:rotate(270deg)}#back-to-top:active,#back-to-top:hover{cursor:pointer;background-color:var(--color-primary)}#back-to-top.back-to-top--show{opacity:1;visibility:visible}.u-full{width:100%;box-sizing:border-box}.u-max{max-width:100%;box-sizing:border-box}.u-m0{margin:0}.u-mt0{margin-top:0}.u-mb0{margin-bottom:0}.u-ml0{margin-left:0}.u-mr0{margin-right:0}.u-p0{padding:0}.u-pt0{padding-top:0}.u-pb0{padding-bottom:0}.u-pl0{padding-left:0}.u-pr0{padding-right:0}@media (min-width:640px){.sm-hide{display:none!important}}@media (max-width:639px){.sm-show{display:none!important}}@media (min-width:768px){.md-hide{display:none!important}}@media (max-width:767px){.md-show{display:none!important}}@media (min-width:1024px){.lg-hide{display:none!important}}@media (max-width:1023px){.lg-show{display:none!important}}@media (min-width:1280px){.xl-hide{display:none!important}}@media (max-width:1279px){.xl-show{display:none!important}}@media (min-width:1536px){.xxl-hide{display:none!important}}@media (max-width:1535px){.xxl-show{display:none!important}}

package/dist/wisp.js

@@ -0,0 +1,8 @@
+/*
+ * Wisp v1.0.0
+ * https://wisp.frazier.software/
+ *
+ * Copyright (c) 2024 Chris Frazier
+ * Licensed under the MIT license
+ */
+function a(A){var _=A.currentTarget,B=document.createElement('span'),d=Math.max(_.clientWidth,_.clientHeight)/2,e=_.getBoundingClientRect();B.classList.add('ripple');B.style.width=B.style.height=`${2*d}px`;B.style.left=`${A.clientX-(e.left+d)}px`;B.style.top=`${A.clientY-(e.top+d)}px`;for(const el of _.querySelectorAll('.ripple'))el.remove();_.appendChild(B)}function b(C){return ()=>{document.documentElement.scrollTop>300?C.classList.add('back-to-top--show'):C.classList.remove('back-to-top--show')}}function c(_a){_a.preventDefault();document.documentElement.scrollIntoView({behavior:'smooth'})}(D=>document.readyState!=='loading'?D():document.addEventListener('DOMContentLoaded',D))(()=>{for(const E of document.querySelectorAll('.btn--ripple'))E.addEventListener('click',a);var _A=document.querySelector('#back-to-top');_A&&(document.addEventListener('scroll',b(_A)),_A.addEventListener('click',c))});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@fraziersoft/wisp",
+  "version": "1.0.0",
+  "description": "Simple CSS boilerplate",
+  "homepage": "https://wisp.frazier.software",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Frazier-Software/wisp.git"
+  },
+  "main": "dist/wisp.css",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "css",
+    "boilerplate"
+  ],
+  "scripts": {
+    "dev": "http-server docs",
+    "build": "sh scripts/build.sh",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "changelogen": "^0.5.7",
+    "http-server": "^14.1.1",
+    "minify": "^12.0.0",
+    "rimraf": "^6.0.1"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

package/src/wisp.css

@@ -0,0 +1,566 @@
+/* Variables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+:root {
+  --color-bg: #FDFDFD;
+  --color-font: #222;
+  --color-font-light: #FFF;
+
+  --color-primary: #1EAEDB;
+  --color-primary-light: #33C3F0;
+  --color-primary-dark: #0FA0CE;
+
+  --color-secondary: #B90E0A;
+  --color-secondary-light: #D21404;
+  --color-secondary-dark: #990F02;
+
+  --color-neutral-1: #F1F1F1;
+  --color-neutral-2: #D1D1D1;
+  --color-neutral-3: #BBB;
+  --color-neutral-4: #888;
+  --color-neutral-5: #555;
+  --color-neutral-6: #333;
+
+  --font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --border-radius: 4px; }
+
+
+/* Base styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+html {
+  font-size: 62.5%; }
+body {
+  background: var(--color-bg);
+  font-size: 1.6em;
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: var(--font-family);
+  color: var(--color-font); }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.6rem; line-height: 1.6;  letter-spacing: 0; font-weight: 400; }
+
+/* Larger than phablet */
+@media (min-width: 640px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.6rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: var(--color-primary); }
+a:hover {
+  color: var(--color-primary-dark); }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.btn,
+button:not(.hljs-copy-button),
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: var(--color-neutral-5);
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-neutral-3);
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: background 400ms, color 400ms;}
+.btn:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover {
+  color: var(--color-neutral-6);
+  border-color: var(--color-neutral-4);
+  outline: 0; }
+.btn.btn--primary,
+button.btn--primary,
+input[type="submit"].btn--primary,
+input[type="reset"].btn--primary,
+input[type="button"].btn--primary {
+  color: var(--color-font-light);
+  background-color: var(--color-primary-light);
+  border-color: var(--color-primary-light); }
+.btn.btn--primary:hover,
+button.btn--primary:hover,
+input[type="submit"].btn--primary:hover,
+input[type="reset"].btn--primary:hover,
+input[type="button"].btn--primary:hover {
+  color: var(--color-font-light);
+  background-color: var(--color-primary);
+  border-color: var(--color-primary); }
+.btn.btn--warning,
+button.btn--warning,
+input[type="submit"].btn--warning,
+input[type="reset"].btn--warning,
+input[type="button"].btn--warning {
+  color: var(--color-secondary-light);
+  border-color: var(--color-secondary-light); }
+.btn.btn--warning:hover,
+button.btn--warning:hover,
+input[type="submit"].btn--warning:hover,
+input[type="reset"].btn--warning:hover,
+input[type="button"].btn--warning:hover {
+  color: var(--color-secondary-dark);
+  border-color: var(--color-secondary-dark); }
+.btn.btn--danger,
+button.btn--danger,
+input[type="submit"].btn--danger,
+input[type="reset"].btn--danger,
+input[type="button"].btn--danger {
+  color: var(--color-font-light);
+  background: var(--color-secondary-light);
+  border-color: var(--color-secondary-light); }
+.btn.btn--danger:hover,
+button.btn--danger:hover,
+input[type="submit"].btn--danger:hover,
+input[type="reset"].btn--danger:hover,
+input[type="button"].btn--danger:hover {
+  background: var(--color-secondary);
+  border-color: var(--color-secondary); }
+
+
+/* Button Ripple Effect
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.btn--ripple {
+  position: relative;
+  overflow: hidden; }
+.btn--ripple .ripple {
+  position: absolute;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.4);
+  transform: scale(0);
+  animation: ripple 600ms linear; }
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0; }
+}
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-neutral-2);
+  border-radius: var(--border-radius);
+  box-shadow: none;
+  box-sizing: border-box; }
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  /* Removes awkward default styles on some inputs for iOS */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid var(--color-primary-light);
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  cursor: pointer;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Toggles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.toggle {
+  font-size: 61%;
+  position: relative;
+  top: 0.2em; }
+.toggle input[type="checkbox"] {
+  appearance: none;
+  position: relative;
+  display: inline-block;
+  box-sizing: content-box;
+  width: 4.5em;
+  height: 2em;
+  padding: 0.2em;
+  margin-bottom: 0;
+  border: none;
+  cursor: pointer;
+  border-radius: 1.5em;
+  overflow: hidden;
+  background-color: var(--color-neutral-4);
+  transition: background ease 0.3s; }
+.toggle input[type="checkbox"]:before {
+  content: "on off";
+  display: block;
+  position: absolute;
+  z-index: 2;
+  width: 2em;
+  height: 2em;
+  font-family: system-ui;
+  font-size: 1em;
+  line-height: 2em;
+  font-weight: 500;
+  text-transform: uppercase;
+  text-indent: -2em;
+  word-spacing: 2.55em;
+  text-shadow: -1px -1px rgba(0,0,0,0.15);
+  white-space: nowrap;
+  background: var(--color-font-light);
+  color: var(--color-font-light);
+  border-radius: 1.5em;
+  transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s; }
+.toggle input[type="checkbox"]:checked {
+  background-color: var(--color-primary-light); }
+.toggle input[type="checkbox"]:checked:before {
+  transform: translateX(2.5em); }
+
+
+/* Accordion
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.accordion-tab {
+  border: 1px solid var(--color-neutral-2);
+  border-radius: var(--border-radius);
+  margin-bottom: 0.5rem; }
+.accordion-tab input {
+  display: none; }
+.accordion-tab label {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+  padding: 5px 5px 5px 10px;
+  cursor: pointer; }
+.accordion-tab:not(.accordion-tab--close) label::after {
+  content: "\276F";
+  color: var(--color-neutral-5);
+  width: 1em;
+  height: 1em;
+  text-align: center; }
+.accordion-tab:not(.accordion-tab--close) input:checked + label::after {
+  transform: rotate(90deg); }
+.accordion-tab.accordion-tab--close {
+  border: none;
+  margin-top: 12px; }
+.accordion-tab.accordion-tab--close label {
+  font-size: 75%;
+  padding: 0 0 0 10px; }
+.accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  padding: 0 5px 0 10px;
+  transition: max-height 650ms; }
+.accordion-content p {
+  margin-bottom: 10px; }
+.accordion-content p:first-child {
+  margin-top: 15px; }
+.accordion-tab input:checked ~ .accordion-content {
+  max-height: 500rem; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: 2px 5px;
+  margin: 0 2px;
+  font-size: 90%;
+  white-space: nowrap;
+  background: var(--color-neutral-1);
+  border: 1px solid var(--color-neutral-2);
+  border-radius: var(--border-radius); }
+pre > code {
+  display: block;
+  padding: 10px 15px;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid var(--color-neutral-2); }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+.tooltip {
+  cursor: help;
+  border-bottom: 1px dotted var(--color-neutral-5);
+  position: relative; }
+.tooltip::before,
+.tooltip::after {
+  position: absolute;
+  left: 50%;
+  opacity: 0;
+  z-index: -100; }
+.tooltip:hover::before,
+.tooltip:focus::before,
+.tooltip:hover::after,
+.tooltip:focus::after {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  z-index: 100; }
+.tooltip::before {
+  content: "";
+  border-style: solid;
+  border-width: 1em 0.75em 0 0.75em;
+  border-color: var(--color-neutral-6) transparent transparent transparent;
+  bottom: 100%;
+  margin-left: -0.5em;
+  transition: all .65s cubic-bezier(.84, -0.18, 0.31, 1.26), opacity .65s .5s;
+  transform: scale(.6) translateY(-90%); }
+.tooltip:hover::before,
+.tooltip:focus::before {
+  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s; }
+.tooltip::after {
+  background: var(--color-neutral-6);
+  border-radius: var(--border-radius);
+  bottom: 180%;
+  color: var(--color-font-light);
+  content: attr(data-tip);
+  margin-left: -8.75em;
+  padding: 1em;
+  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+  transform: scale(.6) translateY(50%);  
+  font-size: .9em;
+  width: 16em; }
+.tooltip:hover::after,
+.tooltip:focus::after  {
+  transition: all .65s cubic-bezier(.84,-0.18,.31,1.26); }
+.tooltip.tooltip--sm::after {
+  font-size: .75em;
+  margin-left: -5em;
+  width: 10em; }
+
+@media (max-width: 768px) {
+  .tooltip::after {
+    font-size: .75em;
+    margin-left: -5em;
+    width: 10em; }
+}
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button:not(.hljs-copy-button),
+.btn {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 30px;
+  margin-bottom: 35px;
+  border-width: 0;
+  border-top: 1px solid var(--color-neutral-2); }
+
+
+#back-to-top {
+  display: inline-block;
+  background-color: var(--color-primary-light);
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  border-radius: var(--border-radius);
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  transition: background-color 300ms, opacity 500ms, visibility 500ms;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1000; }
+#back-to-top::after {
+  content: "\276F";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 32px;
+  line-height: 50px;
+  color: var(--color-bg);
+  display: inline-block;
+  transform: rotate(270deg);
+}
+#back-to-top:hover,
+#back-to-top:active {
+  cursor: pointer;
+  background-color: var(--color-primary); }
+#back-to-top.back-to-top--show {
+  opacity: 1;
+  visibility: visible; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-m0 { margin: 0; }
+.u-mt0 { margin-top: 0; }
+.u-mb0 { margin-bottom: 0; }
+.u-ml0 { margin-left: 0; }
+.u-mr0 { margin-right: 0; }
+.u-p0 { padding: 0; }
+.u-pt0 { padding-top: 0; }
+.u-pb0 { padding-bottom: 0; }
+.u-pl0 { padding-left: 0; }
+.u-pr0 { padding-right: 0; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Larger than phablet (sm) */
+@media (min-width: 640px) {
+  .sm-hide {
+    display: none !important; }
+}
+@media (max-width: 639px) {
+  .sm-show {
+    display: none !important; }
+}
+
+/* Larger than tablet (md) */
+@media (min-width: 768px) {
+  .md-hide {
+    display: none !important; }
+}
+@media (max-width: 767px) {
+  .md-show {
+    display: none !important;}
+}
+
+/* Larger than desktop (lg) */
+@media (min-width: 1024px) {
+  .lg-hide {
+    display: none !important; }
+}
+@media (max-width: 1023px) {
+  .lg-show {
+    display: none !important;}
+}
+
+/* Larger than Desktop HD (xl) */
+@media (min-width: 1280px) {
+  .xl-hide {
+    display: none !important; }
+}
+@media (max-width: 1279px) {
+  .xl-show {
+    display: none !important;}
+}
+
+/* Extra large (2xl) */
+@media (min-width: 1536px) {
+  .xxl-hide {
+    display: none !important; }
+}
+@media (max-width: 1535px) {
+  .xxl-show {
+    display: none !important;}
+}

package/src/wisp.js

@@ -0,0 +1,48 @@
+function createRipple(event) {
+  const btn = event.currentTarget;
+  const ripple = document.createElement('span');
+  const radius = Math.max(btn.clientWidth, btn.clientHeight) / 2;
+  const bounds = btn.getBoundingClientRect();
+
+  ripple.classList.add('ripple');
+  ripple.style.width = ripple.style.height = `${2 * radius}px`;
+  ripple.style.left = `${event.clientX - (bounds.left + radius)}px`;
+  ripple.style.top = `${event.clientY - (bounds.top + radius)}px`;
+
+  btn.querySelectorAll('.ripple').forEach(el => el.remove());
+  btn.appendChild(ripple);
+}
+
+function handleScroll(btt) {
+  return function () {
+    if (document.documentElement.scrollTop > 300) {
+      btt.classList.add('back-to-top--show');
+    } else {
+      btt.classList.remove('back-to-top--show');
+    }
+  };
+}
+
+function handleClick(event) {
+  event.preventDefault();
+  document.documentElement.scrollIntoView({
+    behavior: 'smooth',
+  });
+}
+
+const ready = cb => {
+  if (document.readyState !== 'loading') cb();
+  else document.addEventListener('DOMContentLoaded', cb);
+};
+
+ready(() => {
+  document.querySelectorAll('.btn--ripple').forEach(el => {
+    el.addEventListener('click', createRipple);
+  });
+
+  const btt = document.querySelector('#back-to-top');
+  if (btt) {
+    document.addEventListener('scroll', handleScroll(btt));
+    btt.addEventListener('click', handleClick);
+  }
+});