effie/eorzea-songbook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixes the credit page for mobile

Browse Source
This commit is contained in:
Effie 2023-07-15 00:11:59 +10:00
parent d70b2005b5
commit 3d93f95bef
2 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
static/style.css
View File

@ -753,15 +753,17 @@ footer{
.credit-box{ .credit-box{
display: flex; flex-direction: column; display: flex; flex-direction: column;
background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50)); background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50));
width: 48rem; max-width: 48rem;
margin: auto; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: clamp(0rem, calc(16vw - 8rem), 2.4rem);
border-style: outset; border-color: var(--thick-border); border-style: outset; border-color: var(--thick-border);
padding-left: 1.2rem; padding-right: 1.2rem; padding-bottom: 1.2rem;
} }
.credit-text{ .credit-text{
margin: 1.2rem; margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem;
display: flex; justify-content: space-between;
color: lch(90% 25 85); color: lch(90% 25 85);
max-width: 100vw;
margin-top: 1.2rem;
} }
.credit-text a{ .credit-text a{
@ -769,8 +771,25 @@ footer{
color: lch(90% 25 85); color: lch(90% 25 85);
} }
.credit-dev{
min-width: fit-content;
flex-grow: 1;
}
.credit-dev div{
margin: auto;
max-width: fit-content;
}
.credit-pic{
flex-shrink: 1; flex-grow: 1;
flex-basis: 24rem;
}
.credit-text img{ .credit-text img{
height: 14.4rem; display: block;
margin: auto;
max-width: 100%;
border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem; border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
} }

7
templates/credits.jinja
View File

@ -6,6 +6,7 @@
<div class="credit-box"> <div class="credit-box">
<div class="credit-text"> <div class="credit-text">
<div class="credit-dev">
<div> <div>
<h3>Developed by Esby</h3> <h3>Developed by Esby</h3>
<ul> <ul>
@ -14,9 +15,9 @@
<li><a href="https://etheirys.masto.host/@esbylion">@esbylion@etheirys.masto.host</a></li> <li><a href="https://etheirys.masto.host/@esbylion">@esbylion@etheirys.masto.host</a></li>
<li><a href="mailto:eorzeasongbook@gmail.com">eorzeasongbook@gmail.com</a></li> <li><a href="mailto:eorzeasongbook@gmail.com">eorzeasongbook@gmail.com</a></li>
</ul> </ul>
</div> </div>
<div> </div>
<div class="credit-pic">
<img src="{{ url_for('static', filename='aristide.png') }}" alt="Song Index" /> <img src="{{ url_for('static', filename='aristide.png') }}" alt="Song Index" />
</div> </div>
</div> </div>
@ -33,4 +34,6 @@
</div> </div>
{% endblock %} {% endblock %}
{% block main2 %}{% endblock %}