Add corner flashes to landing wireframe

open-innovations · Oct 29, 2024 · f2078dc · f2078dc
1 parent 228272b
commit f2078dc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/_includes/css/utils.css b/src/_includes/css/utils.css
@@ -8,9 +8,9 @@
   font-weight: initial;
   display: block;
   color: black;
-  background: #e4ae00;
+  background: var(--color-yellow);
   text-align: center;
-  opacity: 80%;
+  opacity: 90%;
   position: absolute;
   top: 0;
   right: 0;

diff --git a/src/landing/wireframe.vto b/src/landing/wireframe.vto
@@ -3,8 +3,8 @@ title: Home
 layout: templates/page.vto
 ---
 
-<section class="grid regular" style="padding-bottom: 1rem;">
-<h2 class="full-width">Events (topic)</h2>
+<section class="grid regular" style="padding-bottom: 1rem;" data-flash="Topic">
+<h2 class="full-width">Events</h2>
 <div class="block c-yellow centred" style="max-width: min(15rem, 100%); margin-inline: auto;">
 <p style="margin-block:0;">Total scheduled events</p>
 <p style="font-size: 3rem; font-weight: 900;margin-block:0.5rem;">987</p>
@@ -19,8 +19,8 @@ layout: templates/page.vto
 </div>
 </section>
 
-<section class="grid regular block" style="padding-bottom: 1rem;">
-<h2 class="full-width">Engagement (perspective)</h2>
+<section class="grid regular block" style="padding-bottom: 1rem;" data-flash="Perspective">
+<h2 class="full-width">Engagement</h2>
 <div>
 <p>
     The <q>Engagement</q> perspective presents monitoring and evaluation data about engagement
@@ -52,8 +52,8 @@ layout: templates/page.vto
 </div>
 </section>
 
-<section class="grid regular" style="padding-bottom: 1rem;">
-<h2 class="full-width">Volunteers (topic)</h2>
+<section class="grid regular" style="padding-bottom: 1rem;" data-flash="Topic">
+<h2 class="full-width">Volunteers</h2>
 <div class="block">{{
     comp.oi.chart.line({
         config: {
@@ -85,8 +85,8 @@ layout: templates/page.vto
 </div>
 </section>
 
-<section class="grid regular block" style="padding-bottom: 1rem;">
-<h2 class="full-width">Tickets (topic)</h2>
+<section class="grid regular block" style="padding-bottom: 1rem;" data-flash="Topic">
+<h2 class="full-width">Tickets</h2>
 <div>
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio ipsa odit nesciunt harum recusandae nisi alias asperiores consequuntur eaque labore. Reiciendis iure fugiat voluptates eaque tenetur rerum consequatur, perferendis non!</p>
 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro et distinctio harum assumenda labore? Accusantium corporis quas doloremque omnis incidunt placeat, quo explicabo veritatis rem facere enim sit error magnam.</p>