feat: use tailwind css
This commit is contained in:
schreifuchs committed
1 parent
3153475bad
commit
8adff6ade2
8 files changed
+315
-294
No files matched your search
@@ -1,86 +1,139 @@
|
||||
@page {
|
||||
size: A4;
|
||||
padding: 2cm;
|
||||
}
|
||||
@page:first {
|
||||
padding: 0;
|
||||
}
|
||||
@media print {
|
||||
.page,
|
||||
.page-break {
|
||||
break-after: page;
|
||||
}
|
||||
.markdown h1 {
|
||||
font-size: 2.25em; /* relative to base 12pt */
|
||||
font-weight: 700; /* font-bold */
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.first-page {
|
||||
margin-left: 2cm;
|
||||
margin-right: 2cm;
|
||||
.markdown h2 {
|
||||
font-size: 1.875em;
|
||||
font-weight: 600;
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 12pt;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
p {
|
||||
margin-top: 0.25em;
|
||||
.markdown h3 {
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0.5em;
|
||||
.markdown h4 {
|
||||
font-size: 1.25em;
|
||||
font-weight: 500;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
.markdown p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown strong {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.markdown em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
background-color: #f3f4f6;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 0.875em; /* relative to base 12pt */
|
||||
padding: 0.125em 0.25em;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
background-color: #111827;
|
||||
color: #f3f4f6;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 0.875em;
|
||||
padding: 1em;
|
||||
border-radius: 0.5em;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
border-left: 4px solid #d1d5db;
|
||||
padding-left: 1em;
|
||||
font-style: italic;
|
||||
color: #4b5563;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.markdown ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown ol {
|
||||
list-style-type: decimal;
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown li {
|
||||
margin-bottom: 0.25em;
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
border: none;
|
||||
border-top: 1px solid #d1d5db;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
max-width: 100%;
|
||||
border-radius: 0.5em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 0.25em 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
margin: 1em 0;
|
||||
font-size: 0.875em; /* relative to base 12pt */
|
||||
}
|
||||
|
||||
article {
|
||||
margin-bottom: 20px;
|
||||
.markdown th,
|
||||
.markdown td {
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 0.5em 0.25em;
|
||||
}
|
||||
|
||||
.issue-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
|
||||
margin-top: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.markdown th {
|
||||
background-color: #f3f4f6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Nested lists */
|
||||
.markdown ul ul {
|
||||
list-style-type: circle;
|
||||
padding-left: 1.5em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.markdown ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
padding-left: 1.5em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Minified by jsDelivr using Terser v5.39.0.
|
||||
* Original file: /npm/@tailwindcss/browser@4.1.16/dist/index.global.js
|
||||
*
|
||||
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
|
||||
*/
|
||||
"use strict";(()=>{var e=10;function t(t,a){let i=a?.from?{file:a.from,code:t}:null;"\ufeff"===t[0]&&(t=" "+t.slice(1));let l,s=[],c=[],u=[],d=null,f=null,p="",h="",m=0;for(let a=0;a<t.length;a++){let g=t.charCodeAt(a);if(13!==g||(l=t.charCodeAt(a+1),l!==e))if(92===g)""===p&&(m=a),p+=t.slice(a,a+2),a+=1;else if(47===g&&42===t.charCodeAt(a+1)){let e=a;for(let e=a+2;e<t.length;e++)if(l=t.charCodeAt(e),92===l)e+=1;else if(42===l&&47===t.charCodeAt(e+1)){a=e+1;break}let r=t.slice(e,a+1);if(33===r.charCodeAt(2)){let t=C(r.slice(2,-2));c.push(t),i&&(t.src=[i,e,a+1],t.dst=[i,e,a+1])}}else if(39===g||34===g){let e=o(t,a,g);p+=t.slice(a,e+1),a=e}else{if((32===g||g===e||9===g)&&(l=t.charCodeAt(a+1))&&(32===l||l===e||9===l||13===l&&(l=t.charCodeAt(a+2))&&l==e))continue;if(g===e){if(0===p.length)continue;l=p.charCodeAt(p.length-1),32!==l&&l!==e&&9!==l&&(p+=" ")}else if(45===g&&45===t.charCodeAt(a+1)&&0===p.length){let e="",r=a,c=-1;for(let n=a+2;n<t.length;n++)if(l=t.charCodeAt(n),92===l)n+=1;else if(39===l||34===l)n=o(t,n,l);else if(47===l&&42===t.charCodeAt(n+1)){for(let e=n+2;e<t.length;e++)if(l=t.charCodeAt(e),92===l)e+=1;else if(42===l&&47===t.charCodeAt(e+1)){n=e+1;break}}else if(-1===c&&58===l)c=p.length+n-r;else{if(59===l&&0===e.length){p+=t.slice(r,n),a=n;break}if(40===l)e+=")";else if(91===l)e+="]";else if(123===l)e+="}";else{if((125===l||t.length-1===n)&&0===e.length){a=n-1,p+=t.slice(r,n);break}(41===l||93===l||125===l)&&e.length>0&&t[n]===e[e.length-1]&&(e=e.slice(0,-1))}}let u=n(p,c);if(!u)throw new Error("Invalid custom property, expected a value");i&&(u.src=[i,r,a],u.dst=[i,r,a]),d?d.nodes.push(u):s.push(u),p=""}else if(59===g&&64===p.charCodeAt(0))f=r(p),i&&(f.src=[i,m,a],f.dst=[i,m,a]),d?d.nodes.push(f):s.push(f),p="",f=null;else if(59===g&&")"!==h[h.length-1]){let e=n(p);if(!e){if(0===p.length)continue;throw new Error(`Invalid declaration: \`${p.trim()}\``)}i&&(e.src=[i,m,a],e.dst=[i,m,a]),d?d.nodes.push(e):s.push(e),p=""}else if(123===g&&")"!==h[h.length-1])h+="}",f=z(p.trim()),i&&(f.src=[i,m,a],f.dst=[i,m,a]),d&&d.nodes.push(f),u.push(d),d=f,p="",f=null;else if(125===g&&")"!==h[h.length-1]){if(""===h)throw new Error("Missing opening {");if(h=h.slice(0,-1),p.length>0)if(64===p.charCodeAt(0))f=r(p),i&&(f.src=[i,m,a],f.dst=[i,m,a]),d?d.nodes.push(f):s.push(f),p="",f=null;else{let e=p.indexOf(":");if(d){let t=n(p,e);if(!t)throw new Error(`Invalid declaration: \`${p.trim()}\``);i&&(t.src=[i,m,a],t.dst=[i,m,a]),d.nodes.push(t)}}let e=u.pop()??null;null===e&&d&&s.push(d),d=e,p="",f=null}else if(40===g)h+=")",p+="(";else if(41===g){if(")"!==h[h.length-1])throw new Error("Missing opening (");h=h.slice(0,-1),p+=")"}else{if(0===p.length&&(32===g||g===e||9===g))continue;""===p&&(m=a),p+=String.fromCharCode(g)}}}if(64===p.charCodeAt(0)){let e=r(p);i&&(e.src=[i,m,t.length],e.dst=[i,m,t.length]),s.push(e)}if(h.length>0&&d){if("rule"===d.kind)throw new Error(`Missing closing } at ${d.selector}`);if("at-rule"===d.kind)throw new Error(`Missing closing } at ${d.name} ${d.params}`)}return c.length>0?c.concat(s):s}function r(e,t=[]){let r=e,n="";for(let t=5;t<e.length;t++){let o=e.charCodeAt(t);if(32===o||9===o||40===o){r=e.slice(0,t),n=e.slice(t);break}}return A(r.trim(),n.trim(),t)}function n(e,t=e.indexOf(":")){if(-1===t)return null;let r=e.indexOf("!important",t+1);return S(e.slice(0,t).trim(),e.slice(t+1,-1===r?e.length:r).trim(),-1!==r)}function o(t,r,n){let o;for(let a=r+1;a<t.length;a++)if(o=t.charCodeAt(a),92===o)a+=1;else{if(o===n)return a;if(59===o&&(t.charCodeAt(a+1)===e||13===t.charCodeAt(a+1)&&t.charCodeAt(a+2)===e))throw new Error(`Unterminated string: ${t.slice(r,a+1)+String.fromCharCode(n)}`);if(o===e||13===o&&t.charCodeAt(a+1)===e)throw new Error(`Unterminated string: ${t.slice(r,a)+String.fromCharCode(n)}`)}return r}function a(e){if(0===arguments.length)throw new TypeError("`CSS.escape` requires an argument.");let t,r=String(e),n=r.length,o=-1,a="",i=r.charCodeAt(0);if(1===n&&45===i)return"\\"+r;for(;++o<n;)t=r.charCodeAt(o),a+=0!==t?t>=1&&t<=31||127===t||0===o&&t>=48&&t<=57||1===o&&t>=48&&t<=57&&45===i?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&t<=57||t>=65&&t<=90||t>=97&&t<=122?r.charAt(o):"\\"+r.charAt(o):"�";return a}function i(e){return e.replace(/\\([\dA-Fa-f]{1,6}[\t\n\f\r ]?|[\S\s])/g,(e=>e.length>2?String.fromCodePoint(Number.parseInt(e.slice(1).trim(),16)):e[1]))}var l=new Map([["--font",["--font-weight","--font-size"]],["--inset",["--inset-shadow","--inset-ring"]],["--text",["--text-color","--text-decoration-color","--text-decoration-thickness","--text-indent","--text-shadow","--text-underline-offset"]],["--grid-column",["--grid-column-start","--grid-column-end"]],["--grid-row",["--grid-row-start","--grid-row-end"]]]);function s(e,t){return(l.get(t)??[]).some((t=>e===t||e.startsWith(`${t}-`)))}var c=class{constructor(e=new Map,t=new Set([])){this.values=e,this.keyframes=t}prefix=null;get size(){return this.values.size}add(e,t,r=0,n){if(e.endsWith("-*")){if("initial"!==t)throLine truncated
|
||||
//# sourceMappingURL=/sm/11ef6279fcf113adbb9194a3b30794e470ab2079bf22658274e2d2bbee2d8b81.map
|
||||
@@ -5,93 +5,138 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Rechnung vom {{ .Date | date }}</title>
|
||||
<!-- <link href="css/style.css" rel="stylesheet" /> -->
|
||||
<script>
|
||||
{{ .Tailwind }}
|
||||
</script>
|
||||
<style>
|
||||
@page {
|
||||
size: A4;
|
||||
padding: 2cm;
|
||||
}
|
||||
@page:first {
|
||||
padding: 0;
|
||||
}
|
||||
@media print {
|
||||
.page,
|
||||
.page-break {
|
||||
break-after: page;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
{{ .Style }}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
{{.Invoice.CSS}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="first-page" style="margin-top: 2cm">
|
||||
<body class="font-sans text-gray-800 text-[12pt]">
|
||||
<!-- Header -->
|
||||
<header class="mx-[2cm] flex justify-between mb-10 mt-8">
|
||||
<div class="company">
|
||||
<h2>{{ .Company.Name }}</h2>
|
||||
<p>
|
||||
{{ .Company.Address.Street}} {{.Company.Address.Number}} <br />
|
||||
<h2 class="text-2xl font-semibold">{{ .Company.Name }}</h2>
|
||||
<p class="mt-2">
|
||||
{{ .Company.Address.Street }} {{ .Company.Address.Number }} <br />
|
||||
{{ .Company.Address.ZIPCode }} {{ .Company.Address.Place }} <br />
|
||||
{{ .Company.Contact }}
|
||||
</p>
|
||||
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="invoice-info">
|
||||
<div class="invoice-info text-right">
|
||||
<p>
|
||||
<strong>Rechnung:</strong> {{ .Invoice.Reference }} <br />
|
||||
<strong>Datum:</strong> {{ .Date | date }} <br />
|
||||
<span class="font-semibold">Rechnung:</span> {{ .Invoice.Reference }}
|
||||
<br />
|
||||
<span class="font-semibold">Datum:</span> {{ .Date | date }} <br />
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<section class="client first-page">
|
||||
<h2>Rechnung an:</h2>
|
||||
|
||||
<!-- Client Info -->
|
||||
<section class="client mx-[2cm] mb-12">
|
||||
<h2 class="text-xl font-semibold mb-2">Rechnung an:</h2>
|
||||
<p>
|
||||
{{ .Client.Name }} <br />
|
||||
{{ .Client.Address.Street}} {{.Client.Address.Number}} <br />
|
||||
{{ .Client.Address.Street }} {{ .Client.Address.Number }} <br />
|
||||
{{ .Client.Address.ZIPCode }} {{ .Client.Address.Place }} <br />
|
||||
{{ .Client.Contact }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="page p1 first-page">
|
||||
<article>
|
||||
<table>
|
||||
<thead>
|
||||
<!-- Invoice Table -->
|
||||
<section class="page mb-12">
|
||||
<article class="mx-[2cm] overflow-x-auto">
|
||||
<table class="w-full border border-gray-300 border-collapse mb-5">
|
||||
<thead class="bg-gray-200">
|
||||
<tr>
|
||||
<th style="min-width: 3.5em">FID</th>
|
||||
<th>Name</th>
|
||||
<th>Aufwand</th>
|
||||
<th style="min-width: 5.5em">Preis</th>
|
||||
<th
|
||||
class="border border-gray-300 px-2 py-0.5 min-w-[3.5em] text-left"
|
||||
>
|
||||
FID
|
||||
</th>
|
||||
<th class="border border-gray-300 px-2 py-0.5 text-left">Name</th>
|
||||
<th class="border border-gray-300 px-2 py-0.5 text-left">
|
||||
Aufwand
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 px-2 py-0.5 min-w-[5.5em] text-left"
|
||||
>
|
||||
Preis
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Issues }}
|
||||
<tr>
|
||||
<td style="font-family: monospace">{{ .Shorthand }}</td>
|
||||
<td>{{ .Title }}</td>
|
||||
<td>{{ .Duration | duration }}</td>
|
||||
<td>{{ .Duration | price }} CHF</td>
|
||||
<td class="border border-gray-300 px-2 py-0.5 font-mono">
|
||||
{{ .Shorthand }}
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-0.5">{{ .Title }}</td>
|
||||
<td class="border border-gray-300 px-2 py-0.5">
|
||||
{{ .Duration | duration }}
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-0.5">
|
||||
{{ .Duration | price }} CHF
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="2" style="text-align: right">Summe:</th>
|
||||
|
||||
<td>{{ .Total | duration }}</td>
|
||||
<td>{{ .Total | price}}</td>
|
||||
<th
|
||||
colspan="2"
|
||||
class="border border-gray-300 px-2 py-0.5 text-right"
|
||||
>
|
||||
Summe:
|
||||
</th>
|
||||
<td class="border border-gray-300 px-2 py-0.5">
|
||||
{{ .Total | duration }}
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-0.5">
|
||||
{{ .Total | price }}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</article>
|
||||
|
||||
{{ .Invoice.HTML }}
|
||||
</section>
|
||||
<section>
|
||||
<h2 style="margin-top: 0">Details zu den Features</h2>
|
||||
|
||||
<!-- Issue Details -->
|
||||
<section>
|
||||
<h2 class="font-semibold mb-4 text-2xl">Details zu den Features</h2>
|
||||
{{ range .Issues }}
|
||||
<article>
|
||||
<div class="issue-title">
|
||||
<h3>
|
||||
<a href="{{ .HTMLURL }}" style="font-family: monospace"
|
||||
<article class="mb-6">
|
||||
<div class="flex justify-between items-end mb-2">
|
||||
<h3 class="font-semibold text-xl pt-5">
|
||||
<a
|
||||
href="{{ .HTMLURL }}"
|
||||
class="font-mono text-blue-600 hover:underline"
|
||||
>{{ .Shorthand }}</a
|
||||
>: {{ .Title }}
|
||||
</h3>
|
||||
<p>
|
||||
{{ if .Closed }} Fertiggestellt: {{ .Closed | time }} {{else}} not
|
||||
<p class="text-sm text-gray-600">
|
||||
{{ if .Closed }} Fertiggestellt: {{ .Closed | time }} {{ else }} not
|
||||
closed {{ end }}
|
||||
</p>
|
||||
</div>
|
||||
{{ .CleanBody | md | oh 3 }}
|
||||
<div class="text-sm markdown">{{ .CleanBody | md | oh 3 }}</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
Reference in new issue
Block a user