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:
</p>
<div class="imgwrapper">
<img
<img class="desktop"
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png"
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>
</section>
<section class="section">
@ -25,11 +26,12 @@ import "../styles/pages/how-do-i.scss";
/>Example:
</p>
<div class="imgwrapper">
<img
<img class="desktop"
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.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>
<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>
</section>
<section class="footernotesection">

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

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