hippoz/homepage
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add branding, clean up css, add unused blog button, center content. bruh this is too much for a single commit but whatever

Browse source
This commit is contained in:
hippoz 2020-10-24 20:04:40 +03:00
parent eb3fe2b9c5
commit 9e9796419b
3 changed files with 43 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -10,9 +10,15 @@
<meta name="Description" content="Hippoz's homepage on hippoz.xyz with a file server, a git server, an about page, and a contact page.">
</head>
<body>
<div class="card navigation-card">
<div class="card navigation noselect">
<div class="navigation-branding">
<span class="navigation-branding-h">
h
</span>
</div>
<div class="navigation-buttons">
<button id='button-home' class="button-default button-selected">home</button>
<button id='button-blog' class="button-default">blog</button>
<button id='button-file-server' class="button-default">file server</button>
<button id='button-git-server' class="button-default">git server</button>
<button id='button-about-me' class="button-default">about me</button>

3
res/index.js
View file

@ -33,7 +33,8 @@ const onButtonClick = (buttonId) => {
break;
}
default: {
console.error('Invalid button id');
console.error('Page not found. Invalid button ID.');
A('#content-container').html('<h2>page not found</h2><p>i think</p>');
return;
}
}

50
res/style.css
View file

@ -5,6 +5,7 @@
--selected-bg-color: #2E2E2E;
--hover-bg-color: #555555;
--main-font-weight: 500;
--cards-length: 600px;
}
body {
@ -16,7 +17,7 @@ body {
.card {
margin: 25px auto;
padding: 20px;
width: 400px;
width: var(--cards-length);
background: var(--accent-bg-color);
border-radius: 3px;
@ -26,18 +27,35 @@ body {
box-shadow: 2px -2px 38px 1px rgba(0,0,0,0.59);
}
.navigation-card {
width: 500px;
text-align: center;
/*
.card.navigation {
}
*/
.navigation-buttons {
text-align: right;
}
.navigation-buttons a {
margin-left: 10px;
}
.navigation-buttons a:first-child {
margin-left: 0px;
}
.navigation-branding {
float: left;
}
.navigation-branding-h {
font-size: xx-large;
padding: 5px;
margin-top: 2px;
margin-bottom: 2px;
white-space: nowrap;
}
.noselect {
user-select: none;
}
.button-default {
text-decoration: none;
@ -65,16 +83,6 @@ body {
background-color: var(--selected-bg-color);
}
.button-border {
border: 2px solid var(--button-accent-color);
}
@media screen and (max-width: 768px) {
.card {
width: 80%;
}
}
.input {
border: none;
outline: none;
@ -87,4 +95,14 @@ body {
opacity: 0;
position: absolute;
z-index: -1;
}
}
#content-container {
text-align: center;
}
@media screen and (max-width: 768px) {
.card {
width: 80%;
}
}