Increase traversal card size

Author: jlukic

docs/src/layouts/Layout.astro

@@ -2,7 +2,7 @@
 import '../css/layers.css';
 import '../css/fonts.css';
 
-import { UIIcon } from '@semantic-ui/core';
+import { UICard, UIIcon } from '@semantic-ui/core';
 import Body from './Body.astro';
 import Sidebar from '@components/Sidebar.astro';
 import DocsMasthead from '@components/DocsMasthead.astro';
@@ -69,26 +69,26 @@ const activeURL = Astro.url.pathname;
 					<div class="traversal">
 						<ui-container>
 							{pageTraversal.previous && (
-								<ui-card href={pageTraversal.previous.url} previous>
+								<UICard fluid href={pageTraversal.previous.url} previous>
 		              <div class="label">
 		                <ui-icon icon="left chevron"></ui-icon>
 		                Previous
 		              </div>
 		              <div class="header">
 		                {pageTraversal.previous.name}
 		              </div>
-								</ui-card>
+								</UICard>
 							)}
 							{pageTraversal.next && (
-								<ui-card href={pageTraversal.next.url} next>
+								<UICard fluid href={pageTraversal.next.url} next>
 		              <div class="label">
 		                Next
 		                <ui-icon icon="right chevron"></ui-icon>
 		              </div>
 		              <div class="header">
 		                {pageTraversal.next.name}
 		              </div>
-								</ui-card>
+								</UICard>
 							)}
 						</ui-container>
 					</div>

docs/src/layouts/Layout.css

@@ -76,31 +76,32 @@
 
       ui-container {
         display: flex;
-
+        gap: 2rem;
       }
 
       ui-card {
         text-align: left;
-        min-width: 300px;
+        width: 50%;
+
+        flex-grow: 1;
         .label {
           color: var(--primary-text-color);
           font-weight: bold;
-          font-size: var(--small);
+          font-size: var(--large);
           transition: var(--transition);
         }
         .header {
           color: var(--standard-60);
-          font-size: var(--large);
+          font-size: var(--huge);
           font-weight: var(--bold);
           transition: var(--transition);
         }
       }
 
       [previous] {
-        margin-right: auto;
+        text-align: left;
       }
       [next]{
-        margin-left: auto;
         text-align: right;
       }
     }