Explain difference in logo variants

styleguide/assets/style/styleguide.css

@@ -508,7 +508,7 @@ i[data-icon] {
   box-sizing: content-box;
 }
 i[data-icon]::before {
-  content: "";
+  content: '';
   display: block;
   width: 100%;
   height: 100%;
@@ -517,31 +517,31 @@ i[data-icon]::before {
   mask-repeat: no-repeat;
   background-color: currentColor;
 }
-i[data-icon][data-icon=arrow-left]::before {
+i[data-icon][data-icon='arrow-left']::before {
   mask-image: url("../icon/arrow_left.svg");
 }
-i[data-icon][data-icon=arrow-up]::before {
+i[data-icon][data-icon='arrow-up']::before {
   mask-image: url("../icon/arrow_up.svg");
 }
-i[data-icon][data-icon=arrow-right]::before {
+i[data-icon][data-icon='arrow-right']::before {
   mask-image: url("../icon/arrow_right.svg");
 }
-i[data-icon][data-icon=arrow-down]::before {
+i[data-icon][data-icon='arrow-down']::before {
   mask-image: url("../icon/arrow_down.svg");
 }
-i[data-icon][data-icon=info]::before {
+i[data-icon][data-icon='info']::before {
   mask-image: url("../icon/info.svg");
 }
-i[data-icon][data-icon=home]::before {
+i[data-icon][data-icon='home']::before {
   mask-image: url("../icon/home.svg");
 }
-i[data-icon][data-icon=menu-small]::before {
+i[data-icon][data-icon='menu-small']::before {
   mask-image: url("../icon/menu_small.svg");
 }
-i[data-icon][data-icon=light]::before {
+i[data-icon][data-icon='light']::before {
   mask-image: url("../icon/lightbulb.svg");
 }
-i[data-icon][data-icon=warning]::before {
+i[data-icon][data-icon='warning']::before {
   mask-image: url("../icon/warning.svg");
 }
 
@@ -730,6 +730,10 @@ body > div main {
   }
 }
 
+.background {
+  background-color: var(--color-background);
+}
+
 a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
   color: var(--color-accent-1);
   text-decoration: underline;
@@ -767,7 +771,7 @@ a.a-visited, a.a-visited:hover, a.a-visited:active, a.a-visited:focus {
   margin: 0;
 }
 .alert::before {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   border-radius: 1rem;

styleguide/assets/style/styleguide.scss

@@ -31,16 +31,16 @@ body {
       object-fit: contain;
     }
 
-    #backToWiki > img {
+    #backToWiki>img {
       transition: transform 200ms;
     }
 
-    #backToWiki:hover > img {
+    #backToWiki:hover>img {
       transform: scale(1.05);
     }
   }
 
-  > div {
+  >div {
     display: flex;
     gap: 1rem;
     flex-grow: 1;
@@ -136,7 +136,7 @@ body {
             }
           }
 
-          > a {
+          >a {
             display: flex;
             align-items: center;
             gap: 0.5rem;
@@ -226,6 +226,10 @@ body {
   }
 }
 
+.background {
+  background-color: var(--color-background);
+}
+
 a {
 
   &.a-regular,
@@ -298,14 +302,14 @@ pre,
   display: flex;
   width: 100%;
 
-  & > * {
+  &>* {
     width: 100%;
   }
 
   @media (max-width: $breakpoint-mobile) {
     flex-wrap: wrap;
 
-    & > * {
+    &>* {
       width: 100%;
     }
   }
@@ -315,7 +319,7 @@ pre,
   display: flex;
   align-items: center;
 
-  & > * {
+  &>* {
     width: 100%;
   }
 
@@ -323,14 +327,14 @@ pre,
     flex-wrap: wrap;
     justify-content: center;
 
-    & > * {
+    &>* {
       width: 100%;
     }
   }
 }
 
 
-main > div.generator {
+main>div.generator {
   display: flex;
   flex-direction: column;
   gap: 1em;
@@ -361,7 +365,7 @@ main > div.generator {
     gap: 1rem;
     margin-top: 2rem;
 
-    & > span {
+    &>span {
       width: 100%;
       font-size: var(--text-xl);
     }

styleguide/logo/index.html

@@ -50,6 +50,64 @@
             </div>
 
             <h1>Logo</h1>
+            <p>One of the primary design elements of any design is of course its logo. But because a single logo doesn't
+                fit each use-case, e.g. in terms of aspect ratio or detail, we created multiple variants. On top of
+                that, each variant also has its separate dark and light theme variants, in case the logo is used on a
+                light background. But in general, as with the entire design, dark mode is the preferred representaton.
+                All logo files (with and without transparency or glow and in both light and dark mode) can be found in
+                the design repository (not yet published).</p>
+            <!-- TODO: Link to repository or other form of logo collection -->
+
+            <h2>Full Logo</h2>
+            <p>The most present logo consists of the hare and egg, as well as the motto <i>Unhandled Eggception</i> and
+                the eventname <i>Easterhegg 2025</i>. It is used on this website and can be used as a banner, title
+                image or for posters and similar. The eventname on it is optional, variants without it can be
+                found&mdash;as all other logo files&mdash;using the link above.</p>
+            <div class="layout-column">
+                <img src="../assets/image/logos_dark/logo_eventname.png" class="dark background"
+                    alt="Full 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 with cracks. The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
+                <img src="../assets/image/logos_light/logo_eventname.png" class="light background"
+                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sign, only glowing dimly." />
+            </div>
+
+            <h2>EH22 Logo</h2>
+            <p>Especially useful for our matrix space, this logo variant featuring only the "EH22" lettering has a more
+                rectangular appearance and is therefore useful for profile-esque pictures, where the eventname might not
+                always be visible, e.g. in a collapsed room-overview in the Element matrix client.</p>
+            <div class="layout-column">
+                <img src="../assets/image/logos_dark/logo_eh22.png" class="dark background"
+                    alt="EH22 logo of Easterhegg 2025 in the style of a neon sign: It features the text 'EH22' spanning two lines. The '22' spans across the same width as 'EH' by spacing the two digits slighty further apart from one another than the two letters, giving it a rectangular appearance. The entire text features the blue neon effect from previous logos." />
+                <img src="../assets/image/logos_light/logo_eh22.png" class="light background"
+                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
+            </div>
+
+            <h2>Icon Logos</h2>
+            <p>The following logo variants are all intended for a similar prfile-esque use-case as the EH22 logo above.
+                The main difference is, that they don't have an explicit mention of the eventname. Meaning they should
+                preferably be used, if the eventname is always visible (e.g. via the display name on the <a
+                    href="https://chaos.social/@easterhegg2025">Easterhegg 2025 mastodon account</a>) or the association
+                is clear e.g. because it's a channel icon inside the EH22 matrix space. But this is not a super strict
+                policy. They can of course also be used as simple design elements.</p>
+            <div class="layout-column">
+                <img src="../assets/image/logos_dark/logo_icons.png" class="dark background"
+                    alt="Icon logo of Easterhegg 2025 in the style of a neon sign: It features the same hare and egg as before, horizontally next to one another, but the egg is a bit lower than the hare." />
+                <img src="../assets/image/logos_light/logo_icons.png" class="light background"
+                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
+            </div>
+
+            <div class="layout-column">
+                <img src="../assets/image/logos_dark/logo_egg.png" class="dark background"
+                    alt="Egg-only logo of Easterhegg 2025 in the style of a neon sign: It only features the egg from before." />
+                <img src="../assets/image/logos_light/logo_egg.png" class="light background"
+                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
+            </div>
+
+            <div class="layout-column">
+                <img src="../assets/image/logos_dark/logo_hare.png" class="dark background"
+                    alt="Hare-only logo of Easterhegg 2025 in the style of a neon sign: It only features the hare from before." />
+                <img src="../assets/image/logos_light/logo_hare.png" class="light background"
+                    alt="The same logo as the previous one, but instead in the style of an unpowered neon sing, only glowing dimly." />
+            </div>
         </main>
     </div>
     <script src="../assets/script/styleguide.js" type="text/javascript"></script>