feat: added configurable colors

This commit is contained in:
zaaarf 2023-12-24 19:09:35 +01:00
parent 40d66de6ee
commit fcd9ae305c
No known key found for this signature in database
GPG key ID: 102E445F4C3F829B
5 changed files with 34 additions and 80 deletions

View file

@ -1,62 +0,0 @@
:root,
:root.light {
--bgColor: #EEEEEE;
--fgColor: #41474E;
--metaColor: var(--orange);
--headColor: #;
--linkColor: var(--blue);
--dimLinkcolor: var(--dimBlue);
--hovColor: var(--dimGreen);
--bgSelect: var(--yellow);
--bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
/* veqev colors */
--red: #D26878;
--dimRed: #623039;
--orange: #e08f67;
--dimOrange: #926048;
--yellow: #FFFAE1;
--dimYellow: #D5C5A1;
--green: #56AFA0;
--dimGreen: #22453F;
--blue: #5690AF;
--dimBlue: #223844;
--purple: #9271D6;
--dimPurple: #47356C;
--grey: #CBCDCD;
--dimGrey: #646868;
/* ftbsc colors (TODO: come up with variants) */
--ftbscGreen: #2E8757;
--ftbscOrange: #FF4D17;
--ftbscReddish: #BF616A;
}
:root.dark {
--bgColor: #222529;
--fgColor: #D6D6D6;
--metaColor: var(--ftbscOrange);
--headColor: #;
--linkColor: var(--yellow);
--dimLinkColor: var(--dimYellow);
--hovColor: var(--orange);
--bgSelect: var(--dimGrey);
--bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
/* veqev colors */
--red: #CD909B;
--dimRed: #684249;
--orange: #E2AEA2;
--dimOrange: #704941;
--yellow: #DBD5BC;
--dimYellow: #6F6847;
--green: #78B6AD;
--dimGreen: #3E615C;
--blue: #87C9E5;
--dimBlue: #38494F;
--purple: #CEA7DE;
--dimPurple: #5E406A;
--grey: #CBCDCD;
--dimGrey: #464949;
/* ftbsc colors */
--ftbscGreen: #2E8757;
--ftbscOrange: #FF4D17;
--ftbscReddish: #BF616A;
}

View file

@ -57,7 +57,7 @@ a {
}
span.postDate {
color: var(--dimLinkColor);
color: var(--dateLinkColor);
}
}
@ -146,21 +146,20 @@ footer {
color: var(--fgColor);
fill: var(--fgColor);
background-color: transparent;
}
.icons__background:hover {
background-color: transparent;
color: var(--metaColor);
&__background:hover {
color: var(--linkColor);
}
}
.navBar {
padding: 1rem 0 0 0;
gap: .4rem;
flex-wrap: wrap;
}
.navBar a {
a {
float: right;
}
}
.themeButton {
@ -194,15 +193,15 @@ footer {
.footnote-definition {
margin: 0 0 0 2rem;
}
.footnote-definition-label {
&-label {
color: var(--metaColor);
}
}
.footnote-definition p {
p {
display: inline;
padding: 0 0 0 1rem;
}
}
.footContainer {

View file

@ -1,4 +1,3 @@
@import 'colors';
@import 'main';
@import 'home';
@import 'code';

View file

@ -95,6 +95,24 @@
{% endblock feed %}
{% endif %}
{% block css %}
<style>
:root,
:root.dark {
--bgColor: {% if config.extra.colors.dark.background_color %}{{ config.extra.colors.dark.background_color }}{% else %}#222529{% endif %};
--fgColor: {% if config.extra.colors.dark.foreground_color %}{{ config.extra.colors.dark.foreground_color }}{% else %}#D6D6D6{% endif %};
--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 %};
}
:root.light {
--bgColor: {% if config.extra.colors.light.background_color %}{{ config.extra.colors.light.background_color }}{% else %}#EEEEEE{% endif %};
--fgColor: {% if config.extra.colors.light.foreground_color %}{{ config.extra.colors.light.foreground_color }}{% else %}#41474E{% endif %};
--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 %};
}
</style>
<link rel="stylesheet" href="{{ get_url(path='style.css', trailing_slash=false) | safe }}"/>
{% endblock css %}
<script>

View file

@ -14,7 +14,7 @@
<ul class="titleList">
{% for page in pages %}
<li>
<a href="{{ page.permalink | safe }}">{{ page.title }}<span class="postDate"> @ {{ page.date }}</span></a>
<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>
</li>
{% endfor %}
</ul>