From 6fa5f0ab2e4baa92e444aea42b78a640c0abd049 Mon Sep 17 00:00:00 2001
From: "Peter J. Holzer" <hjp@hjp.at>
Date: Mon, 13 Apr 2020 13:13:21 +0200
Subject: [PATCH] Start luga style (based on my 2018 design)

---
 style/logo3.svg        | 120 +++++++++++++++
 style/luga.css         | 342 +++++++++++++++++++++++++++++++++++++++++
 templates/message.html |  19 ++-
 3 files changed, 474 insertions(+), 7 deletions(-)
 create mode 100644 style/logo3.svg
 create mode 100644 style/luga.css

diff --git a/style/logo3.svg b/style/logo3.svg
new file mode 100644
index 0000000..fb36c6a
--- /dev/null
+++ b/style/logo3.svg
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="190"
+   height="270"
+   viewBox="0 0 50.270832 71.437501"
+   version="1.1"
+   id="svg4508"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="logo3.svg">
+  <defs
+     id="defs4502" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.4851852"
+     inkscape:cx="82.662061"
+     inkscape:cy="135"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1600"
+     inkscape:window-height="1150"
+     inkscape:window-x="1024"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5053"
+       empspacing="10" />
+    <inkscape:grid
+       type="xygrid"
+       id="grid5055" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4505">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-225.56249)">
+    <path
+       sodipodi:nodetypes="sscccss"
+       inkscape:connector-curvature="0"
+       id="path5296"
+       d="m 25.450397,225.95053 c -12.469359,0 -22.5777773,10.10842 -22.5777773,22.57778 0,12.46936 10.1084183,22.57778 22.5777773,22.57778 l -3.225395,9.03111 14.816665,-12.24139 c 6.57855,-3.94568 10.986508,-11.13812 10.986508,-19.3675 0,-12.46936 -10.108419,-22.57778 -22.577778,-22.57778 z"
+       style="fill:none;stroke:#000000;stroke-width:0.95408529;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <g
+       aria-label="LUGA"
+       style="font-style:normal;font-weight:normal;font-size:3.38666677px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.28222224"
+       id="text5298">
+      <path
+         d="m 2.2381847,286.89925 c 0,-1.524 0.04064,-2.98704 0.2032,-4.064 l -0.02032,-0.061 c -0.24384,0.0406 -0.8128001,0.061 -1.0566401,0.061 -0.24384,0 -0.79248006,-0.0203 -1.03632008,-0.061 l -0.04064,0.061 c 0.16256001,1.15824 0.20320001,2.54 0.20320001,4.064 v 4.9784 c 0,1.524 -0.04064,2.96672 -0.20320001,4.064 l 0.02032,0.061 c 0,0 0.36576003,-0.061 1.05664008,-0.061 H 6.911785 c 0.4267201,0 0.8940801,0.0203 1.2192001,0.061 l 0.04064,-0.061 c -0.02032,-0.28448 -0.04064,-0.69088 -0.04064,-0.89408 0,-0.2032 0.02032,-0.54864 0.04064,-0.7112 l -0.04064,-0.0813 c 0,0 -3.0073602,0.44704 -5.7302404,0.44704 -0.14224,-0.48768 -0.16256,-2.47904 -0.16256,-2.82448 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20.3200016px;line-height:1.25;font-family:'Linux Biolinum O';-inkscape-font-specification:'Linux Biolinum O';stroke-width:0.28222224"
+         id="path18" />
+      <path
+         d="m 19.888646,286.89925 v 3.41376 c 0,2.27584 -0.34544,4.69392 -3.77952,4.69392 -3.41376,0 -3.41376,-3.43408 -3.41376,-4.53136 v -3.57632 c 0,-1.524 0.04064,-2.98704 0.2032,-4.064 l -0.04064,-0.061 c -0.24384,0.0406 -0.79248,0.061 -1.03632,0.061 -0.243841,0 -0.792481,-0.0203 -1.036321,-0.061 l -0.04064,0.061 c 0.16256,1.15824 0.2032,2.54 0.2032,4.064 v 4.24688 c 0,4.14528 2.905761,4.99872 4.734561,4.99872 4.1656,0 5.30352,-2.58064 5.30352,-6.1976 v -3.048 c 0,-1.524 0.04064,-2.98704 0.2032,-4.064 l -0.04064,-0.061 c -0.24384,0.0406 -0.46736,0.061 -0.7112,0.061 -0.24384,0 -0.46736,-0.0203 -0.7112,-0.061 l -0.04064,0.061 c 0.16256,1.15824 0.2032,2.54 0.2032,4.064 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20.3200016px;line-height:1.25;font-family:'Linux Biolinum O';-inkscape-font-specification:'Linux Biolinum O';stroke-width:0.28222224"
+         id="path20" />
+      <path
+         d="m 33.978664,293.56421 v 0.9144 c -0.69088,0.65024 -1.889761,0.77216 -2.987041,0.77216 -3.61696,0 -4.95808,-3.27152 -4.95808,-5.95376 0,-3.556 1.97104,-5.83184 4.71424,-5.83184 1.8288,0 3.393441,1.016 4.307841,2.56032 l 0.24384,-0.0203 c 0.06096,-1.03632 0.18288,-1.58496 0.4064,-2.35712 l -0.04064,-0.061 c 0,0 -2.15392,-1.016 -4.632961,-1.016 -3.49504,0 -7.09168,2.45872 -7.09168,6.92912 0,3.51536 2.49936,6.64464 6.58368,6.64464 2.357121,0 4.023361,-0.67056 5.405121,-1.8288 v -0.061 c -0.18288,-0.2032 -0.2032,-0.75184 -0.2032,-0.97536 v -0.12192 c 0,-1.524 0.04064,-2.37744 0.2032,-3.4544 l -0.02032,-0.061 c 0,0 -0.34544,0.061 -1.05664,0.061 -0.69088,0 -1.03632,-0.061 -1.03632,-0.061 l -0.04064,0.061 c 0.16256,1.15824 0.2032,2.3368 0.2032,3.8608 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20.3200016px;line-height:1.25;font-family:'Linux Biolinum O';-inkscape-font-specification:'Linux Biolinum O';stroke-width:0.28222224"
+         id="path22" />
+      <path
+         d="m 45.719495,290.35365 c -0.67056,0.0203 -1.524,0.0406 -2.11328,0.0406 -0.58928,0 -1.68656,-0.0203 -2.133601,-0.0406 l 2.153921,-4.99872 h 0.04064 c 0.83312,1.91008 1.50368,3.57632 2.05232,4.99872 z m -4.632961,0.95504 c 0.508,-0.0406 1.910081,-0.061 2.621281,-0.061 0.77216,0 1.88976,0.0203 2.37744,0.061 0.99568,2.66192 1.44272,4.24688 1.58496,4.69392 0.34544,-0.061 0.67056,-0.061 1.016,-0.061 0.34544,0 0.87376,0 1.2192,0.061 -1.016,-2.05232 -3.69824,-8.98144 -5.56768,-13.43152 h -0.56896 c -1.950721,4.51104 -3.942081,8.9408 -5.994401,13.43152 0.24384,-0.061 0.48768,-0.061 0.7112,-0.061 0.22352,0 0.67056,0 0.9144,0.061 0.32512,-1.23952 0.95504,-2.90576 1.68656,-4.69392 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20.3200016px;line-height:1.25;font-family:'Linux Biolinum O';-inkscape-font-specification:'Linux Biolinum O';stroke-width:0.28222224"
+         id="path24" />
+    </g>
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;stroke:none;stroke-width:87.20666504;marker:none;enable-background:accumulate"
+       d="m 20.723177,242.88387 c -0.186172,0.40167 -0.415275,0.81466 -0.723197,1.25236 -1.142082,1.35814 -2.757238,3.55025 -3.518958,5.83847 -0.277593,0.83391 -0.444595,1.68125 -0.432152,2.50472 h 1.12889 c -0.0109,-0.82347 0.136229,-1.67081 0.379235,-2.50472 0.666803,-2.28822 2.078212,-4.48033 3.077985,-5.83847 0.269555,-0.4377 0.472028,-0.85069 0.635,-1.25236 z m 10.054165,0 c 0.28525,0.5001 0.61691,0.98048 0.9525,1.46402 0.804897,1.0867 1.856803,2.67484 2.460625,4.49792 0.377634,1.14047 0.580707,2.37495 0.432152,3.63361 h 1.358193 c 0.169704,-1.25866 -0.0625,-2.49314 -0.493887,-3.63361 -0.689766,-1.82308 -1.893935,-3.41122 -2.813404,-4.49792 -0.383358,-0.48354 -0.758939,-0.96392 -1.084792,-1.46402 z"
+       id="path5294"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#c00810;fill-opacity:1;stroke:#ff0000;stroke-width:1.12888896;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
+       d="m 16.04887,252.47942 c 0.0037,0.24296 0.02574,0.48586 0.06174,0.7232 -0.04949,0.0443 -0.09631,0.0933 -0.14111,0.14111 -0.335314,0.35798 -0.579416,0.78394 -0.855486,1.07597 -0.25792,0.25728 -0.628055,0.35783 -1.031875,0.50271 -0.403976,0.14495 -0.850844,0.3565 -1.12007,0.87312 -5.55e-4,8e-4 5.56e-4,0.008 0,0.009 -0.243718,0.45522 -0.171444,0.97836 -0.09701,1.46403 0.07444,0.48567 0.152942,0.94099 0.05292,1.25236 -0.319718,0.87388 -0.357361,1.48418 -0.132291,1.92264 0.225552,0.43938 0.68412,0.63136 1.208263,0.74083 1.048284,0.21895 2.470668,0.16548 3.589514,0.75848 1.197788,0.62623 2.409034,0.84746 3.377849,0.62618 0.702405,-0.16043 1.277035,-0.58233 1.56986,-1.22591 0.757766,-0.004 1.587248,-0.32353 2.919235,-0.39687 0.903618,-0.0728 2.035372,0.31904 3.333749,0.24694 0.03394,0.14087 0.08269,0.27695 0.149931,0.4057 5.29e-4,0.001 -5.29e-4,0.007 0,0.009 0.503314,1.00647 1.437526,1.46331 2.434167,1.38465 0.997953,-0.0788 2.061559,-0.66382 2.919235,-1.68451 0.817491,-0.99124 2.16943,-1.40644 3.069167,-1.9491 0.449871,-0.27134 0.818459,-0.60896 0.846666,-1.10243 0.02819,-0.49323 -0.260186,-1.05123 -0.926041,-1.79035 -0.218776,-0.24723 -0.319987,-0.70266 -0.432152,-1.19062 -0.112086,-0.48767 -0.243451,-1.01728 -0.643819,-1.3582 -0.159342,-0.13884 -0.327139,-0.22773 -0.49389,-0.29104 0.129281,-0.38341 0.222068,-0.76577 0.273402,-1.14653 H 16.04887 Z"
+       id="rect5320"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#c00810;fill-opacity:1;stroke:#ff0000;stroke-width:1.12888896;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
+       d="m 26.076578,232.05359 c -0.198736,-5.6e-4 -0.410011,0.009 -0.626181,0.0265 -5.463429,0.44 -4.011134,6.21636 -4.09222,8.14916 -0.06817,0.96573 -0.233426,1.78823 -0.635,2.65466 h 10.865552 c -0.548955,-0.84252 -0.947301,-1.75047 -0.93486,-2.89278 0.03066,-2.77829 0.311663,-7.93083 -4.577291,-7.9375 z m -4.224514,8.65187 v 0.27341 c -0.01998,-0.0966 -0.01961,-0.18687 0,-0.27341 z"
+       id="rect5322"
+       inkscape:connector-curvature="0" />
+    <g
+       transform="matrix(0.26458333,0,0,0.26458333,-96.22184,391.91056)"
+       id="g5337">
+      <g
+         id="g5341"
+         transform="matrix(0.73659472,0,0,0.73659472,114.96869,-150.52526)">
+        <g
+           style="fill:#101760;fill-opacity:1"
+           transform="rotate(120,399.74656,78.12011)"
+           id="g5361" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/style/luga.css b/style/luga.css
new file mode 100644
index 0000000..3421f1c
--- /dev/null
+++ b/style/luga.css
@@ -0,0 +1,342 @@
+.partouter {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #0000FF;
+}
+
+.partinner {
+    border-style: dotted;
+    border-width: 1px;
+    border-color: #0000FF;
+}
+
+.partheader {
+    background-color: #0000FF;
+    color: #FFFFFF;
+    font-size: 70%;
+}
+
+th {
+    text-align: left;
+}
+
+.subject {
+    font-size: 1.2em;
+    color: #000088;
+}
+
+.text-enriched {
+    font-family: monospace;
+    white-space: pre-wrap;
+    max-width: 60em;
+}
+
+.signature {
+    font-size: 0.8rem;
+}
+
+.dubious {
+    background-color: #888800;
+}
+
+.partinner.html {
+    max-width: 40rem;
+}
+
+p.fixed {
+    font-family: monospace;
+    white-space: pre;
+    margin: 0.2em;
+    font-size: 1rem;
+    font-size-adjust: 0.5625;
+}
+
+p.flowed {
+    font-family: monospace;
+    white-space: pre-wrap;
+    max-width: 60em;
+    margin: 0.2em;
+    font-size: 1rem;
+    font-size-adjust: 0.5625;
+}
+
+.text_plain_flowed blockquote {
+    border-left: solid 0.2em #004;
+    padding-left: 0.8em;
+    margin: 0em;
+    background: #EEF;
+}
+
+body {
+  --color-accent-light: #fecc04;
+  --color-accent-dark: #feb204;
+  --width-column-left: auto
+}
+
+@font-face {
+  font-family: "Linux Biolinum O";
+  font-style: normal;
+  src: url(LinBiolinum_R.otf);
+}
+
+@font-face {
+  font-family: "Linux Biolinum O";
+  font-style: italic;
+  src: url(LinBiolinum_RI.otf);
+}
+
+header {
+    background-color: var(--color-accent-light);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+  border-radius: 0em 1em 0em 0em;
+}
+
+@media only screen and (min-width: 65rem) {
+  body {
+    display: grid;
+    grid-template-columns: var(--width-column-left) auto 20rem;
+    grid-template-rows: 3rem auto auto auto;
+  }
+
+  #logo {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+
+  header {
+    grid-column: 2 / span 2;
+    grid-row: 1;
+  }
+
+  nav {
+    grid-column: 1;
+    grid-row: 3;
+    overflow: hidden;
+  }
+
+  article {
+    grid-column: 2;
+    grid-row: 2 / span 3;
+  }
+
+  footer {
+    grid-column: 3;
+    grid-row: 2 / span 3;
+    text-align: right;
+  }
+
+}
+
+@media only screen and (min-width: 40rem) and (max-width: 65rem) {
+  body {
+    display: grid;
+    grid-template-columns: var(--width-column-left) auto;
+    grid-template-rows: auto auto auto auto auto;
+  }
+
+  #logo {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+
+  header {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  nav {
+    grid-column: 1;
+    grid-row: 3;
+  }
+
+  article {
+    grid-column: 2;
+    grid-row: 2 / span 3;
+  }
+
+  footer {
+    grid-column: 1 / span 2;
+    grid-row: 5;
+    text-align: left;
+  }
+
+}
+
+@media only screen and (max-width: 40rem) {
+  body {
+    display: grid;
+    grid-template-columns: var(--width-column-left) auto;
+    grid-template-rows: auto auto auto auto auto;
+  }
+
+  #logo {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    width: 3rem;
+  }
+
+  header {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  nav {
+    grid-column: 1;
+    grid-row: 3;
+    overflow: hidden;
+    width: 3em;
+  }
+
+  nav:hover {
+    overflow: visible;
+    z-index: 1;
+    width: auto;
+  }
+
+  article {
+    grid-column: 2;
+    grid-row: 2 / span 3;
+  }
+
+  footer {
+    grid-column: 1 / span 2;
+    grid-row: 5;
+    text-align: left;
+  }
+
+}
+
+nav a {
+    color: #008;
+    text-decoration: none;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+nav a:focus {
+  border: 1px dotted #CCF;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+nav a.current {
+    background-color: var(--color-accent-dark);
+}
+
+input.leftfield {
+  border: 1px black solid;
+  border-radius: 0.5rem 0px 0px 0.5rem;
+  padding: 0.3rem 0.5rem;
+  height: 1.0rem;
+}
+
+label.rightbutton {
+  border: 1px black solid;
+  border-radius: 0px 0.5rem 0.5rem 0px;
+  padding: 0.1rem;
+  background-color: #EEE;
+  position: relative;
+  top: 0.1em;
+  height: 1.4rem;
+}
+
+header form {
+  margin: 0.5em;
+}
+
+header button {
+  margin: 0.6em;
+}
+
+body {
+  font-family: "Linux Biolinum O";
+  font-size-adjust: 0.5625;
+}
+
+h1 {
+  margin: 0px;
+  padding-left: 0.5rem;
+  font-weight: normal;
+}
+
+footer {
+  /* background-color: var(--color-accent-dark); */
+  color: #888;
+}
+nav {
+  background-color: var(--color-accent-light);
+  border-radius: 0em 0em 0em 1em;
+  margin-right: 1rem;
+  margin-top: 1rem;
+}
+
+nav ul {
+  list-style-type: none;
+  padding-left: 0.7em;
+  background-color: var(--color-accent-light);
+}
+
+footer ul {
+  list-style-type: none;
+  padding-left: 1em;
+}
+
+p, h2, h3, dl {
+  max-width: 40rem;
+  padding-left: 0.5rem;
+}
+
+h2 {
+  border-top: solid 2px var(--color-accent-dark);
+  font-weight: normal;
+  font-size: 1.7rem;
+}
+
+h3 {
+  border-top: solid 1px var(--color-accent-light);
+  font-weight: normal;
+  font-size: 1.5rem;
+}
+
+.oneline {
+    white-space: nowrap;
+}
+
+nav input {
+    width: 8rem;
+}
+nav form {
+    padding: 0.5em;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.event dl dt {
+  font-size: 0.8em;
+  margin-top: 0.5em;
+}
+
+dd p:first-child {
+  margin-top: 0;
+}
+
+table.thread {
+    white-space: nowrap;
+}
+
+pre {
+    font-size: monospace;
+    font-size: 1rem;
+    font-size-adjust: 0.5625;
+}
diff --git a/templates/message.html b/templates/message.html
index 03c8d69..10d089f 100644
--- a/templates/message.html
+++ b/templates/message.html
@@ -5,20 +5,25 @@
         <title>
             {{list}}: {{subject}}
         </title>
-        <link rel="stylesheet" href="../../style/debug.css">
+        <link rel="stylesheet" href="../../style/luga.css">
     </head>
     <body>
-        <h1>{{subject}}</h1>
+        <img id="logo" src="/style/logo3.svg">
+        <header>
+          <h1>{{subject}}</h1>
+        </header>
         <nav>
           {{threadhtml}}
         </nav>
-        <table>
+        <article class="email">
+          <table>
             <tr> <th>Message-Id </th> <td>{{message_id}} </td> </tr>
             <tr> <th>From </th> <td>{{from}} </td> </tr>
             <tr> <th>Date </th> <td>{{date}} </td> </tr>
-        </table>
-        
-        {{bodyhtml}}
-        
+          </table>
+
+          {{bodyhtml}}
+        </article>
+
     </body>
 </html>