Improved accessibility, switched to locally supplied icons

saturn/__init__.py

@@ -1,4 +1,4 @@
-import argparse
+#import argparse
 import configparser
 import logging
 import locale
@@ -12,14 +12,14 @@ from .server import create_app
 from .calendar import get_davclient
 
 
-parser = argparse.ArgumentParser(description='Web-based CalDav client')
+#parser = argparse.ArgumentParser(description='Web-based CalDav client')
-parser.add_argument('-c', '--config', type=Path, default='config.ini',
+#parser.add_argument('-c', '--config', type=Path, default='config.ini',
-        help='Configuration file path')
+#        help='Configuration file path')
-
+#
-args = parser.parse_args()
+#args = parser.parse_known_args()
 
 config = configparser.RawConfigParser()
-config.read(args.config)
+config.read('config.ini')
 
 locale.setlocale(locale.LC_ALL, config.get('locale', 'locale', fallback=None))
 

saturn/server/static/css/index.css

@@ -4,40 +4,28 @@ body {
 		1fr;
 	grid-template-rows:
 		auto
-		1fr;
+		1fr
+		auto;
+}
+
+body > .topbar,
+body > footer {
+	grid-column: 1 / span 2;
+	padding: 1rem 3rem;
+	position: relative;
 }
 
 body > .topbar {
+	padding-top: 3rem;
 	grid-row: 1;
-	grid-column: 1 / span 2;
-	margin: 3rem 3rem 1rem 3rem;
-	position: relative;
 }
 .topbar h1 {
 	margin: 0;
 }
