Move stylesheet to other file.

2 files changed, 100 insertions, 98 deletions

diff --git a/mu4web/main.py b/mu4web/main.py
index 05a8408..fe02f3b 100644
--- a/mu4web/main.py
+++ b/mu4web/main.py
@@ -59,103 +59,6 @@ def header_format(key: str, value) -> HTML:
         return value
 
 
-style: HTML = lambda: """
-    body, html {
-        padding: 0;
-        margin: 0;
-    }
-    nav {
-        display: block;
-        height: 4em;
-        color: white;
-        background-color: darkgrey;
-    }
-
-    nav, footer {
-        width: 100%;
-        padding-left: 1em;
-        padding-right: 1em;
-        box-sizing: border-box;
-    }
-
-    menu {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        justify-content: space-between;
-        height: 100%;
-    }
-
-    menu > li {
-        display: flex;
-        align-items: center;
-    }
-
-    dl {
-        display: grid;
-        grid-template-columns: 10ch auto;
-    }
-    dt {
-        font-weight: bold;
-    }
-    dd {
-        font-family: mono;
-        font-size: 80%;
-    }
-    dd > * {
-        margin: 0;
-    }
-
-    tr:nth-child(2n) {
-        background-color: lightblue;
-    }
-
-    .loginform {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        width: 50ch;
-    }
-
-    .loginform label {
-        padding: 0.5ex;
-    }
-
-    .loginform input[type="submit"] {
-        grid-column: 1/3;
-    }
-
-    main {
-        margin: 1em;
-    }
-
-    footer menu {
-        justify-content: space-around;
-    }
-
-    footer a {
-        color: darkgrey;
-    }
-
-    footer {
-        border-top: 1px solid grey;
-    }
-
-    #searchform {
-        display: grid;
-        grid-template-columns: 1fr auto;
-    }
-
-    #searchform input {
-        grid-column: 1/3;
-    }
-
-    #searchform input[type="submit"] {
-        grid-column: 2;
-    }
-
-    """
-
-
 def attachement_tree(mail: EmailMessage) -> HTML:
     ct = mail.get_content_type()
     fn = mail.get_filename()
@@ -210,13 +113,19 @@ def flashed_messages() -> HTML:
             *[('li', msg) for msg in get_flashed_messages()])
 
 
+def include_stylesheet(path):
+    return ('link', {'type': 'text/css',
+                     'rel': 'stylesheet',
+                     'href': path})
+
+
 def page_base(title: Optional[str] = None,
               body: HTML = []) -> HTML:
     return ('html',
             ('head',
              ('meta', {'charset': 'utf-8'}),
              ('title', title),
-             ('style', style),
+             include_stylesheet('/static/style.css'),
              ),
             ('body',
              ('nav',
diff --git a/mu4web/static/style.css b/mu4web/static/style.css
new file mode 100644
index 0000000..b8df022
--- /dev/null
+++ b/mu4web/static/style.css
@@ -0,0 +1,93 @@
+body, html {
+	padding: 0;
+	margin: 0;
+}
+nav {
+	display: block;
+	height: 4em;
+	color: white;
+	background-color: darkgrey;
+}
+
+nav, footer {
+	width: 100%;
+	padding-left: 1em;
+	padding-right: 1em;
+	box-sizing: border-box;
+}
+
+menu {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	justify-content: space-between;
+	height: 100%;
+}
+
+menu > li {
+	display: flex;
+	align-items: center;
+}
+
+dl {
+	display: grid;
+	grid-template-columns: 10ch auto;
+}
+dt {
+	font-weight: bold;
+}
+dd {
+	font-family: mono;
+	font-size: 80%;
+}
+dd > * {
+	margin: 0;
+}
+
+tr:nth-child(2n) {
+	background-color: lightblue;
+}
+
+.loginform {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	width: 50ch;
+}
+
+.loginform label {
+	padding: 0.5ex;
+}
+
+.loginform input[type="submit"] {
+	grid-column: 1/3;
+}
+
+main {
+	margin: 1em;
+}
+
+footer menu {
+	justify-content: space-around;
+}
+
+footer a {
+	color: darkgrey;
+}
+
+footer {
+	border-top: 1px solid grey;
+}
+
+#searchform {
+	display: grid;
+	grid-template-columns: 1fr auto;
+}
+
+#searchform input {
+	grid-column: 1/3;
+}
+
+#searchform input[type="submit"] {
+	grid-column: 2;
+}
+