Compare commits

..

No commits in common. "fb291aa9a3973fb2a6f934b54bfd2b1a22550349" and "4d8b9d4ed978e2922199f4fb15f2cd025bea4566" have entirely different histories.

View file

@ -30,182 +30,117 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
you (>ω^)!
</p>
<img id="pfp" src="/images/home/akemi-silly-transparent.avif" />
<div class="footer"><Footer /></div>
</main>
<Footer />
</body>
</html>
<style>
/*****************************************
* Global styles
****************************************/
main a {
color: var(--accent-color);
}
main .footer {
margin-top: -30px;
grid-row: 7 / 8;
grid-column: 1 / -1;
}
main a {
color: var(--accent-color);
}
/*****************************************
* Desktop, iPad horizontal and vertical
****************************************/
@media (min-width: 760px) {
main {
display: grid;
grid-template-columns: 1fr auto 20px 50%;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr auto;
width: 100%;
min-height: 70vh;
overflow: hidden;
padding: 0 20px;
}
@media (min-width: 760px) {
main {
display: grid;
grid-template-columns: 1fr auto 20px 50%;
grid-template-rows: repeat(6, 1fr);
width: 100%;
min-height: 70vh;
overflow: hidden;
}
#name-title {
font-family: var(--font-title);
text-align: right;
/* Grid styles */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
align-self: center;
}
@media (min-width: 1300px) {
#name-title {
font-family: var(--font-title);
text-align: right;
/* Grid styles */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
align-self: center;
}
#title-circle {
border-radius: 50%;
background-color: white;
width: 200px;
height: 200px;
box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
/* Grid styles */
grid-row: 2 / 4;
margin-top: -10px;
align-self: center;
}
#about {
margin-top: 20px;
max-width: 520px;
font-family: var(--font-sans);
font-size: 1.2rem;
line-height: 1.8;
/* Grid styles */
grid-column-start: 2;
grid-row: 4 / 7;
justify-self: right;
align-self: start;
}
#big-circle {
border-radius: 50%;
background-color: white;
width: 1500px;
height: 1500px;
box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
}
#big-circle-wrapper {
width: calc(100% - 60%);
height: 160vh;
z-index: -1;
overflow: hidden;
position: absolute;
top: -60%;
left: 60%;
}
#pfp {
width: 600px;
/* Grid styles */
grid-column: 4 / 5;
grid-row: 1 / 7;
justify-self: right;
align-self: bottom;
margin-right: -15%;
}
/*****************************************
* iPad vertical
****************************************/
@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 {
grid-row-start: 1;
grid-row-end: 3;
}
#title-circle {
grid-row: 1 / 3;
}
#about {
grid-row: 3 / 6;
font-size: 1rem;
padding: 1rem 2rem;
}
}
/*****************************************
* iPad horizontal
****************************************/
@media not (min-width: 1350px) {
#name-title {
font-size: 64px;
}
#title-circle {
justify-self: center;
margin-right: 0;
grid-column: 1 / 3;
margin-left: -120px;
margin-top: -30px;
}
}
/*****************************************
* Desktop
****************************************/
@media (min-width: 1350px) {
#name-title {
font-size: 96px;
}
#title-circle {
justify-self: right;
margin-right: -120px;
grid-column: 1 / 2;
}
}
/*****************************************
* Shift over big circle for iPad
****************************************/
@media (max-width: 1350px) and (min-width: 901px) {
#big-circle-wrapper {
width: calc(100% - 56%);
left: 56%;
}
font-size: 96px;
}
}
/*****************************************
* Phones
*
* Completely changes the layout to flex
****************************************/
@media not (min-width: 760px) {
main {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
@media not (min-width: 1300px) {
#name-title {
font-family: var(--font-title);
font-size: 48px;
}
#about {
margin: 10px;
}
#pfp {
max-width: 300px;
border: 0;
padding: 0;
margin: 0;
font-size: 64px;
}
}
#title-circle {
border-radius: 50%;
background-color: white;
width: 200px;
height: 200px;
box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
/* Grid styles */
grid-column: 1 / 2;
grid-row: 2 / 4;
justify-self: right;
margin-right: -120px;
margin-top: -10px;
}
#about {
max-width: 520px;
font-family: var(--font-sans);
font-size: 1.2rem;
line-height: 1.8;
/* Grid styles */
grid-column-start: 2;
grid-row-start: 4;
grid-row-end: 7;
justify-self: right;
align-self: start;
}
#big-circle {
border-radius: 50%;
background-color: white;
width: 1500px;
height: 1500px;
box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
}
#big-circle-wrapper {
width: calc(100% - 60%);
height: 160vh;
z-index: -1;
overflow: hidden;
position: absolute;
top: -60%;
left: 60%;
}
#pfp {
width: 600px;
/* Grid styles */
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 7;
justify-self: right;
align-self: bottom;
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>