-.topbar > a {
+
-	position: absolute;
+body > footer {
-	top: 0;
+	grid-row: 3;
-	right: 0;
+	background: var(--ui-01);
-	color: var(--text-02) !important;
-	text-decoration: none;
-	padding: 0 1rem;
-	line-height: 4rem;
-	background: none;
-	cursor: pointer;
-}
-.topbar > a > i {
-	vertical-align: top;
-}
-.topbar > a:hover {
-	background: var(--hover-ui);
-}
-.topbar > a:active {
-	background: var(--active-ui);
-}
-.topbar > a:focus {
-	outline: 2px solid var(--focus);
 }
 
 body > #events {

saturn/server/static/css/login.css

@@ -70,7 +70,6 @@ form button:focus {
 	outline: 2px solid var(--focus);
 }
 form button.primary {
-	padding-right: 4rem;
 	color: var(--text-04);
 	background: var(--interactive-01);
 	position: relative;

saturn/server/static/icons/remixicon.css

@@ -0,0 +1,45 @@
+
+/*
+* https://remixicon.com
+* https://github.com/Remix-Design/RemixIcon
+* Copyright RemixIcon.com
+* Released under the Apache License Version 2.0
+*/
+
+@font-face {
+    font-family: "remixicon";
+    src: url('remixicon.eot?t=1643377622508'); /* IE9*/
+    src: url('remixicon.eot?t=1643377622508#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url("remixicon.woff2?t=1643377622508") format("woff2"),
+    url("remixicon.woff?t=1643377622508") format("woff"),
+    url('remixicon.ttf?t=1643377622508') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    url('remixicon.svg?t=1643377622508#remixicon') format('svg'); /* iOS 4.1- */
+    font-display: swap;
+}
+
+[class^="ri-"], [class*="ri-"] {
+    font-family: 'remixicon' !important;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
+.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
+.ri-xxs { font-size: .5em; }
+.ri-xs { font-size: .75em; }
+.ri-sm { font-size: .875em }
+.ri-1x { font-size: 1em; }
+.ri-2x { font-size: 2em; }
+.ri-3x { font-size: 3em; }
+.ri-4x { font-size: 4em; }
+.ri-5x { font-size: 5em; }
+.ri-6x { font-size: 6em; }
+.ri-7x { font-size: 7em; }
+.ri-8x { font-size: 8em; }
+.ri-9x { font-size: 9em; }
+.ri-10x { font-size: 10em; }
+.ri-fw { text-align: center; width: 1.25em; }
+
+.ri-map-pin-line:before { content: "\ef14"; }
+.ri-repeat-line:before { content: "\f074"; }

saturn/server/static/icons/remixicon.less

@@ -0,0 +1,47 @@
+
+/*
+* https://remixicon.com
+* https://github.com/Remix-Design/RemixIcon
+* Copyright RemixIcon.com
+* Released under the Apache License Version 2.0
+*/
+
+@font-face {
+    font-family: "remixicon";
+    src: url('remixicon.eot?t=1643377622508'); /* IE9*/
+    src: url('remixicon.eot?t=1643377622508#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url("remixicon.woff2?t=1643377622508") format("woff2"),
+    url("remixicon.woff?t=1643377622508") format("woff"),
+    url('remixicon.ttf?t=1643377622508') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    url('remixicon.svg?t=1643377622508#remixicon') format('svg'); /* iOS 4.1- */
+    font-display: swap;
+}
+
+[class^="ri-"], [class*="ri-"] {
+    font-family: 'remixicon' !important;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+:global {
+.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
+.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
+.ri-xxs { font-size: .5em; }
+.ri-xs { font-size: .75em; }
+.ri-sm { font-size: .875em }
+.ri-1x { font-size: 1em; }
+.ri-2x { font-size: 2em; }
+.ri-3x { font-size: 3em; }
+.ri-4x { font-size: 4em; }
+.ri-5x { font-size: 5em; }
+.ri-6x { font-size: 6em; }
+.ri-7x { font-size: 7em; }
+.ri-8x { font-size: 8em; }
+.ri-9x { font-size: 9em; }
+.ri-10x { font-size: 10em; }
+.ri-fw { text-align: center; width: 1.25em; }
+
+.ri-map-pin-line:before { content: "\ef14"; }
+.ri-repeat-line:before { content: "\f074"; }
+}

saturn/server/static/icons/remixicon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+    <font id="remixicon" horiz-adv-x="1200">
+    <font-face font-family="remixicon"
+        units-per-em="1200" ascent="1200"
+        descent="0" />
+    <missing-glyph horiz-adv-x="0" /><glyph glyph-name="map-pin-line"
+            unicode="&#xEF14;"
+            horiz-adv-x="1200" d="M600 155L847.5 402.5A350 350 0 1 1 352.5 402.5L600 155zM600 13.6000000000001L281.8 331.8000000000002A450 450 0 1 0 918.2 331.8000000000002L600 13.5999999999999zM600 550A100 100 0 1 1 600 750A100 100 0 0 1 600 550zM600 450A200 200 0 1 0 600 850A200 200 0 0 0 600 450z" /><glyph glyph-name="repeat-line"
+            unicode="&#xF074;"
+            horiz-adv-x="1200" d="M300 1000H1050A50 50 0 0 0 1100 950V600H1000V900H300V750L50 950L300 1150V1000zM900 200H150A50 50 0 0 0 100 250V600H200V300H900V450L1150 250L900 50V200z" /></font></defs></svg>

saturn/server/static/icons/remixicon.symbol.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="display:none;"><symbol viewBox="0 0 24 24" id="map-pin-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 20.9l4.95-4.95a7 7 0 1 0-9.9 0L12 20.9zm0 2.828l-6.364-6.364a9 9 0 1 1 12.728 0L12 23.728zM12 13a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 2a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></symbol><symbol viewBox="0 0 24 24" id="repeat-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M6 4h15a1 1 0 0 1 1 1v7h-2V6H6v3L1 5l5-4v3zm12 16H3a1 1 0 0 1-1-1v-7h2v6h14v-3l5 4-5 4v-3z"/></symbol></svg>

saturn/server/templates/base.html

@@ -4,11 +4,14 @@
 		<meta charset='utf-8' />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 
+		<meta name="description" content="{% block description %}Saturn - Web based CalDav client.{% endblock %}" />
+
 		<title>{% block title %}Saturn{% endblock %}</title>
 		
 		<link rel="icon" type="text/svg" href="/static/svg/logo.svg" />
 		{% block style %}
 		<link rel="stylesheet" href="/static/css/main.css" />
+		<link rel="stylesheet" href="/static/icons/remixicon.css" />
 		{% endblock %}
 	</head>
 	<body>

saturn/server/templates/index.html

@@ -3,13 +3,11 @@
 {% block style %}
 {{ super() }}
 <link rel="stylesheet" href="/static/css/index.css" />
-<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
 {% endblock %}
 
 {% block body %}
 <div class="topbar">
-	<h1><img src="/static/svg/logo.svg" /> Saturn</h1>
+	<h1><img src="/static/svg/logo.svg" alt="" /> Saturn</h1>
-	<a href="/logout"><i class="ri-logout-box-line ri-2x"></i></a>
 </div>
 
 <div id="events">
@@ -78,4 +76,8 @@
 	</div>
 	{% endfor %}
 </div>
+
+<footer>
+	<a href="/logout">Log Out</a>
+</footer>
 {% endblock %}

saturn/server/templates/login.html

@@ -3,7 +3,6 @@
 {% block style %}
 {{ super() }}
 <link rel="stylesheet" href="/static/css/login.css" />
-<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
 {% endblock %}
 
 {% block body %}
@@ -14,7 +13,7 @@
 	{% endif %}
 	<input class="txt" type="password" name="password" placeholder="Password" />
 	<button class="icon" type="reset">
-		<i class="ri-delete-back-2-line ri-fw"></i>
+		Clear
 	</button>
 	<button class="primary" type="submit">
 		Log In