From c27ae28a20a5037b1c67123f23dcf5b4307ec2f3 Mon Sep 17 00:00:00 2001
From: klutz <kev.belisle@gmail.com>
Date: Fri, 30 Oct 2020 04:45:49 +0100
Subject: [PATCH] Add logo easter egg (#12)

Merge branch 'main' into feature/add-logo-easter-egg

Add logo easter egg

Co-authored-by: Etzelia <etzelia@hotmail.com>
Co-authored-by: Kevin Belisle <kev.belisle@gmail.com>
Reviewed-on: https://git.etztech.xyz/BirbMC/birbmc.com/pulls/12
Reviewed-by: Etzelia <etzelia@hotmail.com>
---
 src/assets/js/main.js               | 169 ++++++++++++++--------------
 src/assets/sass/layout/_header.scss |   4 +
 2 files changed, 91 insertions(+), 82 deletions(-)

diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index 6f2bc6b..d2a78cc 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -11,113 +11,118 @@
 		$main = $('#main');
 
 	// Breakpoints.
-		breakpoints({
-			xlarge:   [ '1281px',  '1680px' ],
-			large:    [ '981px',   '1280px' ],
-			medium:   [ '737px',   '980px'  ],
-			small:    [ '481px',   '736px'  ],
-			xsmall:   [ '361px',   '480px'  ],
-			xxsmall:  [ null,      '360px'  ]
-		});
+	breakpoints({
+		xlarge:   [ '1281px',  '1680px' ],
+		large:    [ '981px',   '1280px' ],
+		medium:   [ '737px',   '980px'  ],
+		small:    [ '481px',   '736px'  ],
+		xsmall:   [ '361px',   '480px'  ],
+		xxsmall:  [ null,      '360px'  ]
+	});
 
 	// Play initial animations on page load.
-		$window.on('load', function() {
-			window.setTimeout(function() {
-				$body.removeClass('is-preload');
-			}, 100);
-		});
+	$window.on('load', function() {
+		window.setTimeout(function() {
+			$body.removeClass('is-preload');
+		}, 100);
+	});
 
 	// Nav.
-		var $nav = $('#nav');
+	var $nav = $('#nav');
 
-		if ($nav.length > 0) {
+	if ($nav.length > 0) {
 
-			// Shrink effect.
-				$main
-					.scrollex({
-						mode: 'top',
-						enter: function() {
-							$nav.addClass('alt');
-						},
-						leave: function() {
-							$nav.removeClass('alt');
-						},
-					});
+		// Shrink effect.
+		$main
+			.scrollex({
+				mode: 'top',
+				enter: function() {
+					$nav.addClass('alt');
+				},
+				leave: function() {
+					$nav.removeClass('alt');
+				},
+			});
 
-			// Links.
-				var $nav_a = $nav.find('a');
+		// Links.
+		var $nav_a = $nav.find('a');
 
+		$nav_a
+			.scrolly({
+				speed: 1000,
+				offset: function() { return $nav.height(); }
+			})
+			.on('click', function() {
+
+				var $this = $(this);
+
+				// External link? Bail.
+				if ($this.attr('href').charAt(0) != '#')
+					return;
+
+				// Deactivate all links.
 				$nav_a
-					.scrolly({
-						speed: 1000,
-						offset: function() { return $nav.height(); }
-					})
-					.on('click', function() {
+					.removeClass('active')
+					.removeClass('active-locked');
 
-						var $this = $(this);
+				// Activate link *and* lock it (so Scrollex doesn't try to activate other links as we're scrolling to this one's section).
+				$this
+					.addClass('active')
+					.addClass('active-locked');
 
-						// External link? Bail.
-							if ($this.attr('href').charAt(0) != '#')
-								return;
+			})
+			.each(function() {
 
-						// Deactivate all links.
-							$nav_a
-								.removeClass('active')
-								.removeClass('active-locked');
+				var	$this = $(this),
+					id = $this.attr('href'),
+					$section = $(id);
 
-						// Activate link *and* lock it (so Scrollex doesn't try to activate other links as we're scrolling to this one's section).
-							$this
-								.addClass('active')
-								.addClass('active-locked');
+				// No section for this link? Bail.
+				if ($section.length < 1)
+					return;
 
-					})
-					.each(function() {
+				// Scrollex.
+				$section.scrollex({
+					mode: 'middle',
+					initialize: function() {
 
-						var	$this = $(this),
-							id = $this.attr('href'),
-							$section = $(id);
+						// Deactivate section.
+						if (browser.canUse('transition'))
+							$section.addClass('inactive');
 
-						// No section for this link? Bail.
-							if ($section.length < 1)
-								return;
+					},
+					enter: function() {
 
-						// Scrollex.
-							$section.scrollex({
-								mode: 'middle',
-								initialize: function() {
+						// Activate section.
+						$section.removeClass('inactive');
 
-									// Deactivate section.
-										if (browser.canUse('transition'))
-											$section.addClass('inactive');
+						// No locked links? Deactivate all links and activate this section's one.
+						if ($nav_a.filter('.active-locked').length == 0) {
 
-								},
-								enter: function() {
+							$nav_a.removeClass('active');
+							$this.addClass('active');
 
-									// Activate section.
-										$section.removeClass('inactive');
+						}
 
-									// No locked links? Deactivate all links and activate this section's one.
-										if ($nav_a.filter('.active-locked').length == 0) {
+						// Otherwise, if this section's link is the one that's locked, unlock it.
+						else if ($this.hasClass('active-locked'))
+							$this.removeClass('active-locked');
 
-											$nav_a.removeClass('active');
-											$this.addClass('active');
+					}
+				});
 
-										}
+			});
 
-									// Otherwise, if this section's link is the one that's locked, unlock it.
-										else if ($this.hasClass('active-locked'))
-											$this.removeClass('active-locked');
-
-								}
-							});
-
-					});
-
-		}
+	}
 
 	// Scrolly.
-		$('.scrolly').scrolly({
-			speed: 1000
-		});
+	$('.scrolly').scrolly({
+		speed: 1000
+	});
+
+	// Easter Eggs
+	document.querySelector("span.logo").addEventListener("dblclick", (e) => {
+		e.currentTarget.classList.toggle("rotated");
+	});
 
 })(jQuery);
\ No newline at end of file
diff --git a/src/assets/sass/layout/_header.scss b/src/assets/sass/layout/_header.scss
index b664362..7d72a64 100644
--- a/src/assets/sass/layout/_header.scss
+++ b/src/assets/sass/layout/_header.scss
@@ -41,6 +41,10 @@
       display: block;
       margin: 0 0 (_size(element-margin) * 0.75) 0;
 
+      &.rotated {
+        transform: rotate(360deg);
+      }
+
       img {
         display: block;
         margin: 0 auto;