Add logo

nummi/main/static/main/css/index.css

@@ -4,6 +4,12 @@ h1 {
 	font-weight: 850;
 	letter-spacing: -.05em;
 	margin: 0;
+	line-height: 1.2em;
+}
+h1 img {
+	height: 1.2em;
+	vertical-align: top;
+	margin-right: var(--gap);
 }
 
 #categories > a {

nummi/main/static/main/css/main.css

@@ -24,7 +24,7 @@
 
 	--text-link: #0a35ccde;
 
-	--gap: 1em;
+	--gap: 1rem;
 
 	--red: #bf1500;
 	--green: var(--theme-2);

nummi/main/static/main/css/nav.css

@@ -35,3 +35,8 @@ nav > a.home {
 nav > a.logout {
 	float: right;
 }
+nav > a img {
+	height: var(--nav-lh);
+	vertical-align: top;
+	margin-right: .5rem;
+}

nummi/main/static/main/svg/logo-white.svg

@@ -0,0 +1,22 @@
+<svg version="1.1"
+	width="100"
+	height="100"
+	xmlns="http://www.w3.org/2000/svg">
+	
+	<defs>
+		<rect id="basemask" x="-10" y="-10" width="110" height="110" />
+		<rect id="line" x="45" y="-10" width="10" height="120" />
+	</defs>
+
+	<mask id="mask">
+		<use href="#basemask" fill="white" />
+		<use href="#line" fill="black" />
+		<use href="#line" transform="translate(20)" fill="black" />
+	</mask>
+
+	<polygon points="25,0 75,0 100,25 100,75 75,100 25,100 0,75 0,25"
+		fill="white"
+		mask="url(#mask)"
+		transform-origin="center center" transform="rotate(10) scale(.8)" />
+</svg>
+

nummi/main/static/main/svg/logo.svg

@@ -0,0 +1,22 @@
+<svg version="1.1"
+	width="100"
+	height="100"
+	xmlns="http://www.w3.org/2000/svg">
+	
+	<defs>
+		<rect id="basemask" x="-10" y="-10" width="110" height="110" />
+		<rect id="line" x="45" y="-10" width="10" height="120" />
+	</defs>
+
+	<mask id="mask">
+		<use href="#basemask" fill="white" />
+		<use href="#line" fill="black" />
+		<use href="#line" transform="translate(20)" fill="black" />
+	</mask>
+
+	<polygon points="25,0 75,0 100,25 100,75 75,100 25,100 0,75 0,25"
+		fill="#006633"
+		mask="url(#mask)"
+		transform-origin="center center" transform="rotate(10) scale(.8)" />
+</svg>
+

nummi/main/templates/main/base.html

@@ -8,6 +8,7 @@
 		<title>{% block title %}Nummi{% endblock %}</title>
 	
 		{% block link %}
+		<link rel="icon" href="{% static 'main/svg/logo.svg' %}" type="image/svg+xml" />
 		<link rel="stylesheet" href="{% static 'main/css/main.css' %}" type="text/css" />
 		<link rel="stylesheet" href="{% static 'main/css/nav.css' %}" type="text/css" />
 		<link rel="stylesheet" href="{% static 'main/fontawesome/css/all.min.css' %}" type="text/css" />
@@ -19,7 +20,7 @@
 		<nav>
 			<a href="{% url 'index' %}"
 				class="home{% if request.resolver_match.url_name == 'index' %} cur{% endif %}">
-				Nummi
+				<img src="{% static 'main/svg/logo-white.svg' %}" />Nummi
 			</a>
 			<a href="{% url 'transactions' %}"
 				class="{% if request.resolver_match.url_name == 'transactions' %}cur{% endif %}">

nummi/main/templates/main/index.html

@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block body %}
-<h1>Nummi</h1>
+<h1><img src="{% static 'main/svg/logo.svg' %}" />Nummi</h1>
 
 {% if transactions %}
 <h2>Transactions</h2>