diff --git a/src/routes/streams/+layout.svelte b/src/routes/streams/+layout.svelte
index 5f1366b..0e3735f 100644
--- a/src/routes/streams/+layout.svelte
+++ b/src/routes/streams/+layout.svelte
@@ -32,7 +32,7 @@
height: calc(100dvh - 1em);
}
- @media (max-width: 500px) {
+ @media (max-width: 575px) {
#mainContainer {
grid-template-columns: 100%;
grid-template-rows: 70% 1fr;
diff --git a/src/routes/streams/Sidebar.svelte b/src/routes/streams/Sidebar.svelte
index 775af49..41019d2 100644
--- a/src/routes/streams/Sidebar.svelte
+++ b/src/routes/streams/Sidebar.svelte
@@ -199,9 +199,10 @@
border: 0;
}
- @media (max-width: 500px) {
+ @media (max-width: 575px) {
.stream-item-star {
opacity: 0.5;
+ font-size: 24px;
}
}
diff --git a/src/routes/streams/[stream_id]/+page.svelte b/src/routes/streams/[stream_id]/+page.svelte
index 215c0ac..c9c6bab 100644
--- a/src/routes/streams/[stream_id]/+page.svelte
+++ b/src/routes/streams/[stream_id]/+page.svelte
@@ -41,4 +41,11 @@
margin-right: 1px;
height: 100%;
}
+
+ @media (max-width: 575px) {
+ #streamPage {
+ background: local url('/assets/result.png') top right / 80% no-repeat,
+ rgba(0, 0, 0, 0.8);
+ }
+ }
diff --git a/src/routes/streams/[stream_id]/StreamPage.svelte b/src/routes/streams/[stream_id]/StreamPage.svelte
index 373a149..eeb9094 100644
--- a/src/routes/streams/[stream_id]/StreamPage.svelte
+++ b/src/routes/streams/[stream_id]/StreamPage.svelte
@@ -17,8 +17,10 @@
@@ -32,12 +34,15 @@
{#each $currentStream.tracks as track, i}
| {formatTrackTime(track[0])}
-
+ >
+ {formatTrackTime(track[0])}
+
+
|
{track[1]} |
{track[2]} |
@@ -56,6 +61,13 @@
position: relative;
}
+ .stream-information-flexbox {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-bottom: calc(1.17em - 4px); /* autism */
+ }
+
#table-container {
margin-left: 3%;
}
@@ -70,7 +82,7 @@
th,
td {
- padding: 2px;
+ padding: 3px;
line-height: 1.15;
}
@@ -78,6 +90,11 @@
white-space: nowrap;
}
+ .timestamp-field-flex {
+ display: flex;
+ align-items: center;
+ }
+
.artist-field {
padding-right: 2em;
}
@@ -85,9 +102,8 @@
.stream-date {
font-size: x-large;
font-family: 'Montserrat';
- right: 0;
- position: absolute;
margin-right: 3%;
+ margin-bottom: 0;
text-decoration: underline;
}
@@ -97,6 +113,7 @@
}
.stream-id {
font-family: 'Montserrat';
+ margin-bottom: 0;
}
.current {
@@ -162,9 +179,24 @@
border: 0;
}
- @media (max-width: 500px) {
+ @media (max-width: 575px) {
.material-icons {
opacity: 0.5;
}
+
+ .stream-id {
+ margin-bottom: 0px;
+ }
+
+ .stream-information {
+ width: initial;
+ }
+ .description-bubble {
+ max-width: initial;
+ }
+
+ .description-bubble::after {
+ visibility: hidden;
+ }
}