new style
This commit is contained in:
parent
ba5fad6f81
commit
1bf8b8a933
GPG key ID:
6B10F3EAF14F4C77
6 changed files with 147 additions and 11 deletions
BIN
public/assets/biglogo.webp
Normal file
BIN
public/assets/biglogo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
public/assets/catppuccin-mocha.min.css
vendored
1
public/assets/catppuccin-mocha.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
:root{--crust:#11111b;--mantle:#181825;--base:#1e1e2e;--surface0:#313244;--surface1:#45475a;--surface2:#585b70;--overlay0:#6c7086;--overlay1:#7f849c;--overlay2:#9399b2;--subtext0:#a6adc8;--subtext1:#bac2de;--text:#cdd6f4;--lavender:#b4befe;--blue:#89b4fa;--sapphire:#74c7ec;--sky:#89dceb;--teal:#94e2d5;--green:#a6e3a1;--yellow:#f9e2af;--peach:#fab387;--maroon:#eba0ac;--red:#f38ba8;--mauve:#cba6f7;--pink:#f5c2e7;--flamingo:#f2cdcd;--rosewater:#f5e0dc}
|
||||
|
|
@ -1,8 +1,72 @@
|
|||
@import url(catppuccin-mocha.min.css);
|
||||
:root {
|
||||
/* Rosé Pine Dawn */
|
||||
--rp-base: #faf4ed;
|
||||
--rp-surface: #fffaf3;
|
||||
--rp-overlay: #f2e9e1;
|
||||
--rp-muted: #9893a5;
|
||||
--rp-subtle: #797593;
|
||||
--rp-text: #575279;
|
||||
--rp-love: #b4637a;
|
||||
--rp-gold: #ea9d34;
|
||||
--rp-rose: #d7827e;
|
||||
--rp-pine: #286983;
|
||||
--rp-foam: #56949f;
|
||||
--rp-iris: #907aa9;
|
||||
--rp-highlight-low: #f4ede8;
|
||||
--rp-highlight-med: #dfdad9;
|
||||
--rp-highlight-high: #cecacd;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Rosé Pine */
|
||||
--rp-base: #191724;
|
||||
--rp-surface: #1f1d2e;
|
||||
--rp-overlay: #26233a;
|
||||
--rp-muted: #6e6a86;
|
||||
--rp-subtle: #908caa;
|
||||
--rp-text: #e0def4;
|
||||
--rp-love: #eb6f92;
|
||||
--rp-gold: #f6c177;
|
||||
--rp-rose: #ebbcba;
|
||||
--rp-pine: #31748f;
|
||||
--rp-foam: #9ccfd8;
|
||||
--rp-iris: #c4a7e7;
|
||||
--rp-highlight-low: #21202e;
|
||||
--rp-highlight-med: #403d52;
|
||||
--rp-highlight-high: #524f67;
|
||||
|
||||
/* Rosé Pine Moon */
|
||||
/* --rp-base: #232136; */
|
||||
/* --rp-surface: #2a273f; */
|
||||
/* --rp-overlay: #393552; */
|
||||
/* --rp-muted: #6e6a86; */
|
||||
/* --rp-subtle: #908caa; */
|
||||
/* --rp-text: #e0def4; */
|
||||
/* --rp-love: #eb6f92; */
|
||||
/* --rp-gold: #f6c177; */
|
||||
/* --rp-rose: #ea9a97; */
|
||||
/* --rp-pine: #3e8fb0; */
|
||||
/* --rp-foam: #9ccfd8; */
|
||||
/* --rp-iris: #c4a7e7; */
|
||||
/* --rp-highlight-low: #2a283e; */
|
||||
/* --rp-highlight-med: #44415a; */
|
||||
/* --rp-highlight-high: #56526e; */
|
||||
}
|
||||
}
|
||||
|
||||
:root, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
background-color: var(--base);
|
||||
color: var(--text);
|
||||
background-color: var(--rp-base);
|
||||
color: var(--rp-text);
|
||||
|
||||
font-family: Inter, sans-serif;
|
||||
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
|
||||
|
|
@ -13,9 +77,9 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--red);
|
||||
color: var(--rp-love);
|
||||
transition: 0.2s;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--mauve);
|
||||
color: var(--rp-rose);
|
||||
}
|
||||
|
|
@ -3,15 +3,84 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
|
||||
<style>
|
||||
header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
img {
|
||||
border-radius: 100%;
|
||||
border: 0.75rem solid var(--rp-base);
|
||||
width: 20%;
|
||||
aspect-ratio: 1;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
margin-top: -0.1rem;
|
||||
font-size: 3.5rem;
|
||||
background: linear-gradient(45deg, #044bdb, #f036a2);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
.stroke {
|
||||
position: absolute;
|
||||
top: 0.1rem;
|
||||
left: 0.1rem;
|
||||
|
||||
background: linear-gradient(45deg, #0036a1, #bf1478);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: linear-gradient(45deg, #0138a7, #c5187c);
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Apache</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hi, I'm Apache</h1>
|
||||
<p>I write code sometimes</p>
|
||||
<p>Check out some games at <a href="https://games.apach.dev/">games.apach.dev</a></p>
|
||||
<p>Check out my code at my <a href="https://github.com/Apachedrag427">Github</a> and <a href="https://git.apach.dev/apache">Forgejo</a></p>
|
||||
<p>You lost <a href="the-game">The Game</a></p>
|
||||
<header>
|
||||
<div class="hero-bg"></div>
|
||||
<img src="assets/biglogo.webp" alt="logo">
|
||||
<h1>Apache<span class="stroke">Apache</span></h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h1>Who am I?</h1>
|
||||
<p>I'm a programmer, (very new) artist, and (very new) youtuber. I've dabbled in automation, apps, games, plugins, websites, and more! </p>
|
||||
<h1>Where can I find your work?</h1>
|
||||
<p>
|
||||
You can find my work at
|
||||
<a href="https://github.com/Apachedrag427">Github</a>,
|
||||
<a href="https://git.apach.dev/apache">Forgejo</a>,
|
||||
and <a href="https://youtube.com/@apachedrag427">Youtube</a>
|
||||
</p>
|
||||
<h1>How can I support you?</h1>
|
||||
<p>You can support me at my new <a href="https://ko-fi.com/apajer">Ko-fi</a>!</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,6 +3,8 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>Service Unavailable</title>
|
||||
|
|
|
|||
Loading…
Reference in a new issue