feat: better header

This commit is contained in:
zaaarf 2023-12-25 00:41:54 +01:00
parent fcd9ae305c
commit 6c73e82c8c
No known key found for this signature in database
GPG key ID: 102E445F4C3F829B
6 changed files with 35 additions and 39 deletions

View file

@ -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);
}

View file

@ -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 {
cursor: pointer;
border: none;
background-color: transparent;
float: right;
a {
padding: 0;
}
.themeButton {
float: right;
cursor: pointer;
border: none;
background: transparent;
}
}
}
.dark .themeButton.dark,

View file

@ -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 %}

View file

@ -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 }}"/>

View file

@ -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 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 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 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 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 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 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 %}

View file

@ -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>