Skip to content

Commit

Permalink
Add Donate button
Browse files Browse the repository at this point in the history 
* Adjust button sizes
* Make the + Info button an anchor to make them look the same (can't get them to look the same otherwise)
  • Loading branch information
@tomyo
tomyo committed Mar 25, 2024
1 parent 0c457ba commit 4badcc1
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 142 deletions.
4 changes: 2 additions & 2 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ main > * {
main nav {
display: flex;
align-items: center;
flex-direction: column;
gap: 1em;
margin-block-start: auto;
}

#lang-switcher {
Expand Down Expand Up @@ -127,7 +127,7 @@ main nav {
.button,
button,
*::part(button) {
padding: 0.6em 0.6em;
padding: 6px 12px;
border: 1px solid var(--main-color);
border-radius: 1em;
font-weight: bold;
Expand Down
291 changes: 151 additions & 140 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,152 +50,163 @@

<main>
<h1 class="item">Cisco Pema</h1>
<nav>
<button id="press-info">+ Info</button>

<div class="social-buttons">
<a
class="button"
href="http://facebook.com/ciscopemamusic"
title="@ciscopemamusic on Facebook"
>
<img alt="Link to Facebook" src="/assets/images/facebook.svg" />
</a>
<a
class="button"
href="http://instagram.com/ciscopema"
title="@ciscopema on Instagram"
>
<img alt="Link to Instagram" src="/assets/images/instagram.svg" />
</a>
<a
class="button"
href="mailto:[email protected]"
title="Email [email protected]"
>
<img alt="Send email" src="/assets/images/envelope.svg" />
</a>
<br />
<a
class="button"
href="https://www.youtube.com/channel/UC3K26naF-NtGUZzu-Mrb2Sw"
title="@ciscopema Youtube channel"
>
<img alt="Link to YouTube" src="/assets/images/youtube.svg" />
</a>
<a
class="button"
href="https://open.spotify.com/artist/6eIRNPQkGR88apwP28kM7j"
title="@ciscopema on Spotify"
>
<img alt="Link to Spotify" src="/assets/images/spotify.svg" />
</a>
<div class="social-buttons">
<a
class="button"
href="http://facebook.com/ciscopemamusic"
title="@ciscopemamusic on Facebook"
>
<img alt="Link to Facebook" src="/assets/images/facebook.svg" />
</a>
<a
class="button"
href="http://instagram.com/ciscopema"
title="@ciscopema on Instagram"
>
<img alt="Link to Instagram" src="/assets/images/instagram.svg" />
</a>
<a
class="button"
href="mailto:[email protected]"
title="Email [email protected]"
>
<img alt="Send email" src="/assets/images/envelope.svg" />
</a>
<br />
<a
class="button"
href="https://www.youtube.com/channel/UC3K26naF-NtGUZzu-Mrb2Sw"
title="@ciscopema Youtube channel"
>
<img alt="Link to YouTube" src="/assets/images/youtube.svg" />
</a>
<a
class="button"
href="https://open.spotify.com/artist/6eIRNPQkGR88apwP28kM7j"
title="@ciscopema on Spotify"
>
<img alt="Link to Spotify" src="/assets/images/spotify.svg" />
</a>
<a
class="button"
href="https://itunes.apple.com/de/artist/cisco-pema/1156430283"
title="@ciscopema on iTunes"
>
<img alt="Link to itunes" src="/assets/images/itunes.svg" />
</a>
</div>
<nav>
<div>
<a href="#" class="button" id="press-info">+ Info</a>
<a
class="button"
href="https://itunes.apple.com/de/artist/cisco-pema/1156430283"
title="@ciscopema on iTunes"
href="https://www.paypal.com/paypalme/ciscopema"
target="_blank"
>Donate</a
>
<img alt="Link to itunes" src="/assets/images/itunes.svg" />
</a>
</div>

<section id="tour-dates">
<details>
<summary class="button" data-l10n-key="tour-dates">
Tour Dates
</summary>
<bands-in-town>
<script
charset="utf-8"
src="https://widgetv3.bandsintown.com/main.min.js"
></script>
<a
class="bit-widget-initializer"
data-artist-name="id_13091354"
data-background-color="transparent"
data-separator-color="#DDDDDD"
data-text-color="#c8c8c8"
data-font="Lucida Grande, system-ui"
data-auto-style="true"
data-button-label-capitalization="capitalize"
data-header-capitalization="undefined"
data-location-capitalization="capitalize"
data-venue-capitalization="capitalize"
data-display-local-dates="true"
data-local-dates-position=""
data-display-past-dates="true"
data-display-details=""
data-display-lineup=""
data-display-start-time=""
data-social-share-icon="true"
data-display-limit="all"
data-date-format="MMM. D, YYYY"
data-date-orientation="horizontal"
data-date-border-color="#4A4A4A"
data-date-border-width="1px"
data-date-capitalization="undefined"
data-date-border-radius="10px"
data-event-ticket-cta-size="medium"
data-event-custom-ticket-text="undefined"
data-event-ticket-text="TICKETS"
data-event-ticket-icon=""
data-event-ticket-cta-text-color="#FFFFFF"
data-event-ticket-cta-bg-color="#4A4A4A"
data-event-ticket-cta-border-color="#4A4A4A"
data-event-ticket-cta-border-width="0px"
data-event-ticket-cta-border-radius="4px"
data-sold-out-button-text-color="#FFFFFF"
data-sold-out-button-background-color="#4A4A4A"
data-sold-out-button-border-color="#4A4A4A"
data-sold-out-button-clickable="true"
data-event-rsvp-position="left"
data-event-rsvp-cta-size="small"
data-event-rsvp-only-show-icon="false"
data-event-rsvp-text="REMIND ME"
data-event-rsvp-icon=""
data-event-rsvp-cta-text-color="#4A4A4A"
data-event-rsvp-cta-bg-color="#FFFFFF"
data-event-rsvp-cta-border-color="#4A4A4A"
data-event-rsvp-cta-border-width="1px"
data-event-rsvp-cta-border-radius="4px"
data-follow-section-position="top"
data-follow-section-alignment="center"
data-follow-section-header-text="Get updates on new shows, new music, and more."
data-follow-section-cta-size="medium"
data-follow-section-cta-text="FOLLOW"
data-follow-section-cta-icon="true"
data-follow-section-cta-text-color="#FFFFFF"
data-follow-section-cta-bg-color="#4A4A4A"
data-follow-section-cta-border-color="#4A4A4A"
data-follow-section-cta-border-width="0px"
data-follow-section-cta-border-radius="4px"
data-play-my-city-position="bottom"
data-play-my-city-alignment="Center"
data-play-my-city-header-text="Don’t see a show near you?"
data-play-my-city-cta-size="medium"
data-play-my-city-cta-text="REQUEST A SHOW"
data-play-my-city-cta-icon="true"
data-play-my-city-cta-text-color="#FFFFFF"
data-play-my-city-cta-bg-color="#4A4A4A"
data-play-my-city-cta-border-color="#4A4A4A"
data-play-my-city-cta-border-width="0px"
data-play-my-city-cta-border-radius="4px"
data-optin-font=""
data-optin-text-color=""
data-optin-bg-color=""
data-optin-cta-text-color=""
data-optin-cta-bg-color=""
data-optin-cta-border-width=""
data-optin-cta-border-radius=""
data-optin-cta-border-color=""
data-language="en"
data-layout-breakpoint="900"
data-app-id=""
data-affil-code=""
data-bit-logo-position="bottomRight"
data-bit-logo-color="transparent"
></a>
</bands-in-town>
</details>
</section>
</nav>
<section id="tour-dates">
<details>
<summary class="button" data-l10n-key="tour-dates">Tour Dates</summary>
<bands-in-town>
<script
charset="utf-8"
src="https://widgetv3.bandsintown.com/main.min.js"
></script>
<a
class="bit-widget-initializer"
data-artist-name="id_13091354"
data-background-color="transparent"
data-separator-color="#DDDDDD"
data-text-color="#c8c8c8"
data-font="Lucida Grande, system-ui"
data-auto-style="true"
data-button-label-capitalization="capitalize"
data-header-capitalization="undefined"
data-location-capitalization="capitalize"
data-venue-capitalization="capitalize"
data-display-local-dates="true"
data-local-dates-position=""
data-display-past-dates="true"
data-display-details=""
data-display-lineup=""
data-display-start-time=""
data-social-share-icon="true"
data-display-limit="all"
data-date-format="MMM. D, YYYY"
data-date-orientation="horizontal"
data-date-border-color="#4A4A4A"
data-date-border-width="1px"
data-date-capitalization="undefined"
data-date-border-radius="10px"
data-event-ticket-cta-size="medium"
data-event-custom-ticket-text="undefined"
data-event-ticket-text="TICKETS"
data-event-ticket-icon=""
data-event-ticket-cta-text-color="#FFFFFF"
data-event-ticket-cta-bg-color="#4A4A4A"
data-event-ticket-cta-border-color="#4A4A4A"
data-event-ticket-cta-border-width="0px"
data-event-ticket-cta-border-radius="4px"
data-sold-out-button-text-color="#FFFFFF"
data-sold-out-button-background-color="#4A4A4A"
data-sold-out-button-border-color="#4A4A4A"
data-sold-out-button-clickable="true"
data-event-rsvp-position="left"
data-event-rsvp-cta-size="small"
data-event-rsvp-only-show-icon="false"
data-event-rsvp-text="REMIND ME"
data-event-rsvp-icon=""
data-event-rsvp-cta-text-color="#4A4A4A"
data-event-rsvp-cta-bg-color="#FFFFFF"
data-event-rsvp-cta-border-color="#4A4A4A"
data-event-rsvp-cta-border-width="1px"
data-event-rsvp-cta-border-radius="4px"
data-follow-section-position="top"
data-follow-section-alignment="center"
data-follow-section-header-text="Get updates on new shows, new music, and more."
data-follow-section-cta-size="medium"
data-follow-section-cta-text="FOLLOW"
data-follow-section-cta-icon="true"
data-follow-section-cta-text-color="#FFFFFF"
data-follow-section-cta-bg-color="#4A4A4A"
data-follow-section-cta-border-color="#4A4A4A"
data-follow-section-cta-border-width="0px"
data-follow-section-cta-border-radius="4px"
data-play-my-city-position="bottom"
data-play-my-city-alignment="Center"
data-play-my-city-header-text="Don’t see a show near you?"
data-play-my-city-cta-size="medium"
data-play-my-city-cta-text="REQUEST A SHOW"
data-play-my-city-cta-icon="true"
data-play-my-city-cta-text-color="#FFFFFF"
data-play-my-city-cta-bg-color="#4A4A4A"
data-play-my-city-cta-border-color="#4A4A4A"
data-play-my-city-cta-border-width="0px"
data-play-my-city-cta-border-radius="4px"
data-optin-font=""
data-optin-text-color=""
data-optin-bg-color=""
data-optin-cta-text-color=""
data-optin-cta-bg-color=""
data-optin-cta-border-width=""
data-optin-cta-border-radius=""
data-optin-cta-border-color=""
data-language="en"
data-layout-breakpoint="900"
data-app-id=""
data-affil-code=""
data-bit-logo-position="bottomRight"
data-bit-logo-color="transparent"
></a>
</bands-in-town>
</details>
</section>
</main>

<dialog>
Expand Down

0 comments on commit 4badcc1

Please sign in to comment.