tobias/t-r.de
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more template work

Browse Source
This commit is contained in:
eclipse 2025-02-07 00:42:24 +01:00
parent f79cae8b94
commit b94181f395
6 changed files with 88 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
theme/static/css/custom.css
View File

@ -26,12 +26,26 @@
--pico-font-family-sans-serif: LinBiolinum, system-ui, "Segoe UI", Roboto, --pico-font-family-sans-serif: LinBiolinum, system-ui, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
var(--pico-font-family-emoji); var(--pico-font-family-emoji);
--bg-gradient-light: linear-gradient(to right, #FCEFD9, white, #FCEFD9);
--bg-gradient-dark: linear-gradient(to right, #4D3700, black, #4D3700);
} }
a { a {
--pico-text-decoration: none; --pico-text-decoration: none;
} }
#sun-moon {
background-color: var(--pico-primary);
}
/* #sun-moon:not(:checked)::before {
background-color: var(--pico-color);
}
#sun-moon:not([aria-invalid]) {
border-color: var(--pico-primary-background);
} */
/* /*
* Settings specific to breakpoints * Settings specific to breakpoints
@ -54,7 +68,6 @@ a {
} }
} }
@media screen and (min-width: 1536px) { @media screen and (min-width: 1536px) {
.card { .card {
max-width: calc(25% - var(--pico-block-spacing-horizontal)); max-width: calc(25% - var(--pico-block-spacing-horizontal));
@ -66,18 +79,54 @@ a {
} }
/* /*
* Helper classes * Light/Dark mode settings
*/ */
.shadow {
/* box-shadow: var(--pico-card-box-shadow); */ /* Light color scheme (Default) */
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; /* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
#sun-moon:not(:checked)::before {
background-color: var(--pico-color);
}
#sun-moon:not([aria-invalid]) {
border-color: var(--pico-primary);
}
} }
/* Dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
#jumbotron-title {
border-bottom: thin solid white;
}
#main-header h1,
#site-footer p {
background: var(--bg-gradient-dark);
}
}
}
/* Dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
#jumbotron-title {
border-bottom: thin solid white;
}
#main-header h1,
#site-footer p {
background: var(--bg-gradient-dark);
}
}
/* /*
* Specific elements on the page * Specific elements on the page
*/ */
/* Jumbotron */ /* Jumbotron */
#jumbotron-title { #jumbotron-title {
border-bottom: thin solid black; border-bottom: thin solid black;
@ -123,7 +172,7 @@ a {
/* Main content */ /* Main content */
#main-header h1, #main-header h1,
#site-footer p { #site-footer p {
background: linear-gradient(to right, #FCEFD9, white, #FCEFD9); background: var(--bg-gradient-light);
box-shadow: var(--pico-card-box-shadow); box-shadow: var(--pico-card-box-shadow);
padding: calc(var(--pico-block-spacing-horizontal) * 0.5) calc(var(--pico-block-spacing-vertical) * 0.5); padding: calc(var(--pico-block-spacing-horizontal) * 0.5) calc(var(--pico-block-spacing-vertical) * 0.5);
text-align: center; text-align: center;
@ -155,6 +204,7 @@ a {
h3 { h3 {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

13
theme/templates/article.html
View File

@ -5,13 +5,10 @@ article.title }}{% endif
%}{% endblock %} %}{% endblock %}
{% block container_body %} {% block content_header %}
{% block container_header %}
{% endblock container_header %}
<article> <article>
{% block content_header %}
<header> <header>
<h3>{{ article.title }}</h3> <h1>{{ article.title }}</h1>
</header> </header>
{% endblock content_header %} {% endblock content_header %}
@ -21,9 +18,5 @@ article.title }}{% endif
{% block content_footer %} {% block content_footer %}
<footer>ISBN: Bla</footer> <footer>ISBN: Bla</footer>
{% endblock content_footer %}
</article> </article>
{% endblock container_body %} {% endblock content_footer %}
{% block container_footer %}
{% endblock container_footer %}

5
theme/templates/base.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html data-theme="light" lang="{{ DEFAULT_LANG }}"> <html data-theme="auto" lang="{{ DEFAULT_LANG }}">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -23,10 +23,8 @@
<main class="container"> <main class="container">
<div id="main-content" role="document"> <div id="main-content" role="document">
<div id="main-header">
{% block content_header %} {% block content_header %}
{% endblock %} {% endblock %}
</div>
{% block content_body %} {% block content_body %}
{% endblock %} {% endblock %}
{% block content_footer %} {% block content_footer %}
@ -35,6 +33,7 @@
</main> </main>
<footer id="site-footer">{% include "includes/footer.html" %}</footer> <footer id="site-footer">{% include "includes/footer.html" %}</footer>
<script src="{{ SITEURL }}/theme/js/SwitchColorMode.js"></script>
</body> </body>
</html> </html>

6
theme/templates/includes/jumbotron.html
View File

@ -3,12 +3,6 @@
<h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1> <h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
</div> </div>
</div> </div>
{#% if SITESUBTITLE %}
<div class="container" id="jumbotron-subtitle">
<h2>{{ SITESUBTITLE }}</h2>
</div>
{% endif %#}
<div class="container" id="jumbotron-subtitle"> <div class="container" id="jumbotron-subtitle">
<nav id="site-navbar">{% include "includes/navbar.html" %}</nav> <nav id="site-navbar">{% include "includes/navbar.html" %}</nav>
</div> </div>

17
theme/templates/includes/navbar.html
View File

@ -1,8 +1,7 @@
{#<div class="container">#} <ul>
<ul>
<h2>{{ SITESUBTITLE }}</h2> <h2>{{ SITESUBTITLE }}</h2>
</ul> </ul>
<ul> <ul>
{% for title, link in MENUITEMS %} {% for title, link in MENUITEMS %}
{% if link == url %} {% if link == url %}
<li aria-current="page"> <li aria-current="page">
@ -12,6 +11,10 @@
<a href="{{ link }}">{{ title }}</a> <a href="{{ link }}">{{ title }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> <li>
{# <label>
</div>#} <input id="sun-moon" name="color-mode-toggle" role="switch" type="checkbox" value="1"
aria-label="Toggle Light or Dark Mode">
</label>
</li>
</ul>

6
theme/templates/page.html
View File

@ -5,11 +5,13 @@
{% block content_header %} {% block content_header %}
<h1>{{ page.title }}</h1> <header id="main-header">
<h1>{{ page.title }}</h1>
</header>
{% endblock content_header %} {% endblock content_header %}
{% block content_body %} {% block content_body %}
{{ page.content }} <article>{{ page.content }}</article>
{% endblock content_body %} {% endblock content_body %}
{% block content_footer %} {% block content_footer %}