Start luga style (based on my 2018 design)

This commit is contained in:
Peter J. Holzer 2020-04-13 13:13:21 +02:00
parent 6923e6273a
commit 6fa5f0ab2e
3 changed files with 474 additions and 7 deletions

120
style/logo3.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 10 KiB

342
style/luga.css Normal file
View File

@ -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;
}

View File

@ -5,20 +5,25 @@
<title> <title>
{{list}}: {{subject}} {{list}}: {{subject}}
</title> </title>
<link rel="stylesheet" href="../../style/debug.css"> <link rel="stylesheet" href="../../style/luga.css">
</head> </head>
<body> <body>
<h1>{{subject}}</h1> <img id="logo" src="/style/logo3.svg">
<header>
<h1>{{subject}}</h1>
</header>
<nav> <nav>
{{threadhtml}} {{threadhtml}}
</nav> </nav>
<table> <article class="email">
<table>
<tr> <th>Message-Id </th> <td>{{message_id}} </td> </tr> <tr> <th>Message-Id </th> <td>{{message_id}} </td> </tr>
<tr> <th>From </th> <td>{{from}} </td> </tr> <tr> <th>From </th> <td>{{from}} </td> </tr>
<tr> <th>Date </th> <td>{{date}} </td> </tr> <tr> <th>Date </th> <td>{{date}} </td> </tr>
</table> </table>
{{bodyhtml}} {{bodyhtml}}
</article>
</body> </body>
</html> </html>