Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

feat: made mobile screenshots appear on the mobile how-do-i page

Browse source
This commit is contained in:
moonleay 2023-12-06 17:26:49 +01:00
parent 5fa8ce75eb
commit 918b28c919
Signed by: moonleay
GPG key ID: 82667543CCD715FB
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/pages/how-do-i.astro
View file

@ -12,10 +12,11 @@ import "../styles/pages/how-do-i.scss";
command.<br />Example: command.<br />Example:
</p> </p>
<div class="imgwrapper"> <div class="imgwrapper">
<img <img class="desktop"
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png" src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png"
alt="A screenshot of the example in Discord."/> alt="A screenshot of the example in Discord."/>
<p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p> <img class="mobile" src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexamplemobile.png" alt="A screenshot of the example in Discord."/>
<!--<p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p>-->
</div> </div>
</section> </section>
<section class="section"> <section class="section">
@ -25,11 +26,12 @@ import "../styles/pages/how-do-i.scss";
/>Example: />Example:
</p> </p>
<div class="imgwrapper"> <div class="imgwrapper">
<img <img class="desktop"
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png" src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png"
alt="A screenshot of the example in Discord." alt="A screenshot of the example in Discord."
/> />
<p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p> <img class="mobile" src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexamplemobile.png" alt="A screenshot of the example in Discord."/>
<!--<p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p>-->
</div> </div>
</section> </section>
<section class="footernotesection"> <section class="footernotesection">

10
src/styles/pages/how-do-i.scss
View file

@ -18,21 +18,23 @@
margin: auto; margin: auto;
text-align: center; text-align: center;
img { .desktop {
display: none; display: none;
} }
p, code { .mobile {
display: flex; display: flex;
border-radius: 5px;
max-width: 100%;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
img { .desktop {
display: flex; display: flex;
border-radius: 5px; border-radius: 5px;
max-width: 100%; max-width: 100%;
} }
p, code { .mobile {
display: none; display: none;
} }
} }