better

mreider · Dec 12, 2024 · 3d1437e · 3d1437e
1 parent 7190d94
commit 3d1437e
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 18 deletions.
diff --git a/css/cactus.css b/css/cactus.css
@@ -1677,3 +1677,20 @@ main {
   margin-top: 0.3rem; /* Slight spacing between the two */
 }
 
+ul, ol {
+  margin-left: 0; /* Reset browser default margins */
+  padding-left: 0; /* Reset browser default padding */
+}
+
+.post-list li {
+  list-style-type: none; /* Disable default list style */
+  position: relative; /* Allows pseudo-elements */
+  padding-left: 1.2rem; /* Space for bullet */
+}
+
+.post-list li::before {
+  content: "•"; /* Unicode for bullet */
+  position: absolute;
+  left: 0; /* Align bullet */
+  color: #333; /* Bullet color */
+}
diff --git a/published/about.html b/published/about.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html><head><title>Default Title</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel='stylesheet' href='http://127.0.0.1:4567/css/cactus.css'><link rel='icon' href='http://127.0.0.1:4567/images/favicon.ico'><meta property="og:title" content="Default Title" />
 <meta property="og:author" content="" />
-<meta property="og:description" content="" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='title' class='ml2'><h1>Default Title</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
-<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></header><main class="mx3 my3"><p>About me!</p>
+<meta property="og:description" content="" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><div class='flex items-center'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='website-title' class='ml2'><h1>Default Website Title</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
+<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></div><div id='page-title'><h2>Default Title</h2></div></header><main class="mx3 my3"><p>About me!</p>
 </main><footer class="footer px3 py2 border-box">&copy; 2024 Matt Reider | Created with <a href='https://github.com/mreider/krems'>Krems</a></footer></body></html>
diff --git a/published/css/cactus.css b/published/css/cactus.css
@@ -105,6 +105,7 @@
 .my1 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  list-style-type: disc;
 }
 .m2 {
   margin: 1rem;
@@ -150,7 +151,7 @@
 }
 .my3 {
   margin-top: 0rem;
-  margin-bottom: 2rem;
+  margin-bottom: 0rem;
 }
 .m4 {
   margin: 4rem;
@@ -569,7 +570,7 @@ body {
   }
 }
 #header {
-  margin: 0 auto 2rem;
+  margin: 0 auto 0rem;
   width: 100%;
 }
 #header h1,
