forked from ari/ari-express
Initial website finished-ish
This commit is contained in:
parent
e16c0f9d1a
commit
35f9f59b33
SSH key fingerprint:
SHA256:j4xpQafvRcIH4rwZqM5aREIogWsCjyYohia7vH0+uZY
7 changed files with 111 additions and 13 deletions
|
|
@ -5,19 +5,20 @@
|
|||
<title>{{ title }}</title>
|
||||
<link rel="icon" type="image/png" href="/assets/Favicon.png" />
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div id="menu" class="block">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/about">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
<li><a href="/donate">Donate</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="menu" class="block">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
<li><a href="/donate">Donate</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="pageContent">
|
||||
<div id="content" class="block pane">
|
||||
{{ content }}
|
||||
|
|
@ -26,6 +27,13 @@
|
|||
<img src="/assets/{{image}}" alt="Image" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer" class="block">
|
||||
<div id="buttonsContainer">
|
||||
<a href="https://ari.express"><img id="buttonMe" src="/assets/Button.png" alt="Button Me" /></a>
|
||||
<a href="https://witchcraft.systems"><img id="buttonWS" src="/assets/PWsbutton.png" alt="Button WS" /></a>
|
||||
</div>
|
||||
<p>© 2025 Ari</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
1
about.md
1
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
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 27 KiB |
BIN
assets/PWsbutton.png
Normal file
BIN
assets/PWsbutton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
assets/ShureTechMonoNerdFont-Regular.ttf
Normal file
BIN
assets/ShureTechMonoNerdFont-Regular.ttf
Normal file
Binary file not shown.
10
index.md
Normal file
10
index.md
Normal file
|
|
@ -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
|
||||
85
style.css
85
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%;
|
||||
}
|
||||
}
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue