More CTA buttons

_config.yml

@@ -15,6 +15,7 @@ plugins:
 sections:
   cfp: false
   speakers: true
+  hosts: true
 collections:
   talks:
     output: true

_includes/ticket_cta.html

@@ -0,0 +1,2 @@
+
+<a class="ticket-cta" target="_blank" href="https://ti.to/heart-of-clojure/2024">Get your ticket</a>

_layouts/talk.html

@@ -26,4 +26,5 @@ <h4>{{speaker.name}}</h4>
       {% endfor %}
     </ul>
   </div>
+  {% include ticket_cta.html %}
 </div>

css/basics.css

@@ -125,7 +125,7 @@ footer p {
 .bg-light-grey { background-color: snow; }
 
 .people a { border-bottom: none !important; }
-.btn-cta a { border-bottom: .25rem solid #e25f7d !important; }
+.btn-cta a { border-bottom: .25rem solid var(--pink-2) !important; }
 .btn-cta a:hover, .people a:hover { box-shadow: none !important; }
 
 /* round avatar image, used on front page and talk pages */
@@ -149,3 +149,21 @@ footer p {
     color: white;
   }
 }
+
+.ticket-cta {
+  display: block;
+  padding: 1em 2em;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--white);
+  background-color: var(--pink-2);
+  border-radius: 0.5em;
+  max-width: 12em;
+  margin: 0 auto;
+  text-align: center;
+  text-decoration: none;
+  &:hover {
+    background-color: var(--pink-5);
+    box-shadow: 0 0 0.5em var(--pink-6);
+  }
+}

css/colors.css

@@ -12,7 +12,6 @@
   --white: hsl(347, 100%, 97%);
 }
 
-
 /* Pink base  */
 .pink { color: var(--pink); }
 .bg-pink { background-color: var(--pink-6); }

css/typo.css

@@ -23,23 +23,23 @@ p {
 }
 
 .accent {
-    color: #e25f7d;
+    color: var(--pink-2);
 }
 
 .inline-link {
     font-weight: bold;
-    color: #180f2e;    
+    color: #180f2e;
     text-decoration: none;
     border-bottom: 2px solid #180f2e;
 }
 
 .inline-link:hover {
-    color: #e25f7d;
+    color: var(--pink-2);
 }
 
 .inline-link-inverted {
     font-weight: bold;
-    color: white;    
+    color: white;
     text-decoration: none;
     border-bottom: 2px solid white;
 }
@@ -52,7 +52,7 @@ p {
 }
 
 .inline-link-inverted:hover {
-    color: #e25f7d;
+    color: var(--pink-2);
 }
 
 .markdown a:hover, .hoc-link:hover {
@@ -73,7 +73,7 @@ p {
     color: white;
     padding: 1rem 2rem;
     border-radius: .5rem;
-    background-color: #e25f7d;
+    background-color: var(--pink-2);
     text-align: center;
     text-decoration: none;
     width: auto;
@@ -82,4 +82,4 @@ p {
 
 .button-link:hover {
     background-color: #91344c;
-}
+}

index.html

@@ -28,9 +28,7 @@ <h2 class="accent">September 18 & 19, Leuven, Belgium</h2>
     workshop&#41;. Both are a few minutes walk away from the Leuven train
     station.
   </p>
-  <p class="button-link-wrapper">
-    <a class="button-link" target="_blank" href="https://ti.to/heart-of-clojure/2024">Get your Ticket</a>
-  </p>
+  {% include ticket_cta.html %}
   <p>Or find out if you are eligible for a <a class="inline-link" href="#diversity-ticket">Diversity ticket</a>.</p>
 </section>
 
@@ -43,7 +41,7 @@ <h2>Call for Papers ...is closed!</h2>
 </section>
 {% endif %}
 
-{% if site.sections.speakers %}
+{% if site.sections.hosts %}
 <section id="hosts">
   <h2>Hosts</h2>
   <ul>
@@ -98,6 +96,8 @@ <h3><a href={{talk.url}}>{{speaker.name}}</a></h3>
 </section>
 {% endif %}
 
+{% include ticket_cta.html %}
+
 <section id="newsletter" class="newsletter">
   <div class="content-wrapper">
     <form onsubmit="subscribe(event)" id="signup-form">
@@ -162,6 +162,8 @@ <h2>Volunteer</h2>
   </div>
 </section>
 
+{% include ticket_cta.html %}
+
 <section id="sponsors" class="sponsors">
   <div class="content-wrapper">
     <h2>Our Sponsors</h2>