--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>The Velvet Room: Aria of the Soul Piano Cover | Skullheadx</title>
+ <meta name="description" content="My piano cover of the Persona song The Velvet Room">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="/style.css">
+ <link rel="icon" href="/favicon.ico">
+ </head>
+ <body class="blog">
+ <div class = "blog-wrapper">
+ <header class="main-head" id="top">
+ <h1><a href="index.html">Skullheadx's Blog</a></h1>
+ </header>
+ <nav class="main-nav">
+ <section>
+ <ul>
+ <li><a href="../index.html">Main Page</a></li>
+ <li><a href="index.html">All Posts</a></li>
+ <li><a href="../music/index.html">Music Posts</a></li>
+ </ul>
+ </section>
+ </nav>
+ <main class="content">
+ <article class="blog-post">
+ <hgroup>
+ <h3>The Velvet Room: Aria of the Soul | Persona 5 piano cover</h3>
+ <p>Published: <time datetime="2026-05-08">May 8, 2026</time></p>
+ </hgroup>
+ <p>I've been practicing this piece for 4 months, and it's by far the most difficult song that I can play! I used this <a href="https://musescore.com/user/35368515/scores/6197264?share=copy_link">sheet music</a> to learn.</p>
+ <figure>
+ <figcaption>Listen to the <strong>The Velvet Room: Aria of the Soul Piano Cover:</strong></figcaption>
+ <audio controls src="The_Velvet_Room_Aria_of_the_Soul_Piano_Cover_Std_Quality.mp3
+"></audio>
+ <a href="The_Velvet_Room_Aria_of_the_Soul_Piano_Cover_Std_Quality.mp3
+" download> Download audio </a>
+ </figure>
+ <hr />
+ </article>
+ </main>
+ <footer class="main-footer">
+ <p>Return to <a href="#top">top?</a></p>
+ <p><a href="https://skullheadx.com">https://skullheadx.com</a></p>
+ </footer>
+ </div>
+ </body>
+</html>
h1 {
font-weight: bold;
padding: 0.75em;
+ color: var(--parchment);
}
h2 {
/*text-decoration: 2px dotted underline var(--almond-silk);*/
}
+h1 a {
+ color: inherit;
+ font-weight: inherit;
+ text-decoration: 2px dotted underline var(--almond-silk);
+}
+
/* images */
img {
border-radius: 7px;
grid-area: footer;
}
-.main-wrapper, .content-wrapper {
+.main-wrapper, .content-wrapper, .blog-wrapper {
display: grid;
gap: 20px;
grid-template-areas:
"nav-unpinned"
"footer";
}
+ .blog-wrapper {
+ grid-template-areas:
+ "header"
+ "nav"
+ "content"
+ "footer";
+ }
nav {
display: contents;
}
nav ul {
display: flex;
- justify-content: space-between;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ gap: 10px;
}
h2 {
padding: 0.25em;
"nav-unpinned nav-unpinned"
"footer footer";
}
+ .blog-wrapper {
+ grid-template-areas:
+ "header"
+ "nav"
+ "content"
+ "footer";
+ }
nav {
display: contents;
}
nav ul {
display: flex;
- justify-content: space-between;
+ justify-content: space-evenly;
}
}
"nav content content"
"footer footer footer";
}
+ .blog-wrapper {
+ grid-template-columns: 1fr 4fr 1fr;
+ grid-template-areas:
+ "header header header"
+ "nav content content"
+ "nav content content"
+ "footer footer footer";
+ }
nav ul {
flex-direction: column;
}
border-radius: 7px;
}
+html > header h1 {
+ a {
+
+ }
+}
+
/* body */
body {
margin: 0 auto;
}
body.pattern {
-background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='46' height='46' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(74, 85, 104,1)'/%3E%3Cpath d='M0 40h-10v-60h60L40 0L39 1h-38v38z' fill='rgba(113, 128, 150,1)'/%3E%3Cpath d='M40 0v10h60v60L0 40L1 39h38v-38z' fill='rgba(45, 55, 72,1)'/%3E%3Cpath d='M40 0v10h60v60L0 40L0 40h40v-40z' fill='rgba(113, 128, 150,1)'/%3E%3Cpath d='M0 40h-10v-60h60L40 0L40 0h-40v40z' fill='rgba(45, 55, 72,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ")}
+ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='46' height='46' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(74, 85, 104,1)'/%3E%3Cpath d='M0 40h-10v-60h60L40 0L39 1h-38v38z' fill='rgba(113, 128, 150,1)'/%3E%3Cpath d='M40 0v10h60v60L0 40L1 39h38v-38z' fill='rgba(45, 55, 72,1)'/%3E%3Cpath d='M40 0v10h60v60L0 40L0 40h40v-40z' fill='rgba(113, 128, 150,1)'/%3E%3Cpath d='M0 40h-10v-60h60L40 0L40 0h-40v40z' fill='rgba(45, 55, 72,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ")
+}
+body.blog {
+ font-size: 16px;
+ margin: 55px auto;
+ max-width: 1000px;
+}
main, section, nav section, aside section {
background: #fff;
a {
color: var(--almond-silk);
}
+ p {
+ color: var(--parchment);
+ }
}
flex-direction: column;
justify-content: center;
align-items:center;
+ margin: 1em 0;
+ width: 100%;
+ max-width: 100%;
+}
+
+figure audio {
+ margin: 0.5em;
+ width: 100%;
+ max-width:300px;
}
+figcaption {
+ padding: 10px;
+ text-align: center;
+ word-wrap: break-word;
+}
.push-left {
padding: 10px;
}
+
+
+/* hgroup center */
+hgroup {
+ display:flex;
+ flex-direction:column;
+ align-items: center;
+ p {
+ margin: 0.5em;
+ }
+
+}
+
+
+/* horizontal rule */
+hr {
+ border: none;
+ border-top: 3px double #333333;
+ color: #333333;
+ overflow: visible;
+ text-align: center;
+ height: 5px;
+ max-width: 66%;
+}
+
+hr::after {
+ background: white;
+ content: "ยง";
+ padding: 0 4px;
+ position: relative;
+ top: -13px;
+}
+
+
+
projects / skullheadx.com.git / commitdiff