summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--index.html68
-rw-r--r--main.css99
2 files changed, 167 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f12d47f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="author" content="Johannes Löthberg" />
+ <title>~/</title>
+ <link href="main.css" rel="stylesheet">
+</head>
+<body>
+
+<header>
+ <h1><a href="/">Johannes Löthberg</a></h1>
+ <nav>
+ <ul>
+ <li><a href="/">~/</a></li>
+ <li><a href="/blog">blog/</a></li>
+ <li><a href="/contact">contact/</a></li>
+ </ul>
+ </nav>
+</header>
+
+ <div class="about">
+ <h2>About me</h2>
+ <p>
+ Hey there, my name is Johannes Löthberg. I am 18 years old, gay and come from Sweden.
+ <br /><br />
+ Online I go by a lot of different names, of which “demize” seems to be the most common right now.
+ On my free-time I do various things, mostly just consisting of hanging out on IRC and reading random things online.
+ <br /><br />
+ In the <a href="https://aur.archlinux.org/">AUR</a>, the Arch User Repository, I maintain a couple of packages, some being things I use myself and the rest being either packages that others haven't taken care of, or packages requested by other people to be created.
+ <br /><br />
+ Somehow I also recently ended up becoming an OP in the Arch Linux IRC channels on freenode, tho I'm still not exactly sure how that came to be.
+ </p>
+ </div>
+
+ <div class="contact">
+ <h2>Contact</h2>
+ <p>
+ You can contact me at <a href="mailto:johannes@kyriasis.com">johannes@kyriasis.com</a> or on Freenode as demize.
+ </p>
+ </div>
+
+ <div class="blog">
+ <h2>Blog posts</h2>
+ <div class="post-list">
+ <ul>
+ <li>
+ <span class="date">2014-02-13 &raquo;</span> <a href="/2014/02/13/in-which-we-die/">In Which We Die</a>
+ </li>
+ <li>
+ <span class="date">2014-01-02 &raquo;</span> <a href="/2014/01/02/hai/">hai there</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+
+<footer>
+ <p>
+ Copyright &copy; Johannes Löthberg 2014
+ </p>
+ <a id="emblem" href='http://www.catb.org/hacker-emblem/'>
+ <img src='http://www.catb.org/hacker-emblem/glider.png' alt='hacker emblem' />
+ </a>
+</footer>
+
+</body>
+</html>
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..1d374ac
--- /dev/null
+++ b/main.css
@@ -0,0 +1,99 @@
+/* apply a natural box layout model to all elements */
+*, *:before, *:after {
+ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+}
+
+html {
+ position: relative;
+ min-height: 100%;
+}
+
+body {
+ margin: 0 0 100px;
+ background-color: #F4F4F4;
+ padding: 0 20px;
+ font-size: 15px;
+ font-family: DejaVu Sans
+}
+
+a {
+ color: #146E90;
+ font-size: 97%;
+ text-decoration: none;
+}
+a:hover {
+ color: #023244;
+}
+
+p {
+ padding: 0 20px;
+ text-align: left;
+ font-size: 17px;
+}
+
+header {
+ display: flex;
+}
+header h1 {
+ flex: 1;
+}
+header h1 a {
+ color: #000;
+}
+header nav {
+ display: flex;
+ align-items: center;
+ width: auto;
+ padding-right: 20px;
+}
+header nav ul {
+ list-style: none;
+ display: flex;
+ text-align: right;
+}
+header nav ul li {display: inline; margin-left: 10px; font-size: 17px;}
+
+
+.about,
+.contact {
+ padding-bottom: 1px;
+}
+.blog {margin-bottom: -10px;}
+
+.post-list ul {
+ padding: 0 20px;
+}
+
+.post-list ul li {
+ list-style: none;
+}
+
+.post-list .date {
+ font-size: 15px;
+ color: #4D4D4D;
+}
+
+.post-list a {
+ font-size: 17px;
+}
+
+footer {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: auto;
+ width: 100%;
+}
+footer p {
+ position: absolute;
+ left: 0px;
+ bottom: 0;
+ font-size: 13px;
+ font-weight: bold;
+ color: #4D4D4D;
+}
+footer #emblem {
+ position:absolute;
+ bottom: 0;
+ right: 0;
+}