add styles for list pages and pagination

3 files changed, 57 insertions, 4 deletions

diff --git a/assets/css/base.css b/assets/css/base.css
index d850137..05c5fd9 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -40,10 +40,6 @@ label {
     visibility: hidden;
 }
 
-main {
-    min-height: 100vh;
-}
-
 input {
     background-color: var(--foreground);
     border: none;
diff --git a/assets/css/list.css b/assets/css/list.css
new file mode 100644
index 0000000..0b52da6
--- /dev/null
+++ b/assets/css/list.css
@@ -0,0 +1,53 @@
+/* LIST */
+.list {
+    min-height: 100vh;
+}
+
+/* HEADER */
+.card {
+    padding: 1.75rem 1.45rem;
+    width: 100%;
+}
+
+.card__header {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: 2;
+}
+
+.card__header__title {
+    font-size: var(--h3);
+}
+
+/* BODY */
+.card__body {
+    height: auto;
+}
+
+.card__footer {
+    border-bottom: 5px solid var(--separator);
+}
+
+/* FOOTER & TAGS */
+.tags {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    margin-bottom: 0.75rem;
+    padding: 0;
+}
+
+.tags__item {
+    margin-right: 0.75rem;
+}
+
+/* PAGINATION */
+.pagination {
+    display: flex;
+    flex-wrap: nowrap;
+    list-style: none;
+    margin-top: 3.75rem;
+    padding: 0 1.75rem;
+    justify-content: space-evenly;
+}
\ No newline at end of file
diff --git a/assets/css/single.css b/assets/css/single.css
index d6abab6..33fafaa 100644
--- a/assets/css/single.css
+++ b/assets/css/single.css
@@ -1,3 +1,4 @@
+/* HEADER */
 .single {
     border-bottom: 5px solid var(--purple);
 }
@@ -20,8 +21,10 @@
     text-align: center;
 }
 
+/* CONTENT */
 .single__content {
     padding: 0.75rem 1.45rem;
+    min-height: 100vh;
 }
 
 .single__content a {
@@ -50,6 +53,7 @@
     margin-top: 2.75rem;
 }
 
+/* FOOTER */
 .single__footer {
     margin-bottom: 27vh;
 }
\ No newline at end of file