redirecter for ao3 that adds opengraph metadata
1html,
2body {
3 font-family: "Bricolage Grotesque Variable", sans-serif;
4 background-color: #990000;
5 color: white;
6 padding: 1rem;
7 margin: 0;
8 padding: 0;
9}
10
11a {
12 color: white;
13 text-decoration: underline dashed;
14}
15
16h1 {
17 font-family: "Stack Sans Notch", sans-serif;
18 font-size: 2em;
19 border-bottom: 1px white solid;
20 padding: 20px;
21 margin: 0;
22 display: flex;
23 justify-content: space-between;
24 align-items: center;
25}
26
27h1 a {
28 text-decoration: none;
29}
30
31h1 #generator-link {
32 font-size: 16px;
33}
34
35h2 {
36 font-family: "Stack Sans Notch", sans-serif;
37 font-size: 1.5em;
38}
39
40main {
41 max-width: 800px;
42 padding: 20px;
43}
44
45label {
46 font-weight: bold;
47 display: block;
48}
49
50input[type="text"] {
51 width: 100%;
52}
53
54textarea {
55 width: 100%;
56 max-width: 100%;
57 min-height: 100px;
58}
59
60.input-field {
61 margin-bottom: 1em;
62}
63
64form ul {
65 list-style: none;
66 margin: 0 0 1em;
67 padding: 0;
68}
69
70form ul label {
71 font-weight: normal;
72}
73
74details {
75 margin-bottom: 1em;
76}
77
78details .cols {
79 margin-top: 1em;
80 display: grid;
81 grid-template-columns: repeat(3, 1fr);
82 gap: 20px;
83}
84
85@media only screen and (max-width: 767px) {
86 details .cols {
87 grid-template-columns: auto;
88 gap: 0;
89 }
90}
91
92#output {
93 border: 1px white dashed;
94}
95
96#output img {
97 width: 100%;
98 height: auto;
99 display: block;
100}