List icon configurable (#152)

List icon made configurable by introducing ul-li-icon CSS variable
This commit is contained in:
spi 2023-10-04 21:06:10 +02:00 committed by GitHub
parent d2ba0eabea
commit 9e20c65ad8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 4 deletions

View file

@ -41,4 +41,8 @@
/* === Footer === */ /* === Footer === */
--footer-color-background: #22343a; --footer-color-background: #22343a;
--footer-color: #bbc7cc; --footer-color: #bbc7cc;
/* === Lists === */
/* define list element for unnumbered lists, leave empty for default list element */
--ul-li-icon: fa-asterisk;
} }

View file

@ -88,8 +88,11 @@ var $sitehead = $("#site-head");
}); });
} }
var ulLiIcon = getComputedStyle(document.documentElement).getPropertyValue('--ul-li-icon');
if (ulLiIcon.length > 0) {
$('ul').addClass("fa-ul"); $('ul').addClass("fa-ul");
$("ul li").prepend('<span class="fa-li"><i class="fa fa-asterisk"></i></span>'); $("ul li").prepend('<span class="fa-li"><i class="fa ' + ulLiIcon + '"></i></span>');
}
$("blockquote p").prepend('<span class="quo fa fa-quote-left"></span>'); $("blockquote p").prepend('<span class="quo fa fa-quote-left"></span>');
$("blockquote p").append('<span class="quo fa fa-quote-right"></span>'); $("blockquote p").append('<span class="quo fa fa-quote-right"></span>');
}); });

View file

@ -14,11 +14,15 @@
--section-light-bg-color: #ffdb8c!important; --section-light-bg-color: #ffdb8c!important;
--section-dark-bg-color: #035e00!important; --section-dark-bg-color: #035e00!important;
*/ */
/* define list element for unnumbered lists, leave empty for default list element */
/* fa-asterisk is the default icon if this variable definition is missing completely */
--ul-li-icon: fa-dashcube; /* this sets fa-dashcube as list icon */
--ul-li-icon: ; /* this sets the default html list icon */
} }
</style> </style>
--> -->
<!-- Custom CSS via "custom.css"-file <!-- Custom CSS via "custom.css"-file
If you would rather place your custom CSS into If you would rather place your custom CSS into
a separate file, create a "custom.css" in your a separate file, create a "custom.css" in your