WIP: setup styling

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.css

@@ -0,0 +1,5 @@
+.grid-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+}

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.html

@@ -1,7 +1,9 @@
 <p>artists works!</p>
-<div>
+<div class="grid-container">
-  <app-comic-artists-list />
+  <div>
-</div>
+    <app-comic-artists-list />
-<div>
+  </div>
-  <h2>Artist Details</h2>
+  <div>
+    <h2>Artist Details</h2>
+  </div>
 </div>

kontor-angular/src/app/kontor/comic/comic-comic/comic-comic.component.html

@@ -1,5 +1,3 @@
-<p>comic-comic works!</p>
-<p>comic works!</p>
 <div>
   <a [routerLink]="['/', 'comic', 'comics', comic().id]" routerLinkActive="active">
     <span>{{ comic().title }}</span>

kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.css

@@ -0,0 +1,14 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  overflow: auto;
+}
+
+@media (min-width: 768px) {
+  ul {
+    flex-direction: column;
+  }
+}

kontor-angular/src/app/kontor/comic/comic-comics-list/comic-comics-list.component.html

@@ -1,5 +1,3 @@
-<p>comic-comics-list works!</p>
-<p>comic-list works!</p>
 <ul>
   @for (comic of comics(); track comic.id) {
     <li>

kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.css

@@ -0,0 +1,29 @@
+.float-parent-element { 
+    width: 50%; 
+} 
+.float-child-element { 
+    float: left; 
+    width: 50%;
+    border-width: 10px;
+    border-color: black;
+}
+.float-details-element {
+    border: 1px solid darkgreen;
+    background-color: lightgreen;
+    margin: 5px;
+    padding: 1rem;
+    height: 100%;
+}
+
+.parent {
+  border: 1px solid black;
+  margin: 1rem;
+  padding: 2rem 2rem;
+  text-align: left;
+}
+.child {
+  display: inline-block;
+  border: 1px solid red;
+  padding: 1rem 1rem;
+  vertical-align: top;
+}

kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html

@@ -1,7 +1,10 @@
-<p>comic-comics works!</p>
+<div class="parent">
-<div>
+    <div class="child">
-    <app-comic-comics-list/>
+        <app-comic-comics-list/>
-</div>
+    </div>
-<div>
+    <div class="child">
-    <h2>Comic Details</h2>
+        <div class="float-details-element">
+            <h2>Comic Details</h2>
+        </div>
+    </div>
 </div>

kontor-angular/src/app/kontor/footer/footer.component.css

@@ -3,6 +3,8 @@
   padding: 20px;
   text-align: center;
   background-color: lightblue;
+  position: sticky;
+  bottom: 0px;
 }
 
 .footer a {

kontor-angular/src/app/kontor/footer/footer.component.html

@@ -1,3 +1,5 @@
-<footer class="footer">
+<!-- <div> -->
-  <a href="{{ footerUrl }}">{{ footerLink }}</a>
+  <footer class="footer">
-</footer>
+    <a href="{{ footerUrl }}">{{ footerLink }}</a>
+  </footer>
+<!-- </div> -->