mobile first

dfinity · Dec 23, 2024 · 46afd4b · 46afd4b
1 parent 402071e
commit 46afd4b
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte
@@ -6,10 +6,10 @@
 
 <main data-tid="portfolio-page-component">
   <div class="top" class:single-card={$authSignedInStore}>
-    <Card>Card1</Card>
     {#if !$authSignedInStore}
       <LoginCard />
     {/if}
+    <Card>Card1</Card>
   </div>
   <div class="content">
     <Card>Card3</Card>
@@ -34,25 +34,28 @@
     }
 
     .top {
-      display: flex;
-      flex-direction: column-reverse;
+      display: grid;
+      grid-template-columns: 1fr;
       gap: var(--padding-2x);
 
       @include media.min-width(large) {
         display: grid;
         grid-template-columns: 1fr 2fr;
 
+        > :global(article:first-of-type) {
+          order: 1;
+        }
+
         &.single-card {
           grid-template-columns: 1fr;
         }
       }
     }
 
     .content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--padding-2x);
+      display: grid;
       grid-template-columns: 1fr;
+      gap: var(--padding-2x);
 
       @include media.min-width(large) {
         display: grid;