0 public/300/62.jpg → public/albums/300/62.jpg
View file
File renamed without changes.
0 public/300/63.jpg → public/albums/300/63.jpg
View file
File renamed without changes.
0 public/300/64.jpg → public/albums/300/64.jpg
View file
File renamed without changes.
0 public/300/65.jpg → public/albums/300/65.jpg
View file
File renamed without changes.
0 public/300/66.jpg → public/albums/300/66.jpg
View file
File renamed without changes.
0 public/300/67.jpg → public/albums/300/67.jpg
View file
File renamed without changes.
0 public/300/68.jpg → public/albums/300/68.jpg
View file
File renamed without changes.
0 public/300/69.jpg → public/albums/300/69.jpg
View file
File renamed without changes.
0 public/300/7.jpg → public/albums/300/7.jpg
View file
File renamed without changes.
0 public/300/70.jpg → public/albums/300/70.jpg
View file
File renamed without changes.
0 public/300/71.jpg → public/albums/300/71.jpg
View file
File renamed without changes.
0 public/300/72.jpg → public/albums/300/72.jpg
View file
File renamed without changes.
0 public/300/73.jpg → public/albums/300/73.jpg
View file
File renamed without changes.
0 public/300/74.jpg → public/albums/300/74.jpg
View file
File renamed without changes.
0 public/300/75.jpg → public/albums/300/75.jpg
View file
File renamed without changes.
0 public/300/76.jpg → public/albums/300/76.jpg
View file
File renamed without changes.
0 public/300/77.jpg → public/albums/300/77.jpg
View file
File renamed without changes.
0 public/300/78.jpg → public/albums/300/78.jpg
View file
File renamed without changes.
0 public/300/79.jpg → public/albums/300/79.jpg
View file
File renamed without changes.
0 public/300/8.jpg → public/albums/300/8.jpg
View file
File renamed without changes.
0 public/300/80.jpg → public/albums/300/80.jpg
View file
File renamed without changes.
0 public/300/81.jpg → public/albums/300/81.jpg
View file
File renamed without changes.
0 public/300/82.jpg → public/albums/300/82.jpg
View file
File renamed without changes.
0 public/300/83.jpg → public/albums/300/83.jpg
View file
File renamed without changes.
0 public/300/84.jpg → public/albums/300/84.jpg
View file
File renamed without changes.
0 public/300/85.jpg → public/albums/300/85.jpg
View file
Diff not rendered.
0 public/300/86.jpg → public/albums/300/86.jpg
View file
Diff not rendered.
0 public/300/87.jpg → public/albums/300/87.jpg
View file
Diff not rendered.
0 public/300/88.jpg → public/albums/300/88.jpg
View file
Diff not rendered.
0 public/300/89.jpg → public/albums/300/89.jpg
View file
Diff not rendered.
0 public/300/9.jpg → public/albums/300/9.jpg
View file
Diff not rendered.
0 public/300/90.jpg → public/albums/300/90.jpg
View file
Diff not rendered.
0 public/300/91.jpg → public/albums/300/91.jpg
View file
Diff not rendered.
0 public/300/92.jpg → public/albums/300/92.jpg
View file
Diff not rendered.
0 public/300/93.jpg → public/albums/300/93.jpg
View file
Diff not rendered.
0 public/300/94.jpg → public/albums/300/94.jpg
View file
Diff not rendered.
0 public/300/95.jpg → public/albums/300/95.jpg
View file
Diff not rendered.
0 public/300/96.jpg → public/albums/300/96.jpg
View file
Diff not rendered.
0 public/300/97.jpg → public/albums/300/97.jpg
View file
Diff not rendered.
0 public/300/98.jpg → public/albums/300/98.jpg
View file
Diff not rendered.
0 public/300/99.jpg → public/albums/300/99.jpg
View file
Diff not rendered.
0 public/art/225/ambient.jpg → public/genres/225/ambient.jpg
View file
Diff not rendered.
0 public/art/225/compilation.jpg → public/genres/225/compilation.jpg
View file
Diff not rendered.
0 public/art/225/experimental.jpg → public/genres/225/experimental.jpg
View file
Diff not rendered.
0 public/art/225/future-funk.jpg → public/genres/225/future-funk.jpg
View file
Diff not rendered.
0 public/art/225/hypnagogic.jpg → public/genres/225/hypnagogic.jpg
View file
Diff not rendered.
0 public/art/225/mallsoft.jpg → public/genres/225/mallsoft.jpg
View file
Diff not rendered.
0 public/art/225/vaportrap.jpg → public/genres/225/vaportrap.jpg
View file
Diff not rendered.
0 public/art/225/vaporwave.jpg → public/genres/225/vaporwave.jpg
View file
Diff not rendered.
0 public/art/450/ambient.jpg → public/genres/450/ambient.jpg
View file
Diff not rendered.
0 public/art/450/compilation.jpg → public/genres/450/compilation.jpg
View file
Diff not rendered.
0 public/art/450/experimental.jpg → public/genres/450/experimental.jpg
View file
Diff not rendered.
0 public/art/450/future-funk.jpg → public/genres/450/future-funk.jpg
View file
Diff not rendered.
0 public/art/450/hypnagogic.jpg → public/genres/450/hypnagogic.jpg
View file
Diff not rendered.
0 public/art/450/mallsoft.jpg → public/genres/450/mallsoft.jpg
View file
Diff not rendered.
0 public/art/450/vaportrap.jpg → public/genres/450/vaportrap.jpg
View file
Diff not rendered.
0 public/art/450/vaporwave.jpg → public/genres/450/vaporwave.jpg
View file
Diff not rendered.
0 public/art/675/ambient.jpg → public/genres/675/ambient.jpg
View file
Diff not rendered.
0 public/art/675/compilation.jpg → public/genres/675/compilation.jpg
View file
Diff not rendered.
0 public/art/675/experimental.jpg → public/genres/675/experimental.jpg
View file
Diff not rendered.
0 public/art/675/future-funk.jpg → public/genres/675/future-funk.jpg
View file
Diff not rendered.
0 public/art/675/hypnagogic.jpg → public/genres/675/hypnagogic.jpg
View file
Diff not rendered.
0 public/art/675/mallsoft.jpg → public/genres/675/mallsoft.jpg
View file
Diff not rendered.
0 public/art/675/vaportrap.jpg → public/genres/675/vaportrap.jpg
View file
Diff not rendered.
0 public/art/675/vaporwave.jpg → public/genres/675/vaporwave.jpg
View file
Diff not rendered.
8 public/script.js
View file
@@ -9,7 +9,7 @@ try {
var imgs = document.querySelectorAll('.img')
forEach(imgs, function(i, v) {
var img = imgs[i].getAttribute('data-src')
imgs[i].style.backgroundImage = 'url(/'+width+'/'+img+'.jpg)'
imgs[i].style.backgroundImage = 'url(/albums/'+width+'/'+img+'.jpg)'
})
} catch(e) {

@@ -27,14 +27,14 @@ try {
var art = document.querySelectorAll('.art')
forEach(art, function(i, v) {
var img = art[i].getAttribute('data-src')
art[i].style.backgroundImage = 'url(/art/'+w1+'/'+img+'.jpg)'
art[i].style.backgroundImage = 'url(/genres/'+w1+'/'+img+'.jpg)'
})
} catch(e) {

}

var nav = document.getElementById("nav")
document.addEventListener("scroll", function(event) {
var nav = document.getElementById('nav')
document.addEventListener('scroll', function(event) {
if (document.body.clientWidth > 800) {
alpha = 1 - (document.documentElement.scrollTop || document.body.scrollTop / window.innerHeight)
nav.style.opacity = alpha > 0.33 ? alpha : 0.33
306 public/style.css
View file

Large diffs are not rendered by default.

2 public/style.min.css
View file
36 views/genre.ejs
View file
@@ -4,23 +4,24 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Essential <%= tag.name %></title>
<meta property="og:title" content="Essential <%= tag.name %>" />
<meta property="og:description" content="A hand picked list of the very best <%= tag.name %> albums" />
<title>Essential <%= genre.name %></title>
<meta property="og:title" content="Essential <%= genre.name %>" />
<meta property="og:description" content="A hand picked list of the very best <%= genre.name %> albums" />
<meta name="theme-color" content="#000">
<link rel="stylesheet" type="text/css" href="/style.min.css">
</head>
<body>

<section class="genre title">
<h1><a href="/music/<%= tag.slug %>"><%= tag.name %></a></h1>
<p class="desc">
<%= tag.desc %>
</p>
</section>
<header>
<section class="genre">
<h1><a href="/music/<%= genre.slug %>"><%= genre.name %></a></h1>
<p class="desc">
<%= genre.desc %>
</p>
</section>
</header>

<main>

<section id="vaporwave">
<ul class="grid">
<% albums.slice((index -1 ) * 24, (index -1 ) * 24 + 24).forEach(function(album){ %>
@@ -38,14 +39,14 @@
<div class="page">
<div>
<% if (index > 1) { %>
<a href="/music/<%= tag.slug %>/<%= index - 1 %>" aria-label="Go to page <%= index - 1 %>">← Previous</a><% } %>
<a href="/music/<%= genre.slug %>/<%= index - 1 %>" aria-label="Go to page <%= index - 1 %>">← Previous</a><% } %>
</div>
<div>
Page <%= index %> of <%= Math.ceil(albums.length / 24) %>
</div>
<div>
<% if ((index - 1) * 24 + 24 < albums.length) { %>
<a href="/music/<%= tag.slug %>/<%= index + 1 %>" aria-label="Go to page <%= index + 1 %>">Next →</a><% } %>
<a href="/music/<%= genre.slug %>/<%= index + 1 %>" aria-label="Go to page <%= index + 1 %>">Next →</a><% } %>
</div>
</div>

@@ -55,14 +56,9 @@
<nav id="nav">
<h2><a href="/" aria-label="Return to main page">Essential Vaporwave</a></h2>
<ul>
<li><a aria-label="Browse Vaporwave Albums" href="/music/vaporwave">Vaporwave</a></li>
<li><a aria-label="Browse Future Funk Albums" href="/music/future-funk">Future Funk</a></li>
<li><a aria-label="Browse Hypnagogic Albums" href="/music/hypnagogic">Hypnagogic</a></li>
<li><a aria-label="Browse Vaportrap Albums" href="/music/vaportrap">Vaportrap</a></li>
<li><a aria-label="Browse Compilation Albums" href="/music/compilation">Compilations</a></li>
<li><a aria-label="Browse Ambient Albums" href="/music/ambient">Ambient</a></li>
<li><a aria-label="Browse Mallsoft Albums" href="/music/mallsoft">Mallsoft</a></li>
<li><a aria-label="Browse Experimental Albums" href="/music/experimental">Experimental</a></li>
<% genres.forEach(function(genre){ %>
<li><a aria-label="Browse <%= genre.name %> Albums" href="/music/<%= genre.slug %>"><%= genre.name %></a></li>
<% }) %>
<li><a aria-label="Further Reading" href="/#further-reading">Further Reading</a></li>
</ul>
</nav>
138 views/index.ejs
View file
@@ -12,126 +12,38 @@
</head>
<body>

<section class="genre header">
<h1>Essential<br>Vaporwave</h1>
<p class="desc">
Vaporwave is a music genre and art movement that emerged in the early 2010’s on various Internet communities. Characterized by a nostalgic or surrealist fascination with cultural aesthetics of the late 80’s and early 90’s, entertainment technology, consumer culture and advertising, and styles of corporate and popular music such as lounge, smooth jazz and elevator music.
</p>
<header>
<section class="genre">
<h1>Essential<br>Vaporwave</h1>
<p class="desc">
Vaporwave is a music genre and art movement that emerged in the early 2010’s on various Internet communities. Characterized by a nostalgic or surrealist fascination with cultural aesthetics of the late 80’s and early 90’s, entertainment technology, consumer culture and advertising, and styles of corporate and popular music such as lounge, smooth jazz and elevator music.
</p>

<nav id="nav">
<ul>
<li><a href="/#vaporwave">Vaporwave</a></li>
<li><a href="/#future-funk">Future Funk</a></li>
<li><a href="/#hypnagogic">Hypnagogic</a></li>
<li><a href="/#vaportrap">Vaportrap</a></li>
<li><a href="/#compilation">Compilations</a></li>
<li><a href="/#ambient">Ambient</a></li>
<li><a href="/#mallsoft">Mallsoft</a></li>
<li><a href="/#experimental">Experimental</a></li>
<li><a href="/#further-reading">Further Reading</a></li>
</ul>
</nav>
</section>

<main>

<section class="genre" id="vaporwave">
<a href="/music/vaporwave" aria-label="Browse Vaporwave Albums">
<div class="art" data-src="vaporwave"></div>
</a>
<div class="padding">
<h1 class="heading">Vaporwave</h1>
<span class="total"><%= albums.filter(findTag, 'vaporwave').length %> Albums</span>
<p class="desc"><%= genres['vaporwave'].desc %></p>
<a class="more" href="/music/vaporwave">Browse Albums →</a>
</div>
</section>

<section class="genre" id="future-funk">
<a href="/music/future-funk" aria-label="Browse Future Funk Albums">
<div class="art" data-src="future-funk"></div>
</a>
<div class="padding">
<h1 class="heading">Future Funk</h1>
<span class="total"><%= albums.filter(findTag, 'future-funk').length %> Albums</span>
<p class="desc"><%= genres['future-funk'].desc %></p>
<a class="more" href="/music/future-funk">Browse Albums →</a>
</div>
</section>

<section class="genre" id="hypnagogic">
<a href="/music/hypnagogic" aria-label="Browse Hypnagogic Albums">
<div class="art" data-src="hypnagogic"></div>
</a>
<div class="padding">
<h1 class="heading">Hypnagogic</h1>
<span class="total"><%= albums.filter(findTag, 'hypnagogic').length %> Albums</span>
<p class="desc"><%= genres['hypnagogic'].desc %></p>
<a class="more" href="/music/hypnagogic">Browse Albums →</a>
</div>
</section>

<section class="genre" id="vaportrap">
<a href="/music/vaportrap" aria-label="Browse Vaportrap Albums">
<div class="art" data-src="vaportrap"></div>
</a>
<div class="padding">
<h1 class="heading">Vaportrap</h1>
<span class="total"><%= albums.filter(findTag, 'vaportrap').length %> Albums</span>
<p class="desc"><%= genres['vaportrap'].desc %></p>
<a class="more" href="/music/vaportrap">Browse Albums →</a>
</div>
</section>

<section class="genre" id="compilation">
<a href="/music/compilation" aria-label="Browse Compilation Albums">
<div class="art" data-src="compilation"></div>
</a>
<div class="padding">
<h1 class="heading">Compilations</h1>
<span class="total"><%= albums.filter(findTag, 'compilation').length %> Albums</span>
<p class="desc"><%= genres['compilation'].desc %></p>
<a class="more" href="/music/compilation">Browse Albums →</a>
</div>
</section>

<section class="genre" id="ambient">
<a href="/music/ambient" aria-label="Browse Ambient Albums">
<div class="art" data-src="ambient"></div>
</a>
<div class="padding">
<h1 class="heading">Ambient</h1>
<span class="total"><%= albums.filter(findTag, 'ambient').length %> Albums</span>
<p class="desc"><%= genres['ambient'].desc %></p>
<a class="more" href="/music/ambient">Browse Albums →</a>
</div>
</section>

<section class="genre" id="mallsoft">
<a href="/music/mallsoft" aria-label="Browse Mallsoft Albums">
<div class="art" data-src="mallsoft"></div>
</a>
<div class="padding">
<h1 class="heading">Mallsoft</h1>
<span class="total"><%= albums.filter(findTag, 'mallsoft').length %> Albums</span>
<p class="desc"><%= genres['mallsoft'].desc %></p>
<a class="more" href="/music/mallsoft">Browse Albums →</a>
</div>
<nav id="nav">
<ul>
<% genres.forEach(function(genre){ %>
<li><a href="/music/<%= genre.slug %>"><%= genre.name %></a></li>
<% }) %>
<li><a href="/#further-reading">Further Reading</a></li>
</ul>
</nav>
</section>
</header>
<main>

<section class="genre" id="experimental">
<a href="/music/experimental" aria-label="Browse Experimental Albums">
<div class="art" data-src="experimental"></div>
<% genres.forEach(function(genre){ %>
<section class="genre" id="<%= genre.slug %>">
<a href="/music/<%= genre.slug %>" aria-label="Browse <%= genre.name %> Albums">
<div class="art" data-src="<%= genre.slug %>"></div>
</a>
<div class="padding">
<h1 class="heading">Experimental</h1>
<span class="total"><%= albums.filter(findTag, 'experimental').length %> Albums</span>
<p class="desc"><%= genres['experimental'].desc %></p>
<a class="more" href="/music/experimental">Browse Albums →</a>
<h1 class="vertical"><%= genre.name %></h1>
<span class="total"><%= albums.filter(findAlbums, genre.slug).length %> Albums</span>
<p class="desc"><%= genre.desc %></p>
<a class="more" href="/music/<%= genre.slug %>">Browse Albums →</a>
</div>
</section>


<% }) %>

<section class="genre" id="further-reading">
<div class="padding">