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

Home: make mobile responsive

Browse source
This commit is contained in:
Akemi Izuko 2024-01-01 18:06:50 -07:00
parent bcd362995b
commit 4d8b9d4ed9
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
2 changed files with 43 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Footer.astro
View file

@ -136,6 +136,12 @@ const today = new Date();
margin-top: 60px; margin-top: 60px;
font-size: 16px; font-size: 16px;
} }
@media not (min-width: 760px) {
footer {
margin-top: 0px;
}
}
.social-links { .social-links {
display: flex; display: flex;
justify-content: center; justify-content: center;

48
src/pages/index.astro
View file

@ -36,6 +36,11 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
</html> </html>
<style> <style>
main a {
color: var(--accent-color);
}
@media (min-width: 760px) {
main { main {
display: grid; display: grid;
grid-template-columns: 1fr auto 20px 50%; grid-template-columns: 1fr auto 20px 50%;
@ -44,14 +49,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
min-height: 70vh; min-height: 70vh;
overflow: hidden; overflow: hidden;
} }
main a {
color: var(--accent-color);
}
#name-title { #name-title {
font-family: var(--font-title); font-family: var(--font-title);
font-size: 96px;
text-align: right; text-align: right;
/* Grid styles */ /* Grid styles */
grid-column-start: 2; grid-column-start: 2;
@ -60,7 +59,16 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
grid-row-end: 4; grid-row-end: 4;
align-self: center; align-self: center;
} }
@media (min-width: 1300px) {
#name-title {
font-size: 96px;
}
}
@media not (min-width: 1300px) {
#name-title {
font-size: 64px;
}
}
#title-circle { #title-circle {
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
@ -74,7 +82,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
margin-right: -120px; margin-right: -120px;
margin-top: -10px; margin-top: -10px;
} }
#about { #about {
max-width: 520px; max-width: 520px;
font-family: var(--font-sans); font-family: var(--font-sans);
@ -87,7 +94,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
justify-self: right; justify-self: right;
align-self: start; align-self: start;
} }
#big-circle { #big-circle {
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
@ -95,7 +101,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
height: 1500px; height: 1500px;
box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1); box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
} }
#big-circle-wrapper { #big-circle-wrapper {
width: calc(100% - 60%); width: calc(100% - 60%);
height: 160vh; height: 160vh;
@ -105,7 +110,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
top: -60%; top: -60%;
left: 60%; left: 60%;
} }
#pfp { #pfp {
width: 600px; width: 600px;
/* Grid styles */ /* Grid styles */
@ -117,4 +121,26 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
align-self: bottom; align-self: bottom;
margin-right: -15%; margin-right: -15%;
} }
}
@media not (min-width: 760px) {
main {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
#name-title {
font-family: var(--font-title);
font-size: 48px;
}
#about {
margin: 10px;
}
#pfp {
max-width: 300px;
border: 0;
padding: 0;
margin: 0;
}
}
</style> </style>