From: Skullheadx Date: Fri, 8 May 2026 19:22:57 +0000 (-0400) Subject: aria of the soul blog post X-Git-Url: http://git.skullheadx.com/nixos/README?a=commitdiff_plain;h=97095b4697554552045f13ea7b98c7bac56e6216;p=skullheadx.com.git aria of the soul blog post --- diff --git a/The_Velvet_Room_Aria_of_the_Soul_Piano_Cover_Std_Quality.mp3 b/blog/The_Velvet_Room_Aria_of_the_Soul_Piano_Cover_Std_Quality.mp3 similarity index 100% rename from The_Velvet_Room_Aria_of_the_Soul_Piano_Cover_Std_Quality.mp3 rename to blog/The_Velvet_Room_Aria_of_the_Soul_Piano_Cover_Std_Quality.mp3 diff --git a/blog/aria_of_the_soul.html b/blog/aria_of_the_soul.html new file mode 100644 index 0000000..3dfe9ae --- /dev/null +++ b/blog/aria_of_the_soul.html @@ -0,0 +1,48 @@ + + + + + The Velvet Room: Aria of the Soul Piano Cover | Skullheadx + + + + + + +
+
+

Skullheadx's Blog

+
+ +
+
+
+

The Velvet Room: Aria of the Soul | Persona 5 piano cover

+

Published:

+
+

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 sheet music to learn.

+
+
Listen to the The Velvet Room: Aria of the Soul Piano Cover:
+ + Download audio +
+
+
+
+ +
+ + diff --git a/blog/index.html b/blog/index.html index 8d7caff..2a5b6fe 100644 --- a/blog/index.html +++ b/blog/index.html @@ -63,7 +63,7 @@

The Velvet Room: Aria of the Soul | Persona 5 piano cover

-
+

Suckless NixOS

diff --git a/music/index.html b/music/index.html index a8c169c..0cb2294 100644 --- a/music/index.html +++ b/music/index.html @@ -59,7 +59,7 @@
diff --git a/style.css b/style.css index d6f370a..104e693 100644 --- a/style.css +++ b/style.css @@ -16,6 +16,7 @@ h1, h2, h3 { h1 { font-weight: bold; padding: 0.75em; + color: var(--parchment); } h2 { @@ -45,6 +46,12 @@ h2 a { /*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; @@ -94,7 +101,7 @@ li { grid-area: footer; } -.main-wrapper, .content-wrapper { +.main-wrapper, .content-wrapper, .blog-wrapper { display: grid; gap: 20px; grid-template-areas: @@ -123,12 +130,21 @@ li { "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; @@ -155,12 +171,19 @@ li { "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; } } @@ -181,6 +204,14 @@ li { "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; } @@ -196,6 +227,12 @@ li { border-radius: 7px; } +html > header h1 { + a { + + } +} + /* body */ body { margin: 0 auto; @@ -204,8 +241,14 @@ body { } 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; @@ -267,6 +310,9 @@ footer { a { color: var(--almond-silk); } + p { + color: var(--parchment); + } } @@ -298,8 +344,22 @@ figure { 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; @@ -377,3 +437,38 @@ details[open] summary { } + + +/* 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; +} + + +