mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-15 11:48:21 +01:00
71 lines
1.5 KiB
Text
71 lines
1.5 KiB
Text
|
<div class="card">
|
||
|
|
<div class="card-title">
|
||
|
|
<div class="card-icon" style="background: <%= icon_background %>;">
|
||
|
|
<% if(icon="none"){ %><% } else{ %> <%- icon %><% } %>
|
||
|
|
</div>
|
||
|
|
<h2><%= title %></h2>
|
||
|
|
</div>
|
||
|
|
<p><%= description %></p>
|
||
|
|
<% if (actions=="true") { %>
|
||
|
|
<div class="card-actions">
|
||
|
|
<% if (has_secondary_action=="true") { %>
|
||
|
|
<a class="card-secondary" href="<%= secondary_link %>"><%- secondary_icon %> <%= secondary_text %></a>
|
||
|
|
<% } %>
|
||
|
|
<a class="card-primary" href="<%= primary_link %>"><%- primary_icon %> <%= primary_text %></a>
|
||
|
|
</div>
|
||
|
|
<% }%>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.card {
|
||
|
|
padding: 24px;
|
||
|
|
}
|
||
|
|
.card-title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.card-title h2 {
|
||
|
|
font-family: "PokeTube flex";
|
||
|
|
font-stretch: ultra-expanded;
|
||
|
|
font-weight: 1000;
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
.card-title svg {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
.card-actions {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: right;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
.card-actions a {
|
||
|
|
color: white;
|
||
|
|
border: 2px white solid;
|
||
|
|
border-radius: 3rem;
|
||
|
|
padding: 12px 24px 12px 12px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.card-actions a:hover {
|
||
|
|
filter: brightness(0.8);
|
||
|
|
text-decoration: nones;
|
||
|
|
}
|
||
|
|
.card-actions svg {
|
||
|
|
width: 24px !important;
|
||
|
|
height: 24px !important;
|
||
|
|
margin-right: 6px;
|
||
|
|
}
|
||
|
|
.card-actions .card-primary {
|
||
|
|
background: white;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
.card-actions .card-primary svg {
|
||
|
|
fill: black;
|
||
|
|
}
|
||
|
|
.card-actions .card-secondary svg {
|
||
|
|
fill: white;
|
||
|
|
}
|
||
|
|
</style>
|