Showcase UI refactor

src/App.vue

@@ -3,8 +3,6 @@
         <div class="layout-news" v-if="newsActive">
             <div class="layout-news-container">
                 <img class="layouts-news-mockup-image" src="./assets/images/topbar-ultima-device.png">
-                <span class="layout-news-details">
-                </span>
                 <a href="https://www.primefaces.org/layouts/ultima-vue" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
                     LEARN MORE<i class="pi pi-angle-right"></i>
                 </a>

src/assets/styles/app/_news.scss

@@ -1,9 +1,9 @@
 .layout-news {
     height: 70px;
-    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-left: 250px;
     background-image: linear-gradient(to left, #1565c0, #0D47A1);
 
     .layout-news-container {
@@ -16,26 +16,6 @@
         font-weight: bold;
         font-size: 20px;
 
-        .layout-news-details {
-            display: flex;
-            align-items: center;
-            z-index: 1;
-
-            .rate {
-                color: #f2b837;
-                font-size: 25px;
-                font-weight: bold;
-                margin: 0 .25rem;
-            }
-
-            .helper-text {
-                background-color: #f2b837;
-                color: #212121;
-                padding: 0 0.2rem;
-                margin-right: 0.3rem;
-            }
-        }
-
         img.layouts-news-mockup-image {
             height: 70px;
         }
@@ -52,7 +32,7 @@
             align-items: center;
             flex-shrink: 0;
             transition: background-color 0.15s;
-            margin-left: 2em;
+            margin-left: -1rem;
             position: relative;
             z-index: 1;
 

src/assets/styles/app/_responsive.scss

@@ -1,28 +1,17 @@
 
 @media screen and (max-width: 960px) {
-    .layout-wrapper.layout-news-active {
+    .layout-wrapper {
-        .layout-content {
+        .layout-news {
-            padding-top: 180px;
+            margin-left: 0;
-        }
 
-        .layout-sidebar {
+            .layout-news-button {
-            top: 0;
+                display: none;
-            height: 100%;
+            }
-        }
-
-        .layout-news-button {
-            opacity: 0;
-            position: absolute;
-            z-index: 1;
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            top: 0;
-            left: 0;
         }
     }
 
     .layout-topbar {
+        margin-left: 0;
         height: 110px;
         flex-wrap: wrap;
         justify-content: space-between;
@@ -72,10 +61,8 @@
     }
 
     .layout-sidebar {
-        top: 0;
-        z-index: 999;
-        height: 100%;
         transform: translateX(-100%);
+        z-index: 999;
 
         &.active {
             transform: translateX(0);
@@ -84,7 +71,6 @@
 
     .layout-content {
         margin-left: 0;
-        padding-top: 110px;
 
         .content-section {
             &.introduction {

src/assets/styles/app/_topbar.scss

@@ -2,13 +2,12 @@
     background-color: var(--surface-a);
     padding: 0;
     height: 70px;
-    width: 100%;
     box-shadow: 0 0 4px rgba(0,0,0,0.25);
     border-bottom: 1px solid var(--surface-d);
     display: flex;
     align-items: center;
     padding: 0 35px;
-    padding-left: 285px;
+    margin-left: 250px;
 
     .menu-button {
         display: none;
@@ -89,6 +88,7 @@
                     transform-origin: top;
                     top: 70px;
                     right: 0;
+                    z-index: 1;
                     width: 275px;
                     max-height: 400px;
                     background-color: var(--surface-f);