diff --git a/public/favicon.svg b/public/favicon.svg index f157bd1..143b3dd 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,9 +1,6 @@ - - - + + + + + diff --git a/public/lato-regular.woff2 b/public/lato-regular.woff2 new file mode 100644 index 0000000..af7bc96 Binary files /dev/null and b/public/lato-regular.woff2 differ diff --git a/public/pacifico.woff2 b/public/pacifico.woff2 new file mode 100644 index 0000000..2cc064a Binary files /dev/null and b/public/pacifico.woff2 differ diff --git a/public/sakura.webp b/public/sakura.webp new file mode 100644 index 0000000..a93e20d Binary files /dev/null and b/public/sakura.webp differ diff --git a/public/stardust.png b/public/stardust.png new file mode 100644 index 0000000..288a7d2 Binary files /dev/null and b/public/stardust.png differ diff --git a/src/pages/index.astro b/src/pages/index.astro index 2d14107..e01a50e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,16 +1,41 @@ --- - +import "../styles/global.css"; --- - + Astro -

Astro

+
+
+

welcome to emma's place

+

+ 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 +

+ +

latest status

+
+ +
+ +

news about emma

+ +
+
diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..39a8565 --- /dev/null +++ b/src/styles/global.css @@ -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; +}