forked from CWAD/relibre
First commit
This commit is contained in:
174
index.html
Normal file
174
index.html
Normal file
@@ -0,0 +1,174 @@
|
||||
<!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>
|
||||
|
||||
Reference in New Issue
Block a user