Using Jekyll, bg, songs, artists

This commit is contained in:
Norbi Peti 2019-05-23 18:39:14 +02:00
parent a4e2f23b8a
commit 023eb802f6
No known key found for this signature in database
GPG key ID: DBA4C4549A927E56
12 changed files with 154 additions and 141 deletions

View file

@ -1,60 +1,4 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Not Found</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
line-height: 1.2;
margin: 0;
}
html {
color: #888;
display: table;
font-family: sans-serif;
height: 100%;
text-align: center;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
margin: 2em auto;
}
h1 {
color: #555;
font-size: 2em;
font-weight: 400;
}
p {
margin: 0 auto;
width: 280px;
}
@media only screen and (max-width: 280px) {
body, p {
width: 95%;
}
h1 {
font-size: 1.5em;
margin: 0 0 0.3em;
}
}
</style>
</head>
<body>
<h1>Page Not Found</h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
</body>
</html>
<!-- IE needs 512+ bytes: https://blogs.msdn.microsoft.com/ieinternals/2010/08/18/friendly-http-error-pages/ -->
---
---
<h1 style="text-align: center">Page Not Found</h1>
<p style="text-align: center">Sorry, but the page you were trying to view does not exist.</p>

5
_artists/Artist1.md Normal file
View file

@ -0,0 +1,5 @@
---
name: Artist1
position: Singer
---
Test artist

6
_artists/test.md Normal file
View file

@ -0,0 +1,6 @@
---
short_name: test
name: Test
position: Producer
---
Test artist

14
_config.yml Normal file
View file

@ -0,0 +1,14 @@
collections:
artists:
output: true
defaults:
- scope:
path: ""
type: "artists"
values:
layout: "artist"
- scope:
path: ""
values:
layout: "default"

12
_data/songs.json Normal file
View file

@ -0,0 +1,12 @@
[
{
"artist": "Artist1",
"title": "Title1",
"url": "https://spotify.com/"
},
{
"artist": "Artist2",
"title": "Title2",
"url": "https://spotify.com/"
}
]

16
_layouts/artist.html Normal file
View file

@ -0,0 +1,16 @@
---
layout: default
title: page.name
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>
{{ content }}
<h2>Songs</h2>
<ul>
{% assign filtered_songs = site.data.songs | where: 'artist', page.name %}
{% for song in filtered_songs %}
<li><a href="{{ song.url }}">{{ song.artist }} - {{ song.title }}</a></li>
{% endfor %}
</ul>

27
_layouts/default.html Normal file
View file

@ -0,0 +1,27 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>{{ page.title }} - HS Fanpage</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="../css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<div class="bg-image"></div>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
{{ content }}
</body>
</html>

14
artists.html Normal file
View file

@ -0,0 +1,14 @@
---
title: Artists
---
<h1>Artists</h1>
<ul>
{% for artist in site.artists %}
<li>
<h2>{{ artist.name }}</h2>
<h3>{{ artist.position }}</h3>
<p>{{ artist.content | markdownify }}</p>
</li>
{% endfor %}
</ul>

BIN
bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 MiB

View file

@ -1,13 +1,14 @@
body {
background-color: #003239;
color: aqua;
}
.bg-image {
/*background-image: url("../HS.png");*/
background-image: url("../bg.png"), linear-gradient(to bottom, black, black, #3a3a3a, #009a9a,
#727272);
background-image: url("../bg.png"), linear-gradient(to bottom, #1d1d1d, #1d1d1d, #243537, #009a9a);
/*#727272);*/
background-size: cover;
filter: blur(8px);
filter: blur(16px);
height: 100%;
position: absolute;
top: 0;
@ -16,4 +17,28 @@ body {
z-index: -1;
margin: 0;
padding: 0;
}
}
#popularSongs, #hiddenSongs {
width: 40%;
margin: 4%;
border: 1px #78ffee solid;
}
#popularSongs h2, #hiddenSongs h2 {
text-align: center;
color: aqua;
}
#popularSongs {
float: left;
}
#hiddenSongs {
float: right;
}
h1 {
text-align: center;
}

BIN
icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View file

@ -1,83 +1,33 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="src/site.webmanifest">
<link rel="apple-touch-icon" href="src/icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
<style>
#popularSongs, #hiddenSongs {
width: 40%;
margin: 4%;
border: 1px #78ffee solid;
}
#popularSongs h2, #hiddenSongs h2 {
text-align: center;
color: aqua;
}
#popularSongs {
float: left;
}
#hiddenSongs {
float: right;
}
h1 {
text-align: center;
color: aqua;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<h1>Hidden Sounds Unofficial (Fan) Website</h1>
<div id="popularSongs">
---
layout: default
title: Hidden Sounds
---
<h1>Hidden Sounds Unofficial (Fan) Website</h1>
<div id="popularSongs">
<h2>Popular Songs</h2>
<div id="popularContainer">
<div class="song">
<p><a href="https://spotify.com/">Artist - Title</a></p>
</div>
{% for song in site.data.songs %}
<div class="song">
<p>
{% assign artist = site.artists | where: 'name', song.artist | first %}
{% if artist %}
<a href="{{ artist.url }}">{{ artist.name }}</a>
{% else %}
{{ song.artist }}
{% endif %}
- <a href="https://spotify.com/">{{ song.title }}</a>
</p>
</div>
{% endfor %}
</div>
</div>
<div id="hiddenSongs">
</div>
<div id="hiddenSongs">
<h2>Hidden Songs</h2>
<div id="hiddenContainer">
{% for song in site.data.songs %}
<div class="song">
<p><a href="https://spotify.com/">Artist - Title</a></p>
</div>
{% endfor %}
</div>
</div>
<!--
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
-->
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
</div>