From 7b67be87d38215471ef3e29a55d0c0d76a7e5bc6 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Wed, 17 Apr 2019 00:33:50 +0300
Subject: [PATCH] Fix views on small resolutions

---
 public/src/css/main.css |  4 ++--
 public/src/css/view.css | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/src/css/main.css b/public/src/css/main.css
index 6927ff1..c6e1f80 100644
--- a/public/src/css/main.css
+++ b/public/src/css/main.css
@@ -40,10 +40,10 @@
 }
 @keyframes bgscroll{
 	from{
-		background-position: 0 top;
+		background-position: 50% top;
 	}
 	to{
-		background-position: calc(-100vh / 720 * 512) top;
+		background-position: calc(50% - 100vh / 720 * 512) top;
 	}
 }
 #song-select{
diff --git a/public/src/css/view.css b/public/src/css/view.css
index f4e4443..0340d97 100644
--- a/public/src/css/view.css
+++ b/public/src/css/view.css
@@ -6,6 +6,7 @@
 	position: absolute;
 	width: 100%;
 	height: 100%;
+	background-position: center;
 }
 .view{
 	background: rgb(246, 234, 212);
@@ -13,11 +14,22 @@
 	border: 0.25em black solid;
 	border-radius: 0.5em;
 	width: 800px;
+	max-width: 40em;
 	padding: 1em;
 	margin: 1em;
 	font-size: 21px;
 	position: relative;
 }
+@media (max-width: 950px){
+	.view-outer:not(.touch-enabled) .view{
+		font-size: 3vmin;
+	}
+}
+@media (max-height: 650px){
+	.view-outer:not(.touch-enabled) .view{
+		font-size: 3vmin;
+	}
+}
 .touch-enabled .view{
 	font-size: 3vmin;
 }
@@ -161,6 +173,8 @@ kbd{
 	padding: 0.3em;
 	font-size: 1.3em;
 	box-sizing: border-box;
+	white-space: nowrap;
+	overflow: hidden;
 }
 .view-content:not(:hover) .setting-box.selected .setting-name,
 .view-outer:not(.settings-outer) .setting-box.selected .setting-name,