diff --git a/theme/static/css/custom.css b/theme/static/css/custom.css index bf130c0..aa4816b 100644 --- a/theme/static/css/custom.css +++ b/theme/static/css/custom.css @@ -26,12 +26,26 @@ --pico-font-family-sans-serif: LinBiolinum, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 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 { --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 @@ -54,7 +68,6 @@ a { } } - @media screen and (min-width: 1536px) { .card { 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); */ - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + +/* Light color scheme (Default) */ +/* 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 */ - /* Jumbotron */ #jumbotron-title { border-bottom: thin solid black; @@ -123,7 +172,7 @@ a { /* Main content */ #main-header h1, #site-footer p { - background: linear-gradient(to right, #FCEFD9, white, #FCEFD9); + background: var(--bg-gradient-light); box-shadow: var(--pico-card-box-shadow); padding: calc(var(--pico-block-spacing-horizontal) * 0.5) calc(var(--pico-block-spacing-vertical) * 0.5); text-align: center; @@ -155,6 +204,7 @@ a { h3 { display: -webkit-box; -webkit-line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; diff --git a/theme/templates/article.html b/theme/templates/article.html index 2cdf4c9..4bf3d63 100644 --- a/theme/templates/article.html +++ b/theme/templates/article.html @@ -5,13 +5,10 @@ article.title }}{% endif %}{% endblock %} -{% block container_body %} -{% block container_header %} -{% endblock container_header %} +{% block content_header %}
- {% block content_header %}
-

{{ article.title }}

+

{{ article.title }}

{% endblock content_header %} @@ -21,9 +18,5 @@ article.title }}{% endif {% block content_footer %} - {% endblock content_footer %}
-{% endblock container_body %} - -{% block container_footer %} -{% endblock container_footer %} \ No newline at end of file +{% endblock content_footer %} \ No newline at end of file diff --git a/theme/templates/base.html b/theme/templates/base.html index dd37fc3..678add5 100644 --- a/theme/templates/base.html +++ b/theme/templates/base.html @@ -1,5 +1,5 @@ - + @@ -23,10 +23,8 @@
-
- {% block content_header %} - {% endblock %} -
+ {% block content_header %} + {% endblock %} {% block content_body %} {% endblock %} {% block content_footer %} @@ -35,6 +33,7 @@
+ \ No newline at end of file diff --git a/theme/templates/includes/jumbotron.html b/theme/templates/includes/jumbotron.html index 91902a3..0125a73 100644 --- a/theme/templates/includes/jumbotron.html +++ b/theme/templates/includes/jumbotron.html @@ -3,12 +3,6 @@

{{ SITENAME }}

-{#% if SITESUBTITLE %} -
-

{{ SITESUBTITLE }}

-
-{% endif %#} -
\ No newline at end of file diff --git a/theme/templates/includes/navbar.html b/theme/templates/includes/navbar.html index fc37c5f..d85793d 100644 --- a/theme/templates/includes/navbar.html +++ b/theme/templates/includes/navbar.html @@ -1,17 +1,20 @@ -{#
#} - - - {# -
#} \ No newline at end of file + + \ No newline at end of file diff --git a/theme/templates/page.html b/theme/templates/page.html index a44c0d5..d8d7afe 100644 --- a/theme/templates/page.html +++ b/theme/templates/page.html @@ -5,11 +5,13 @@ {% block content_header %} -

{{ page.title }}

+
+

{{ page.title }}

+
{% endblock content_header %} {% block content_body %} -{{ page.content }} +
{{ page.content }}
{% endblock content_body %} {% block content_footer %}