Site Settings

Creating The Front Royal Website, Part 2

I created the first draft of the Front Royal band site, but had to make some changes to the original design after realizing my mockups were too small in reality...

I really dropped the ball on this whole "blogging in real time" thing because the site is almost done.

In the first blog, I outlined my goals for the site with a screenshot of a few design ideas, and what stack I'll be using to build it.

Well, over that weekend, boredom got the best of me and I made the dang thing. We haven't bought a domain yet, so ignore the randomly-selected words that Netlify provided.

The Approach Pt. 2

To recap, I set out to make it a simple, single-page site with little bells and whistles. It was supposed to be:

  • Scrollable;
  • Navigable;
  • Simple.

And also cover:

  • Ability to stream music;
  • Real-time tour dates;
  • Links to our social media and newsletter;
  • Reusable components to make updates and new additions easier for me to code.

My Stack

The repository is fairly bare; aside from the CSS and image assets, it's an index page, a Netlify config, and a custom 404 page.

The Lighthouse performance score is nothing to write home about since I'm using three separate third-party widgets (Spotify for album embedding, bandsintown for tour dates, and Mailchimp for our newsletter signup form), but the site works and it only requires a single page to download.

The Design Pt. 2

Being a band, I figured listening to our music - our product - was most important. The very first section is our latest release with a Spotify embed for it, and links to our other albums.

I had to make some adjustments to Spotify's code to get the <iframe> to do what I wanted it to do, but I'm used to that by now.

.player {
margin: auto;
width: 100%;
}

.player__featured {
max-width: 300px;
}
<iframe
class="player player__featured"
src="https://open.spotify.com/embed/album/17q2Qwv2jqrhVaX8iWX5wm"
width="300"
height="320"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
title="These Things Happen Spotify player"
loading="lazy"
>
</iframe>

I put the bandsintown tour dates widget right after the music, which again required a small CSS adjustment.

.bit-widget .bit-no-dates-container {
padding: 5rem 0 !important;

It's sad to look at since it's so empty (we have no dates coming up), but it'll look great when things are back in motion.

Finally, I listed links out to our various social media and embedded a signup form for our newsletter that I also am in charge of.

Feelings Overall

Building websites is fun. I get chances to try new things I wouldn't normally do. In this case, I tried a new method for coding the main navigation on mobile and desktop.

There's a background image in the design, but the text got hard to read upon expanding the nav links on mobile. To get around that, I had to add some extra JavaScript to make sure the image remained the same and didn't expand to block the text.

/* these functions remove and toggle classes for properly styling the background image */
const openMenu = () => {
container.classList.remove("mobile-hide");
nav.classList.remove("menu__closed");
nav.classList.toggle("menu__open");
};

const closeMenu = () => {
container.classList.toggle("mobile-hide");
nav.classList.remove("menu__open");
nav.classList.toggle("menu__closed");
};

/* this does the work of opening or closing the menu */
const animateMenu = () => {
if (isEven(clickCount)) {
menu.innerHTML = x;
openMenu();
} else if (isOdd(clickCount)) {
menu.innerHTML = bars;
closeMenu();
}
clickCount++;
};

/* look for that magic click */
open.addEventListener("click", animateMenu);

Making easily reusable sections got me thinking about how I could rework this very site you're reading right now. This past weekend, I did that too.

So, check out the Front Royal site, tell me where I could do better, and give us a listen. Maybe tell your friends about us too.


Webmentions

No mentions yet ¯\_(ツ)_/¯


Keyboard Shortcuts

Secret Konami Code
Secret Green, Red, Green, Yellow, Green, Blue, Green, Orange, Tilt

Bet you weren't expecting these to exist, huh?