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

Compare commits

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

2 Commits
61adf7de16 ... 76c823250c

Author SHA1 Message Date
aarbit
76c823250c Makes the display area larger, the selected patch clearer, and cleans up some unused CSS
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details
2025-02-13 18:39:11 -06:00
aarbit
ee7e8ef33c Adds custom favicon 2025-02-13 18:37:22 -06:00
5 changed files with 24 additions and 46 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="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/matrix-mod-logo.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 Normal file
View File

@ -0,0 +1,14 @@
<?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

After

Width:  |  Height:  |  Size: 864 B

1
public/vite.svg
View File

@ -1 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 1.5 KiB

49
src/App.css
View File

@ -1,63 +1,28 @@
#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: 4vh;
width: 4.2cqh;
aspect-ratio: 1;
}
.selected-option {
background-color: black;
font-size: larger;
background-color: lightslategrey;
font-weight: 800;
font-size: 2cqh;
color: black;
}
.unselected {
font-size: medium;
font-weight: 600;
font-size: 2cqh;
}
.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.87);
background-color: #242424;
color: rgba(255, 255, 255, 0.6);
background-color: #000000;
font-synthesis: none;
text-rendering: optimizeLegibility;