Compare commits

..

No commits in common. "f6315eb6a9251cf30a3c48bdc34437a996068802" and "11ecf0677ff3e4c47b593d23ca28839ca7dad9fa" have entirely different histories.

2 changed files with 1 additions and 213 deletions

View file

@ -14,9 +14,7 @@ import { SITE_TITLE } from '../consts';
</div>
<div class="fun-quote text-2xl">ReLUwU activated</div>
<div class="social-links flex space-x-8 items-center">
<HeaderLink href="https://git.mami2.moe/akemi?tab=activity">
Git
</HeaderLink>
<HeaderLink href="https://github.com/aizuko">GitHub</HeaderLink>
<HeaderLink href="/contact">Contact</HeaderLink>
<HeaderLink
class="inverted-button"

View file

@ -1,210 +0,0 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body style="display: flex" class="flex-col items-center">
<Header class="grow" title={SITE_TITLE} />
<main>
<div id="big-circle-wrapper" >
<div id="big-circle"></div>
</div>
<div id="title-circle"></div>
<h1 id="name-title">
Fate 404
</h1>
<p id="about">
This timeline's corrupted. Let's rewind
<a href="javascript:history.back()">back</a> to our
<a href="/">beginning</a>.
</p>
<img id="pfp" src="/images/home/akemi-gasp-transparent.avif" />
<div class="footer"><Footer /></div>
</main>
</body>
</html>
<style>
/*****************************************
* Global styles
****************************************/
body {
font-family: var(--font-sans);
}
main a {
color: var(--accent-color);
}
main .footer {
margin-top: -30px;
grid-row: 7 / 8;
grid-column: 1 / -1;
}
/*****************************************
* Desktop, iPad horizontal and vertical
****************************************/
@media (min-width: 760px) {
main {
display: grid;
grid-template-columns: 1fr auto 180px calc(50% - 130px);
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr auto;
width: 100%;
min-height: 70vh;
overflow: hidden;
padding: 0 20px;
}
#name-title {
font-family: var(--font-title);
text-align: left;
/* Grid styles */
grid-column-start: 4;
grid-column-end: 5;
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;
padding-left: 4rem;
/* Grid styles */
grid-column-start: 4;
grid-row: 4 / 7;
justify-self: left;
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;
position: absolute;
top: -60%;
left: -60%;
}
#pfp {
width: 600px;
/* Grid styles */
grid-column: 1 / 3;
grid-row: 1 / 7;
justify-self: left;
align-self: bottom;
margin-left: -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: 3 / 4;
}
}
/*****************************************
* Shift over big circle for iPad
****************************************/
@media (max-width: 1350px) and (min-width: 901px) {
#big-circle-wrapper {
width: calc(100% - 80%);
left: -80%;
}
}
}
/*****************************************
* Phones
*
* Completely changes the layout to flex
****************************************/
@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>