mobile optimization

This commit is contained in:
elh 2024-07-05 21:08:33 -04:00
parent bf4aef54af
commit df5bd21969
5 changed files with 22 additions and 21 deletions

BIN
public/koi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/soda.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View file

@ -9,8 +9,8 @@ import FriendButton from "../components/Friendbutton.astro"
<FriendButton website="https://tiramisu.gay/" image=" https://dp.nea.moe/avatar/1215758862444007465.png" title="Tiramisu"/> <FriendButton website="https://tiramisu.gay/" image=" https://dp.nea.moe/avatar/1215758862444007465.png" title="Tiramisu"/>
<FriendButton website="Https://vendicated.dev/" image=" https://dp.nea.moe/avatar/343383572805058560.png" title="Vee"/> <FriendButton website="Https://vendicated.dev/" image=" https://dp.nea.moe/avatar/343383572805058560.png" title="Vee"/>
<FriendButton website="https://zoey-on-github.github.io/" image=" https://dp.nea.moe/avatar/696593747353534544.png" title="Julie"/> <FriendButton website="https://zoey-on-github.github.io/" image=" https://dp.nea.moe/avatar/696593747353534544.png" title="Julie"/>
<FriendButton website="https://alphexo.dev/" image=" https://dp.nea.moe/avatar/477497542205243392.png" title="Alphexo"/> <FriendButton website="https://alphexo.dev/" image="koi.png" title="Alphexo"/>
<FriendButton website="https://viggy.moe" image=" https://dp.nea.moe/avatar/1012800881474949221.png" title="Creamsoda"/> <FriendButton website="https://viggy.moe" image="/soda.webp" title="Creamsoda"/>
<FriendButton website="https://exhq.dev" image=" https://dp.nea.moe/avatar/712639419785412668.png" title="Echo"/> <FriendButton website="https://exhq.dev" image=" https://dp.nea.moe/avatar/712639419785412668.png" title="Echo"/>
<FriendButton website=" https://instellate.xyz/" image=" https://dp.nea.moe/avatar/565197576026980365.png" title="Instellate"/> <FriendButton website=" https://instellate.xyz/" image=" https://dp.nea.moe/avatar/565197576026980365.png" title="Instellate"/>
<FriendButton website=" https://blahai.gay/" image=" https://dp.nea.moe/avatar/381494697073573899.png" title="Blahai"/> <FriendButton website=" https://blahai.gay/" image=" https://dp.nea.moe/avatar/381494697073573899.png" title="Blahai"/>

View file

@ -6,8 +6,8 @@ import Socialsbutton from "../components/socialsbutton.astro"
Discord Discord
<a><img width=40rem class="socialimage" title="" src="/discord.svg"></a> <a><img width=40rem class="socialimage" title="" src="/discord.svg"></a>
<span class="discordtext"> <span class="Button">
elh.gay <Socialsbutton link="https://discord.com/users/334833943838720000" text="elh.gay" />
</span> </span>
</div> </div>
<div class="social"> <div class="social">
@ -58,9 +58,5 @@ margin-bottom: 1rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content:center; } justify-content:center; }
.discordtext {
margin:0.5rem;
font-size:large;
}
</style> </style>

View file

@ -80,7 +80,7 @@ font-size: 2rem
.nav-links { .nav-links {
width: 50%; width: 50%;
top: 5rem; top: 5rem;
left: 48px; left: 20px;
background-color: #ff9776; background-color: #ff9776;
display: none; display: none;
margin: 0; margin: 0;
@ -89,20 +89,25 @@ font-size: 2rem
.nav-links a { .nav-links a {
display: block; display: block;
text-align: center; text-align: center;
padding: 10px 0; padding: 15px 20px;
text-decoration: none; text-decoration: none;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
@media only screen and (max-width: 768px){
.nav-links a {
font-size: 1rem;
padding: 10px 10px;
}
}
.expanded { .expanded {
display: unset; display: unset;
} }
@media screen and (min-width: 636px) {
.nav-links { .nav-links {
margin-left: 5em; margin-left: 5em;
display: block; display: block;
@ -110,13 +115,7 @@ font-size: 2rem
width: auto; width: auto;
background: none; background: none;
} }
.nav-links a {
display: inline-block;
padding: 15px 20px;
}
}
.navbutton { .navbutton {
border-radius: 30%; border-radius: 30%;
@ -126,7 +125,7 @@ font-size: 2rem
.navbutton:hover, .navbutton:active .navbutton:hover, .navbutton:active
{ {
background-color: darkorange; background-color: darkorange;
border-radius: 30%;
} }
.fbutton { .fbutton {
border-radius: 100px; border-radius: 100px;
@ -161,3 +160,9 @@ padding: 2rem;
padding: .75rem ; padding: .75rem ;
} }
} }
@media only screen and (max-width: 768px){
.navbutton{
border-radius: 20rem;
}
}