Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

script cleanup
All checks were successful
Jenkins
Ellpeck/Web/pipeline/head This commit looks good
Details

Browse source
This commit is contained in:
Ell 2023-06-19 10:58:12 +02:00
parent db2ad09a31
commit 2a58a0a1d2
5 changed files with 50 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
main/_includes/footer.html
View file

@ -9,5 +9,8 @@
<span id="quote-text"></span> <span id="quote-text"></span>
<script src="/scripts/quote.js"></script> <script src="/scripts/quote.js"></script>
<img src="/res/blobheart.png" id="blobheart" alt="A blob emoji holding a heart"> <img src="/res/blobheart.png" id="blobheart" alt="A blob emoji holding a heart">
<script>
$('#blobheart').on('click', () => $("#navbar-image").attr("src", "res/heart.jpeg"));
</script>
</div> </div>
</div> </div>

26
main/_includes/nav/navbar.html
View file

@ -19,18 +19,28 @@
<!-- Navbar content --> <!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content"> <div class="collapse navbar-collapse" id="navbar-content">
<script>
$(".navbar-collapse a").on("click", () => $(".navbar-collapse").collapse("hide"));
</script>
<div class="navbar-nav mr-auto" id="nav-items"> <div class="navbar-nav mr-auto" id="nav-items">
{% if page.nav %} {% if page.nav %}
{% include {{page.nav}} %} {% include {{ page.nav }} %}
{% elsif layout.nav %} {% elsif layout.nav %}
{% include {{layout.nav}} %} {% include {{ layout.nav }} %}
{% endif %} {% endif %}
</div> </div>
<span class="navbar-text"> <span class="navbar-text custom-control custom-checkbox">
<div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="dark-mode">
<input type="checkbox" class="custom-control-input" id="dark-mode"> <label class="custom-control-label" for="dark-mode">🌙 Dark Mode</label>
<label class="custom-control-label" for="dark-mode">🌙 Dark Mode</label> <script>
</div> let mode = $("#dark-mode");
mode.prop("checked", dark);
mode.on("click", function () {
localStorage.setItem("dark", $(this).prop("checked"));
location.hash = "";
location.reload();
});
</script>
</span> </span>
</div> </div>
</nav> </nav>

20
main/_layouts/default.html
View file

@ -2,6 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<script>
// redirect legacy anchors
if (/^#privacy\/?$/.test(location.hash))
location.href = "/privacy";
if (/^#impressum\/?$/.test(location.hash))
location.href = "/impressum";
</script>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -19,16 +27,26 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/scripts/main.js"></script>
<script>
const darkCookie = localStorage.getItem("dark");
const dark = darkCookie === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : darkCookie === "true";
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap">
<link rel="stylesheet" href="/style/style.css"> <link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="/style/dark.css">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
</head> </head>
<body data-spy="scroll" data-target="#navbar" data-offset="140"> <body data-spy="scroll" data-target="#navbar" data-offset="140">
<script>
if (dark)
$("body").addClass("dark-mode");
</script>
{% include nav/navbar.html %} {% include nav/navbar.html %}
<!-- Content --> <!-- Content -->

31
main/scripts/main.js
View file

@ -1,31 +0,0 @@
const darkCookie = localStorage.getItem("dark");
const dark = darkCookie === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : darkCookie === "true";
if (dark)
$('head').append($("<link/>", {
rel: "stylesheet",
href: "/style/dark.css"
}));
// redirect legacy anchors
if (/^#privacy\/?$/.test(location.hash))
location.href = "/privacy";
if (/^#impressum\/?$/.test(location.hash))
location.href = "/impressum";
$(function () {
$('.navbar-collapse a').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
$('#blobheart').on('click', function () {
$('#navbar-image').attr('src', 'res/heart.jpeg');
});
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
localStorage.setItem("dark", $(this).prop('checked'));
location.hash = "";
location.reload();
});
});

20
main/style/dark.css
View file

@ -1,34 +1,34 @@
body { body.dark-mode {
color: #d8d8d8; color: #d8d8d8;
background-color: #222222; background-color: #222222;
} }
.jumbotron { body.dark-mode .jumbotron {
background-color: #404142; background-color: #404142;
} }
.list-display { body.dark-mode .list-display {
background-color: #404142; background-color: #404142;
} }
.card { body.dark-mode .card {
background-color: #3d3d3d !important; background-color: #3d3d3d !important;
} }
.text-muted { body.dark-mode .text-muted {
color: #979797 !important; color: #979797 !important;
} }
.footer { body.dark-mode .footer {
background-color: #343a40; background-color: #343a40;
} }
.title-button:link, body.dark-mode .title-button:link,
.title-button:visited { body.dark-mode .title-button:visited {
color: white !important; color: white !important;
} }
.title-button:hover, body.dark-mode .title-button:hover,
.title-button:active { body.dark-mode .title-button:active {
color: rgb(182, 182, 182) !important; color: rgb(182, 182, 182) !important;
} }