diff --git a/assets/css/flo.css b/assets/css/flo.css new file mode 100644 index 0000000..860346c --- /dev/null +++ b/assets/css/flo.css @@ -0,0 +1,380 @@ +@font-face { + font-display: swap; + font-family: 'Plus Jakarta Sans'; + font-style: normal; + font-weight: 400; + src: url('../fonts/plus-jakarta-sans-v8-latin-regular.woff2') format('woff2'); +} + +@font-face { + font-display: swap; + font-family: 'Plus Jakarta Sans'; + font-style: normal; + font-weight: 700; + src: url('../fonts/plus-jakarta-sans-v8-latin-700.woff2') format('woff2'); +} + +@font-face { + font-display: swap; + font-family: 'Plus Jakarta Sans'; + font-style: normal; + font-weight: 800; + src: url('../fonts/plus-jakarta-sans-v8-latin-800.woff2') format('woff2'); +} + +:root { + --body-bg-color: #fff; + + --base-font-size: 18px; + + --font-family-sans-serif: "Plus Jakarta Sans", sans-serif; + + --font-heading: var(--font-family-sans-serif); + --font-body: var(--font-family-sans-serif); + + --primary-color: #2B205E; + --secondary-color: #5D21D0; + --text-color: var(--primary-color); + --anchor-color: var(--primary-color); +} + +::selection { + background-color: var(--primary-color); + color: #ffffff; +} + +.c-navbar { + z-index: 1; + position: relative; + width: 100%; +} + +.c-navbar__wrapper { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; +} + +.c-navbar h2 { + padding: 0; + font-family: inherit; + font-style: normal; + font-weight: bold; + font-size: 28px; +} + +.c-navbar ul { + display: flex; +} + +.c-navbar li { + color: var(--primary-color); + font-weight: bold; + padding: 0 0.5rem; +} + +.c-hero { + background-color: var(--primary-color); + min-height: 300px; + color: #ffffff; + display: flex; + padding: 2rem; + align-items: center; + position: relative; +} + +.c-hero h1 { + font-size: 3rem; + font-weight: bold; + margin-bottom: 1rem; +} + +.c-hero h3 { + color: #ddd; + line-height: 1.8rem; +} + +.c-hero__right { + max-height: 440px; + overflow: hidden; + position: absolute; + right: 50px; + bottom: 0; + display: none; +} + +.c-button { + border: 1px solid transparent; + border-radius: 5px; + font-family: inherit; + background-color: #fff; + color: var(--primary-color); + font-weight: bold; + font-size: inherit; + padding: 1rem 2rem; + display: block; +} + +.c-button--cta { + margin-top: 2rem; +} + +.c-hero img { + border-radius: 30px; + width: 230px; + max-width: 100%; + border: 5px solid #111; +} + +.c-button--cta-navbar { + color: #ffffff; + background-color: var(--primary-color); + padding: 10px 20px; + margin: 2rem 0; +} + +.c-section { + margin-top: 4rem; + text-align: center; +} + +.c-section--flex { + display: grid; + grid-template-columns: auto; +} + +.c-section h3 { + font-size: 3rem; + font-family: inherit; + font-weight: bold; +} + +.c-section h4 { + font-size: 1.8rem; + font-family: inherit; + font-weight: bold; +} + +.c-card { + text-align: left; + padding: 2rem; + border: 1px solid #eee; + border-radius: 10px; + background-color: #eee; +} + +.c-card h4 { + margin-bottom: 13.37px; + line-height: 2.3rem; + color: var(--primary-color); +} + +.c-card p { + font-size: 1rem; + line-height: 1.5rem; +} + +.c-hero--second { + display: block; + text-align: left; + margin-top: 6rem; +} + +.c-hero--second ul { + margin-top: 3rem; + margin-bottom: 3rem; + max-width: 600px; +} + +.c-hero--second li { + margin-bottom: 15px; + list-style: square; + line-height: 1.8rem; +} + +.c-faq { + max-width: 666px; + padding: 2rem; + padding-top: 6rem; +} + +.c-faq__section { + margin-bottom: 3rem; +} + +.c-faq h4 { + color: var(--primary-color); + font-size: 3rem; + font-family: inherit; + font-weight: bold; + margin-bottom: 2rem; +} + +.c-faq h5 { + color: var(--primary-color); + font-size: 1.8rem; + font-family: inherit; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.c-faq p { + color: #666; +} + +.c-section__title { + color: var(--primary-color); + margin-bottom: 10px; +} + +.c-navbar a { + text-decoration: none; +} + +.c-faq a:hover, +.c-navbar a:hover { + opacity: 0.6; +} + +#features { + padding-top: 2rem; +} + +.js-modal { + display: none; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.8); + z-index: 2; +} + +.js-modal__content { + max-width: 500px; + height: 300px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -200px; + margin-top: -150px; + background-color: #ffffff; + padding: 2rem; + border-radius: 10px; + z-index: 3; + text-align: center; + overflow: hidden; +} + +.js-modal h2 { + font-family: inherit; + font-style: normal; + font-weight: bold; + margin-bottom: 1.8rem; +} + +.js-modal input { + width: 100%; + padding: 0.8rem 1rem; + box-sizing: border-box; + font-family: inherit; + border: 2px solid var(--primary-color); + color: var(--primary-color); + border-radius: 3px; + margin-top: 2rem; +} + +.js-modal button { + width: 100%; + padding: 0.8rem 1rem; + box-sizing: border-box; + font-family: inherit; + border: 2px solid var(--primary-color); + color: var(--primary-color); + border-radius: 3px; + margin-top: 2rem; + background-color: var(--primary-color); + color: #ffffff; + font-weight: bold; + font-size: 16px; +} + +.js-modal__close { + float: right; + font-size: 28px; + font-weight: bold; + margin-top: -20px; + margin-right: -10px; + color: var(--primary-color); +} + +.c-button--cta, +.c-button--cta-navbar, +.js-modal__close, +.js-modal button { + cursor: pointer; +} + +@media screen and (min-width: 30em) { + .c-navbar { + top: 0; + left: 0; + width: 100%; + display: initial; + padding: 0px 10px; + border-radius: 0px; + } + + .c-navbar__wrapper { + margin-top: -8rem; + } + + .c-navbar li { + padding: 0 1rem; + } +} + +@media screen and (min-width: 60em) { + .c-navbar { + top: 0; + left: 50%; + width: 100%; + max-width: 1440px; + position: fixed; + margin-left: -720px; + margin-top: 10px; + padding: 0px 20px; + border-radius: 100px; + background-color: #eee; + } + + .c-navbar__wrapper { + margin-top: 0; + flex-direction: row; + } + + .c-button--cta-navbar { + margin: 0; + } + + + .c-navbar li { + padding: 0 2rem; + } + + .c-hero { + border-radius: 10px; + padding: 4rem; + } + + .c-hero__right { + display: initial; + } + + .c-section--flex { + grid-template-columns: auto auto auto; + grid-gap: 20px; + } +} diff --git a/assets/fonts/plus-jakarta-sans-v8-latin-700.woff2 b/assets/fonts/plus-jakarta-sans-v8-latin-700.woff2 new file mode 100644 index 0000000..18d8d15 Binary files /dev/null and b/assets/fonts/plus-jakarta-sans-v8-latin-700.woff2 differ diff --git a/assets/fonts/plus-jakarta-sans-v8-latin-800.woff2 b/assets/fonts/plus-jakarta-sans-v8-latin-800.woff2 new file mode 100644 index 0000000..91be461 Binary files /dev/null and b/assets/fonts/plus-jakarta-sans-v8-latin-800.woff2 differ diff --git a/assets/fonts/plus-jakarta-sans-v8-latin-regular.woff2 b/assets/fonts/plus-jakarta-sans-v8-latin-regular.woff2 new file mode 100644 index 0000000..b3d5132 Binary files /dev/null and b/assets/fonts/plus-jakarta-sans-v8-latin-regular.woff2 differ diff --git a/assets/img/flo_hero.png b/assets/img/flo_hero.png new file mode 100644 index 0000000..b7299bc Binary files /dev/null and b/assets/img/flo_hero.png differ diff --git a/src/_includes/layouts/flo.liquid b/src/_includes/layouts/flo.liquid new file mode 100644 index 0000000..7c79c07 --- /dev/null +++ b/src/_includes/layouts/flo.liquid @@ -0,0 +1,24 @@ + + + + + + + + flo + + + + + + + + + + +
+ {{ content }} +
+ + + diff --git a/src/flo/index.liquid b/src/flo/index.liquid new file mode 100644 index 0000000..29ae75e --- /dev/null +++ b/src/flo/index.liquid @@ -0,0 +1,180 @@ +--- +title: Home +layout: layouts/flo +--- + + + +
+
+

Meet flo

+

An open source Navidrome client written in Swift.

+ +
+ flo +
+
+
+ +
+

Is flo right for you?

+

If you have Navidrome at home and an iPhone, maybe give flo a try.

+
+ +
+
+

Modern, familiar interface

+

flo is written in Swift and relies heavily on SwiftUI, a UI framework by Apple for Apple devices.

+
+
+

Navidrome native client

+

While Navidrome supports Subsonic APIs, flo was purposely designed for Navidrome servers.

+
+
+

Customizations

+

Make flo look the way you want — Custom app icons? Check. Color theme? Check. Hot girlfriend with sweatpants and a hoodie? Color theme? Check.

+
+
+ +
+
+

Features

+

flo is a music player app, meaning it plays music. But wait, there is more.

+ +

Eventually, flo is an Open Source Software (OSS) and is licensed under the permissive MIT License. Anyone can help and contribute to the project to make flo better for everyone.

+

Did I mention that flo is free?

+
+
+ +
+

FAQs

+
+
What is flo?
+

flo is an open source Navidrome client written in Swift. iPadOS and macOS support is planned, by the way.

+
+ +
+
What is Navidrome?
+

Navidrome is an open source web-based music collection server and streamer. It gives you freedom to listen to your music collection from any browser or mobile device. It's like your personal Spotify! Learn more here.

+
+ +
+
Is this the official Navidrome client?
+

Nope.

+
+ +
+
Why are there no Android clients?
+

You can check the Subsonic Apps list for alternatives.

+
+ +
+
Any tutorial on running a Navidrome server?
+

Great! I wrote one here.

+
+ +
+
Where to get songs?
+

My personal favorite is the iTunes Store. It's DRM-free, relatively affordable and also offers higher quality 256 kbps AAC encoding. I don't really understand the number but I think that sounds good.

+
+ +
+
So we can actually purchase a song?
+

Always has been.

+
+ +
+
Is it any good?
+

Yes.

+
+ +
+

If your question is not listed here, I'm reachable via email at oss@rizaldy.club or @rizaldy@edgy.social on Fediverse. You can also use GitHub Discussions for non-private questions.

+
+
+ + + +