@@ -1022,26 +1023,33 @@ body {
 }
 .post-list {
   padding: 0;
+
+  list-style-type: disc;
 }
 .post-list .post-item {
   margin-bottom: 1rem;
   margin-left: 0;
-  list-style-type: none;
+  list-style-type: disc;
 }
 .post-list .post-item .meta {
   display: block;
   margin-right: 16px;
   min-width: 100px;
   color: #666;
   font-size: 14px;
+
+  list-style-type: disc;
 }
 @media (min-width: 480px) {
   .post-list .post-item {
     display: flex;
     margin-bottom: 5px;
+  list-style-type: disc;
   }
   .post-list .post-item .meta {
     text-align: left;
+
+  list-style-type: disc;
   }
 }
 .project-list {
@@ -1202,7 +1210,7 @@ article .content .caption {
 #archive .post-list .post-item {
   margin-bottom: 1rem;
   margin-left: 0;
-  list-style-type: none;
+  list-style-type: disc;
 }
 #archive .post-list .post-item .meta {
   display: block;
@@ -1216,6 +1224,8 @@ article .content .caption {
     display: flex;
     margin-bottom: 5px;
     margin-left: 1rem;
+
+  list-style-type: disc;
   }
   #archive .post-list .post-item .meta {
     text-align: left;
@@ -1665,4 +1675,22 @@ main {
 
 #header .author-date + .summary {
   margin-top: 0.3rem; /* Slight spacing between the two */
+}
+
+ul, ol {
+  margin-left: 0; /* Reset browser default margins */
+  padding-left: 0; /* Reset browser default padding */
+}
+
+.post-list li {
+  list-style-type: none; /* Disable default list style */
+  position: relative; /* Allows pseudo-elements */
+  padding-left: 1.2rem; /* Space for bullet */
+}
+
+.post-list li::before {
+  content: "•"; /* Unicode for bullet */
+  position: absolute;
+  left: 0; /* Align bullet */
+  color: #333; /* Bullet color */
 }
diff --git a/published/example/post1.html b/published/example/post1.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html><html><head><title>First Example Post</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel='stylesheet' href='http://127.0.0.1:4567/css/cactus.css'><link rel='icon' href='http://127.0.0.1:4567/images/favicon.ico'><meta property="og:title" content="First Example Post" />
 <meta property="og:author" content="Krems" />
 <meta property="og:description" content="This is the first example post." />
-<meta property="og:date" content="2024-12-08" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='title' class='ml2'><h1>First Example Post</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
-<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div><p class='author-date'>By Krems on December 08, 2024</p><p class='summary'>This is the first example post.</p></header><main class="mx3 my3"><p>This is the content of the first example post.</p>
+<meta property="og:date" content="2024-12-08" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><div class='flex items-center'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='website-title' class='ml2'><h1>Default Website Title</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
+<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></div><div id='page-title'><h2>First Example Post</h2></div><p class='author-date'>By Krems on December 08, 2024</p><p class='summary'>This is the first example post.</p></header><main class="mx3 my3"><p>This is the content of the first example post.</p>
 </main><footer class="footer px3 py2 border-box">&copy; 2024 Matt Reider | Created with <a href='https://github.com/mreider/krems'>Krems</a></footer></body></html>
diff --git a/published/example/post2.html b/published/example/post2.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html><html><head><title>Second Example Post</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel='stylesheet' href='http://127.0.0.1:4567/css/cactus.css'><link rel='icon' href='http://127.0.0.1:4567/images/favicon.ico'><meta property="og:title" content="Second Example Post" />
 <meta property="og:author" content="Krems" />
 <meta property="og:description" content="This is the second example post." />
-<meta property="og:date" content="2024-12-07" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='title' class='ml2'><h1>Second Example Post</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
-<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div><p class='author-date'>By Krems on December 07, 2024</p><p class='summary'>This is the second example post.</p></header><main class="mx3 my3"><p>This is the content of the second example post.</p>
+<meta property="og:date" content="2024-12-07" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><div class='flex items-center'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='website-title' class='ml2'><h1>Default Website Title</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
+<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></div><div id='page-title'><h2>Second Example Post</h2></div><p class='author-date'>By Krems on December 07, 2024</p><p class='summary'>This is the second example post.</p></header><main class="mx3 my3"><p>This is the content of the second example post.</p>
 </main><footer class="footer px3 py2 border-box">&copy; 2024 Matt Reider | Created with <a href='https://github.com/mreider/krems'>Krems</a></footer></body></html>
diff --git a/published/fun/everything-animal.html b/published/fun/everything-animal.html
@@ -2,8 +2,8 @@
 <meta property="og:author" content="Matt Reider" />
 <meta property="og:description" content="" />
 <meta property="og:image" content="http://127.0.0.1:4567/images/matt/0_cvAPXYQPV4j3iuon.jpeg" />
-<meta property="og:date" content="2019-09-12" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='title' class='ml2'><h1>The Everything Animal</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
-<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div><p class='author-date'>By Matt Reider on September 12, 2019</p></header><main class="mx3 my3"><p>We are ahead of ourselves. We want to be here in April 2020, not September. In April 2020 the kids will take the tram by themselves. They will have strong friendships. Alison and I will understand the healthcare system, and know enough German to order a sandwich without having to point.</p>
+<meta property="og:date" content="2019-09-12" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><div class='flex items-center'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='website-title' class='ml2'><h1>Default Website Title</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
+<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></div><div id='page-title'><h2>The Everything Animal</h2></div><p class='author-date'>By Matt Reider on September 12, 2019</p><img src='http://127.0.0.1:4567/images/matt/0_cvAPXYQPV4j3iuon.jpeg' alt='0_cvapxyqpv4j3iuon' class='page-image' /></header><main class="mx3 my3"><p>We are ahead of ourselves. We want to be here in April 2020, not September. In April 2020 the kids will take the tram by themselves. They will have strong friendships. Alison and I will understand the healthcare system, and know enough German to order a sandwich without having to point.</p>
 
 <p>But it’s September, not April. We’ll have to wait for the sun and moon to come and go a hundred and fifty times.</p>
 

diff --git a/published/fun/index.html b/published/fun/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html><html><head><title>Default Title</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel='stylesheet' href='http://127.0.0.1:4567/css/cactus.css'><link rel='icon' href='http://127.0.0.1:4567/images/favicon.ico'><meta property="og:title" content="Default Title" />
 <meta property="og:author" content="" />
-<meta property="og:description" content="" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='title' class='ml2'><h1>Default Title</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
-<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></header><main class="mx3 my3"><h1>Writing for fun</h1>
+<meta property="og:description" content="" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><div class='flex items-center'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='website-title' class='ml2'><h1>Default Website Title</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
+<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></div><div id='page-title'><h2>Default Title</h2></div></header><main class="mx3 my3"><h1>Writing for fun</h1>
 
 <p>These are blogs about traveling and other expat experiences.</p>
 
-<p><h4 class='h3 my2'>2019</h4><ul class='post-list list-none'><li class='post-item my1'><a class='post-link' href='http://127.0.0.1:4567/fun/everything-animal.html'>Everything Animal</a></li></ul></p>
+<p><h4 class='h3 my2'>2019</h4><ul class='post-list'><li class='post-item my1'><a class='post-link' href='http://127.0.0.1:4567/fun/everything-animal.html'>Everything Animal</a></li></ul></p>
 </main><footer class="footer px3 py2 border-box">&copy; 2024 Matt Reider | Created with <a href='https://github.com/mreider/krems'>Krems</a></footer></body></html>
diff --git a/published/index.html b/published/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html><head><title>Welcome to Krems</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel='stylesheet' href='http://127.0.0.1:4567/css/cactus.css'><link rel='icon' href='http://127.0.0.1:4567/images/favicon.ico'><meta property="og:title" content="Welcome to Krems" />
 <meta property="og:author" content="" />
-<meta property="og:description" content="" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='title' class='ml2'><h1>Welcome to Krems</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
-<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></header><main class="mx3 my3"><p>This is the default index page. Below is a list of posts in the &#39;example&#39; directory:</p>
+<meta property="og:description" content="" /></head><body class="content max-width mx-auto"><header id='header' class='py4'><div class='flex items-center'><a href='http://127.0.0.1:4567/' class='flex items-center'><div id='logo' style='background-image: url("http://127.0.0.1:4567/images/logo.png"); width: 50px; height: 50px; background-size: cover; background-position: center;'></div><div id='website-title' class='ml2'><h1>Default Website Title</h1></div></a><div id='nav'><ul><li><a href='http://127.0.0.1:4567/index.html'>Home</a></li>
+<li><a href='http://127.0.0.1:4567/example/post1.html'>First Post</a></li></ul></div></div><div id='page-title'><h2>Welcome to Krems</h2></div></header><main class="mx3 my3"><p>This is the default index page. Below is a list of posts in the &#39;example&#39; directory:</p>
 
-<p><h4 class='h3 my2'>2024</h4><ul class='post-list list-none'><li class='post-item my1'><a class='post-link' href='http://127.0.0.1:4567/example/post1.html'>Post1</a></li><li class='post-item my1'><a class='post-link' href='http://127.0.0.1:4567/example/post2.html'>Post2</a></li></ul></p>
+<p><h4 class='h3 my2'>2024</h4><ul class='post-list'><li class='post-item my1'><a class='post-link' href='http://127.0.0.1:4567/example/post1.html'>Post1</a></li><li class='post-item my1'><a class='post-link' href='http://127.0.0.1:4567/example/post2.html'>Post2</a></li></ul></p>
 </main><footer class="footer px3 py2 border-box">&copy; 2024 Matt Reider | Created with <a href='https://github.com/mreider/krems'>Krems</a></footer></body></html>