-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
134 lines (111 loc) · 3.53 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!--
XIVRP-Formatter Copyright (C) 2024 Ethan Henderson <[email protected]>
THIS IS A TEMPLATE FILE, DO NOT PLACE CONTENT INTO THIS FILE.
Feel free to customize it to your liking, it uses TailwindCSS as it is.
It must have the authors, metadata, and messages tags in order to work.
Feel free to remove the copyright at the bottom, leave the commented one above.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ authors }} Formatted</title>
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
body, html {
@apply bg-neutral-800;
@apply overflow-y-hidden overflow-x-hidden;
}
.page {
@apply py-20;
@apply w-screen h-screen overflow-y-scroll overflow-x-hidden;
@apply mx-auto text-neutral-50;
@apply grid gap-x-16 gap-y-16 grid-cols-3 2xl:grid-cols-5;
@apply scroll-smooth;
/*@apply snap-y snap-proximity;*/
/*
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(38, 38, 38, 1) 75%),
radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(38, 38, 38, 1) 60%),
url('./examples/realcover.png');
TODO: Add gradient setup for landscape and portrait images, using libpng to detect
which, and applied via a template variable
copilot: get the width an height of a png
*/
}
.page > div:not(#header):not(.message):not(.message_gap_notice):not(.message_picture):not(.footer) {
@apply hidden 2xl:block;
}
#header {
@apply text-2xl text-neutral-100;
@apply font-bold text-center;
@apply col-span-3;
}
#header .small {
@apply text-xl text-neutral-300;
}
.message {
@apply col-span-3;
@apply snap-center;
@apply block bg-neutral-800/75;
@apply rounded-lg border-l-8 border-neutral-400;
@apply px-6 mx-3.5 2xl:mx-0;
@apply hover:border-blue-400;
}
.message_gap_notice {
@apply col-span-3 text-center;
@apply text-base text-neutral-400;
}
.message_picture {
@apply col-span-3;
@apply mx-3.5 2xl:mx-0;
}
.message_picture img {
@apply w-full;
@apply rounded-3xl;
}
.message .body {
@apply text-2xl text-neutral-50;
@apply subpixel-antialiased;
@apply leading-10 tracking-wide;
}
.message .body span {
@apply font-bold;
}
.message .header {
@apply text-4xl text-neutral-200;
}
.message > .footer {
@apply text-right text-sm text-neutral-400;
}
.page > .footer {
@apply text-center col-span-3;
}
.page .footer a {
@apply text-sky-600;
}
</style>
</head>
<body>
<div class="page">
<div></div>
<div id="header">
{{ authors }}
<div class="small">
{{ metadata }}
</div>
</div>
<div></div>
{{ messages }}
<div></div>
<div class="footer">
Generated with
<a href="https://github.com/zbee/XIVRP-Formatter" target="_blank">
XIVRP-Formatter
</a>
by Ethan Henderson
</div>
<div></div>
</div>
</body>
</html>