Merge branch 'develop' into feature-discussion

front/dist/resources/style/style.css

@@ -252,15 +252,10 @@ body {
 .main-container {
     height: 100vh;
     width: 100vw;
-    display: flex;
-    align-items: stretch;
+    position: absolute;
 }
 
 @media (min-aspect-ratio: 1/1) {
-    .main-container {
-        flex-direction: row;
-    }
-
     .game-overlay {
         flex-direction: row;
     }
@@ -276,12 +271,21 @@ body {
     .sidebar > div:hover {
         max-height: 25%;
     }
+
+    #cowebsite {
+        right: 0;
+        top: 0;
+        width: 50%;
+        height: 100vh;
+    }
+    #cowebsite.loading {
+        transform: translateX(90%);
+    }
+    #cowebsite.hidden {
+        transform: translateX(100%);
+    }
 }
 @media (max-aspect-ratio: 1/1) {
-    .main-container {
-        flex-direction: column;
-    }
-
     .game-overlay {
         flex-direction: column;
     }
@@ -298,24 +302,36 @@ body {
     .sidebar > div:hover {
         max-width: 25%;
     }
+
+    #cowebsite {
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 50%;
+    }
+    #cowebsite.loading {
+        transform: translateY(90%);
+    }
+    #cowebsite.hidden {
+        transform: translateY(100%);
+    }
 }
 
-.game {
-    flex-basis: 100%;
+#game {
+    width: 100%;
     position: relative; /* Position relative is needed for the game-overlay. */
 }
 
 /* A potentially shared website could appear in an iframe in the cowebsite space. */
-.cowebsite {
-    flex-basis: 100%;
-    transition: flex-basis 0.5s;
+#cowebsite {
+    position: fixed;
+    transition: transform 0.5s;
+}
+#cowebsite.loading {
+    background-color: gray;
 }
 
-/*.cowebsite:hover {
-    flex-basis: 100%;
-}*/
-
-.cowebsite > iframe {
+#cowebsite > iframe {
     width: 100%;
     height: 100%;
 }