Jimbo/landing-page
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix page scrolling on mobile maybe

Browse source
This commit is contained in:
Jimbo 2024-09-05 03:57:01 -04:00
parent c8d6944527
commit e63e1eb708
3 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/transmission.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 216 KiB

10
index.html
View file

@ -114,6 +114,16 @@
</div> </div>
</button> </button>
</a> </a>
<a href="https://torrent.jimbosfiles.com">
<button class="custom-button torrent">
<div class="color-part"></div>
<div class="button-content">
<img class="button-image" src="./images/transmission.png" alt="Button Logo" style="width: 5em; height: auto;">
<span class="button-text">Torrents</span>
<span class="button-subtext">ISOs and Rupert</span>
</div>
</button>
</a>
<a href="https://mail.jimbosfiles.com/"> <a href="https://mail.jimbosfiles.com/">
<button class="custom-button mail"> <button class="custom-button mail">
<div class="color-part"></div> <div class="color-part"></div>

21
styles.css
View file

@ -11,13 +11,13 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; /* Center the button container vertically */ justify-content: flex-start;
margin: 0; margin: 0;
overflow-x: hidden; background: #20256E; /* Apply background color to body */
height: 100vh; /* Ensure body height fits within viewport */
background: #20256e;
color: white; color: white;
position: relative; /* Relative positioning for footer */ position: relative;
overflow-x: hidden;
min-height: 100%;
} }
header { header {
@ -88,6 +88,7 @@ header img {
.element .color-part { background-color: #4ca68c; } .element .color-part { background-color: #4ca68c; }
.mastodon .color-part { background-color: #776bc9; } .mastodon .color-part { background-color: #776bc9; }
.lemmy .color-part { background-color: #183038; } .lemmy .color-part { background-color: #183038; }
.torrent .color-part { background-color: #bf3b51; }
.mail .color-part { background-color: #0777B6; } .mail .color-part { background-color: #0777B6; }
.color-part { .color-part {
@ -157,12 +158,16 @@ header img {
} }
body { body {
min-height: 100vh; /* Ensure body covers at least full viewport height */ min-height: 100vh; /* Ensure minimum height covers full viewport */
padding-bottom: 13em; /* Add space for footer */ padding-top: 1em; /* Add space for footer */
padding-top: 4em; /* Add space for footer */ justify-content: flex-start; /* Ensure content starts from the top */
overflow-y: auto; /* Allow vertical scrolling when content exceeds viewport */
} }
.button-container { .button-container {
flex-direction: column; /* Stack buttons vertically */
max-width: 100%; /* Allow the container to fit within viewport width */
gap: 1em; /* Adjust gap for mobile */ gap: 1em; /* Adjust gap for mobile */
padding-bottom: 5em;
} }
} }