diff --git a/_includes/mainLayout.vto b/_includes/mainLayout.vto index 25c2e78..a21529d 100644 --- a/_includes/mainLayout.vto +++ b/_includes/mainLayout.vto @@ -5,19 +5,20 @@ {{ title }} +
- +
{{ content }} @@ -26,6 +27,13 @@ Image
+
diff --git a/about.md b/about.md index 6cd407d..77a5f2a 100644 --- a/about.md +++ b/about.md @@ -14,4 +14,5 @@ image: Home.png ## What am I doing: - Part of a thing, check it out: [The Digital Coven](https://witchcraft.systems) - Do art here: [Bluesky link](https://bsky.app/profile/ari.mom) +- Stream very occasionally on [Twitch](https://www.twitch.tv/ari_express) - Know a bit about a lot of webdev technologies, but Deno/TS/Svelte is my one true love \<3 diff --git a/assets/Donate.png b/assets/Donate.png index cd8386b..0ca5b47 100644 Binary files a/assets/Donate.png and b/assets/Donate.png differ diff --git a/assets/PWsbutton.png b/assets/PWsbutton.png new file mode 100644 index 0000000..96c92b1 Binary files /dev/null and b/assets/PWsbutton.png differ diff --git a/assets/ShureTechMonoNerdFont-Regular.ttf b/assets/ShureTechMonoNerdFont-Regular.ttf new file mode 100644 index 0000000..689df9a Binary files /dev/null and b/assets/ShureTechMonoNerdFont-Regular.ttf differ diff --git a/index.md b/index.md new file mode 100644 index 0000000..a6ffde8 --- /dev/null +++ b/index.md @@ -0,0 +1,10 @@ +--- +layout: mainLayout.vto +title: Home of Ari +image: Home.png +--- +# Heyo, my name is Ariadna + +Two things: +- I don't know what to put on the home page, so go click the links +- This website is really made for desktops, the mobile is an afterthought really \ No newline at end of file diff --git a/style.css b/style.css index 8848982..f77d7bf 100644 --- a/style.css +++ b/style.css @@ -1,18 +1,36 @@ :root { --background-color: #922950; --text-color: #922950; + --link-text-color: #ff005d; + --link-hover-color: #ce3e6b; --border-color: #ce3e6b; --content-background-color: #fe76b0; background-color: var(--background-color); + color: var(--text-color); image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; + +} +@font-face { + font-family: 'ShureTechMono Nerd Font'; + src: url(/assets/ShureTechMonoNerdFont-Regular.ttf); +} +body { + font-family: 'ShureTechMono Nerd Font', monospace; +} +a { + text-decoration: none; + color: var(--link-text-color); +} +a:hover { + color: var(--link-hover-color); } .block { background-color: var(--content-background-color); - color: var(--text-color); + font-size: 24px; width: 75%; margin: 0 auto; @@ -25,7 +43,6 @@ main { display: flex; flex-direction: column; align-items: center; - justify-content: center; } #menu { width: 80%; @@ -34,6 +51,8 @@ main { align-items: center; justify-content: center; padding: 0; + margin: 10vh 0; + margin-top: 0; } nav { display: flex; @@ -83,4 +102,64 @@ nav ul li a:hover { } #image img { height: 100%; -} \ No newline at end of file +} +#footer { + display: flex; + flex-direction: column; + margin: 0; + padding: 20px; +} +#buttonContainer { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + padding: 10px; +} +#buttonContainer img { + height: 100%; +} +#footer p { + margin: 0; + padding: 0; + font-size: 24px; + color: var(--text-color); +} + +@media screen and (max-width: 900px) { + body { + + } + #content, #image { + height: auto; + width: 100%; + } + #image { + position: fixed; + top: 20vh; + left: 10vw; + width: 90vw; + height: 90vh; + z-index: -1; + pointer-events: none; + } + #image img { + object-fit: cover; + object-position: center; + } + #menu { + flex-direction: column; + margin: 5vh 0; + + } + nav ul { + flex-direction: column; + align-items: center; + } + nav ul li { + margin: 10px 0; + } + nav ul li a { + font-size: 48px !important; + } +}