Changed the website
This commit is contained in:
parent
e202c21326
commit
63b384b0ed
GPG key ID:
DE3060396884D3F2
|
|
@ -1,28 +1,102 @@
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #1e1e2e;
|
--base: #1e1e2e;
|
||||||
--text-color: #cdd6f4;
|
--mantle: #181825;
|
||||||
--link-color: #94e2d5;
|
--text: #cdd6f4;
|
||||||
|
--link: #94e2d5;
|
||||||
|
--surface: #313244;
|
||||||
|
--pink: #f5c2e7;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Hack, monospace;
|
font-family: Hack, monospace;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--mantle);
|
||||||
color: var(--text-color);
|
color: var(--text);
|
||||||
padding: 5em;
|
padding: 5em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--link-color);
|
|
||||||
text-decoration: underline var(--bg-color) auto;
|
|
||||||
transition: all .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline var(--link-color) auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
/* Positioning */
|
||||||
|
top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
right: 0;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 100vh;
|
||||||
|
width: 5em;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
/* Markers */
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
background-color: var(--surface);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar > li {
|
||||||
|
width: 4em;
|
||||||
|
height: 4em;
|
||||||
|
margin: 1em;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background-color: var(--mantle);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
border-radius: 100%;
|
||||||
|
outline: var(--pink) 0.2rem solid;
|
||||||
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar > li:hover {
|
||||||
|
border-radius: 30%;
|
||||||
|
background-color: var(--link);
|
||||||
|
outline: var(--pink) 0 solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar > li:hover > a {
|
||||||
|
color: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar > li > a > i {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar > li > a > .popup {
|
||||||
|
position: absolute;
|
||||||
|
right: 6em;
|
||||||
|
scale: 0;
|
||||||
|
background-color: var(--base);
|
||||||
|
color: var(--link);
|
||||||
|
padding: .5em;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
outline: var(--pink) 0.2rem solid;
|
||||||
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar > li:hover > a > .popup {
|
||||||
|
scale: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--link);
|
||||||
|
text-decoration: underline var(--mantle) auto;
|
||||||
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline var(--link) auto;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,9 @@
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<title>Homepage</title>
|
<title>Homepage</title>
|
||||||
<link rel="stylesheet" href="assets/main.css">
|
<link rel="stylesheet" href="assets/main.css">
|
||||||
|
<link rel="stylesheet" href="assets/fontAwesome/css/fontawesome.css">
|
||||||
|
<link rel="stylesheet" href="assets/fontAwesome/css/brands.css">
|
||||||
|
<link rel="stylesheet" href="assets/fontAwesome/css/solid.css">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
|
||||||
<link rel="icon" href="/assets/favicon.png">
|
<link rel="icon" href="/assets/favicon.png">
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -11,12 +14,44 @@
|
||||||
<h1>Vanten</h1>
|
<h1>Vanten</h1>
|
||||||
<p>Software dev, OSS enthusiast, server admin and 13 year old</p>
|
<p>Software dev, OSS enthusiast, server admin and 13 year old</p>
|
||||||
<p>Maybe script kiddie idk</p>
|
<p>Maybe script kiddie idk</p>
|
||||||
<h3>Contact</h1>
|
|
||||||
<ul>
|
<ul class="navbar">
|
||||||
<li><a href="mailto:vanten-s@vanten-s.com" >Mail</a> </li>
|
<li>
|
||||||
<li><a rel="me" href="https://kolektiva.social/@vanten_s">Mastodon</a></li>
|
<a href="mailto:vanten-s@vanten-s.com">
|
||||||
<li><a href="key.asc" >PGP key</a> </li>
|
<span class="popup">Mail</span>
|
||||||
<li><a href="https://matrix.to/#/@vanten-s:matrix.org" >Matrix</a> </li>
|
<i class="fa-solid fa-envelope fa"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="me" href="https://kolektiva.social/@vanten_s">
|
||||||
|
<span class="popup">Mastodon</span>
|
||||||
|
<i class="fa-brands fa-mastodon fa"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="key.asc">
|
||||||
|
<span class="popup">GPG Key</span>
|
||||||
|
<i class="fa-solid fa-key"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://matrix.to/#/@vanten-s:matrix.org">
|
||||||
|
<span class="popup">Matrix</span>
|
||||||
|
<i class="fa-solid fa-comment"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://forgejo.vanten-s.com/vanten-s">
|
||||||
|
<span class="popup">Forgejo</span>
|
||||||
|
<i class="fa-brands fa-git-alt"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="rss.xml">
|
||||||
|
<span class="popup">RSS Feed</span>
|
||||||
|
<i class="fa-solid fa-rss"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3>Weird computer thingys that I know</h3>
|
<h3>Weird computer thingys that I know</h3>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue