clown mode

torbjornbp · Jul 2, 2024 · 99d0ecc · 99d0ecc
1 parent 116b930
commit 99d0ecc
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 1 deletion.
diff --git a/layouts/partials/clown.html b/layouts/partials/clown.html
@@ -0,0 +1,8 @@
+<button id="font-change-button" class="font-change-button">☻</button>
+
+<script>
+  document.getElementById('font-change-button').addEventListener('click', function() {
+    document.body.classList.toggle('comic-sans');
+    this.textContent = document.body.classList.contains('comic-sans') ? '🤡' : '☻';
+  });
+</script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -10,7 +10,7 @@
   </head>
 
   <body>
-    <h1 style="text-align: center;">☻</h1> 
+    <h1 style="text-align: center;">{{ partial "clown.html" . }}</h1> 
     <nav>
     <ul class="menu">
       <p><strong>Torbjørn Bakken Pedersen's page</strong></p>
@@ -24,3 +24,5 @@ <h1 style="text-align: center;">☻</h1>
 {{ with .Site.Params.favicon }}
 <link rel="icon" type="image/png" href="/favicon.png">
 {{ end }}
+
+
diff --git a/static/css/fonts.css b/static/css/fonts.css
@@ -12,10 +12,43 @@
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'Comic Mono';
+    src: url('/fonts/ComicMono.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
 body {
     font-family: "Iosevka Aile", "Arial", sans-serif;
+    transition: font-family 0.3s ease;
 }
 
 code {
     font-family: "Iosevka Term Web", "Courier New", monospace;
+    transition: font-family 0.3s ease;
+}
+
+body.comic-sans {
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
+}
+
+body.comic-sans code {
+    font-family: "Comic Mono", monospace;
+}
+
+.font-change-button {
+    font-size: 30px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    font-family: inherit; /* This will make the button text use the same font as the body */
+}
+
+body.comic-sans .font-change-button {
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
 }
diff --git a/static/fonts/ComicMono.ttf b/static/fonts/ComicMono.ttf