initial import
commit
337713e72e
|
|
@ -0,0 +1 @@
|
||||||
|
.sass-cache
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>
|
||||||
|
The Ayerharts
|
||||||
|
</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display|Montserrat" rel="stylesheet">
|
||||||
|
|
||||||
|
<link href="waves.css" rel="stylesheet">
|
||||||
|
<script src="waves.js" type="text/javascript"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<span class="full-name">The Ayerharts</span>
|
||||||
|
<canvas />
|
||||||
|
<script type="x-shader/x-fragment" id="waves">
|
||||||
|
#ifdef GL_FRAGMENT_PRECISION_HIGH
|
||||||
|
precision highp float;
|
||||||
|
#else
|
||||||
|
precision mediump float;
|
||||||
|
#endif
|
||||||
|
|
||||||
|
uniform float iTime;
|
||||||
|
uniform vec2 iResolution;
|
||||||
|
|
||||||
|
#define RIBBONCOLOR vec4(1.0, 1.0, 1.0, 0.5)
|
||||||
|
#define TRANSP vec4(0.0, 0.0, 0.0, 0.0)
|
||||||
|
#define RIBWIDTH 0.03
|
||||||
|
|
||||||
|
#define AA 1.0/iResolution.y
|
||||||
|
|
||||||
|
#define time (100.0 + iTime / 15.0)
|
||||||
|
#define COLORTIME iTime/ 22.0 + 0.3
|
||||||
|
|
||||||
|
float
|
||||||
|
sin01(float x)
|
||||||
|
{
|
||||||
|
float x2 = fract (x);
|
||||||
|
return 0.5 + 0.5 * sin (x2 * 6.28318530718);
|
||||||
|
}
|
||||||
|
|
||||||
|
vec4
|
||||||
|
color1()
|
||||||
|
{
|
||||||
|
float x = COLORTIME;
|
||||||
|
float darken = 0.5;
|
||||||
|
return vec4 (darken * sin01 (x), darken * sin01 (x + 1.0 / 3.0), darken * sin01 (x + 2.0 / 3.0), 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// inner color
|
||||||
|
vec4
|
||||||
|
color2()
|
||||||
|
{
|
||||||
|
float x = COLORTIME;
|
||||||
|
float offset = 0.05;
|
||||||
|
return vec4 (sin01 (x + offset), sin01 (x + 1.0 / 2.0 + offset), sin01 (x + 2.0 / 3.0 + offset), 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
vec4
|
||||||
|
background(vec2 uv)
|
||||||
|
{
|
||||||
|
float dist = 1.4142 * length (uv - vec2 (0.5, 0.5));
|
||||||
|
return mix (color1(), color2 (),1.0 - dist);
|
||||||
|
}
|
||||||
|
|
||||||
|
// source-over alpha composite
|
||||||
|
vec4
|
||||||
|
addColors(vec4 c1, vec4 c2)
|
||||||
|
{
|
||||||
|
vec4 color = mix (c2, c1, c1.a);
|
||||||
|
color.a = 1.0;
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
float
|
||||||
|
rand(float n)
|
||||||
|
{
|
||||||
|
return fract (sin (n) * 43758.5453123);
|
||||||
|
}
|
||||||
|
|
||||||
|
float
|
||||||
|
wave(float x)
|
||||||
|
{
|
||||||
|
return sin (x) * cos (x * 3.0) * sin (0.7 * x);
|
||||||
|
}
|
||||||
|
|
||||||
|
vec4
|
||||||
|
ribbon(float seed, vec2 uv)
|
||||||
|
{
|
||||||
|
float phase = rand (seed + 0.2) * 10.0;
|
||||||
|
float speedMod = 1.0 + rand (seed + 0.123);
|
||||||
|
float width = RIBWIDTH * (seed -1.0 + 0.1);
|
||||||
|
|
||||||
|
float warpY = uv.y + wave (uv.x * 1.0 + time * speedMod + phase) * 0.6;
|
||||||
|
|
||||||
|
float alpha = seed * 0.22 + 0.25;
|
||||||
|
float inRibbon = warpY + RIBWIDTH * 3.0 + width;
|
||||||
|
|
||||||
|
inRibbon = smoothstep (0.5 - AA, 0.5 + AA, 1.0 - inRibbon);
|
||||||
|
return vec4 (RIBBONCOLOR.rgb, mix (alpha, 0.0, 1.0 - inRibbon));
|
||||||
|
}
|
||||||
|
|
||||||
|
vec4
|
||||||
|
bottomRibbon(float seed, vec2 uv)
|
||||||
|
{
|
||||||
|
float phase = rand (seed + 0.2) * 2.0;
|
||||||
|
float speedMod = 1.0 + rand (seed + 0.123);
|
||||||
|
float width = RIBWIDTH * (seed - 1.0 + 0.1);
|
||||||
|
|
||||||
|
float warpY = uv.y + wave (uv.x * 1.0 + time * speedMod + phase) * 0.25;
|
||||||
|
|
||||||
|
float alpha = seed * 0.22 + 0.25;
|
||||||
|
float inRibbon = warpY + RIBWIDTH * 3.0 + width;
|
||||||
|
|
||||||
|
inRibbon = smoothstep (0.5 - AA, 0.5 + AA, 1.0 - inRibbon);
|
||||||
|
return vec4 (RIBBONCOLOR.rgb, mix (alpha, 0.0, 1.0 - inRibbon));
|
||||||
|
}
|
||||||
|
|
||||||
|
vec4
|
||||||
|
ribbon(vec2 uv)
|
||||||
|
{
|
||||||
|
return ribbon (1.0, uv);
|
||||||
|
}
|
||||||
|
|
||||||
|
void
|
||||||
|
main()
|
||||||
|
{
|
||||||
|
vec2 uv = gl_FragCoord.xy / iResolution.xy;
|
||||||
|
vec4 uvc = gl_FragCoord / min (iResolution.x, iResolution.y);
|
||||||
|
vec4 bgColor = background (uv);
|
||||||
|
|
||||||
|
gl_FragColor = bgColor;
|
||||||
|
|
||||||
|
gl_FragColor = addColors (ribbon (0.05, uv), gl_FragColor);
|
||||||
|
gl_FragColor = addColors (ribbon (0.06, uv), gl_FragColor);
|
||||||
|
gl_FragColor = addColors (ribbon (0.007, uv), gl_FragColor);
|
||||||
|
gl_FragColor = addColors (ribbon (0.1, uv), gl_FragColor);
|
||||||
|
gl_FragColor = addColors (bottomRibbon (5.0, uv), gl_FragColor);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</header>
|
||||||
|
<section id="content">
|
||||||
|
<div class="l-s">
|
||||||
|
<div class="name">
|
||||||
|
<span>LK+S</span>
|
||||||
|
</div>
|
||||||
|
<ul class="sites">
|
||||||
|
<li><a href="https://wedding.ayerhart.party">wedding.ayerhart.party</a></li>
|
||||||
|
<li><a href="https://hockeymoon.ayerhart.party">hockeymoon.ayerhart.party</a></li>
|
||||||
|
<li><a href="https://music.ayerh.art">music.ayerh.art</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="steve">
|
||||||
|
<div class="name">
|
||||||
|
<span>Steve</span>
|
||||||
|
</div>
|
||||||
|
<ul class="sites">
|
||||||
|
<li><a href="https://steve.ayerh.art">steve.ayerh.art</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="lk">
|
||||||
|
<div class="name">
|
||||||
|
<span>Lee Katherine</span>
|
||||||
|
</div>
|
||||||
|
<ul class="sites">
|
||||||
|
<li><a href="https://lkayerhart.ist">lkayerhart.ist</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900"/>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300"/>
|
||||||
|
<link rel="stylesheet" href="perspective.css"/>
|
||||||
|
<title>Steve Ayerhart</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1 class="name">
|
||||||
|
<a class="name" href="https://steve.ayerh.art">steve</a>
|
||||||
|
<a class="name" href="https://ayerh.art">ayerhart</a>
|
||||||
|
</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">blog</a></li>
|
||||||
|
<li><a href="#">code</a></li>
|
||||||
|
<li><a href="#">about</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="blurb">
|
||||||
|
<h2>blurb</h2>
|
||||||
|
<p>I'm a software developer from Erie, Pennsylvania. During the day I assume the role of a "fullstack" web developer. I mostly write C# and Javascript now. I have written with Ruby, Python, and PHP professionally as well.</p>
|
||||||
|
<p>I spend most of my waking hours in front of a computer. When I'm not working I enjoy writing and contributing to free software. I also enjoy playing some computers games as well.</p>
|
||||||
|
|
||||||
|
<p>My wife <a href="https://lkayerhart.ist">Lee Katherine</a> and I currently live in New Hill North Carolina.</p>
|
||||||
|
</section>
|
||||||
|
<section id="contant">
|
||||||
|
<h2>contact</h2>
|
||||||
|
<p>You can mail me at <code>steve@ayerh.art</code></p>
|
||||||
|
<p>My GPG key is <code>0xB6205BE680932292790F622B9475954DBBC6B924</code></p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="perspective">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900"/>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300"/>
|
||||||
|
<link rel="stylesheet" href="perspective.css"/>
|
||||||
|
<title>Steve Ayerhart</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="name">
|
||||||
|
<span class="name">steve</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">blog</a></li>
|
||||||
|
<li><a href="https://src.steve.ayerh.art">code</a></li>
|
||||||
|
<li><a href="https://steve.ayerh.art/about">about</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<span class="name">ayerhart</span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 641 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 575 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
|
|
@ -0,0 +1,105 @@
|
||||||
|
;(function() {
|
||||||
|
"use strict"
|
||||||
|
var gl, canvas, program, buffer;
|
||||||
|
var attributeLocation;
|
||||||
|
var timeLocation, resolutionLocation;
|
||||||
|
|
||||||
|
window.addEventListener("load", initWebGL, false);
|
||||||
|
|
||||||
|
function getRenderingContext() {
|
||||||
|
canvas = document.querySelector("canvas");
|
||||||
|
canvas.width = canvas.clientWidth;
|
||||||
|
canvas.height = canvas.clientHeight;
|
||||||
|
|
||||||
|
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
|
||||||
|
|
||||||
|
if (!gl) {
|
||||||
|
// TODO: show something fancy
|
||||||
|
console.log("failed to get webcontext");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
||||||
|
|
||||||
|
return gl;
|
||||||
|
};
|
||||||
|
|
||||||
|
function render(time) {
|
||||||
|
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
gl.clearColor(1.0, 0.0, 0.0, 1.0);
|
||||||
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
|
gl.useProgram(program);
|
||||||
|
|
||||||
|
gl.enableVertexAttribArray(attributeLocation);
|
||||||
|
gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0);
|
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||||
|
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
|
||||||
|
gl.uniform1f(timeLocation, time * 0.001);
|
||||||
|
|
||||||
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
||||||
|
|
||||||
|
window.requestAnimationFrame(render, canvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initAttributes() {
|
||||||
|
buffer = gl.createBuffer();
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||||
|
gl.bufferData(
|
||||||
|
gl.ARRAY_BUFFER,
|
||||||
|
new Float32Array([
|
||||||
|
-1.0, -1.0,
|
||||||
|
1.0, -1.0,
|
||||||
|
-1.0, 1.0,
|
||||||
|
-1.0, 1.0,
|
||||||
|
1.0, -1.0,
|
||||||
|
1.0, 1.0,
|
||||||
|
]),
|
||||||
|
gl.STATIC_DRAW);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initWebGL(event) {
|
||||||
|
window.removeEventListener(event.type, initWebGL, false);
|
||||||
|
|
||||||
|
if (!(gl = getRenderingContext()))
|
||||||
|
return;
|
||||||
|
|
||||||
|
initAttributes();
|
||||||
|
|
||||||
|
var vertexSource =
|
||||||
|
`attribute vec2 a_position;
|
||||||
|
void main() { gl_Position = vec4(a_position, 0, 1);}`;
|
||||||
|
|
||||||
|
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
|
||||||
|
|
||||||
|
gl.shaderSource(vertexShader, vertexSource);
|
||||||
|
gl.compileShader(vertexShader);
|
||||||
|
|
||||||
|
var wavesSource = document.querySelector('#waves').text;
|
||||||
|
var wavesShader = gl.createShader(gl.FRAGMENT_SHADER);
|
||||||
|
|
||||||
|
gl.shaderSource(wavesShader, wavesSource);
|
||||||
|
gl.compileShader(wavesShader);
|
||||||
|
|
||||||
|
var compilationLog = gl.getShaderInfoLog(wavesShader);
|
||||||
|
|
||||||
|
// TODO: show link/compile errors?
|
||||||
|
|
||||||
|
program = gl.createProgram();
|
||||||
|
|
||||||
|
gl.attachShader(program, vertexShader);
|
||||||
|
gl.attachShader(program, wavesShader);
|
||||||
|
|
||||||
|
gl.linkProgram(program);
|
||||||
|
gl.useProgram(program);
|
||||||
|
|
||||||
|
attributeLocation = gl.getAttribLocation(program, "a_position");
|
||||||
|
|
||||||
|
timeLocation = gl.getUniformLocation(program, "iTime");
|
||||||
|
resolutionLocation = gl.getUniformLocation(program, "iResolution");
|
||||||
|
|
||||||
|
render();
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
server {
|
||||||
|
server_name music.ayerh.art;
|
||||||
|
listen 443;
|
||||||
|
|
||||||
|
root /home/steve/sites/music.ayerh.art;
|
||||||
|
|
||||||
|
location ~ /.well-known {
|
||||||
|
allow all;
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
proxy_set_header Accept-Encoding "";
|
||||||
|
|
||||||
|
# TODO: handle params?
|
||||||
|
proxy_pass https://musicbrainz.org/ws/2/collection?editor=sayerhat
|
||||||
|
|
||||||
|
xslt_stylesheet /home/steve/sites/music.ayerh.art/xslt/collections.xsl;
|
||||||
|
xslt_types *;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~* "^/(?<uuid>[a-f\d]{8}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{12})$" {
|
||||||
|
proxy_set_header Accept-Encoding "";
|
||||||
|
|
||||||
|
# TODO: handle params?
|
||||||
|
proxy_pass https://musicbrainz.org/ws/2/collection/$uuid/releases?inc=artist-credits+releases;
|
||||||
|
|
||||||
|
xslt_stylesheet /home/steve/sites/music.ayerh.art/xslt/collection.xsl;
|
||||||
|
xslt_types *;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~* "^/.+" {
|
||||||
|
try_files $request_uri =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
ssl_certificate {path-to-full-pem}
|
||||||
|
ssl_certificate_key {path-to-privkey}
|
||||||
|
}
|
||||||
|
|
||||||
|
server {
|
||||||
|
server_name music.ayerh.art;
|
||||||
|
|
||||||
|
if ($host = music.ayerh.art) {
|
||||||
|
return 301 https://$host$request_uri;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~ /.well-known {
|
||||||
|
allow all;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,212 @@
|
||||||
|
@import "_layout.scss" ;
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #f8f8ff;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #444444;
|
||||||
|
font: 500 2em sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-image-slice: 1;
|
||||||
|
border-image-source: linear-gradient(to right, transparent, #444444, transparent);
|
||||||
|
|
||||||
|
ol {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs ol {
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumb {
|
||||||
|
display: inline-block;
|
||||||
|
color: #444444;
|
||||||
|
font: 500 1em sans-serif;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: lighten(#444444, 45%);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
display: inline-block;
|
||||||
|
color: #333333;
|
||||||
|
content: '\2015';
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 6px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collections {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
.collection-link {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
width: 100vw;
|
||||||
|
background-position: center;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-stroke: 2px #111111;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
text-shadow: 1px 1px 1px #444444;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
&.vintage {
|
||||||
|
background-image: url(vintage.jpg);
|
||||||
|
background-size: 50%;
|
||||||
|
}
|
||||||
|
&.vinyl {
|
||||||
|
background-image: url(vinyl.jpg);
|
||||||
|
background-size: 25%;
|
||||||
|
}
|
||||||
|
&.digital {
|
||||||
|
background-image: url(digital.jpg);
|
||||||
|
background-size: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: 'Righteous';
|
||||||
|
font-size: 10vw;
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px 0 20px 0;
|
||||||
|
|
||||||
|
.albums {
|
||||||
|
width: 95vw;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.album {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
margin: 10px;
|
||||||
|
min-width: 300px;
|
||||||
|
min-height: 300px;
|
||||||
|
|
||||||
|
.album-info {
|
||||||
|
h2 {
|
||||||
|
margin: 1em 0 0 0;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3 {
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.underline {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
&:before {
|
||||||
|
left: 50%;
|
||||||
|
background-image: linear-gradient(to right, #444444, transparent);
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: 50%;
|
||||||
|
background-image: linear-gradient(to left, #444444, transparent);
|
||||||
|
}
|
||||||
|
&:before, &:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1px;
|
||||||
|
width: 0px;
|
||||||
|
height: 1px;
|
||||||
|
margin: 5px 0 0;
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font: 300 1em sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
transition-property: transform;
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
transition-duration: .5s;
|
||||||
|
}
|
||||||
|
.artist {
|
||||||
|
text-align: center;
|
||||||
|
font: small-caps 400 .85em sans-serif;
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: .5s;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.underline {
|
||||||
|
&:before, &:after {
|
||||||
|
width: 50%;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.album-info .title {
|
||||||
|
transform: translateY(-.5em);
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.album-info .artist {
|
||||||
|
transform: translateY(.5em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cover-art {
|
||||||
|
align-self: center;
|
||||||
|
img {
|
||||||
|
min-height: 250px;
|
||||||
|
max-height: 250px;
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 250px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: stretch;
|
||||||
|
border: 1px solid #444444;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans Condensed';
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Open Sans Condensed');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Alegreya Sans SC';
|
||||||
|
font-weight: 900;
|
||||||
|
font-weight: extra-bold;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Alegreya Sans Sc');
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: #f4f7f6;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 40em;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h2 {
|
||||||
|
margin: 1em 0;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 1px solid #b43434;
|
||||||
|
}
|
||||||
|
|
||||||
|
code + p, p + p{
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.perspective {
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
bottom: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.name {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #666666;
|
||||||
|
font-family: 'Alegreya Sans SC';
|
||||||
|
filter: drop-shadow(1px 1px #333333);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 5em;
|
||||||
|
font-weight: 900;
|
||||||
|
transform: skew(60deg, -30deg);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
left: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.nav {
|
||||||
|
transform: skew(0deg, -30deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
h1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.name {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #666666;
|
||||||
|
font-family: 'Alegreya Sans SC';
|
||||||
|
font-size: 2em;
|
||||||
|
filter: drop-shadow(1px 1px #333333);
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
&:first-child {
|
||||||
|
padding-right: .25em;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
padding-left: .25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav, ul, li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
font-size: 2em;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
background-color: #b43434;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0 5px;
|
||||||
|
&:hover {
|
||||||
|
a {
|
||||||
|
color: #f4f6f7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
span.full-name {
|
||||||
|
position: absolute;
|
||||||
|
margin: 15px 0 0 15px;
|
||||||
|
background-color: transparent;
|
||||||
|
font-family: 'Major Mono Display', monospace;
|
||||||
|
letter-spacing: .5em;
|
||||||
|
font-size: 6vw;
|
||||||
|
color: #fff;
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #731a22;
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
color: #434343;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&#content {
|
||||||
|
display: flex;
|
||||||
|
color: #434343;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
text-decoration: none;
|
||||||
|
width: 100vw;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex: 1;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.lk, .l-s, .steve {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 30vw;
|
||||||
|
text-align: center;
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
span:first-child {
|
||||||
|
font-family: 'Major Mono Display', monospace;
|
||||||
|
letter-spacing: .5em;
|
||||||
|
font-size: 3vw;
|
||||||
|
font-weight: 1000;
|
||||||
|
|
||||||
|
@media screen and (max-width: 40em) {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 25vh;
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<xsl:stylesheet
|
||||||
|
version="1.0"
|
||||||
|
xmlns:mb="http://musicbrainz.org/ns/mmd-2.0#"
|
||||||
|
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
||||||
|
exclude-result-prefixes="mb">
|
||||||
|
|
||||||
|
<xsl:output method="html" encoding="utf-8" indent="yes"/>
|
||||||
|
|
||||||
|
<xsl:variable name="mb-base-url">https://musicbrainz.org</xsl:variable>
|
||||||
|
<xsl:variable name="ca-base-url">https://coverartarchive.org/release</xsl:variable>
|
||||||
|
<xsl:variable name="static-bbb-base-url">https://static.bonerbonerboner.com</xsl:variable>
|
||||||
|
|
||||||
|
<xsl:template match="/">
|
||||||
|
<xsl:text disable-output-escaping="yes"><!DOCTYPE html></xsl:text>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./music.css"/>
|
||||||
|
<title><xsl:value-of select="mb:metadata/mb:collection/mb:name"/></title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1><xsl:value-of select="mb:metadata/mb:collection/mb:name"/></h1>
|
||||||
|
<nav class="crumbs">
|
||||||
|
<ol>
|
||||||
|
<li class="crumb"><a href="/">Ayerhart Music Collections</a></li>
|
||||||
|
<li class="crumb"><xsl:value-of select="mb:metadata/mb:collection/mb:name"/></li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<xsl:apply-templates select="mb:metadata/mb:collection"/>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="mb:collection">
|
||||||
|
<div id="{@id}" class="{local-name()}">
|
||||||
|
<xsl:apply-templates select="mb:release-list"/>
|
||||||
|
</div>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="mb:release-list">
|
||||||
|
<div class="albums">
|
||||||
|
<xsl:apply-templates select="mb:release">
|
||||||
|
<xsl:sort select="mb:artist-credit/mb:name-credit/mb:artist/mb:sort-name" data-type="text"/>
|
||||||
|
</xsl:apply-templates>
|
||||||
|
</div>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="mb:artist-credit">
|
||||||
|
<h3 class="artist">
|
||||||
|
<a id="{mb:name-credit/mb:artist/mb:sort-name}-{mb:name-credit/mb:artist/@id}"
|
||||||
|
href="{$mb-base-url}/artist/{mb:name-credit/mb:artist/@id}"
|
||||||
|
class="name">
|
||||||
|
<xsl:value-of select="mb:name-credit/mb:artist/mb:name"/>
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="mb:release">
|
||||||
|
<div class="album">
|
||||||
|
<div class="album-info">
|
||||||
|
<h2 class="title"><a href="{$mb-base-url}/release/{@id}"><xsl:value-of select="mb:title"/></a></h2>
|
||||||
|
<span class="underline"/>
|
||||||
|
<xsl:apply-templates select="mb:artist-credit"/>
|
||||||
|
</div>
|
||||||
|
<div class="cover-art">
|
||||||
|
<a href="{$mb-base-url}/release/{@id}">
|
||||||
|
<img src="https://coverartarchive.org/release/{@id}/front"
|
||||||
|
onerror="this.error=null;this.src='https://static.bonerbonerboner.com/img/tromboner.gif';"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</xsl:template>
|
||||||
|
</xsl:stylesheet>
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<xsl:stylesheet
|
||||||
|
version="1.0"
|
||||||
|
xmlns:mb="http://musicbrainz.org/ns/mmd-2.0#"
|
||||||
|
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
||||||
|
exclude-result-prefixes="mb">
|
||||||
|
|
||||||
|
<xsl:output method="html" encoding="utf-8" indent="yes"/>
|
||||||
|
|
||||||
|
<xsl:variable name="static-bbb-base-url">https://static.bonerbonerboner.com</xsl:variable>
|
||||||
|
|
||||||
|
<xsl:template match="/">
|
||||||
|
<xsl:text disable-output-escaping="yes"><!DOCTYPE html></xsl:text>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous:100,300,400,500,700,900"/>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./music.css"/>
|
||||||
|
<title>Ayerhart Music Collections</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="collections">
|
||||||
|
<xsl:apply-templates select="mb:metadata/mb:collection-list"/>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="mb:collection">
|
||||||
|
<div>
|
||||||
|
<xsl:variable name="sans-ayerhart">
|
||||||
|
<xsl:call-template name="replace-string">
|
||||||
|
<xsl:with-param name="text" select="mb:name"/>
|
||||||
|
<xsl:with-param name="replace" select="'Ayerhart '"/>
|
||||||
|
<xsl:with-param name="with" select="''"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</xsl:variable>
|
||||||
|
<xsl:variable name="collection-name">
|
||||||
|
<xsl:call-template name="replace-string">
|
||||||
|
<xsl:with-param name="text" select="$sans-ayerhart"/>
|
||||||
|
<xsl:with-param name="replace" select="' Collection'"/>
|
||||||
|
<xsl:with-param name="with" select="''"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</xsl:variable>
|
||||||
|
<xsl:attribute name="class">
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="$collection-name = 'Vintage Vinyl'">
|
||||||
|
<xsl:value-of select="'collection-link vintage'"/>
|
||||||
|
</xsl:when>
|
||||||
|
<xsl:when test="$collection-name = 'Digital'">
|
||||||
|
<xsl:value-of select="'collection-link digital'"/>
|
||||||
|
</xsl:when>
|
||||||
|
<xsl:when test="$collection-name = 'Vinyl'">
|
||||||
|
<xsl:value-of select="'collection-link vinyl'"/>
|
||||||
|
</xsl:when>
|
||||||
|
<xsl:otherwise>
|
||||||
|
<xsl:value-of select="'collection-link'"/>
|
||||||
|
</xsl:otherwise>
|
||||||
|
</xsl:choose>
|
||||||
|
</xsl:attribute>
|
||||||
|
<a href="/{@id}"><xsl:value-of select="$collection-name"/></a>
|
||||||
|
</div>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template name="replace-string">
|
||||||
|
<xsl:param name="text"/>
|
||||||
|
<xsl:param name="replace"/>
|
||||||
|
<xsl:param name="with"/>
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="contains($text,$replace)">
|
||||||
|
<xsl:value-of select="substring-before($text,$replace)"/>
|
||||||
|
<xsl:value-of select="$with"/>
|
||||||
|
<xsl:call-template name="replace-string">
|
||||||
|
<xsl:with-param name="text"
|
||||||
|
select="substring-after($text,$replace)"/>
|
||||||
|
<xsl:with-param name="replace" select="$replace"/>
|
||||||
|
<xsl:with-param name="with" select="$with"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</xsl:when>
|
||||||
|
<xsl:otherwise>
|
||||||
|
<xsl:value-of select="$text"/>
|
||||||
|
</xsl:otherwise>
|
||||||
|
</xsl:choose>
|
||||||
|
</xsl:template>
|
||||||
|
</xsl:stylesheet>
|
||||||
Loading…
Reference in New Issue