Looks/migrate welcome component

src/app/welcome/welcome.component.html

@@ -1,17 +1,17 @@
-<section class="welcome" fxFlex fxLayout="row">
-  <f-hero-sidebar fxHide.lt-md fxFlexAlign="start"></f-hero-sidebar>
-  <!-- <section class="content" fxFlex.gt-sm  > -->
-  <section class="content" fxFlex.gt-sm fxLayout.gt-sm="column" [ngClass.gt-sm]="'large'">
+<section class="welcome flex flex-row sm:h-screen">
+  <f-hero-sidebar class="sidebar self-start flex-col h-full"></f-hero-sidebar>
+  <section class="content flex flex-col sm:h-screen">
     <div class="container">
       <div class="subcontainer">
-        <div class="wordmark" fxLayout="row" fxLayoutAlign="start center" fxHide.gt-sm fxFlexAlign="start">
+        <div class="wordmark flex-row place-content-start">
           <img src="../../../assets/images/logo-bw.svg" width="40px" alt="Homepage Logo" />
           <p>{{ externalName.value }}</p>
         </div>
-        <h1 class="welcome-heading" fxFlexAlign="start">Welcome to {{ externalName.value }}</h1>
+        <h1 class="welcome-heading flex flex-row place-content-start">
+          Welcome to {{ externalName.value }}
+        </h1>
         <f-edit-profile-form mode="create"></f-edit-profile-form>
       </div>
     </div>
   </section>
-  <!-- </section> -->
-</section>
+</section>

src/styles/common/hero-sidebar-layout.scss

@@ -58,3 +58,22 @@ f-welcome .container {
 .welcome {
   width: 100%;
 }
+
+.sidebar {
+  display: flex; /* Initially visible */
+}
+
+.wordmark {
+  display: none; /* Initially invisible */
+}
+
+/* Sidebar and Wordmark Media query for screens 960px and below */
+
+@media (max-width: 959px) {
+  .sidebar {
+    display: none; /* Hide the element */
+  }
+  .wordmark{
+    display: flex; /* Show the element */
+  }
+}