phlaym/moshing-mammut
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases 8 Activity

Improve layout for smaller devices

Browse Source
This commit is contained in:
Max Nuding
2023-04-11 15:49:50 +02:00
parent e3c15be31c
commit 268128c2f4
3 changed files with 217 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/lib/components/FooterComponent.svelte
View File

@ -4,24 +4,28 @@
</script>
<div class="footer">
<div>
<span>Made with &#x1F918; by&nbsp;</span>
<a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a>
</div>
|
<div>
<a href="https://phlaym.net/git/phlaym/moshing-mammut">
<img alt="Git branch" src={git} class="icon" />
Source Code
</a>
</div>
|
<div>
<a href="/feed.xml">
<img alt="RSS" src={rss} class="icon" />
RSS Feed
</a>
</div>
<div>
<span class="label"
>Made<span class="secretIngredient">&nbsp;with &#x1F918;</span>&nbsp;by&nbsp;</span
>
<a href="https://metalhead.club/@aymm" rel="me"
>@aymm<span class="mastodonInstance">@metalhead.club</span></a
>
</div>
|
<div>
<a href="https://phlaym.net/git/phlaym/moshing-mammut">
<img alt="Git branch" src={git} class="icon" />
<span class="label">Source Code</span>
</a>
</div>
|
<div>
<a href="/feed.xml">
<img alt="RSS" src={rss} class="icon" />
<span class="label">RSS<span class="feedSuffix">&nbsp;Feed</span></span>
</a>
</div>
</div>
<style>
@ -53,4 +57,27 @@
background-color: var(--color-grey-translucent);
}
}
</style>
@media only screen and (max-device-width: 620px) {
.mastodonInstance,
.feedSuffix {
display: none;
}
.footer {
justify-content: center;
}
}
@media only screen and (max-device-width: 430px) {
.mastodonInstance,
.feedSuffix,
.secretIngredient {
display: none;
}
}
@media only screen and (max-device-width: 370px) {
.label {
display: none;
}
}
</style>