forked from CWAD/circlewithadot.net
First commit
This commit is contained in:
173
releases/pessimist.html
Normal file
173
releases/pessimist.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Pessimist – Incentive</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- Shared root stylesheet -->
|
||||
<link href="../style.css?v=20250831" rel="stylesheet" />
|
||||
<!-- Page-specific stylesheet for releases -->
|
||||
<link href="style.css?v=20250904" rel="stylesheet" />
|
||||
<meta name="description" content="Pessimist by Incentive – stream, buy, and follow." />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<a class="brand" href="../index.html">
|
||||
<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="hf-container">
|
||||
<section class="hf-card hf-hero">
|
||||
<img class="hf-cover" src="../images/pessimist.png" alt="Pessimist cover art" width="600" height="400" />
|
||||
<h1 class="hf-title">Pessimist</h1>
|
||||
<div class="hf-subtitle">Incentive</div>
|
||||
|
||||
<div class="hf-cta-row">
|
||||
<a class="btn btn-red" href="https://incentive.bandcamp.com/album/pessimist" target="_blank" rel="noopener">Buy on Bandcamp</a>
|
||||
<a class="btn btn-ghost" href="#stream">Stream</a>
|
||||
</div>
|
||||
|
||||
<div class="hf-embed">
|
||||
<iframe
|
||||
src="https://bandcamp.com/EmbeddedPlayer/album=2639123698/size=large/bgcol=000000/linkcol=ff0000/tracklist=false/artwork=small/transparent=true/"
|
||||
title="Pessimist by Incentive"
|
||||
allow="autoplay"
|
||||
loading="lazy"
|
||||
height="120">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<p class="hf-blurb">
|
||||
<br />
|
||||
01 Waking Up To A New Day<br />
|
||||
02 This Shit Earth<br />
|
||||
03 good night, me<br />
|
||||
<br />
|
||||
released September 30, 2024<br />
|
||||
<br />
|
||||
Incentive - music, production<br />
|
||||
Sia De La Paz - vocal melodies (2,3), vocal production, vocals<br />
|
||||
Matthew Gallagher - art<br />
|
||||
Joshua Hamaker - photography <br />
|
||||
<br />
|
||||
Mastered by Machine Listener @ Tri-Labs West <br />
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="stream" class="hf-card">
|
||||
<h2 class="hf-section-title">Stream Pessimist</h2>
|
||||
|
||||
<div class="hf-link-grid">
|
||||
<a class="hf-link" href="https://open.spotify.com/album/1EIC4HhbjnFmJJ5Ox3Er6j" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_spotify.png" alt="" width="28" height="28"> Spotify
|
||||
</a>
|
||||
<a class="hf-link" href="https://music.apple.com/us/album/pessimist/1772082901" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_apple.png" alt="" width="28" height="28"> Apple Music
|
||||
</a>
|
||||
<a class="hf-link" href="https://soundcloud.com/incentive-1/sets/pessimist" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_soundcloud.png" alt="" width="28" height="28"> SoundCloud
|
||||
</a>
|
||||
<a class="hf-link" href="https://www.youtube.com/playlist?list=OLAK5uy_lHwNLbqOuLiylhMqibfiMPSOQ8bZuYeVk" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_youtube.png" alt="" width="28" height="28"> YouTube
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hf-card">
|
||||
<h2 class="hf-section-title">Watch</h2>
|
||||
<div class="hf-video-container">
|
||||
<video class="hf-video-el" controls playsinline preload="metadata" poster="../images/pessimist.png">
|
||||
<source src="https://peertube.circlewithadot.net/download/web-videos/e855134b-2773-40ca-83d9-739fc4a3ea0c-720.mp4" type="video/mp4">
|
||||
<a class="hf-link" href="https://peertube.circlewithadot.net/w/fnexX1EPLHiVuN9CNCcvfw" target="_blank" rel="noopener">
|
||||
Watch on PeerTube
|
||||
</a>
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hf-card">
|
||||
<h2 class="hf-section-title">Buy / Support</h2>
|
||||
<div class="hf-link-grid">
|
||||
<a class="hf-link" href="https://incentive.bandcamp.com/album/pessimist" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_bandcamp.png" alt="" width="28" height="28"> Bandcamp
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hf-card">
|
||||
<h2 class="hf-section-title">Follow</h2>
|
||||
<div class="hf-link-grid">
|
||||
<a class="hf-link" href="https://mastodon.circlewithadot.net/@incentive" target="_blank" rel="me noopener">
|
||||
<img src="../images/icon_mastodon.png" alt="" width="28" height="28"> Mastodon
|
||||
</a>
|
||||
<a class="hf-link" href="https://pixelfed.circlewithadot.net/@incentive" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_pixelfed.png" alt="" width="28" height="28"> Pixelfed
|
||||
</a>
|
||||
<a class="hf-link" href="https://blog.circlewithadot.net" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_writefreely.png" alt="" width="28" height="28"> WriteFreely
|
||||
</a>
|
||||
<a class="hf-link" href="https://owncast.circlewithadot.net" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_owncast.png" alt="" width="28" height="28"> Owncast
|
||||
</a>
|
||||
<a class="hf-link" href="https://lemmy.ml/u/incentive" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_lemmy.png" alt="" width="28" height="28"> Lemmy
|
||||
</a>
|
||||
<a class="hf-link" href="https://peertube.circlewithadot.net/@incentive" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_peertube.png" alt="" width="28" height="28"> PeerTube
|
||||
</a>
|
||||
<a class="hf-link" href="https://bsky.app/profile/incentive.bsky.social" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_bluesky.png" alt="" width="28" height="28"> Bluesky
|
||||
</a>
|
||||
<a class="hf-link" href="https://discord.gg/vdbsh83Vje" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_discord.png" alt="" width="28" height="28"> Discord
|
||||
</a>
|
||||
<a class="hf-link" href="https://facebook.com/incentivemusic" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_facebook.png" alt="" width="28" height="28"> Facebook
|
||||
</a>
|
||||
<a class="hf-link" href="https://instagram.com/incentivemusic" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_instagram.png" alt="" width="28" height="28"> Instagram
|
||||
</a>
|
||||
<a class="hf-link" href="https://x.com/incentivemusic" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_twitter.png" alt="" width="28" height="28"> X (Twitter)
|
||||
</a>
|
||||
<a class="hf-link" href="https://www.threads.net/@incentivemusic" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_threads.png" alt="" width="28" height="28"> Threads
|
||||
</a>
|
||||
<a class="hf-link" href="https://www.tiktok.com/@incentivemusic" target="_blank" rel="noopener">
|
||||
<img src="../images/icon_tiktok.png" alt="" width="28" height="28"> TikTok
|
||||
</a>
|
||||
<a class="hf-link" href="mailto:incentive@circlewithadot.net">
|
||||
<img src="../images/icon_email.png" alt="" width="28" height="28"> Email
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
167
releases/style.css
Normal file
167
releases/style.css
Normal file
@@ -0,0 +1,167 @@
|
||||
.hf-container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto 60px;
|
||||
padding: 0 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hf-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: 20px;
|
||||
margin: 16px 0;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.hf-hero {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.hf-cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
.hf-title {
|
||||
margin: 6px 0 2px;
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.hf-subtitle {
|
||||
color: #bbb;
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.hf-blurb {
|
||||
color: #ddd;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin: 8px 0 16px;
|
||||
}
|
||||
|
||||
.hf-cta-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
color: #fff !important;
|
||||
transition: transform .15s ease, opacity .15s ease, background .15s;
|
||||
}
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-red {
|
||||
background: #e53935;
|
||||
border-color: transparent;
|
||||
}
|
||||
.btn-red:hover {
|
||||
background: #ff4444;
|
||||
}
|
||||
.btn-ghost {
|
||||
background: rgba(255,255,255,.06);
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
background: rgba(255,255,255,.12);
|
||||
}
|
||||
|
||||
.hf-embed {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.hf-embed iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.hf-section-title {
|
||||
margin: 6px 0 14px;
|
||||
font-size: 18px;
|
||||
letter-spacing: .08em;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hf-link-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.hf-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(255,255,255,.04);
|
||||
border: 1px solid rgba(255,255,255,.07);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
color: #fff !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.hf-link:hover {
|
||||
background: rgba(255,255,255,.10);
|
||||
color: #ff7aa5 !important;
|
||||
}
|
||||
.hf-link img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.hf-video {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
.hf-video iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.hf-video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background: #000;
|
||||
}
|
||||
.hf-video-el {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hf-back {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hf-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
.hf-link-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
122
releases/template.html
Normal file
122
releases/template.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>TITLE – ARTIST</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="TITLE by ARTIST – stream, buy, and follow." />
|
||||
<link href="../style.css?v=YYYYMMDD" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<br>
|
||||
<a href="../index.html" class="hf-logo-link">
|
||||
<img src="../images/LOGO.png" width="90" height="90" alt="Site logo" />
|
||||
</a>
|
||||
|
||||
<main class="hf-container">
|
||||
<!-- HERO -->
|
||||
<section class="hf-card hf-hero">
|
||||
<img class="hf-cover" src="../images/COVER.png" alt="Cover art for TITLE by ARTIST" width="600" height="400" />
|
||||
<h1 class="hf-title">TITLE</h1>
|
||||
<div class="hf-subtitle">ARTIST</div>
|
||||
<p class="hf-blurb">SHORT_RELEASE_BLURB</p>
|
||||
|
||||
<div class="hf-cta-row">
|
||||
<a class="btn btn-red" href="BANDCAMP_URL" target="_blank" rel="noopener noreferrer">Buy on Bandcamp</a>
|
||||
<a class="btn btn-ghost" href="#stream">Stream</a>
|
||||
</div>
|
||||
|
||||
<div class="hf-embed">
|
||||
<!-- Optional embed; remove if not needed -->
|
||||
<iframe
|
||||
src="EMBED_URL"
|
||||
title="TITLE by ARTIST"
|
||||
allow="autoplay"
|
||||
loading="lazy"
|
||||
height="120">
|
||||
</iframe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- STREAM -->
|
||||
<section id="stream" class="hf-card">
|
||||
<h2 class="hf-section-title">Stream TITLE</h2>
|
||||
<div class="hf-link-grid">
|
||||
<a class="hf-link" href="SPOTIFY_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_spotify.png" alt="" width="28" height="28"> Spotify
|
||||
</a>
|
||||
<a class="hf-link" href="APPLE_MUSIC_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_apple.png" alt="" width="28" height="28"> Apple Music
|
||||
</a>
|
||||
<a class="hf-link" href="SOUNDCLOUD_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_soundcloud.png" alt="" width="28" height="28"> SoundCloud
|
||||
</a>
|
||||
<a class="hf-link" href="YOUTUBE_PLAYLIST_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_youtube.png" alt="" width="28" height="28"> YouTube
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WATCH -->
|
||||
<section class="hf-card">
|
||||
<h2 class="hf-section-title">Watch</h2>
|
||||
<div class="hf-video">
|
||||
<iframe
|
||||
src="YOUTUBE_EMBED_URL"
|
||||
title="TITLE"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
loading="lazy"></iframe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUY -->
|
||||
<section class="hf-card">
|
||||
<h2 class="hf-section-title">Buy / Support</h2>
|
||||
<div class="hf-link-grid">
|
||||
<a class="hf-link" href="BANDCAMP_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_bandcamp.png" alt="" width="28" height="28"> Bandcamp
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOLLOW -->
|
||||
<section class="hf-card">
|
||||
<h2 class="hf-section-title">Follow</h2>
|
||||
<div class="hf-link-grid">
|
||||
<a class="hf-link" href="MASTODON_URL" target="_blank" rel="me noopener noreferrer">
|
||||
<img src="../images/icon_mastodon.png" alt="" width="28" height="28"> Mastodon
|
||||
</a>
|
||||
<a class="hf-link" href="PIXELFED_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_pixelfed.png" alt="" width="28" height="28"> Pixelfed
|
||||
</a>
|
||||
<a class="hf-link" href="BLOG_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_writefreely.png" alt="" width="28" height="28"> Blog
|
||||
</a>
|
||||
<a class="hf-link" href="DISCORD_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_discord.png" alt="" width="28" height="28"> Discord
|
||||
</a>
|
||||
<a class="hf-link" href="BLUESKY_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_bluesky.png" alt="" width="28" height="28"> Bluesky
|
||||
</a>
|
||||
<a class="hf-link" href="TWITTER_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_twitter.png" alt="" width="28" height="28"> X (Twitter)
|
||||
</a>
|
||||
<a class="hf-link" href="INSTAGRAM_URL" target="_blank" rel="noopener noreferrer">
|
||||
<img src="../images/icon_instagram.png" alt="" width="28" height="28"> Instagram
|
||||
</a>
|
||||
<a class="hf-link" href="EMAIL_ADDRESS">
|
||||
<img src="../images/icon_email.png" alt="" width="28" height="28"> Email
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="hf-back">
|
||||
<a href="../index.html" class="footer-link">← Back to home</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Optional rel=me -->
|
||||
<a rel="me" href="MASTODON_URL" class="hidden">Mastodon</a>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user