Use different glow for logo in light mode

styleguide/assets/style/base.css

@@ -128,6 +128,12 @@
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
+.dark .light-only {
+  display: none;
+}
+.dark .dark-only {
+  display: initial;
+}
 
 .light {
   --color-foreground: var(--color-light-foreground);
@@ -150,6 +156,12 @@
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
+.light .light-only {
+  display: initial;
+}
+.light .dark-only {
+  display: none;
+}
 
 html,
 html.light {
@@ -173,6 +185,14 @@ html.light {
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
+html .light-only,
+html.light .light-only {
+  display: initial;
+}
+html .dark-only,
+html.light .dark-only {
+  display: none;
+}
 
 html.dark {
   --color-foreground: var(--color-dark-foreground);
@@ -195,6 +215,12 @@ html.dark {
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
+html.dark .light-only {
+  display: none;
+}
+html.dark .dark-only {
+  display: initial;
+}
 
 @media (prefers-color-scheme: dark) {
   html {
@@ -218,6 +244,12 @@ html.dark {
     --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
       border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
   }
+  html .light-only {
+    display: none;
+  }
+  html .dark-only {
+    display: initial;
+  }
 }
 @font-face {
   font-family: "Athiti";

styleguide/assets/style/base.scss

@@ -143,6 +143,14 @@ $mobile-navigation-height: 4rem;
   --color-glow-secondary: var(--color-white);
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+
+  .light-only {
+    display: none;
+  }
+
+  .dark-only {
+    display: initial;
+  }
 }
 
 @mixin theme_light() {
@@ -166,6 +174,14 @@ $mobile-navigation-height: 4rem;
   --color-glow-secondary: var(--color-krypton-950);
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+
+  .light-only {
+    display: initial;
+  }
+
+  .dark-only {
+    display: none;
+  }
 }
 
 .dark {

styleguide/assets/style/styleguide.css

@@ -128,6 +128,12 @@
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
+.dark .light-only {
+  display: none;
+}
+.dark .dark-only {
+  display: initial;
+}
 
 .light {
   --color-foreground: var(--color-light-foreground);
@@ -150,6 +156,12 @@
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
+.light .light-only {
+  display: initial;
+}
+.light .dark-only {
+  display: none;
+}
 
 html,
 html.light {
@@ -173,6 +185,14 @@ html.light {
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
+html .light-only,
+html.light .light-only {
+  display: initial;
+}
+html .dark-only,
+html.light .dark-only {
+  display: none;
+}
 
 html.dark {
   --color-foreground: var(--color-dark-foreground);
@@ -195,6 +215,12 @@ html.dark {
   --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
     border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
+html.dark .light-only {
+  display: none;
+}
+html.dark .dark-only {
+  display: initial;
+}
 
 @media (prefers-color-scheme: dark) {
   html {
@@ -218,6 +244,12 @@ html.dark {
     --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
       border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
   }
+  html .light-only {
+    display: none;
+  }
+  html .dark-only {
+    display: initial;
+  }
 }
 @font-face {
   font-family: "Athiti";

styleguide/colors/index.html

@@ -10,10 +10,12 @@
 
 <body>
     <header>
-    <img src="../assets/image/logo_eventname_glow.svg" class="header-image"
+        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
-         alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+     The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
     <div>
         <nav>

styleguide/demopage/index.html

@@ -10,10 +10,12 @@
 
 <body>
     <header>
-    <img src="../assets/image/logo_eventname_glow.svg" class="header-image"
+        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
-         alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+     The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
     <div>
         <nav>
@@ -55,13 +57,16 @@
                 <p>
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                     labore et
-                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+                    rebum.
                     Stet
                     clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                     amet,
-                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+                    aliquyam
                     erat,
-                sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                    gubergren,
                     no
                     sea takimata sanctus est Lorem ipsum dolor sit amet.
                 </p>
@@ -70,13 +75,16 @@
                 <p>
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                     labore et
-                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+                    rebum.
                     Stet
                     clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                     amet,
-                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+                    aliquyam
                     erat,
-                sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                    gubergren,
                     no
                     sea takimata sanctus est Lorem ipsum dolor sit amet.
                 </p>
@@ -111,21 +119,23 @@ int *positives(int *numbers, int *size) {
             <section>
                 <h2>Section With Image</h2>
                 <p>
-                When including images in your content, you can opt into applying an SVG filter that adds visual glitches
+                    When including images in your content, you can opt into applying an SVG filter that adds visual
+                    glitches
                     to
-                the image. This shouldn't be used on images with text or important details, because the glitches will
+                    the image. This shouldn't be used on images with text or important details, because the glitches
+                    will
                     most
                     likely reduce readability. Let's use the following plain image:
                 </p>
                 <figure>
-                <img src="../assets/image/example_cat.jpg"
+                    <img src="../assets/image/example_cat.jpg" alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
-                     alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
                       of leopard-print fabric and looking at something behind the camera. The background is dark and
                       plain." />
                     <figcaption>Example image without any distortion applied.</figcaption>
                 </figure>
                 <p>
-                Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG filter
+                    Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG
+                    filter
                     dynamically. But we also made <a href="../generator">a simple web-tool to apply the filter</a> to an
                     image
                     and export it as a PNG. The tool also scales the image down if its vertical size is larger than 1000
@@ -133,8 +143,7 @@ int *positives(int *numbers, int *size) {
                     to ensure that the filter looks similar across all images.
                 </p>
                 <figure>
-                <img class="glitch" src="../assets/image/example_cat.jpg"
+                    <img class="glitch" src="../assets/image/example_cat.jpg" alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
-                     alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
                       bright edges, which get surrounded by pink and blue to their left and right hand side. The second
                       one distorts the image by offsetting parts of the image horizontally by seemingly random yet
                       somewhat osscilating amounts." />
@@ -147,17 +156,20 @@ int *positives(int *numbers, int *size) {
                 <p>
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                     labore et
-                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+                    rebum.
                     Stet
                     clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                 </p>
                 <ol>
                     <li>Short item no. 1.</li>
-                <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into
+                    <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
+                        into
                         the
                         next line and therefore moves the next item further down.
                     </li>
-                <li>Long item at the end, which is also longer than one visual line. It also wraps over into the next
+                    <li>Long item at the end, which is also longer than one visual line. It also wraps over into the
+                        next
                         line,
                         but there is no next item to move.
                     </li>
@@ -165,7 +177,8 @@ int *positives(int *numbers, int *size) {
                 <p>
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                     labore et
-                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+                    rebum.
                     Stet
                     clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                 </p>
@@ -173,11 +186,13 @@ int *positives(int *numbers, int *size) {
                 <h3>Subsection Title</h3>
                 <ol>
                     <li>Short item no. 1.</li>
-                <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into
+                    <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
+                        into
                         the
                         next line and therefore moves the next item further down.
                     </li>
-                <li>Long item at the end, which is also longer than one visual line. It also wraps over into the next
+                    <li>Long item at the end, which is also longer than one visual line. It also wraps over into the
+                        next
                         line,
                         but there is no next item to move.
                     </li>
@@ -186,11 +201,13 @@ int *positives(int *numbers, int *size) {
                 <h3>Subsection Title</h3>
                 <ul>
                     <li>Short item no. 1.</li>
-                <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into
+                    <li>Long item in the middle. This item is longer then one visual line, which is why it wraps over
+                        into
                         the
                         next line and therefore moves the next item further down.
                     </li>
-                <li>Long item at the end, which is also longer than one visual line. It also wraps over into the next
+                    <li>Long item at the end, which is also longer than one visual line. It also wraps over into the
+                        next
                         line,
                         but there is no next item to move.
                     </li>

styleguide/generator/index.html

@@ -10,10 +10,12 @@
 
 <body style="height: 100vh;">
     <header>
-    <img src="../assets/image/logo_eventname_glow.svg" class="header-image"
+        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
-         alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+     The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
     <div>
         <nav>
@@ -48,7 +50,8 @@
                                 <feFuncA type="table" tableValues="0 1" />
                             </feComponentTransfer>
 
-                        <feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4"/>
+                            <feConvolveMatrix in="ltoa_inverse" result="pink_edges"
+                                kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
                             <feComponentTransfer in="pink_edges" result="pink">
                                 <feFuncR type="table" tableValues="0.7765 0" />
                                 <feFuncG type="table" tableValues="0.1451 0" />
@@ -56,7 +59,8 @@
                             </feComponentTransfer>
                             <feOffset in="pink" result="pink_shift" dx="-0.002" />
 
-                        <feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4"/>
+                            <feConvolveMatrix in="ltoa_inverse" result="cyan_edges"
+                                kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
                             <feComponentTransfer in="cyan_edges" result="cyan">
                                 <feFuncR type="table" tableValues="0.2941 0" />
                                 <feFuncG type="table" tableValues="0.6784 0" />

styleguide/index.html

@@ -10,10 +10,12 @@
 
 <body>
     <header>
-    <img src="assets/image/logo_eventname_glow.svg" class="header-image"
+        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
-         alt="Logo of Easterhegg 2025. In the style of a neon sign:
          The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
          The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+         The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
+         The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
     <div>
         <nav>
@@ -34,4 +36,5 @@
         <script src="assets/script/styleguide.js" type="text/javascript"></script>
     </div>
 </body>
+
 </html>

styleguide/typography/index.html

@@ -10,10 +10,12 @@
 
 <body>
     <header>
-    <img src="../assets/image/logo_eventname_glow.svg" class="header-image"
+        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
-         alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+     The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
     <div>
         <nav>