Dashboard-Header in <header>-Element umgebaut, Card-Grid und Mobile-Styles verfeinert

wwwroot/css/dashboard.css

@@ -2,22 +2,12 @@
   padding: var(--page-padding);
 }
 
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--page-spacing);
-}
-
-.dashboard-title {
-  margin: 0;
-}
-
 .dashboard-link {
   color: var(--text);
   text-decoration: none;
   opacity: var(--semi-transparent);
   transition: opacity var(--transition-duration);
+  cursor: pointer;
 }
 
 .dashboard-link:hover {
@@ -39,7 +29,7 @@
 
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(24em, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
   gap: var(--box-spacing);
 }
 
@@ -70,7 +60,6 @@
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   flex: 0 0 8em;
   height: 8em;
-  align-self: center;
   border-radius: var(--border-radius);
 }
 

wwwroot/css/mobile.css

@@ -10,4 +10,8 @@
     width: 100px;
     min-width: 100px;
   }
+  .card-image {
+    flex: 0 0 6em;
+    height: 6em;
+  }
 }

wwwroot/index.html

@@ -30,11 +30,12 @@
 
 <template id="tpl-dashboard">
   <div class="page dashboard">
+    <header>
+      <button class="back-btn icon-btn" disabled></button>
+      <h1 class="dashboard-title">// gott</h1>
+      <a id="dashboardSettingsLink" class="dashboard-link">Einstellungen</a>
+    </header>
     <div class="page-content">
-      <div class="dashboard-header">
-        <h1 class="dashboard-title">// gott</h1>
-        <a href="#" id="dashboardSettingsLink" class="dashboard-link">Einstellungen</a>
-      </div>
       <section>
         <div class="section-header">
           <h2>Sessions</h2>