styling done

author: JackJ30 <jackqjamison@gmail.com> 2025-05-12 20:16:25 -0400
committer: JackJ30 <jackqjamison@gmail.com> 2025-05-12 20:16:25 -0400
commit: 8b5d0b19659b35b7d2433a25a22d188ecbeecddd (patch)
tree: a44babb5d3f33aeb5e7f23b9456bf68630c3f2e0
parent: 417cbec1bd52c239f28c19b7affcdec693e803fd (diff)
9 files changed, 113 insertions, 14 deletions
diff --git a/zola-static/content/about-me.md b/zola-static/content/about-me.md
new file mode 100644
index 0000000..13b4889
--- /dev/null
+++ b/zola-static/content/about-me.md
@@ -0,0 +1,6 @@
++++
+title = "About Me"
+template = "main-page.html"
++++
+
+My name is Jack Jamison
diff --git a/zola-static/content/about-this-site.md b/zola-static/content/about-this-site.md
new file mode 100644
index 0000000..ec41a95
--- /dev/null
+++ b/zola-static/content/about-this-site.md
@@ -0,0 +1,6 @@
++++
+title = "About This Site"
+template = "main-page.html"
++++
+
+This site is generated with [zola](https://getzola.org).
diff --git a/zola-static/content/blog/_index.md b/zola-static/content/blog/_index.md
index 72bc989..d53e7ce 100644
--- a/zola-static/content/blog/_index.md
+++ b/zola-static/content/blog/_index.md
@@ -1,5 +1,5 @@
 +++
-title = "List of blog posts"
+title = "List of posts"
 sort_by = "date"
 template = "blog.html"
 page_template = "blog-page.html"
diff --git a/zola-static/content/blog/first.md b/zola-static/content/blog/first.md
index ed88f5c..bfed8ba 100644
--- a/zola-static/content/blog/first.md
+++ b/zola-static/content/blog/first.md
@@ -1,12 +1,15 @@
 +++
-title = "My first post"
+title = "My First Article"
 date = 2025-05-11
+updated = 2025-05-12
 +++
 
-This is my first blog post.
+This is my first blog post. I am using this post to learn how to configure my site and its style.
+
+> This article is going to be weird, and use a lot of features.
 
 ### Code block test
-```c++
+```c++,name=main.cpp
 #include <iostream>
 
 int main() {
diff --git a/zola-static/sass/base.scss b/zola-static/sass/base.scss
index ba5e106..8090930 100644
--- a/zola-static/sass/base.scss
+++ b/zola-static/sass/base.scss
@@ -8,9 +8,10 @@ body {
 	padding: 0;
 }
 
-section {
+body section {
 	height: 100%;
-	margin: auto 23%;
+	max-width: 75rem;
+	margin-inline: auto;
 	padding: 1rem;
 	
 	background-color: #252422;
@@ -18,11 +19,62 @@ section {
 	font-size: 125%;
 }
 
+// text sizing
+h1, h2, h3, h4 {
+	margin-bottom: 0.3rem;
+}
+
+ul {
+	margin-top: 0;
+}
+
+p {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+
 a {
 	color: #8B95C9;
 }
 
+h1 a {
+	text-decoration: none;
+}
+
 pre {
 	padding : 0.5rem;
 	border-radius: 0.3rem;
+	overflow: auto;
+	tab-size: 4;
+}
+
+.header-title {
+	margin-bottom: 0;
+	font-size: 2.5rem;
+}
+
+.subtitle {
+	margin: 0.5rem auto;
+}
+
+.header-container {
+	display: flex;
+	justify-content: space-between;
+}
+
+.footer-text {
+	text-align: center;
+}
+
+blockquote {
+	background: #171615;
+	border-left: 0.7rem solid #F3E9DC;
+	border-radius: 0.5rem;
+	margin: 1.5em 10px;
+	padding: 0.5em 10px;
+}
+
+blockquote p {
+	margin-top: 0.2rem;
+	margin-bottom: 0.2rem;
 }
diff --git a/zola-static/templates/base.html b/zola-static/templates/base.html
index 69b7dc3..9aa47d8 100644
--- a/zola-static/templates/base.html
+++ b/zola-static/templates/base.html
@@ -10,6 +10,11 @@
 <body>
   <section class="section">
     <div class="container">
+	  {% block header %}
+	  <h1 class="header-title"><a href="{{ config.base_url }}">Jack Jamison</a></h1>
+	  {% endblock header %}
+	  <hr>
+	  <br>
       {% block content %} {% endblock content %}
     </div>
   </section>
diff --git a/zola-static/templates/blog-page.html b/zola-static/templates/blog-page.html
index f0f638e..8e2fa3d 100644
--- a/zola-static/templates/blog-page.html
+++ b/zola-static/templates/blog-page.html
@@ -1,9 +1,19 @@
 {% extends "base.html" %}
 
+{% block header %}
+<div class="header-container">
+  <div>
+	<h1 class="header-title">
+	  {{ page.title }}
+	</h1>
+	<p class="subtitle"><strong>{{ page.date }}</strong> {% if page.updated  %} <small>(updated {{ page.updated }})</small> {% endif %}</p>
+  </div>
+  <div>
+	<h1 class="header-title"><a href="{{ config.base_url }}">Jack Jamison</a></h1>
+  </div>
+</div>
+{% endblock header %}
+
 {% block content %}
-<h1 class="title">
-  {{ page.title }}
-</h1>
-<p class="subtitle"><strong>{{ page.date }}</strong></p>
 {{ page.content | safe }}
 {% endblock content %}
diff --git a/zola-static/templates/index.html b/zola-static/templates/index.html
index 297850d..f674f13 100644
--- a/zola-static/templates/index.html
+++ b/zola-static/templates/index.html
@@ -1,8 +1,20 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="title">
-  Jack Jamison's Homepage
-</h1>
-<p><a href ="{{ get_url(path='@/blog/_index.md') }}">My blog</a></p>
+<h2>All about</h2>
+<ul>
+  <li><p><a href="{{ get_url(path='@/about-me.md') }}">About me</a></p></li>
+  <li><p><a href="{{ get_url(path='@/about-this-site.md') }}">About this site</a></p></li>
+</ul>
+<h2>Articles</h2>
+<ul>
+  <li><p><a href="{{ get_url(path='@/blog/_index.md') }}"></a></p></li>
+</ul>
+<h2>Links</h2>
+<ul>
+  <li><p><a href="https://github.com/JackJ30">GitHub</a></p></li>
+  <li><p><a href="https://jackj30.github.io">Old portfolio</a></p></li>
+</ul>
+<hr>
+<p class="footer-text"><a href="{{ get_url(path='@/blog/_index.md') }}">All articles sorted by date</a></p>
 {% endblock content %}
diff --git a/zola-static/templates/main-page.html b/zola-static/templates/main-page.html
new file mode 100644
index 0000000..8226656
--- /dev/null
+++ b/zola-static/templates/main-page.html
@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block content %}
+{{ page.content | safe }}
+{% endblock content %}
author	JackJ30 <jackqjamison@gmail.com>	2025-05-12 20:16:25 -0400
committer	JackJ30 <jackqjamison@gmail.com>	2025-05-12 20:16:25 -0400
commit	8b5d0b19659b35b7d2433a25a22d188ecbeecddd (patch)
tree	a44babb5d3f33aeb5e7f23b9456bf68630c3f2e0
parent	417cbec1bd52c239f28c19b7affcdec693e803fd (diff)