44 lines
2.2 KiB
Plaintext
44 lines
2.2 KiB
Plaintext
<div id="wedding-party" class="w-screen text-slate-900 lg:my-8 bg-[<%= color %>] lg:bg-[#fdfefe]">
|
|
<div class="container mx-auto bg-[<%= color %>] lg:rounded-2xl pt-4 lg:mt-4 lg:pb-2 lg:shadow-2xl lg:mb-4">
|
|
<div class="w-fit mx-auto">
|
|
<h1 class="text-5xl rogue-script lg:text-7xl">Wedding Party</h1>
|
|
</div>
|
|
<!--- Wedding party for large screens --->
|
|
<% @wedding_party.each_slice(3) do |r| %>
|
|
<div class="max-lg:hidden flex flex-row py-4 px-4">
|
|
<% r.each do |person| %>
|
|
<div id="wp-card" class="w-1/3">
|
|
<% if person.image %>
|
|
<img src="<%= image_path(person.name.downcase + '.jpg') %>" class="w-80 h-80 mx-auto rounded-full aspect-square object-cover shadow-xl <%= person.extra_attrs || '' %>">
|
|
<% else %>
|
|
<div class="bg-red-500 w-80 h-80 mx-auto rounded-full aspect-square object-cover"></div>
|
|
<% end %>
|
|
<div id="wp-name" class="w-fit mx-auto text-xl pt-2"><%= person.name %></div>
|
|
<div id="wp-role" class="w-fit mx-auto text-md text-slate-600"><%= person.role %></div>
|
|
<div id="wp-relation" class="w-fit mx-auto text-md pb-2 text-slate-600"><%= person.relationship %></div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<!--- End wedding party for large screens ---->
|
|
<!--- Wedding party for small screens --->
|
|
<% @wedding_party.each_slice(1) do |r| %>
|
|
<div class="lg:hidden flex py-4 px-2">
|
|
<% r.each do |person| %>
|
|
<div id="wp-card" class="w-fit px-2 mx-auto">
|
|
<% if person.image %>
|
|
<img src="<%= image_path(person.name.downcase + '.jpg') %>" class="mx-auto w-60 h-60 md:w-80 md:h-80 rounded-full aspect-square object-cover shadow-xl <%= person.extra_attrs || '' %>">
|
|
<% else %>
|
|
<div class="bg-red-500 w-60 h-60 md:w-80 md:h-80 mx-auto rounded-full aspect-square object-cover"></div>
|
|
<% end %>
|
|
<div id="wp-name" class="w-fit mx-auto text-xl pt-2"><%= person.name %></div>
|
|
<div id="wp-role" class="w-fit mx-auto text-md text-slate-600"><%= person.role %></div>
|
|
<div id="wp-relation" class="w-fit mx-auto text-md pb-2 text-slate-600"><%= person.relationship %></div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<!---------End WP for small screens --->
|
|
</div>
|
|
</div>
|