Style changes

src/components/Nav.vue

@@ -120,17 +120,18 @@ function openDiscord() {
     left: 0;
     right: 0;
     top: 0;
-    height: 46px;
+    height: 4vmin;
     width: 100%;
     border-bottom: 4px solid var(--outline);
 }
 
 .nav > * {
-    height: 46px;
+    height: 4vmin;
-    width: 46px;
+    width: 4vmin;
     display: flex;
     cursor: pointer;
     flex-shrink: 0;
+    font-size: 3.5vmin;
 }
 
 .nav > .banner {
@@ -148,8 +149,8 @@ function openDiscord() {
 }
 
 .overlay-nav > * {
-    height: 50px;
+    height: 4vmin;
-    width: 50px;
+    width: 4vmin;
     display: flex;
     cursor: pointer;
     margin: 0;
@@ -158,7 +159,6 @@ function openDiscord() {
 }
 
 .title {
-    font-size: 36px;
     text-align: left;
     margin-left: 12px;
     cursor: unset;
@@ -217,8 +217,8 @@ function openDiscord() {
     margin-bottom: 4px;
 }
 
-.discord-links li:first-child {
+.discord-links li {
-    font-size: 1.2em;
+    font-size: 2vmin;
 }
 
 *:not(.overlay-nav) .discord:hover .discord-links {
@@ -226,7 +226,7 @@ function openDiscord() {
 }
 
 .material-icons {
-    font-size: 36px;
+    font-size: 4vmin;
 }
 
 .material-icons:hover {
@@ -238,6 +238,7 @@ function openDiscord() {
     height: 25px;
     margin-bottom: 0;
     margin-left: 10px;
+    font-size: 2vmin;
 }
 
 .overlay-nav .version-container {

src/data/CharacterSlot.vue

@@ -167,6 +167,7 @@ watchEffect(() => {
 
 .character.shake {
     animation: shake 0.5s infinite;
+    z-index: 10;
 }
 
 .character * {

src/data/common.css

@@ -140,6 +140,7 @@
     padding: 1vmin 0 0.5vmin 0;
     cursor: pointer;
     width: 100%;
+    font-size: 2vmin;
 }
 
 .stream-type.active {
@@ -176,6 +177,7 @@
 .no-margin .row {
     margin: 0;
     flex-flow: row;
+    z-index: 10;
 }
 
 .shop .row::after {
@@ -229,6 +231,8 @@
 .battle-container {
     display: flex;
     flex-direction: column;
+    margin: -25px 0;
+    height: calc(100% + 50px);
 }
 
 .battle-container:not(.fast) * {
@@ -237,7 +241,7 @@
 
 .teams-container {
     display: flex;
-    height: calc(93vh - 154px);
+    height: calc(93vh - 104px);
     width: 93%;
     flex-direction: column;
 }
@@ -261,6 +265,7 @@
     filter: drop-shadow(2px 4px 6px black);
     text-shadow: -1px 1px 0 var(--raised-background), 1px 1px 0 var(--raised-background), 1px -1px 0 var(--raised-background), -1px -1px 0 var(--raised-background);
     z-index: 1;
+    overflow: hidden;
 }
 
 .stream-details {
@@ -292,7 +297,7 @@
 }
 
 .members-container {
-    width: 18vmin;
+    margin: auto 0;
 }
 
 .members-container .col {
@@ -314,7 +319,6 @@
 
 .battle-controls {
     display: flex;
-    margin-top: -2vmin;
 }
 
 .battle-controls .button {
@@ -336,13 +340,18 @@
     left: 50%;
     transform: translate(-50%, -50%);
     cursor: pointer;
+    z-index: 1;
 }
 
 .character-transition-enter-from {
-    transform: translateX(-100%);
+    transform: translateX(-200%);
 }
 .character-transition-leave-to {
-    transform: translateX(100%);
+    transform: translateX(-200%);
+}
+.team-container:first-child 
+.character-transition-leave-to {
+    transform: translateX(200%);
 }
 .streamer-transition-enter-from {
     transform: translateY(100%);
@@ -385,3 +394,18 @@
   50% { transform: rotate(30deg); }
   80% {transform:scale(.95);}
 }
+
+@media (orientation: landscape) {
+    .members-container .col {
+        flex-direction: row-reverse;
+    }
+
+    .team-container:first-child .members-container .col {
+        flex-direction: row;
+    }
+
+    .stream-container {
+        width: 50%;
+        margin: 0;
+    }
+}

src/data/projEntry.tsx

@@ -910,6 +910,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
     return {
         name: "Game",
         minimizable: false,
+        minWidth: 100,
         display: jsx(() => {
             if (wins.value >= 5) {
                 return (
@@ -920,7 +921,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                 <CharacterSlot character={team.value[i]} />
                             ))}
                         </Row>
-                        <img src={playAgain} class="button" onClick={() => location.reload()} />
+                        <img
+                            src={playAgain}
+                            class="button"
+                            style="height: 20vmin; image-rendering: pixelated;"
+                            onClick={() => location.reload()}
+                        />
                         {render(particles)}
                     </div>
                 );
@@ -1029,6 +1035,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                             />
                                         ))}
                                     </TransitionGroup>
+                                    <div style="font-size: 5vmin; margin: 5vmin;">→</div>
                                 </Column>
                             </div>
                             <div class="team-container">
@@ -1088,6 +1095,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                             />
                                         ))}
                                     </TransitionGroup>
+                                    <div style="font-size: 5vmin; margin: 5vmin;">←</div>
                                 </Column>
                             </div>
                         </div>