mirror of
https://github.com/zaaarf/friendenstein.git
synced 2024-11-22 15:34:50 +01:00
feat: better header
This commit is contained in:
parent
fcd9ae305c
commit
6c73e82c8c
6 changed files with 35 additions and 39 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -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 }}"/>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
{% 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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue