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."> <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> </head>
<body> <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"> <div class="navigation-buttons">
<button id='button-home' class="button-default button-selected">home</button> <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-file-server' class="button-default">file server</button>
<button id='button-git-server' class="button-default">git server</button> <button id='button-git-server' class="button-default">git server</button>
<button id='button-about-me' class="button-default">about me</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; break;
} }
default: { 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; return;
} }
} }

50
res/style.css
View file

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