initial commit, in progress
This commit is contained in:
commit
f35b84a4e2
59
index.html
Normal file
59
index.html
Normal 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 "cadence now!" 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
85
static/css/main.css
Normal 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
BIN
static/img/cadence_now.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in a new issue