feat: better header

sass/_code.scss

@@ -6,13 +6,6 @@ pre {
 	font-style: monospace;
 	text-align: left;
 	white-space: pre-wrap;
-
-	code {
-		padding: 0;
-		border-radius: 0;
-		color: inherit;
-		background-color: inherit;
-	}
 }
 
 p code,
@@ -20,6 +13,8 @@ li code,
 div code {
 	padding: 0 .2rem 0 .2rem;
 	border-radius: .3rem;
-	color: var(--bgColor);
+}
-	background-color: var(--linkColor);
+
+p code, li code {
+	background-color: var(--codeLineColor);
 }

sass/_main.scss

@@ -1,6 +1,6 @@
 ::-moz-selection, ::selection {
 	color: var(--bgColor);
-	background: var(--fgCOlor);
+	background: var(--fgColor);
 }
 
 html {
@@ -28,7 +28,6 @@ h1 {
 	color: var(--bgColor);
 	background-color: var(--metaColor);
 	text-align: center;
-	text-wrap: balance;
 	
 	&::before {
 		color: var(--bgColor);
@@ -56,7 +55,7 @@ a {
 		color: var(--bgColor);
 	}
 
-	span.postDate {
+	span.contentDate {
 		color: var(--dateLinkColor);
 	}
 }
@@ -130,7 +129,6 @@ footer {
 /* Site Specific Styling */
 .wrapper {
 	min-height: 100vh;
-	min-height: 100svh;
 	display: grid;
 	grid-template-rows: auto 1fr auto;
 	gap: 2rem;
@@ -144,7 +142,6 @@ footer {
 	display: inline-block;
 	vertical-align: middle;
 	color: var(--fgColor);
-	fill: var(--fgColor);
 	background-color: transparent;
 
 	&__background:hover {
@@ -157,16 +154,20 @@ footer {
 	gap: .4rem;
 	flex-wrap: wrap;
 
-	a {
+	.navBarRight {
 		float: right;
-	}
-}
 
-.themeButton {
+		a {
-	cursor: pointer;
+			padding: 0;
-	border: none;
+		}
-	background-color: transparent;
+
-	float: right;
+		.themeButton {
+			float: right;
+			cursor: pointer;
+			border: none;
+			background: transparent;
+		}
+	}
 }
 
 .dark .themeButton.dark,

templates/blog-page.html

@@ -7,6 +7,8 @@
 <address rel="author">By <span class="metaData">{{config.extra.author}}</span></address>
 {% endif %}
 
+<article>
 {% include "base-page.html" %}
+</article>
 
-{% endblock content %}
+{% endblock content %}

templates/head.html

@@ -103,6 +103,7 @@
 	--metaColor: {% if config.extra.colors.dark.meta_color %}{{ config.extra.colors.dark.meta_color }}{% else %}#78B6AD{% endif %};
 	--linkColor: {% if config.extra.colors.dark.link_color %}{{ config.extra.colors.dark.link_color }}{% else %}#DBD5BC{% endif %};
 	--dateLinkColor: {% if config.extra.colors.dark.date_link_color %}{{ config.extra.colors.dark.date_link_color }}{% else %}#6F6847{% endif %};
+	--codeLineColor: {% if config.extra.colors.dark.code_line_color %}{{ config.extra.colors.dark.code_line_color }}{% else %}#31333d{% endif %};
 }
 
 :root.light {
@@ -111,6 +112,7 @@
 	--metaColor: {% if config.extra.colors.light.meta_color %}{{ config.extra.colors.light.meta_color }}{% else %}#D26878{% endif %};
 	--linkColor: {% if config.extra.colors.light.link_color %}{{ config.extra.colors.light.link_color }}{% else %}#5690AF{% endif %};
 	--dateLinkColor: {% if config.extra.colors.light.date_link_color %}{{ config.extra.colors.light.date_link_color }}{% else %}#223844{% endif %};
+	--codeLineColor: {% if config.extra.colors.light.code_line_color %}{{ config.extra.colors.light.code_line_color }}{% else %}#CCCCCC{% endif %};
 }
 </style>
 <link rel="stylesheet" href="{{ get_url(path='style.css', trailing_slash=false) | safe }}"/>

templates/header.html

@@ -7,24 +7,20 @@
 {% if config.extra.header_nav %}
 <nav class="navBar">
   {% include "logo.html" %}
-  <div class="themeSwitch">
+  <div class="navBarRight">
+    {% for nav_item in config.extra.header_nav %}
+      <a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">{% set language_key = 'name_' ~ current_lang %}{{ nav_item[language_key] }}</a>
+    {% endfor %}
+    &nbsp;
     {% if not config.extra.default_theme %}
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+      <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+      <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
     {% elif config.extra.default_theme and config.extra.default_theme == "light" %}
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+      <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+      <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
     {% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+      <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+      <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
     {% endif %}
-  </div>
-
-  {% for nav_item in config.extra.header_nav %}
-    <a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">
-      {% set language_key = 'name_' ~ current_lang %}
-      {{ nav_item[language_key] }}
-    </a>
-  {% endfor %}
 </nav>
 {% endif %}

templates/section.html

@@ -14,7 +14,7 @@
 <ul class="titleList">
 {% for page in pages %}
 <li>
-	<a href="{{ page.permalink | safe }}">{{ page.title }}{% if config.extra.show_date_paginator and config.extra.show_date_paginator == true %}<span class="postDate"> @ {{ page.date }}</span>{% endif %}</a>
+	<a href="{{ page.permalink | safe }}">{{ page.title }}{% if config.extra.show_date_paginator and config.extra.show_date_paginator == true %}<span class="contentDate"> @ {{ page.date }}</span>{% endif %}</a>
 </li>
 {% endfor %}
 </ul>