diff --git a/source/images/icon-512.png b/source/images/icon-512.png new file mode 100644 index 0000000..9a9e054 Binary files /dev/null and b/source/images/icon-512.png differ diff --git a/source/images/screenshot-dark.png b/source/images/screenshot-dark.png new file mode 100644 index 0000000..e1105d0 Binary files /dev/null and b/source/images/screenshot-dark.png differ diff --git a/source/images/screenshot-light.png b/source/images/screenshot-light.png new file mode 100644 index 0000000..076dcae Binary files /dev/null and b/source/images/screenshot-light.png differ diff --git a/source/index.html.erb b/source/index.html.erb index 4a65274..4bdd3db 100644 --- a/source/index.html.erb +++ b/source/index.html.erb @@ -2,6 +2,40 @@ title: Persephone --- -

- Persephone -

+
+

Persephone

+
+ +
+ + +
+

Persephone is a modern, open source MPD client for macOS. + +

MP… what?

+ +

From the website:

+ +
+

+ “Music Player Daemon (MPD) is a flexible, powerful, server-side + application for playing music. Through plugins and libraries it can play a + variety of sound files while being controlled by its network protocol.” +

+
+ +

+ Wikipedia has a + more comprehensive description. +

+ +

+ ↓ Download +

+
+ + + + + +
diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss index 54b77a3..1ab0bd1 100644 --- a/source/stylesheets/site.css.scss +++ b/source/stylesheets/site.css.scss @@ -1,19 +1,82 @@ +$dark-color: #181818; +$light-color: white; + body { - background-color: white; - color: black; + background-color: $light-color; + color: $dark-color; font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif; - padding: 18vh 1rem; + padding: 4vw 1rem; text-align: center; + + @media (prefers-color-scheme: dark) { + background-color: $dark-color; + color: $light-color; + } +} + +main { + max-width: 50rem; + margin: 0 auto; } a { - color: rgba(#000, 0.7); + color: rgba($dark-color, 0.7); &:focus, &:hover { - color: rgba(#000, 0.6); + color: rgba($dark-color, 0.6); + } + + @media (prefers-color-scheme: dark) { + color: rgba($light-color, 0.7); + + &:focus, + &:hover { + color: rgba($light-color, 0.6); + } + } +} + +blockquote { + margin: 0; + padding-left: 1rem; + border-left: 5px solid darken($light-color, 25%); + + @media (prefers-color-scheme: dark) { + border-left: 5px solid lighten($dark-color, 25%); + } +} + +.text { + text-align: left; +} + +.icon { + width: 16rem; +} + +.screenshot { + width: 100%; +} + +.download-section { + margin: 2rem 0; + text-align: center; +} + +.download-button { + background: $dark-color; + border-radius: 0.5rem; + color: $light-color; + padding: 0.5rem 2rem 0.5rem 1.5rem; + text-decoration: none; + font-weight: bold; + + @media (prefers-color-scheme: dark) { + background: $light-color; + color: $dark-color; } }