first commit

src/assets/base.css

@@ -0,0 +1,68 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+
+  --white: #fcfcfc;
+  --background: #eff0f1;
+  --dark: #31363b;
+  --dark90: #31363be0;
+  --dark75: #31363bb0;
+  --dark50: #31363b80;
+  --dark25: #31363b40;
+  --shadow: #23262940;
+  --glow: #eff0f180;
+
+  --light-gray: #d9dfe3;
+  --dim-gray: #bdc3c7;
+  --dark-gray: #7f8c8d;
+  --neutral-gray: #606060;
+
+  --primary: #3daee9;
+  --secondary: #bdc3c7;
+
+  --selected: #3daee9;
+  --selected50: #3daee980;
+  --selected25: #3daee940;
+
+  --gray: #4d4d4d;
+  --gray25: #4d4d4d40;
+
+  --red: #da4453;
+  --red25: #da445340;
+  --red50: #da445380;
+
+  --orange: #f47750;
+  --orange25: #f4775040;
+
+  --yellow: #fdbc4b;
+  --yellow25: #fdbc4b40;
+  --yellow50: #fdbc4b80;
+
+  --green: #2ecc71;
+  --green25: #2ecc7140;
+
+  --blue: #1d99f3;
+  --blue25: #1d99f340;
+
+  --success: #1cdc9a;
+  --success25: #1cdc9a40;
+
+  --danger: #ed1515;
+  --danger25: #ed151540;
+  --danger50: #ed151580;
+
+  --indigo: #8e44ad;
+  --indigo25: #8e44ad40;
+
+  --info: #3daee9;
+  --info25: #3daee940;
+
+  --nav: var(--background);
+  --nav-button-hover: var(--light-gray);
+  --nav-button-selected: var(--dark);
+  --nav-secondary: var(--neutral-gray);
+  --nav-secondary-button-hover: var(--gray);
+  --dark-border: var(--dark-gray);
+  --light-border: var(--light-gray);
+  --focused-border: var(--gray);
+  --button-hover: var(--background);
+}

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/assets/main.css

@@ -0,0 +1,118 @@
+@import './base.css';
+
+html,
+body {
+  touch-action: manipulation;
+}
+
+body,
+textarea,
+input,
+pre {
+  margin: 0;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body,
+button,
+a,
+label {
+  color: var(--dark);
+}
+
+input,
+button {
+  border-radius: 8px;
+  border: 0;
+  text-align: center;
+}
+
+button.thinButton {
+  width: 56px;
+}
+
+button#start,
+button#stop {
+  width: 128px;
+  padding: 24px;
+  margin: 16px;
+}
+
+button#start {
+  background: var(--green);
+}
+
+button#stop {
+  background: var(--orange);
+}
+
+#controls,
+#presets {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#speedControls {
+  display: flex;
+}
+
+#bpm {
+  font-size: 32pt;
+  width: 140px;
+}
+
+#presetsControls {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+#playControls {
+  flex-grow: 1;
+  text-align: center;
+}
+
+.presetsControl {
+  width: 48px;
+  height: 48px;
+  margin: 16px;
+}
+
+.presetsControl:disabled {
+  opacity: 0.25;
+}
+
+#presetsItems {
+  display: flex;
+  justify-content: center;
+  align-self: center;
+  flex-wrap: wrap;
+}
+
+.presetItem {
+  min-width: 86px;
+  border-width: 1px;
+  border-color: var(--light-gray);
+  border-style: solid;
+  border-radius: 4px;
+  margin: 4px;
+  padding: 4px;
+  text-align: center;
+}
+
+.presetItem.selected {
+  background-color: var(--primary);
+}
+
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}