Initial commit

This commit is contained in:
Midgard 2020-06-02 00:52:23 +02:00
commit ab00f845c2
Signed by untrusted user who does not match committer: midgard
GPG key ID: 511C112F1331BBB4
5 changed files with 328 additions and 0 deletions

56
index.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>midgard</title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<header>
<img src="midgard.jpg" alt="A stuffed mouse in front of a wall with stripes of warm colours, this is Midgard's online avatar"/>
<h1>
<a href="/" class="wordmark"><span>mid</span><span>gard</span></a>
</h1>
</header>
<section id="blog">
<h2>Blog</h2>
<ul>
<li><a href="/blog/irc/">
<div class="title">Get started with IRC</div>
<div class="summary">Pick a client, join some channels, maybe register with NickServ</div>
</a></li>
<li><a href="/blog/rss/">
<div class="title">Get started using RSS</div>
<div class="summary">Pick a client, add some feeds, done</div>
</a></li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
<li><a href="/projects/osm-frontend/">
<div class="title">OpenStreetMap frontend</div>
<div class="summary">Building a great frontend for a great map</div>
</a></li>
<li><a href="/projects/ipo/">
<div class="title">ipo</div>
<div class="summary">A Python library that brings shell-like piping to Python</div>
</a></li>
<li><a href="/projects/itinero-mapmatcher/">
<div class="title">Itinero Mapmatcher</div>
<div class="summary">My internship: snapping GPX traces to the road network</div>
</a></li>
</ul>
</section>
<aside id="social">
<a id="rss-link" href="/rss/">Follow with RSS</a>
<a id="irc-link" href="/irc/">Contact on IRC</a>
</aside>
<footer>© 2020 midgard</footer>
</body>
</html>

5
irc.svg Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52" height="52" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="2.5" width="47" height="47" rx="4.7238" ry="4.7238" fill="none" stroke="#000" stroke-linecap="round" stroke-width="4"/>
<path d="m26.872 32.145-1.3934 7.9343h3.5415l1.3934-7.9343h4.9156v-3.3286h-4.3351l0.96763-5.4961h4.8381v-3.3673h-4.2383l1.4127-8.0503h-3.5415l-1.4127 8.0503h-3.7543l1.4127-8.0503h-3.5221l-1.4127 8.0503h-5.0895v3.3673h4.4897l-0.96763 5.4961h-4.9734v3.3286h4.3929l-1.3934 7.9343h3.5415l1.3934-7.9343h3.735m-3.1544-3.3286 0.94828-5.4961h3.7543l-0.96763 5.4961h-3.735"/>
</svg>

After

Width:  |  Height:  |  Size: 630 B

260
main.css Normal file
View file

@ -0,0 +1,260 @@
body {
font-family: "Source Sans Pro", "Fira Sans", Roboto, sans-serif;
line-height: 1.2;
background: #fff5f0;
margin: 0;
padding: 2vmin;
padding-bottom: 0;
box-sizing: border-box;
min-height: 100vh;
}
a {
color: #1d125f;
}
a:visited {
color: #48122d;
}
a:hover {
text-decoration: none;
}
body {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto 1fr;
grid-template-areas:
"header"
"blog"
"projects"
"social"
"footer";
align-items: start;
}
header {
grid-area: header;
}
#blog {
grid-area: blog;
}
#projects {
grid-area: projects;
}
#social {
grid-area: social;
}
footer {
grid-area: footer;
align-self: end;
}
@media (min-width:500px) {
section {
font-size: 125%;
}
}
@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
body {
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
grid-template-areas:
"header blog"
"header projects"
"social projects"
"footer footer";
gap: 1em 3em;
}
header {
grid-area: header;
}
footer {
align-self: end;
}
}
@media (min-width:900px) {
body {
padding: 2em 2em 0;
}
section {
font-size: 150%;
}
}
@media (min-width:1500px) {
body {
padding: 4em 4em 0;
grid-template-columns: 1fr 2fr 2fr;
grid-template-areas:
"header blog projects"
"social blog projects"
"footer footer footer";
gap: 1em 4em;
}
}
.wordmark {
/* Font size determines the size of the midgard word mark */
line-height: 1;
font-family: "Roboto Slab", serif;
font-weight: 300;
color: black;
text-decoration: none;
text-align: left;
display: inline-block;
width: 3.4em;
}
.wordmark span {
display: block;
}
.wordmark span:last-child {
text-align: right;
}
.wordmark span:last-child:before {
content: " ";
display: block;
width: 3em;
height: 1px;
border-bottom: 0.055em solid black;
margin-top: 0.04em;
margin-bottom: -0.17em;
}
a:hover .wordmark span:first-child,
a.wordmark:hover span:first-child {
color: #a67b96;
}
a:hover .wordmark span:last-child,
a.wordmark:hover span:last-child {
color: #c28b88;
}
a:hover .wordmark span:last-child:before,
a.wordmark:hover span:last-child:before {
border-bottom-color: #e0c3d9;
}
header {
background-color: #fff;
}
header img {
width: 25vmin;
height: 25vmin;
display: inline-block;
}
h1 {
margin: 0;
margin-left: 0.3em;
display: inline-block;
font-size: 12vmin;
}
header img, h1 {
vertical-align: middle;
}
@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
header {
background-color: transparent;
}
header img {
width: 27vmin;
height: 27vmin;
display: block;
}
h1 {
margin: 0.3em 0 0 0;
display: block;
font-size: 8vmin;
}
}
@media (min-width:1500px) {
header img {
width: 250px;
height: 250px;
display: block;
}
h1 {
margin: 0.3em 0 0 0;
display: block;
font-size: 56pt;
}
}
ul {
padding: 0;
}
li {
list-style: none;
margin: 1.5em 0;
}
li a {
display: block;
text-decoration: none;
padding: 0.2em 0.3em;
margin: 0 -0.3em;
}
li a:hover, li a:focus {
background-color: #fffaf7;
}
a .summary {
font-size: 75%;
color: #333;
margin-top: 0.3em;
}
a .title {
text-decoration: underline;
}
aside {
}
#social a {
display: inline-block;
width: 4em;
text-align: center;
text-decoration: none;
color: #000;
opacity: 0.7;
}
#social a:hover {
opacity: 1;
}
#social a:before {
content: " ";
width: 3em;
height: 3em;
display: inline-block;
background-size: contain;
}
#social a:hover:before {
background-color: #fff;
}
#rss-link:before {
background-image: url(rss.svg);
}
#irc-link:before {
background-image: url(irc.svg);
}
footer {
text-align: center;
background-color: #dbc7d7;
padding: 0.3em;
}

BIN
midgard.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

7
rss.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52" height="52" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="2.5" width="47" height="47" rx="4.7238" ry="4.7238" fill="none" stroke="#000" stroke-linecap="round" stroke-width="4"/>
<ellipse cx="17.404" cy="34.596" rx="4.2982" ry="4.2982"/>
<path d="m13.105 26c7.1215 0 12.895 5.7732 12.895 12.895h4.2983c0-4.5599-1.8114-8.9329-5.0357-12.157-3.2243-3.2243-7.5974-5.0357-12.157-5.0357v4.2983"/>
<path d="m13.105 17.404c11.869 4e-5 21.491 9.6219 21.491 21.491h4.2983c-8e-6 -14.243-11.546-25.789-25.789-25.789v4.2983"/>
</svg>

After

Width:  |  Height:  |  Size: 600 B