more template work
This commit is contained in:
parent
f79cae8b94
commit
b94181f395
@ -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;
|
||||
|
||||
@ -5,13 +5,10 @@ article.title }}{% endif
|
||||
%}{% endblock %}
|
||||
|
||||
|
||||
{% block container_body %}
|
||||
{% block container_header %}
|
||||
{% endblock container_header %}
|
||||
<article>
|
||||
{% block content_header %}
|
||||
<article>
|
||||
<header>
|
||||
<h3>{{ article.title }}</h3>
|
||||
<h1>{{ article.title }}</h1>
|
||||
</header>
|
||||
{% endblock content_header %}
|
||||
|
||||
@ -21,9 +18,5 @@ article.title }}{% endif
|
||||
|
||||
{% block content_footer %}
|
||||
<footer>ISBN: Bla</footer>
|
||||
{% endblock content_footer %}
|
||||
</article>
|
||||
{% endblock container_body %}
|
||||
|
||||
{% block container_footer %}
|
||||
{% endblock container_footer %}
|
||||
{% endblock content_footer %}
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-theme="light" lang="{{ DEFAULT_LANG }}">
|
||||
<html data-theme="auto" lang="{{ DEFAULT_LANG }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@ -23,10 +23,8 @@
|
||||
|
||||
<main class="container">
|
||||
<div id="main-content" role="document">
|
||||
<div id="main-header">
|
||||
{% block content_header %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block content_body %}
|
||||
{% endblock %}
|
||||
{% block content_footer %}
|
||||
@ -35,6 +33,7 @@
|
||||
</main>
|
||||
|
||||
<footer id="site-footer">{% include "includes/footer.html" %}</footer>
|
||||
<script src="{{ SITEURL }}/theme/js/SwitchColorMode.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -3,12 +3,6 @@
|
||||
<h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
{#% if SITESUBTITLE %}
|
||||
<div class="container" id="jumbotron-subtitle">
|
||||
<h2>{{ SITESUBTITLE }}</h2>
|
||||
</div>
|
||||
{% endif %#}
|
||||
|
||||
<div class="container" id="jumbotron-subtitle">
|
||||
<nav id="site-navbar">{% include "includes/navbar.html" %}</nav>
|
||||
</div>
|
||||
@ -1,4 +1,3 @@
|
||||
{#<div class="container">#}
|
||||
<ul>
|
||||
<h2>{{ SITESUBTITLE }}</h2>
|
||||
</ul>
|
||||
@ -12,6 +11,10 @@
|
||||
<a href="{{ link }}">{{ title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li>
|
||||
<label>
|
||||
<input id="sun-moon" name="color-mode-toggle" role="switch" type="checkbox" value="1"
|
||||
aria-label="Toggle Light or Dark Mode">
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
{#
|
||||
</div>#}
|
||||
@ -5,11 +5,13 @@
|
||||
|
||||
|
||||
{% block content_header %}
|
||||
<header id="main-header">
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
{% endblock content_header %}
|
||||
|
||||
{% block content_body %}
|
||||
{{ page.content }}
|
||||
<article>{{ page.content }}</article>
|
||||
{% endblock content_body %}
|
||||
|
||||
{% block content_footer %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user