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>
pull/1/head
klutz 2020-10-30 04:45:49 +01:00 committed by Etzelia
parent edcd382cf6
commit c27ae28a20
2 changed files with 91 additions and 82 deletions

View File

@ -11,113 +11,118 @@
$main = $('#main'); $main = $('#main');
// Breakpoints. // Breakpoints.
breakpoints({ breakpoints({
xlarge: [ '1281px', '1680px' ], xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ], large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ], medium: [ '737px', '980px' ],
small: [ '481px', '736px' ], small: [ '481px', '736px' ],
xsmall: [ '361px', '480px' ], xsmall: [ '361px', '480px' ],
xxsmall: [ null, '360px' ] xxsmall: [ null, '360px' ]
}); });
// Play initial animations on page load. // Play initial animations on page load.
$window.on('load', function() { $window.on('load', function() {
window.setTimeout(function() { window.setTimeout(function() {
$body.removeClass('is-preload'); $body.removeClass('is-preload');
}, 100); }, 100);
}); });
// Nav. // Nav.
var $nav = $('#nav'); var $nav = $('#nav');
if ($nav.length > 0) { if ($nav.length > 0) {
// Shrink effect. // Shrink effect.
$main $main
.scrollex({ .scrollex({
mode: 'top', mode: 'top',
enter: function() { enter: function() {
$nav.addClass('alt'); $nav.addClass('alt');
}, },
leave: function() { leave: function() {
$nav.removeClass('alt'); $nav.removeClass('alt');
}, },
}); });
// Links. // Links.
var $nav_a = $nav.find('a'); 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 $nav_a
.scrolly({ .removeClass('active')
speed: 1000, .removeClass('active-locked');
offset: function() { return $nav.height(); }
})
.on('click', function() {
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) != '#') .each(function() {
return;
// Deactivate all links. var $this = $(this),
$nav_a id = $this.attr('href'),
.removeClass('active') $section = $(id);
.removeClass('active-locked');
// Activate link *and* lock it (so Scrollex doesn't try to activate other links as we're scrolling to this one's section). // No section for this link? Bail.
$this if ($section.length < 1)
.addClass('active') return;
.addClass('active-locked');
}) // Scrollex.
.each(function() { $section.scrollex({
mode: 'middle',
initialize: function() {
var $this = $(this), // Deactivate section.
id = $this.attr('href'), if (browser.canUse('transition'))
$section = $(id); $section.addClass('inactive');
// No section for this link? Bail. },
if ($section.length < 1) enter: function() {
return;
// Scrollex. // Activate section.
$section.scrollex({ $section.removeClass('inactive');
mode: 'middle',
initialize: function() {
// Deactivate section. // No locked links? Deactivate all links and activate this section's one.
if (browser.canUse('transition')) if ($nav_a.filter('.active-locked').length == 0) {
$section.addClass('inactive');
}, $nav_a.removeClass('active');
enter: function() { $this.addClass('active');
// Activate section. }
$section.removeClass('inactive');
// No locked links? Deactivate all links and activate this section's one. // Otherwise, if this section's link is the one that's locked, unlock it.
if ($nav_a.filter('.active-locked').length == 0) { 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').scrolly({ $('.scrolly').scrolly({
speed: 1000 speed: 1000
}); });
// Easter Eggs
document.querySelector("span.logo").addEventListener("dblclick", (e) => {
e.currentTarget.classList.toggle("rotated");
});
})(jQuery); })(jQuery);

View File

@ -41,6 +41,10 @@
display: block; display: block;
margin: 0 0 (_size(element-margin) * 0.75) 0; margin: 0 0 (_size(element-margin) * 0.75) 0;
&.rotated {
transform: rotate(360deg);
}
img { img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;