aarbit/matrix-mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: aarbit:76c823250c898a990c6b84c8054d482878b5161c
Branches Tags
aarbit:main
..
compare: aarbit:61adf7de161b0461944c3b215d49f1f2ff44647e
Branches Tags
aarbit:main

No commits in common. "76c823250c898a990c6b84c8054d482878b5161c" and "61adf7de161b0461944c3b215d49f1f2ff44647e" have entirely different histories.
76c823250c ... 61adf7de16

5 changed files with 46 additions and 24 deletions
Show Stats Expand all files Collapse all files

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/matrix-mod-logo.svg" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matrix 1000 Patch Selector</title>
</head>

14
public/matrix-mod-logo.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 612 792">
<!-- Generator: Adobe Illustrator 29.2.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 116) -->
<defs>
<style>
.st0 {
fill: none;
}
</style>
</defs>
<path d="M241.1,512.1c0,16.9-13.7,30.5-30.5,30.5s-30.5-13.7-30.5-30.5,13.7-30.5,30.5-30.5,30.5,13.7,30.5,30.5ZM210.5,484.5c-8.9,0-10.3,12.3-10.3,27.6s.6,27.6,10.3,27.6,10.3-12.3,10.3-27.6-1.4-27.6-10.3-27.6Z"/>
<polygon points="232.2 482.5 235.5 485.8 230.1 538 226.6 541.9 242 541.9 239.2 537.1 242.9 503.4 255.9 534.4 266.2 542.4 267.8 542.4 280.5 503.4 284.5 539 282.4 541.9 303.5 541.9 300.9 536.8 295.8 486.4 297.9 482.5 278.4 482.5 266 517.8 252.7 482.5 232.2 482.5"/>
<rect class="st0" x="178" y="447.9" width="128" height="128"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 864 B

1
public/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

49
src/App.css
View File

@ -1,28 +1,63 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
.selections-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.option-box {
width: 4.2cqh;
width: 4vh;
aspect-ratio: 1;
}
.selected-option {
background-color: lightslategrey;
font-weight: 800;
font-size: 2cqh;
color: black;
background-color: black;
font-size: larger;
}
.unselected {
font-weight: 600;
font-size: 2cqh;
font-size: medium;
}
.midi-settings-container {

4
src/index.css
View File

@ -4,8 +4,8 @@
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.6);
background-color: #000000;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;