Raktbastr/halfheart.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made 404 page, minecraft server page, and whitelist page.

Browse source
This commit is contained in:
Raktbastr 2026-06-15 16:25:59 -05:00
parent 39f2d87b3f
commit 038968ea28
17 changed files with 518 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

156
site-header.html
View file

@ -1,31 +1,33 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Audiowide);
:host {
display: block;
width: 100%;
}
:root {
--primary-glow: #ff2a2a;
--active-bg: #aa0404;
--header-height: 60px;
--primary-glow: #ff2a2a;
--active-bg: #aa0404;
--header-height: 60px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header-container {
display: flex;
align-items: center;
gap: 15px;
gap: 15px;
margin: 0 auto;
width: 92%;
max-width: 1920px;
position: relative;
}
.logo-capsule {
background-color: #00000000;
border-radius: 20px;
@ -33,16 +35,16 @@
display: flex;
align-items: center;
justify-content: center;
height: var(--header-height);
width: max-content;
min-width: 60px;
flex-shrink: 0;
width: max-content;
min-width: 60px;
flex-shrink: 0;
transition: background-color 0.3s ease;
z-index: 10;
}
.logo-capsule a {
display: flex;
align-items: center;
@ -50,45 +52,45 @@
width: 100%;
height: 100%;
}
.logo-capsule:hover {
background-color: #00000000;
}
.logo-capsule img {
display: block;
height: 100%;
width: auto;
height: 100%;
width: auto;
box-sizing: border-box;
padding: 7px;
padding: 7px;
}
.topnav {
background-color: #000000;
display: flex;
align-items: stretch;
position: relative;
flex-grow: 1;
height: var(--header-height);
flex-grow: 1;
height: var(--header-height);
border-radius: 20px;
overflow: hidden;
border: 2px solid #ff2a2a66
}
.topnav a {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
color: white;
padding: 0 20px;
padding: 0 20px;
text-decoration: none;
font-size: 17px;
position: relative;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
border-radius: 20px;
border-radius: 20px;
flex-grow: 1;
}
.topnav a::after {
content: '';
position: absolute;
@ -101,55 +103,68 @@
transform: translateX(-50%);
border-radius: 20px;
}
.topnav a:hover::after {
width: calc(100% - 40px);
left: 50%;
transform: translateX(-50%);
}
.topnav a:hover {
background-color: #ff2a2a6f;
color: white;
}
.topnav a.active {
background-color: var(--active-bg);
color: white;
box-shadow: inset 0 -4px 15px rgba(255, 42, 42, 0.4), 0 0 15px rgba(255, 42, 42, 0.3);
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 768px) {
.header-container {
flex-direction: row;
align-items: flex-start;
align-items: flex-start;
justify-content: space-between;
height: var(--header-height);
height: var(--header-height);
}
.logo-capsule {
width: auto;
max-width: calc(100% - 80px);
flex-shrink: 1;
}
.logo-capsule img {
width: 100%;
height: auto;
max-height: var(--header-height);
object-fit: contain;
}
.topnav {
position: absolute;
right: 0;
top: 0;
flex-direction: column;
align-items: stretch;
flex-grow: 0;
width: 60px;
height: var(--header-height);
transition: width 0.3s ease-in-out, height 0.3s ease-in-out, background-color 0.3s ease;
flex-direction: column;
align-items: stretch;
flex-grow: 0;
width: 60px;
height: var(--header-height);
transition: width 0.3s ease-in-out, height 0.3s ease-in-out, background-color 0.3s ease;
}
.topnav.responsive {
width: 100%;
width: 100%;
height: 315px;
background-color: #000000;
background-color: #000000;
}
.topnav a:not(.icon) {
display: none;
opacity: 0;
@ -158,62 +173,57 @@
.topnav.responsive a:not(.icon) {
display: flex;
height: 60px;
height: 60px;
width: 100%;
box-sizing: border-box;
justify-content: flex-start;
justify-content: flex-start;
padding-left: 20px;
opacity: 1;
transition: opacity 0.3s ease 0.1s;
transition: opacity 0.3s ease 0.1s;
}
.topnav.responsive a:not(.icon):nth-child(1) {
margin-top: calc(var(--header-height) + 15px);
margin-top: calc(var(--header-height) + 15px);
}
.topnav.responsive a:not(.icon)::after {
display: none;
display: none;
}
.topnav a.icon {
display: flex;
position: absolute;
right: 0;
top: 0;
left: 0;
height: var(--header-height);
justify-content: center;
align-items: center;
width: auto;
color: #f2f2f2;
padding: 0;
z-index: 15;
display: flex;
position: absolute;
right: 0;
top: 0;
left: 0;
height: var(--header-height);
justify-content: center;
align-items: center;
width: auto;
color: #f2f2f2;
padding: 0;
z-index: 15;
}
.topnav.responsive a.icon {
left: auto;
left: auto;
width: 60px;
}
}
</style>
<br>
<div class="header-container" id="headerContainer">
<div class="logo-capsule">
<a href="index.html" id="logo">
<img src="logo.png" alt="Half Heart Logo">
<img src="logo.png" alt="Half Heart Logo" style="border: 0px solid rgba(255, 255, 255, 0);">
</a>
</div>
<div class="topnav" id="myTopnav">
<a href="index.html" id="home" class="inactive">Home</a>
<a href="about-me.html" id="about-me" class="inactive">About Me</a>
<a href="projects.html" id="projects" class="inactive">Projects</a>
<a href="mc-servers.html" id="minecraft-servers" class="inactive">Minecraft Server</a>
<a href="minecraft-servers.html" id="minecraft-servers" class="inactive">Minecraft Server</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMobileMenu()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<br>
</div>