hackerncoder/personal-website
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

initial commit, in progress

Browse source
This commit is contained in:
HackerNCoder 2022-12-17 16:45:18 +00:00
commit f35b84a4e2
3 changed files with 144 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
index.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HackerNCoders website</title>
<link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
<div class="layout">
<header>
<div class="big-text-header">
<h1 class="big-text-header__text">HackerNCoders website</h1>
</div>
</header>
<div class="layout__columns">
<div class="layout__left-col">
<nav class="left-nav">
<ul class="left-nav__categories">
<li class="left-nav__category">
<div class="category-label">Me</div>
<ul class="left-nav__list">
<li class="left-nav__li">
<div class="left-nav__block">
<a class="left-nav__list-link" href="/">home</a>
</div>
</li>
<li class="left-nav__li">
<div class="left-nav__block">
<a class="left-nav__list-link" href="/contact">contact</a>
</div>
</li>
</ul>
</li>
<li class="left-nav__category">
<div class="category-label">Stuff</div>
<ul class="left-nav__list">
<li class="left-nav__li">
<div class="left-nav__block">
<a class="left-nav__list-link" href="/weblog">weblog</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<main>
<h1 class="page-title">Welcome to my website</h1>
<p>Hi, I'm hackerncoder. I just redesigned my website - no actually, I rewrote it. I used to run writefreely, but I decided to make a fully static html+css-only website.</p>
<p>Actually, my mastodon bio is more correct, I stole this website. <a href="https://cadence.moe">cadence</a> (go check her website out!) actually made this, and hers is the better of our two, since design and colours isn't really my strong point somehow</p>
</main>
</div>
<footer>
<a href="https://cadence.moe" target="_blank"><img src="/static/img/cadence_now.png" alt="The text &quot;cadence now!&quot; on a purple background. There is a moon-shaped logo on the left side and a tiny star in the bottom right." width="88" height="31"></a>
</footer>
</div>
</body>
</html>

85
static/css/main.css Normal file
View file

@ -0,0 +1,85 @@
body {
font-family: monospace;
font-size:20px;
line-height:1.5;
position:relative;
color: #fff;
background-color:#2e4051;
}
a {
color:#fff;
text-decoration: underline 2px dotted white;
}
a:hover {
text-decoration: underline 2px solid white;
}
:focus {
border-bottom: none;
outline: 2px dashed white;
}
.layout {
max-width: 1000px;
margin: 0 auto 200px;
}
.big-text-header {
font-size: 70px;
line-height: 1;
text-align: center;
display: flex;
justify-content: center;
}
.big-text-header__text {
font-size: 1em;
padding: 10px;
}
.layout__left-col {
display: flex;
flex-direction: column;
align-items: center;
}
.left-nav {
min-width: 180px;
}
.left-nav__categories {
padding: 0;
margin: 0;
list-style-type: none;
}
.left-nav__category {
margin-bottom: 16px;
}
.left-nav .category-label {
padding-left: 16px;
}
.left-nav__list {
font-family: monospace;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 20px;
line-height: 1;
}
.left-nav__block {
margin: 4px 4px 12px 4px;
background-color: #2e2f51;
position: relative;
border: 2px solid;
border-color: #2e2f51;
}
.left-nav__list-link,
.left-nav__list-link:visited {
color: #fff;
padding: 6px;
display: block;
}
@media screen and (min-width: 800px) {
.layout__columns {
display: flex;
}
.layout__left-col {
align-items: start;
}
.left-nav {
margin-right: 24px;
}
}

BIN
static/img/cadence_now.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB