forked from CWAD/relibre
175 lines
6.1 KiB
HTML
175 lines
6.1 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Relibre
|
|
Copyleft (🄯) 2025 James Osborne
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Relibre — Music release landing page generator</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="Relibre lets artists generate a self-hosted, single-file release page — an alternative to services like HyperFollow." />
|
|
<style>
|
|
/* ===== Base (match CWAD) ===== */
|
|
:root { color-scheme: dark; }
|
|
*,*::before,*::after{box-sizing:border-box}
|
|
html,body{margin:0;padding:0;overflow-x:hidden}
|
|
body{
|
|
background:#000;color:#fff;text-align:center;
|
|
font-family:'Public Sans',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
|
|
font-size:22px;
|
|
}
|
|
img{max-width:100%;height:auto;display:inline-block}
|
|
a{color:red;text-decoration:none}
|
|
a:hover{color:hotpink}
|
|
|
|
/* ===== CWAD Header ===== */
|
|
.site-header{
|
|
max-width:960px;margin:16px auto 6px;padding:0 16px;
|
|
display:flex;align-items:center;justify-content:flex-start;text-align:left;
|
|
}
|
|
.brand{display:flex;align-items:center;gap:12px;color:#fff}
|
|
.brand:hover{color:#ff7aa5}
|
|
.brand-logo{width:48px;height:48px;border-radius:50%}
|
|
.brand-name{
|
|
font-weight:800;letter-spacing:.12em;text-transform:uppercase;
|
|
font-size:20px;line-height:1;
|
|
}
|
|
|
|
/* ===== Relibre header row under brand bar ===== */
|
|
.wrap{max-width:860px;margin:32px auto 56px;padding:0 20px;text-align:left}
|
|
.header-row{display:flex;gap:16px;align-items:center;margin-bottom:10px}
|
|
.logo{display:block;width:80px;height:80px;border-radius:12px;flex:0 0 auto}
|
|
h1{font-size:44px;margin:0 0 4px}
|
|
.sub{color:#9aa0a6;margin:0 0 18px;font-size:18px}
|
|
|
|
/* ===== Relibre card ===== */
|
|
.card{
|
|
background:rgba(255,255,255,.06);
|
|
border:1px solid rgba(255,255,255,.08);
|
|
box-shadow:0 12px 40px rgba(0,0,0,.55);
|
|
border-radius:16px;padding:18px 16px 22px;backdrop-filter:blur(2px);
|
|
text-align:left;
|
|
}
|
|
.card p{margin:0 0 14px;color:#ddd;font-size:16px;line-height:1.5}
|
|
.cta{
|
|
display:inline-block;margin-top:10px;padding:12px 18px;border-radius:999px;
|
|
font-weight:700;background:#e53935;color:#fff;border:0
|
|
}
|
|
.cta:hover{filter:brightness(1.05)}
|
|
|
|
/* ===== CWAD Footer ===== */
|
|
.site-footer{
|
|
margin-top:48px;border-top:1px solid rgba(255,255,255,.08);
|
|
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,0));
|
|
text-align:left;
|
|
}
|
|
.footer-inner{
|
|
max-width:980px;margin:0 auto;padding:20px 16px 28px;
|
|
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
|
|
}
|
|
.footer-left{justify-self:start}
|
|
.footer-center{justify-self:center}
|
|
.footer-right{justify-self:end}
|
|
|
|
.footer-icon{
|
|
display:inline-flex;width:28px;height:28px;border-radius:8px;
|
|
background:rgba(255,255,255,.04);justify-content:center;align-items:center;
|
|
padding:4px;transition:transform .15s ease,background .2s ease,opacity .2s ease;
|
|
}
|
|
.footer-icon img{width:100%;height:100%;object-fit:contain;opacity:.9}
|
|
.footer-icon:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
|
|
.footer-icon:active{transform:translateY(0);opacity:.8}
|
|
|
|
.footer-text{
|
|
font-size:14px;color:rgba(234,234,234,.85);letter-spacing:.01em;
|
|
text-decoration:none;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04);
|
|
transition:background .2s ease,color .2s ease;
|
|
}
|
|
.footer-text:hover{color:#fff;background:rgba(255,255,255,.08)}
|
|
|
|
.footer-links a{
|
|
font-size:14px;color:rgba(234,234,234,.82);text-decoration:none;
|
|
padding:6px 8px;border-radius:8px;transition:color .15s ease,background .15s ease;
|
|
}
|
|
.footer-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
|
|
|
|
@media (max-width:768px){
|
|
body{font-size:18px}
|
|
.brand-logo{width:44px;height:44px}
|
|
.brand-name{font-size:18px}
|
|
}
|
|
@media (max-width:640px){
|
|
.footer-inner{grid-template-columns:1fr;gap:10px;text-align:center}
|
|
.footer-left,.footer-center,.footer-right{justify-self:center}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- CWAD brand header -->
|
|
<header class="site-header">
|
|
<a class="brand" href="/">
|
|
<img class="brand-logo" src="images/cwad_logo.png" alt="Circle With A Dot logo" />
|
|
<span class="brand-name">CIRCLE WITH A DOT</span>
|
|
</a>
|
|
</header>
|
|
|
|
<main class="wrap">
|
|
<!-- Relibre header row -->
|
|
<header class="header-row">
|
|
<img class="logo" src="images/relibre_logo.png" alt="Relibre logo" width="80" height="80" />
|
|
<div>
|
|
<h1>Relibre</h1>
|
|
<p class="sub">Music release one-page generator</p>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="card">
|
|
<p>
|
|
Relibre is a simple, free and open source landing page generator that is an alternative to services such as
|
|
HyperFollow. Relibre has one job — giving the artist the ability to generate a single HTML file to
|
|
self-host with their own methods.
|
|
</p>
|
|
<p><a class="cta" href="ui/generator.html">Try the generator</a></p>
|
|
</section>
|
|
|
|
<!-- CWAD footer -->
|
|
<footer class="site-footer" role="contentinfo">
|
|
<div class="footer-inner">
|
|
<div class="footer-left">
|
|
<a
|
|
href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="footer-text"
|
|
>
|
|
BY-NC-SA 4.0
|
|
</a>
|
|
</div>
|
|
|
|
<div class="footer-center">
|
|
<a
|
|
href="https://en.wikipedia.org/wiki/Copyleft"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="footer-icon"
|
|
aria-label="Copyleft (learn more)"
|
|
>
|
|
<img src="images/cl.png" alt="Copyleft" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="footer-right footer-links">
|
|
<a href="../LICENSE">License</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
<a rel="me" href="https://mastodon.circlewithadot.net/@incentive" hidden>Mastodon</a>
|
|
</body>
|
|
</html>
|
|
|