akemi/noway.moe
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Home: make ipad responsive

Browse source
This commit is contained in:
Akemi Izuko 2024-01-01 18:55:44 -07:00
parent 4d8b9d4ed9
commit bbf850d5c7
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
1 changed files with 65 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/pages/index.astro
View file

@ -30,8 +30,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
you (>ω^)! you (>ω^)!
</p> </p>
<img id="pfp" src="/images/home/akemi-silly-transparent.avif" /> <img id="pfp" src="/images/home/akemi-silly-transparent.avif" />
<div class="footer"><Footer /></div>
</main> </main>
<Footer />
</body> </body>
</html> </html>
@ -40,14 +40,31 @@ main a {
color: var(--accent-color); color: var(--accent-color);
} }
main .footer {
margin-top: -30px;
grid-row: 7 / 8;
grid-column: 1 / -1;
}
@media (min-width: 760px) { @media (min-width: 760px) {
main { main {
display: grid; display: grid;
grid-template-columns: 1fr auto 20px 50%; grid-template-columns: 1fr auto 20px 50%;
grid-template-rows: repeat(6, 1fr); grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr auto;
width: 100%; width: 100%;
min-height: 70vh; min-height: 70vh;
overflow: hidden; overflow: hidden;
padding: 0 20px;
}
@media (max-width: 900px) {
main {
grid-template-columns: 1fr auto 0px 40%;
grid-template-rows: 1fr 1fr 1fr 1fr auto;
}
main .footer {
grid-row: 5 / 6;
}
} }
#name-title { #name-title {
font-family: var(--font-title); font-family: var(--font-title);
@ -59,16 +76,22 @@ main a {
grid-row-end: 4; grid-row-end: 4;
align-self: center; align-self: center;
} }
@media (min-width: 1300px) { @media (min-width: 1350px) {
#name-title { #name-title {
font-size: 96px; font-size: 96px;
} }
} }
@media not (min-width: 1300px) { @media not (min-width: 1350px) {
#name-title { #name-title {
font-size: 64px; font-size: 64px;
} }
} }
@media (max-width: 900px) {
#name-title {
grid-row-start: 1;
grid-row-end: 3;
}
}
#title-circle { #title-circle {
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
@ -76,24 +99,50 @@ main a {
height: 200px; height: 200px;
box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1); box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
/* Grid styles */ /* Grid styles */
grid-column: 1 / 2;
grid-row: 2 / 4; grid-row: 2 / 4;
justify-self: right; /*margin-right: -120px;*/
margin-right: -120px;
margin-top: -10px; margin-top: -10px;
} }
@media (min-width: 1350px) {
#title-circle {
justify-self: right;
margin-right: -120px;
grid-column: 1 / 2;
}
}
@media not (min-width: 1350px) {
#title-circle {
justify-self: center;
margin-right: 0;
grid-column: 1 / 3;
margin-left: -120px;
margin-top: -30px;
}
}
@media (max-width: 900px) {
#title-circle {
grid-row: 1 / 3;
}
}
#about { #about {
margin-top: 20px;
max-width: 520px; max-width: 520px;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.8; line-height: 1.8;
/* Grid styles */ /* Grid styles */
grid-column-start: 2; grid-column-start: 2;
grid-row-start: 4; grid-row: 4 / 7;
grid-row-end: 7;
justify-self: right; justify-self: right;
align-self: start; align-self: start;
} }
@media (max-width: 900px) {
#about {
grid-row: 3 / 6;
font-size: 1rem;
padding: 1rem 2rem;
}
}
#big-circle { #big-circle {
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
@ -121,6 +170,13 @@ main a {
align-self: bottom; align-self: bottom;
margin-right: -15%; margin-right: -15%;
} }
/*
@media (max-width: 900px) {
#pfp {
margin-top: 25%;
}
}
*/
} }
@media not (min-width: 760px) { @media not (min-width: 760px) {
main { main {