More responsive fixes

src/assets/images/hub_create_button_disabled.svg

@@ -7,21 +7,14 @@
 <use xlink:href="#path0_stroke" transform="translate(94 238)" fill="#C0C0C0"/>
 </g>
 <g id="Group 7">
-<g id="Rectangle">
-<use xlink:href="#path1_fill" transform="translate(112.7 260.667)" fill="#C0C0C0"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path2_fill" transform="translate(119.5 255.567)" fill="#C0C0C0"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path2_fill" transform="matrix(1 0 0 -1 119.5 270.867)" fill="#C0C0C0"/>
+<g id="Union">
+<use xlink:href="#path1_fill" transform="translate(112.7 255.567)" fill="#C0C0C0"/>
 </g>
 </g>
 </g>
 </g>
 <defs>
 <path id="path0_stroke" d="M 25.5 52.5C 40.4117 52.5 52.5 40.4117 52.5 25.5L 49.5 25.5C 49.5 38.7548 38.7548 49.5 25.5 49.5L 25.5 52.5ZM 52.5 25.5C 52.5 10.5883 40.4117 -1.5 25.5 -1.5L 25.5 1.5C 38.7548 1.5 49.5 12.2452 49.5 25.5L 52.5 25.5ZM 25.5 -1.5C 10.5883 -1.5 -1.5 10.5883 -1.5 25.5L 1.5 25.5C 1.5 12.2452 12.2452 1.5 25.5 1.5L 25.5 -1.5ZM -1.5 25.5C -1.5 40.4117 10.5883 52.5 25.5 52.5L 25.5 49.5C 12.2452 49.5 1.5 38.7548 1.5 25.5L -1.5 25.5Z"/>
-<path id="path1_fill" d="M 0 0L 6.8 0L 6.8 5.1L 0 5.1L 0 0Z"/>
-<path id="path2_fill" d="M 8.5 7.65L 0 7.65L 0 0L 8.5 7.65Z"/>
+<path id="path1_fill" fill-rule="evenodd" d="M 6.8 1.52588e-05L 15.3 7.65001L 6.8 15.3L 6.80001 10.2L 7.62939e-06 10.2L 7.62939e-06 5.10002L 6.80001 5.10002L 6.8 1.52588e-05Z"/>
 </defs>
 </svg>

src/assets/images/hub_create_button_enabled.svg

@@ -7,23 +7,14 @@
 <use xlink:href="#path0_fill" transform="translate(94 238)" fill="#2F80ED"/>
 <use xlink:href="#path1_stroke" transform="translate(94 238)" fill="#FFFFFF"/>
 </g>
-<g id="Group 7">
-<g id="Rectangle">
-<use xlink:href="#path2_fill" transform="translate(112.7 260.667)" fill="#FFFFFF"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path3_fill" transform="translate(119.5 255.567)" fill="#FFFFFF"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path3_fill" transform="matrix(1 0 0 -1 119.5 270.867)" fill="#FFFFFF"/>
-</g>
+<g id="Union">
+<use xlink:href="#path2_fill" transform="translate(112.7 255.567)" fill="#FFFFFF"/>
 </g>
 </g>
 </g>
 <defs>
 <path id="path0_fill" fill-rule="evenodd" d="M 25.5 51C 39.5833 51 51 39.5833 51 25.5C 51 11.4167 39.5833 0 25.5 0C 11.4167 0 0 11.4167 0 25.5C 0 39.5833 11.4167 51 25.5 51Z"/>
 <path id="path1_stroke" d="M 25.5 52.5C 40.4117 52.5 52.5 40.4117 52.5 25.5L 49.5 25.5C 49.5 38.7548 38.7548 49.5 25.5 49.5L 25.5 52.5ZM 52.5 25.5C 52.5 10.5883 40.4117 -1.5 25.5 -1.5L 25.5 1.5C 38.7548 1.5 49.5 12.2452 49.5 25.5L 52.5 25.5ZM 25.5 -1.5C 10.5883 -1.5 -1.5 10.5883 -1.5 25.5L 1.5 25.5C 1.5 12.2452 12.2452 1.5 25.5 1.5L 25.5 -1.5ZM -1.5 25.5C -1.5 40.4117 10.5883 52.5 25.5 52.5L 25.5 49.5C 12.2452 49.5 1.5 38.7548 1.5 25.5L -1.5 25.5Z"/>
-<path id="path2_fill" d="M 0 0L 6.8 0L 6.8 5.1L 0 5.1L 0 0Z"/>
-<path id="path3_fill" d="M 8.5 7.65L 0 7.65L 0 0L 8.5 7.65Z"/>
+<path id="path2_fill" fill-rule="evenodd" d="M 6.8 0L 15.3 7.64999L 6.8 15.3L 6.8 10.2L 0 10.2L 0 5.10001L 6.8 5.10001L 6.8 0Z"/>
 </defs>
 </svg>

src/assets/stylesheets/hub-create.scss

@@ -28,7 +28,7 @@
   width: 700px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
   .create-panel__form {
     width: auto;
     width: 500px;
@@ -57,10 +57,10 @@
 }
 
 .create-panel__form__name--expanded {
-  padding-top: 415px;
+  padding-top: 365px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
   .create-panel__form__name {
     min-width: auto;
     font-size: 1.5em;
@@ -139,7 +139,7 @@
   pointer-events: none;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
   .create-panel__form__environment {
     width: 100%;
   }
@@ -147,13 +147,13 @@
 
 .create-panel__form__environment__picker {
   width: 100%;
-  height: 390px;
+  height: 340px;
   border-bottom: 3px solid white;
   overflow: hidden;
   position: relative;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
   .create-panel__form__environment__picker {
     height: 280px;
   }
@@ -166,8 +166,8 @@
 }
 
 .create-panel__form__environment__picker__image {
-  width: 100%;
+  width: 112%;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: -3%;
+  left: -3%;
 }

src/assets/stylesheets/index.scss

@@ -46,14 +46,6 @@ body {
   z-index: 1;
 }
 
-@media (max-width: 768px) {
-  .background-video video {
-    width: 50%;
-    height: 50%;
-  }
-}
-
-
 .header-content {
   padding: 1.5em 2.5em 1.5em 2.5em;
   background-color: rgba(0, 0, 0, 0.85);
@@ -162,9 +154,14 @@ body {
   font-weight: bold;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
   .hero-content__container__title {
     font-size: 1.9em;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-content__container__title {
     text-align: center;
   }
 }
@@ -181,14 +178,19 @@ body {
   color: $light-text;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
   .hero-content__container__subtitle {
     font-size: 1.1em;
-    text-align: center;
     margin-top: 0.2em;
   }
 }
 
+@media (max-width: 768px) {
+  .hero-content__container__subtitle {
+    text-align: center;
+  }
+}
+
 @media (min-width: 1824px) {
   .hero-content__container__subtitle {
     font-size: 2.8em;