dunkirk.sh
the home site for me: also iteration 3 or 4 of my site
feat: add css naked day
+57
static/js/css-naked-day.js
+57
static/js/css-naked-day.js
···
1
+
// CSS Naked Day - April 9th
2
+
// Celebrates semantic HTML by removing CSS for one day
3
+
// https://css-naked-day.org/
4
+
5
+
(() => {
6
+
const now = new Date();
7
+
8
+
// CSS Naked Day lasts for 50 hours across all timezones
9
+
// From 10:00 April 8 UTC to 12:00 April 10 UTC
10
+
// This ensures it's April 9 somewhere in the world for the entire duration
11
+
const startTime = new Date(Date.UTC(now.getUTCFullYear(), 3, 8, 10, 0, 0)); // April 8, 10:00 UTC
12
+
const endTime = new Date(Date.UTC(now.getUTCFullYear(), 3, 10, 12, 0, 0)); // April 10, 12:00 UTC
13
+
14
+
const isCSSNakedDay = now >= startTime && now < endTime;
15
+
16
+
// Check if it's CSS Naked Day
17
+
if (isCSSNakedDay) {
18
+
// Remove all stylesheets immediately (prevents flash of styled content)
19
+
const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
20
+
stylesheets.forEach((sheet) => {
21
+
sheet.remove();
22
+
});
23
+
24
+
// Remove any inline styles
25
+
const inlineStyles = document.querySelectorAll("style");
26
+
inlineStyles.forEach((style) => {
27
+
style.remove();
28
+
});
29
+
30
+
// Add a simple message at the top of the page once DOM is ready
31
+
if (document.body) {
32
+
insertMessage();
33
+
} else {
34
+
document.addEventListener("DOMContentLoaded", insertMessage);
35
+
}
36
+
37
+
function insertMessage() {
38
+
const body = document.body;
39
+
40
+
const hr1 = document.createElement("hr");
41
+
const aside = document.createElement("aside");
42
+
aside.innerHTML =
43
+
'<h2>the website is broke!!! freak out!!!!!</h2> <p>just kidding lol. today is <a href="https://css-naked-day.org/">css naked day</a> know to the rest of the world as april 9th! this was created as a fun way to promote web standards and remind ourselves of the earlier days of the web! everything should be still functional on my site but in case not you can find my email somewhere on here and let me know :)</p><p><sub>* technicallllly there is still a wee bit of css to make sure stuff isn\'t completely out of control but everything else gets stripped so i say it counts</sub></p>';
44
+
const hr2 = document.createElement("hr");
45
+
46
+
body.insertBefore(hr1, body.firstChild);
47
+
body.insertBefore(aside, body.firstChild.nextSibling);
48
+
body.insertBefore(hr2, aside.nextSibling);
49
+
50
+
// Add basic constraints to prevent overflow
51
+
const style = document.createElement("style");
52
+
style.textContent =
53
+
"img, video, iframe { max-width: 100%; height: auto; } pre { max-width: 100%; overflow: auto; } .emoji-inline { display: inline; height: 1.2em; width: 1.2em; vertical-align: text-bottom; }";
54
+
document.head.appendChild(style);
55
+
}
56
+
}
57
+
})();
+3
templates/head.html
+3
templates/head.html
···
71
71
<link rel="stylesheet" type="text/css"
72
72
href="{{ get_url(path='css/main.css?' ~ cssHash, trailing_slash=false) | safe }}" />
73
73
{% endblock css %}
74
+
{% set cssNakedDayJsHash = get_hash(path="js/css-naked-day.js", sha_type=256,
75
+
base64=true) %}
76
+
<script src="{{ get_url(path='js/css-naked-day.js?' ~ cssNakedDayJsHash, trailing_slash=false) | safe }}"></script>
74
77
75
78
{% set jsHash = get_hash(path="js/copy-button.js", sha_type=256,
76
79
base64=true) %}