mirror of https://github.com/Rooba/MapleSVG.git
166 lines
3.2 KiB
Django/Jinja
166 lines
3.2 KiB
Django/Jinja
{% extends 'pages/head.j2' %}
|
|
{% block style %}
|
|
<style>
|
|
{% block css_body %}
|
|
body {
|
|
background-color: rgba(21, 20, 20, 0.98);
|
|
box-shadow: inset 0px 0px 5px 1px #000000b8;
|
|
height: 100%;
|
|
padding: 1em;
|
|
margin: 0px;
|
|
text-align: revert;
|
|
display: grid;
|
|
}
|
|
{% endblock css_body %}
|
|
|
|
{% block css_top %}
|
|
.top {
|
|
display: grid;
|
|
grid-template: [link-0] "link-0 link-2 link-4" 30px [link-4-end] / 33% 33% 33%;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
}
|
|
{% endblock css_top %}
|
|
|
|
{% block extras %}
|
|
.browse {
|
|
display: grid;
|
|
width: 50%;
|
|
}
|
|
|
|
.mob {
|
|
display: grid;
|
|
grid-template: [link-0-start] "link-0 link-1 link-2 link-3 link-4" [link-4-end] / 19% 19% 19% 19% 19%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.link {
|
|
text-decoration: none;
|
|
color: #ac875f;
|
|
}
|
|
|
|
.top > a.link {
|
|
display: grid;
|
|
}
|
|
|
|
.link:hover {
|
|
color: #f4d0a1;
|
|
}
|
|
|
|
.top .link-0 {
|
|
display: grid;
|
|
grid-area: link-0;
|
|
}
|
|
|
|
.top .link-4 {
|
|
grid-area: link-4;
|
|
display: grid;
|
|
}
|
|
|
|
.link .prev-link {
|
|
display: inline-flex;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.link .next-link {
|
|
grid-area: next-link;
|
|
grid-column: 7;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.link .current-link {
|
|
grid-area: current-link;
|
|
display: inline-flex;
|
|
grid-column: 6;
|
|
}
|
|
|
|
|
|
.link-2 a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link-2 {
|
|
grid-template: [prev-link-start] "prev-link current-link next-link" [next-link-end] / 10% 10% 10% 10% 10% 15% 10% 10% 10% 10% 10%;
|
|
display: grid;
|
|
grid-area: link-2;
|
|
width: 20em;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mob-container {
|
|
display: grid;
|
|
}
|
|
|
|
.mob-header {
|
|
|
|
}
|
|
|
|
.mob-title {
|
|
justify-self: center;
|
|
}
|
|
|
|
|
|
.mob-title-no-data {
|
|
color: #C1857F;
|
|
}
|
|
|
|
.stance-buttons {
|
|
display: flow-root;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
margin: 5px 0em 1em;
|
|
width: revert;
|
|
background-color: #134202;
|
|
}
|
|
|
|
.stance-buttons {
|
|
margin: 5px 0em 1em;
|
|
display: inline-block;
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.stance {
|
|
text-decoration: none;
|
|
grid-row: 1;
|
|
color: #fffcd3;
|
|
background-color: #212d25;
|
|
border-bottom: 1px solid #212d25;
|
|
text-align-last: center;
|
|
font-family: monospace, consolas;
|
|
font-variant-caps: all-small-caps;
|
|
text-transform: capitalize;
|
|
box-shadow: inset 0px 0px 3px 1px #1a0505;
|
|
border-right: 1px solid black;
|
|
display: table-cell;
|
|
break-after: left;
|
|
line-break: strict;
|
|
width: 35em;
|
|
font-size: 1em;
|
|
}
|
|
html {
|
|
font-variant: all-petite-caps !important;
|
|
font-family: consolas, monospace !important;
|
|
}
|
|
{% endblock extras %}
|
|
</style>
|
|
{% endblock style %}
|
|
{% block content %}
|
|
<div class="mob">
|
|
{% for mob_id, mob in mobs.items() -%}
|
|
<div class="mob-container">
|
|
{% if mob.stance %}
|
|
<a class="mob-title link" href="/mob/{{ mob.id }}">{{ mob.name }}</a>
|
|
<div class="stance-buttons">
|
|
{% for stance, frames in mob.stance.items() %}
|
|
<a class="stance" href="/mob/{{ mob.id }}/{{ stance }}" title="{{ stance }}">{{ stance[0] }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<a class="mob-title mob-main-link" href="https://maplestory.io/api/GMS/233/mob/{{ mob.id }}/">{{ mob.name }} (No data available)</a>
|
|
{% endif %}
|
|
</div>
|
|
{%- endfor %}
|
|
</div>
|
|
{% endblock content %}
|