Initial commit
This commit is contained in:
Midgard
commit
ab00f845c2
GPG key ID:
511C112F1331BBB4
5 changed files with 328 additions and 0 deletions
56
index.html
Normal file
56
index.html
Normal 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
5
irc.svg
Normal 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
260
main.css
Normal 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
BIN
midgard.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
7
rss.svg
Normal file
7
rss.svg
Normal 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 |
Loading…
Reference in a new issue