Changed the website
This commit is contained in:
parent
e202c21326
commit
63b384b0ed
GPG key ID:
DE3060396884D3F2
|
|
@ -1,28 +1,102 @@
|
|||
:root {
|
||||
--bg-color: #1e1e2e;
|
||||
--text-color: #cdd6f4;
|
||||
--link-color: #94e2d5;
|
||||
--base: #1e1e2e;
|
||||
--mantle: #181825;
|
||||
--text: #cdd6f4;
|
||||
--link: #94e2d5;
|
||||
--surface: #313244;
|
||||
--pink: #f5c2e7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Hack, monospace;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
background-color: var(--mantle);
|
||||
color: var(--text);
|
||||
padding: 5em;
|
||||
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 {
|
||||
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"/>
|
||||
<title>Homepage</title>
|
||||
<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="icon" href="/assets/favicon.png">
|
||||
</head>
|
||||
|
|
@ -11,12 +14,44 @@
|
|||
<h1>Vanten</h1>
|
||||
<p>Software dev, OSS enthusiast, server admin and 13 year old</p>
|
||||
<p>Maybe script kiddie idk</p>
|
||||
<h3>Contact</h1>
|
||||
<ul>
|
||||
<li><a href="mailto:vanten-s@vanten-s.com" >Mail</a> </li>
|
||||
<li><a rel="me" href="https://kolektiva.social/@vanten_s">Mastodon</a></li>
|
||||
<li><a href="key.asc" >PGP key</a> </li>
|
||||
<li><a href="https://matrix.to/#/@vanten-s:matrix.org" >Matrix</a> </li>
|
||||
|
||||
<ul class="navbar">
|
||||
<li>
|
||||
<a href="mailto:vanten-s@vanten-s.com">
|
||||
<span class="popup">Mail</span>
|
||||
<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>
|
||||
|
||||
<h3>Weird computer thingys that I know</h3>
|
||||
|
|
|
|||
Loading…
Reference in a new issue