commit 6b456c9ea529c5a4018eaa1184ab96c684094f8d
parent df33690d10bb64c4a49d1c14c14e208ff352cffb
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Sat, 29 Aug 2026 12:56:02 -0300
Move top and bottom article bar inside `article` tag
Diffstat:
6 files changed, 38 insertions(+), 23 deletions(-)
diff --git a/about.html b/about.html
@@ -12,6 +12,7 @@
<!--#include virtual="/common/header.shtml" -->
<article>
+ <hr class="article_top_bar">
<div class="presentation">
<img class=profile_img src="/common/profile.jpeg" title="Profile picture" alt="Profile picture">
</div>
diff --git a/blog.html b/blog.html
@@ -9,6 +9,7 @@
<body>
<!--#include virtual="/common/header.shtml" -->
<article>
+ <hr class="article_top_bar">
<link rel='stylesheet' type='text/css' href="/css/article.css?ver=0.1">
<link rel='stylesheet' type='text/css' href="/css/blog.css?ver=0.1">
<h1 id="blog-title">Blog</h1>
diff --git a/common/header.shtml b/common/header.shtml
@@ -18,5 +18,3 @@
updateColorSchemeButton()
</script>
</header>
-
-<hr class="header_bottom_bar">
diff --git a/css/style.css b/css/style.css
@@ -28,17 +28,16 @@ body {
header {
color: var(--accent-color);
- max-width: 39em;
+ max-width: 37em;
margin-left: auto;
margin-right: auto;
margin-top: .5em;
- margin-bottom: .25em;
+ margin-bottom: .5em;
text-align: center;
padding-top: .75em;
- padding-bottom: .25em;
padding-left: 0.75em;
padding-right: 0.75em;
@@ -58,14 +57,14 @@ header {
padding: 0 1.25em;
}
-.header_bottom_bar {
+.header_bottom_bar{
border: 0;
clear:both;
display: block;
- width: 80%;
- max-width: 35em;
+ width: 100%;
+ max-width: 37em;
height: 0px;
margin-left: auto;
margin-right: auto;
@@ -76,6 +75,22 @@ header {
border-top: 1px dashed var(--secondary-accent-color);
}
+.article_top_bar {
+ border: 0;
+ clear:both;
+ display: block;
+ width: 100%;
+ max-width: 37em;
+ height: 0px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 0em;
+ margin-bottom: 1em;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-top: 1px dashed var(--secondary-accent-color);
+}
+
#header_link, #header_link_short {
text-decoration: none;
color: inherit;
@@ -108,7 +123,7 @@ header {
article {
color: var(--fg-color);
- max-width: 39em;
+ max-width: 37em;
margin-left: auto;
margin-right: auto;
@@ -121,7 +136,7 @@ article {
padding-left: 0.5em;
padding-right: 0.5em;
- padding-top: 1em;
+ padding-top: 0.5em;
padding-bottom: 1em;
border-radius: 1em;
@@ -133,8 +148,8 @@ article {
display: block;
- width: 60%;
- max-width: 20em;
+ width: 100%;
+ max-width: 37em;
height: 0px;
margin-left: auto;
@@ -224,9 +239,9 @@ ul {
}
.header_buttons {
- margin: 0 0 .100em 0;
+ margin: 0;
padding-bottom: 0em;
- font-size: 1.5em;
+ font-size: 1.65em;
display: flex;
flex-wrap: wrap;
justify-content: center;
@@ -302,7 +317,7 @@ pre code {
border-radius: 0;
word-break: normal;
overflow-wrap: normal;
- white-space: normal;
+ white-space: pre;
}
/* #command { color: #33ff11; } */
@@ -399,11 +414,10 @@ b-time {
margin-right: 0em;
}
header {
- padding-top: .5em;
padding-bottom: 0;
}
article {
- padding-top: .75em;
+ padding-top: 0.25em;
padding-bottom: .5em;
margin-bottom: .25em;
}
@@ -416,7 +430,7 @@ b-time {
}
.header_buttons{
margin-top: 0;
- font-size: 1.75em;
+ font-size: 1.50em;
align-self: center;
padding-top: 0em;
padding-bottom: .25em;
@@ -426,17 +440,14 @@ b-time {
}
}
.header_bottom_bar{
- width: 55%;
}
.article_bottom_bar {
- width: 40%;
padding-top: .5em;
margin-top: .5em;
}
#header_title {
- font-size: 2.25em;
+ font-size: 2.20em;
line-height: 1.10em;
- padding-bottom: .10em;
}
#index-title {
padding-top: 0;
diff --git a/index.html b/index.html
@@ -19,6 +19,8 @@
<!--#include virtual="/common/header.shtml" -->
<article>
+ <hr class="article_top_bar">
+
<h1 id="index-title">Hello, World!</h1>
<p>This is my personal webpage, here you will find <a href=/about>contact information</a>, my <a href=/blog>blog</a>, where I post about random stuff, mostly tech related, and my self hosted <a href="https://git.kloeckner.com.ar/">git server</a>, which I try to keep in sync with my <a href="https://github.com/mjkloeckner">github</a> repositories. I've also added a <a href="https://kloeckner.com.ar/files/">files</a> section, where I share random files.</p>
diff --git a/scripts/template.html b/scripts/template.html
@@ -12,13 +12,15 @@
<title>$article-title$ | $pagetitle$</title>
<!--#include virtual="/common/head.shtml" -->
- <link rel='stylesheet' type='text/css' href="/css/article.css">
+ <link rel='stylesheet' type='text/css' href="/css/article.css?ver=0.0.1">
</head>
<body>
<!--#include virtual="/common/header.shtml" -->
<article>
+ <hr class="article_top_bar">
+
$body$
<!--#include virtual="/common/end_of_article.shtml" -->
