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}