em/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Add basic column view

Browse Source
This commit is contained in:
Emil Miler
2025-12-30 16:57:07 +01:00
parent 9aa925359e
commit 8df4e1fa53
4 changed files with 39 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
sass/chordpro.scss
View File

@@ -3,6 +3,9 @@
$col-white: #fff;
$col-black: #2e3440;
* {
box-sizing: border-box;
}
body {
margin: 0;
@@ -22,6 +25,18 @@ table {
padding: 3em 0 1em 1em;
}
html.column-view .song {
column-width: 15em;
column-gap: 6em;
column-fill: auto;
max-height: 100vh;
overflow: visible;
table, .verse, .chorus, .tab, .comment {
break-inside: avoid;
}
}
.title {
font-size: 1.5em;
font-weight: bold;

6
sass/style.scss
View File

@@ -179,8 +179,6 @@ main.song {
height: 100dvh;
display: flex;
flex-direction: column;
max-width: 50em;
margin: 0 auto;
iframe {
flex-grow: 1;
@@ -203,6 +201,7 @@ main.song {
&.transpose>.button:hover, &.transpose>.button.active { background-color: #5e81ac }
&.autoscroll>.button:hover, &.autoscroll>.button.active { background-color: #d08770 }
&.autoscroll>#autoscroll.active { background-color: #bf616a }
&.column-view>.button:hover, &.column-view>.button.active { background-color: #a3be8c }
.button{
display: grid;
@@ -231,6 +230,9 @@ main.song {
&.icon-scroll {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M12 10.0858L7.20712 5.29291L5.79291 6.70712L12 12.9142L18.2071 6.70712L16.7929 5.29291L12 10.0858ZM18 17L6.00001 17L6.00001 15L18 15V17Z'%3E%3C/path%3E%3C/svg%3E");
}
&.icon-column-view {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M5 19H19V5H5V19ZM3 4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4ZM15 7V17H17V7H15ZM11 7L11 17H13V7H11ZM7 17L7 7L9 7L9 17H7Z'%3E%3C/path%3E%3C/svg%3E");
}
}
}