diff options
| -rw-r--r-- | index.html | 68 | ||||
| -rw-r--r-- | main.css | 99 |
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 »</span> <a href="/2014/02/13/in-which-we-die/">In Which We Die</a> + </li> + <li> + <span class="date">2014-01-02 »</span> <a href="/2014/01/02/hai/">hai there</a> + </li> + </ul> + </div> + </div> + + +<footer> + <p> + Copyright © 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; +} |