initial testing of migration to astro
import stylesheet import favicon and fonts import backgrounds for day and night mode add content from index.php to index.astro
This commit is contained in:
parent
494104cb16
commit
b5a5a141a6
@ -1,9 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.99987 6.00001C10.6646 3.66763 14.4999 6.50001 15.9999 8.50001C17.4999 6.5 21.3351 3.66763 25.9999 6.00001C31.9999 8.99999 30.4998 16.5 25.9998 21C23.8041 23.1958 19.9371 27.0628 17.1087 29.2137C16.4552 29.7106 15.5614 29.6884 14.9226 29.1728C12.3299 27.08 8.16491 23.165 5.99987 21C1.49986 16.5 -0.000126839 8.99999 5.99987 6.00001Z" fill="#F8312F"/>
|
||||
<path d="M15.9998 8.49998V11.5492C17.2695 8.86501 20.4252 5.28051 25.6578 5.83746C21.1482 3.80623 17.463 6.54908 15.9998 8.49998Z" fill="#CA0B4A"/>
|
||||
<path d="M11.9456 5.53691C10.2614 4.95005 8.22499 4.88745 5.99987 6.00001C-0.000126839 8.99999 1.49986 16.5 5.99987 21C8.16491 23.165 12.3299 27.08 14.9226 29.1728C15.5614 29.6884 16.4552 29.7106 17.1087 29.2137C17.3629 29.0204 17.6255 28.8132 17.8945 28.5946C15.0398 26.4524 11.0335 23.0762 8.85898 21.1325C3.90218 16.702 2.24993 9.31788 8.85898 6.36425C9.93279 5.88435 10.9667 5.62654 11.9456 5.53691Z" fill="#CA0B4A"/>
|
||||
<ellipse cx="23.4771" cy="12.5937" rx="2.83554" ry="4.78125" transform="rotate(30 23.4771 12.5937)" fill="#F37366"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 749 B After Width: | Height: | Size: 1.1 KiB |
BIN
public/lato-regular.woff2
Normal file
BIN
public/lato-regular.woff2
Normal file
Binary file not shown.
BIN
public/pacifico.woff2
Normal file
BIN
public/pacifico.woff2
Normal file
Binary file not shown.
BIN
public/sakura.webp
Normal file
BIN
public/sakura.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
public/stardust.png
Normal file
BIN
public/stardust.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
@ -1,16 +1,41 @@
|
||||
---
|
||||
|
||||
import "../styles/global.css";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h1>welcome to emma's place</h1>
|
||||
<p>
|
||||
you're at emma's place. coffee or tea of your choice are waiting for you. my cat baxter loves pets if you'd like to say hello. there's a little bit of eveything that is me here. there's no rush, you can be here for as little or as long as you'd like. you can just take it easy here. if all of this somehow brings you some happiness or makes you feel like maybe there's another human on the other side of your screen then i've done my job. have a look around, don't forget to grab a beverage
|
||||
</p>
|
||||
|
||||
<h3>latest status</h3>
|
||||
<div class="status">
|
||||
<script src="https://status.lol/emma.js?time&link&fluent&pretty" defer></script>
|
||||
</div>
|
||||
|
||||
<h3>news about emma</h3>
|
||||
<ul>
|
||||
<li>
|
||||
12-25-2024 - i'm going to try to get back into the swing of learning javascript. i had taken a little break due to life. but this wonderful home of mine on the web came out of that break so i'm happy about that too!
|
||||
</li>
|
||||
<li>
|
||||
01-16-2025 - i'm focusing on studying and trying to get used to the idea of pursuing interests because i can. i wrote a blog post today about how hard the concept is to me
|
||||
</li>
|
||||
<li>
|
||||
01-23-2025 - i'm working on moving my blog to <a href="https://blog.emmas.place" target="_blank">blog.emmas.place</a> it is hosted on weblog.lol, a part of the <a href="https://omg.lol" target="_blank">omg.lol</a> service
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
376
src/styles/global.css
Normal file
376
src/styles/global.css
Normal file
@ -0,0 +1,376 @@
|
||||
@font-face {
|
||||
font-family: lato-regular;
|
||||
src: url("/lato-regular.woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: pacifico;
|
||||
src: url("/pacifico.woff2");
|
||||
}
|
||||
|
||||
:root {
|
||||
--text-color: #0c0c0c;
|
||||
--background-color: #ffd4de;
|
||||
--body-background-color: #ffcccc;
|
||||
--scroll-gutter: #eb76ff88;
|
||||
--scroll-bar: #ffa8ec88;
|
||||
--link-hover: #ff1493;
|
||||
--link-visited: #8a2be2;
|
||||
--link-color: #4b0082;
|
||||
--border-color: #db7093;
|
||||
--bi-pride-pink-light: #d60270;
|
||||
--bi-pride-purple-light: #9b4f96;
|
||||
--bi-pride-blue-light: #0038a8;
|
||||
--disability-pride-black-light: #595959;
|
||||
--disability-pride-red-light: #cf7280;
|
||||
--disability-pride-yellow-light: #eede77;
|
||||
--disability-pride-white-light: #e8e8e8;
|
||||
--disability-pride-blue-light: #7bc2e0;
|
||||
--disability-pride-green-light: #3bb07d;
|
||||
--trans-pride-blue-light: #5bcefa;
|
||||
--trans-pride-pink-light: #f5a9b8;
|
||||
--trans-pride-white-light: #ffffff;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
background-color: var(--body-background-color);
|
||||
background-image: url("/sakura.webp");
|
||||
display: grid;
|
||||
grid-template-columns: 20vw 60vw;
|
||||
grid-template-rows: 6vh 85vh 6vh;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
figcaption,
|
||||
details {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
main,
|
||||
nav {
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: system-ui;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: var(--background-color);
|
||||
height: 85vh;
|
||||
width: 60vw;
|
||||
padding-left: 2.5rem;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
|
||||
grid-column: 2/3;
|
||||
grid-row: 2/3;
|
||||
align-self: end;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--background-color);
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/3;
|
||||
height: 6vh;
|
||||
width: 80vw;
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom: 10px solid;
|
||||
border-image-slice: 1;
|
||||
border-width: 5px;
|
||||
border-image-source: linear-gradient(
|
||||
to right,
|
||||
var(--bi-pride-pink-light) 0 33%,
|
||||
var(--bi-pride-purple-light) 33% 66%,
|
||||
var(--bi-pride-blue-light) 66%
|
||||
);
|
||||
font-size: 1.4rem;
|
||||
margin-top: 0.43rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--background-color);
|
||||
grid-row: 3/4;
|
||||
grid-column: 1/3;
|
||||
height: 6vh;
|
||||
width: 80vw;
|
||||
border-bottom-left-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-top: 10px solid;
|
||||
border-image-slice: 1;
|
||||
border-width: 5px;
|
||||
border-image-source: linear-gradient(
|
||||
to right,
|
||||
var(--disability-pride-black-light) 0 35%,
|
||||
var(--disability-pride-red-light) 35% 41%,
|
||||
var(--disability-pride-yellow-light) 41% 47%,
|
||||
var(--disability-pride-white-light) 47% 53%,
|
||||
var(--disability-pride-blue-light) 53% 59%,
|
||||
var(--disability-pride-green-light) 59% 65%,
|
||||
var(--disability-pride-black-light) 65% 71%
|
||||
);
|
||||
font-family: system-ui;
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: var(--background-color);
|
||||
grid-row: 2/3;
|
||||
grid-column: 1/2;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
width: 20vw;
|
||||
height: 85vh;
|
||||
padding-top: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
border-right: 10px solid;
|
||||
border-image-slice: 1;
|
||||
border-width: 5px;
|
||||
border-image-source: linear-gradient(
|
||||
to bottom,
|
||||
var(--trans-pride-blue-light) 0 20%,
|
||||
var(--trans-pride-pink-light) 20% 40%,
|
||||
var(--trans-pride-white-light) 40% 60%,
|
||||
var(--trans-pride-pink-light) 60% 80%,
|
||||
var(--trans-pride-blue-light) 80%
|
||||
);
|
||||
}
|
||||
|
||||
section {
|
||||
width: 55vw;
|
||||
}
|
||||
|
||||
.status {
|
||||
height: 120px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #240046;
|
||||
--body-background-color: #0d0c1d;
|
||||
--text-color: #f1dac4;
|
||||
--scroll-bar: #474973;
|
||||
--scroll-gutter: #a69cac;
|
||||
--link-color: #4cc9f0;
|
||||
--link-hover: #f72585;
|
||||
--link-visited: #4cc9f0;
|
||||
--border-color: #474973;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--body-background-color);
|
||||
background-image: url("/stardust.png");
|
||||
}
|
||||
|
||||
.status .statuslol_content p {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.status .statuslol_content .statuslol_time a {
|
||||
color: var(--link-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* @media only screen and (max-width: 600px) {
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
width: 100vw;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mobile-header span {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.mobile-header span img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
height: 90vh;
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
.status {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
} */
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--link-visited);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main section {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main section p {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
main section ul li {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: pacifico;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
.motto {
|
||||
font-family: lato-regular;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--background-color) !important;
|
||||
}
|
||||
|
||||
.picrew-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin: 1.75rem;
|
||||
}
|
||||
|
||||
.picrew-gallery img {
|
||||
border: 4px solid var(--border-color);
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.picrew-gallery,
|
||||
.picrew-gallery-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photo-gallery-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photography-gallery {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gallery-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery-text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nested-list {
|
||||
list-style-type: disc;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user