mirror of
https://github.com/zaaarf/friendenstein.git
synced 2024-11-22 07:24:51 +01:00
feat: added configurable colors
This commit is contained in:
parent
40d66de6ee
commit
fcd9ae305c
5 changed files with 34 additions and 80 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
float: right;
|
||||
a {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.themeButton {
|
||||
|
|
@ -194,15 +193,15 @@ footer {
|
|||
|
||||
.footnote-definition {
|
||||
margin: 0 0 0 2rem;
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: var(--metaColor);
|
||||
}
|
||||
|
||||
.footnote-definition-label {
|
||||
color: var(--metaColor);
|
||||
}
|
||||
|
||||
.footnote-definition p {
|
||||
display: inline;
|
||||
padding: 0 0 0 1rem;
|
||||
p {
|
||||
display: inline;
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footContainer {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import 'colors';
|
||||
@import 'main';
|
||||
@import 'home';
|
||||
@import 'code';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue