Merge pull request #9 from jazzominy/footer

Footer & refinements

_includes/footer.html

@@ -0,0 +1,5 @@
+<footer id="footer">
+    <p>
+        &copy; 2024 Jasmine Hirpara. This blog is powered by <a href="https://jekyllrb.com/" target="_blank">Jekyll</a>. i referred <a href="https://chirpy.cotes.page" target="_blank">Chirpy</a> and <a href="https://lea.verou.me" target="_blank">Lea Verou's blog</a> for the design and layout of this blog.
+    </p>
+</footer>

_layouts/default.html

@@ -21,7 +21,8 @@
 		{% include sidebar.html %}
 		<main>
 			{{ content }}
+
+			{% include footer.html %}
 		</main>
 	</body>
-
 </html>

_sass/archive.scss

@@ -0,0 +1,18 @@
+section.posts {
+	padding: 0 2.5rem;
+
+	ul {
+		padding-left: 0;
+
+		li {
+			margin-bottom: 1rem;
+			display: flex;
+			gap: 2rem;
+			align-items: center;
+
+			.post-date {
+				font-size: 90%;
+			}
+		}
+	}
+}

_sass/home.scss

@@ -1,5 +1,5 @@
 section.home {
-    padding: 1rem 2rem 2rem 1rem;
+    padding-bottom: 2rem;
 
     ul.post-list {
         padding: 0;

_sass/main.scss

@@ -1,8 +1,8 @@
 :root {
 	--font-family: 'Montserrat', sans-serif;
 	--bg: #263238;
-	--text: #b0bec5bd;
-	--link: #f5f5dca8;
+	--text: #b0bec5;
+	--link: #f5f5dc;
 	--link-hover-bg: #f5f5dc4d;
 	--link-hover-text: #f0ffff;
 	--link-active-bg: #f5f5dcd6;
@@ -14,7 +14,7 @@
 	--code-bg: #13130e;
 	--code-color: #ffffffb8;
 	--post-bg: #13232c;
-	--post-title: #f3f3f3ad;
+	--post-title: #f3f3f3d9;
 }
 
 * {
@@ -28,8 +28,7 @@ body {
 	letter-spacing: 0.0313rem;
 }
 
-h1,
-h3 {
+h1, h2, h3, h4, h5, h6 {
 	font-weight: 600;
 }
 
@@ -51,7 +50,7 @@ body {
 	gap: var(--grid-gap);
 	grid:
 		"aside header" var(--header-height)
-		"aside main" / 16.5rem 1fr;
+		"aside main"  / 16.5rem 1fr;
 }
 
 img {
@@ -161,6 +160,20 @@ main {
 	grid-area: main;
 	height: calc(100vh - var(--header-height) - var(--grid-gap));
 	overflow: auto;
+	display: flex;
+	flex-direction: column;
+
+	& > :first-child {
+		padding: 0 2rem;
+		flex: 1;
+	}
+}
+
+#footer {
+	padding: 0 1rem;
+	font-size: 80%;
+	font-weight: 500;
+  	font-style: italic;
 }
 
 @keyframes wave {

_sass/tags.scss

@@ -1,5 +1,5 @@
 article.tags {
-    padding: 0 2.5rem 2.5rem 2.5rem;
+    padding: 0 2.5rem;
 
     .tag {
         @include tag;

archive.html

@@ -3,10 +3,20 @@
 permalink: /archive/
 ---
 
-<h1>Posts</h1>
-
-<ul>
-    {% for post in site.posts %}
-        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
-    {% endfor %}
-</ul>
+<section class="posts">
+    <h1>Posts</h1>
+
+    <ul>
+        {% for post in site.posts %}
+            <li>
+                <a href="{{ post.url }}">{{ post.title }}</a>
+                <div class="post-date">
+                    <i class="fa-solid fa-calendar-days"></i>
+                    <time datetime="{{ post.date | date_to_string }}">
+                        {{ post.date | date_to_string }}
+                    </time>
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
+</section>

assets/css/style.scss

@@ -4,6 +4,7 @@
 @import "mixins";
 @import "main";
 @import "home";
+@import "archive";
 @import "post";
 @import "tags";
 @import "code";

index.html

@@ -9,7 +9,7 @@
 	<h2>Recent posts</h2>
 
 	<ul class="post-list">
-		{% for post in site.posts %}
+		{% for post in site.posts limit: 3 %}
 		<li data-date="{{ post.date | date_to_string }}">
 			<h3>{{ post.title }}</h3>
 			<p>{{ post.excerpt }}</p>
@@ -26,4 +26,4 @@ <h3>{{ post.title }}</h3>
 		</li>
 		{% endfor %}
 	</ul>
-</section>
+</section>