This commit is contained in:
Jade Ellis
2024-02-19 13:14:55 +00:00
parent fd813b8b33
commit ac2accc8ea
+19 -22
View File
@@ -1,3 +1,17 @@
<script lang="ts">
import url from "./logo.svg?url";
</script>
<div class="hero card edge">
<div class="logo">
<img src={url} alt="Logo" />
</div>
<div class="content">
<h1 class="title">JadedBlueEyes</h1>
<div class="description">Finally, a website!</div>
</div>
</div>
<style> <style>
.hero { .hero {
display: flex; display: flex;
@@ -7,6 +21,7 @@
gap: var(--spacing); gap: var(--spacing);
margin: 48px auto; margin: 48px auto;
max-width: 320px; max-width: 320px;
padding: 3rem 0;
} }
.logo { .logo {
@@ -17,8 +32,8 @@
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc(var(--spacing) / 2); gap: calc(var(--spacing) / 2);
} }
.title { .title {
@@ -31,33 +46,15 @@
text-align: center; text-align: center;
} }
@media screen and (min-width: 540px) { @media screen and (min-width: 540px) {
.hero { .hero {
flex-direction: row; flex-direction: row;
margin: 96px auto; margin: 96px auto;
max-width: 520px; max-width: 520px;
} }
.title, .description { .title,
.description {
text-align: left; text-align: left;
} }
} }
</style> </style>
<script lang="ts">
import url from "./logo.svg?url"
</script>
<div class="hero">
<div class="logo">
<img src="{url}" alt="Logo">
</div>
<div class="content">
<h1 class="title">
Jade
</h1>
<div class="description">
Finally, a website!
</div>
</div>
</div>