1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Prawn PDF</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <style> 8 html { 9 background: linear-gradient(to bottom, #02004f, #000016) black; 10 } 11 12 html, body { 13 min-block-size: 100dvh; 14 height: max-content; 15 margin: 0; 16 padding: 0; 17 } 18 19 body { 20 font-family: sans-serif; 21 color: white; 22 contain: layout; 23 } 24 25 header { 26 padding-block: 4em; 27 text-align: center; 28 } 29 30 h1 { 31 margin-block: 2em; 32 } 33 34 main { 35 display: grid; 36 grid-template-areas: ". ttfunk prawn pdf-core ."; 37 grid-template-columns: 1fr min-content min-content min-content 1fr; 38 grid-column-gap: 2em; 39 } 40 41 main article { 42 inline-size: 12em; 43 padding: 1em;; 44 box-sizing: border-box; 45 border: 0.3ch solid white; 46 border-radius: 0.5em; 47 background: rgb(255 255 255 / 0.1); 48 backdrop-filter: blur(5px); 49 -webkit-backdrop-filter: blur(5px); 50 transition: transform 0.4s, filter 0.4s; 51 } 52 53 main article > ul { 54 padding: 0; 55 } 56 main article > ul li { 57 display: block; 58 margin-block: 0.4em; 59 } 60 61 :any-link { color: aqua } 62 :visited { color: #cfc8f9 } 63 64 #prawn { grid-area: prawn } 65 #ttfunk { grid-area: ttfunk } 66 #pdf-core { grid-area: pdf-core } 67 68 @media (min-width: 44em) { 69 #ttfunk { 70 transform: perspective(20em) rotateY(-15deg) translateZ(-3em); 71 } 72 #ttfunk:hover { 73 transform: perspective(20em) translateZ(1em); 74 } 75 76 #prawn { 77 transform: perspective(20em); 78 } 79 #prawn:hover { 80 transform: perspective(20em) translateZ(1em); 81 } 82 83 #pdf-core { 84 transform: perspective(20em) rotateY(15deg) translateZ(-3em); 85 } 86 #pdf-core:hover { 87 transform: perspective(20em) translateZ(1em); 88 } 89 90 main:has(#pdf-core:hover) { 91 #ttfunk{ 92 transform: perspective(20em) rotateY(-10deg) translateX(-0.3em) translateZ(-3em); 93 filter: brightness(60%); 94 } 95 #prawn { 96 transform: perspective(20em) rotateY(5deg) translateX(-0.3em) translateZ(-1em); 97 filter: brightness(60%); 98 } 99 } 100 101 main:has(#ttfunk:hover) { 102 #pdf-core{ 103 transform: perspective(20em) rotateY(10deg) translateX(0.3em) translateZ(-3em); 104 filter: brightness(60%); 105 } 106 #prawn { 107 transform: perspective(20em) rotateY(-5deg) translateX(0.3em) translateZ(-1em); 108 filter: brightness(60%); 109 } 110 } 111 112 main:has(#prawn:hover) { 113 #ttfunk{ 114 transform: perspective(20em) rotateY(-10deg) translateX(-0.3em) translateZ(-3em); 115 filter: brightness(60%); 116 } 117 #pdf-core { 118 transform: perspective(20em) rotateY(10deg) translateX(0.3em) translateZ(-3em); 119 filter: brightness(60%); 120 } 121 } 122 } 123 124 @media (max-width: 44em) { 125 main { 126 display: block; 127 } 128 129 #prawn, #ttfunk, #pdf-core { 130 margin: 2em; 131 inline-size: auto; 132 transform: none; 133 134 &:hover { 135 transform: none; 136 } 137 } 138 } 139 140 body::before { 141 content: ''; 142 z-index: -1; 143 position: absolute; 144 inset: 0; 145 min-height: 100%; 146 147 background: 148 radial-gradient(circle 3px at calc(30% + sin(var(--wobble) * 2) * 15px) calc(100vh * (1 - var(--raise3))), transparent, rgb(214 235 255) 100%, transparent 101%), 149 radial-gradient(circle 3px at calc(55% + sin(var(--wobble) * 3) * 15px) calc(100vh * (1.2 - var(--raise3) * 1.5)), transparent, rgb(214 235 255) 100%, transparent 101%), 150 radial-gradient(circle 5px at calc(15% + sin(var(--wobble) * 4) * 10px) calc(100vh * (1 - var(--raise1))), transparent 0%, rgb(214 235 255) 100%, transparent 101%), 151 radial-gradient(circle 5px at calc(80% + sin(var(--wobble) * 5) * 10px) calc(100vh * (1.3 - var(--raise1) * 1.5)), transparent 0%, rgb(214 235 255) 100%, transparent 101%), 152 radial-gradient(circle 7px at calc(40% + sin(var(--wobble) * 6) * 7px) calc(100vh * (1 - var(--raise2))), transparent 0%, rgb(214 235 255) 100%, transparent 101%), 153 radial-gradient(circle 7px at calc(60% + sin(var(--wobble) * 7) * 5px) calc(100vh * (1.3 - var(--raise2) * 1.5)), transparent 0%, rgb(214 235 255) 100%, transparent 101%), 154 repeating-conic-gradient(from calc(var(--raise2) * 0.05turn) at 50% -40%, rgb(255 255 255 / 0.15) 0%, transparent, rgb(255 255 255 / 0.15) 1%), 155 repeating-conic-gradient(from calc(var(--raise1) * -0.05turn) at calc(50% + 100px) -30%, rgb(255 255 255 / 0.2) 0%, transparent 1.25%, rgb(255 255 255 / 0.2) 2.5%) 156 ; 157 mask-image: radial-gradient(ellipse at top, rgb(0 0 0 / 100%), transparent); 158 } 159 </style> 160
160<script> 161 const wobblePeriod = 5_000; // 5s 162 const raise1Period = 10_000; // 10s 163 const raise2Period = 6_000; // 6s 164 const raise3Period = 15_000; // 15s 165 166 let stylesheet = document.createElement('style'); 167 document.head.prepend(stylesheet); 168 169 function frame(timestamp) { 170 let wobble = Math.PI * 2 * (timestamp % wobblePeriod) / wobblePeriod; 171 let raise1 = (timestamp % raise1Period) / raise1Period; 172 let raise2 = (timestamp % raise2Period) / raise2Period; 173 let raise3 = (timestamp % raise3Period) / raise3Period; 174 175 stylesheet.textContent = `:root { --wobble: ${wobble}; --raise1: ${raise1}; --raise2: ${raise2}; --raise3: ${raise3}; }`; 176 177 window.requestAnimationFrame(frame); 178 }; 179 180 document.addEventListener('DOMContentLoaded', function() { frame(0); }); 181 </script>
181 182 </head> 183 <body> 184 <header> 185 <img src="/images/prawn.png" width="141" height="142" alt="Prawn logo"> 186 <h1>Prawn PDF</h1> 187 </header> 188 <main> 189 <article id="prawn"> 190 <h2>Prawn</h2> 191 <p>Latest version: <a href="https://rubygems.org/gems/prawn">2.5.0</a></p> 192 <ul> 193 <li><a href="/docs/prawn/2.5.0/">Documentation</a></li> 194 <li><a href="/docs/prawn/2.5.0/manual.pdf">Manual</a></li> 195 </ul> 196 </article> 197 <article id="ttfunk"> 198 <h2>TTFunk</h2> 199 <p>Latest version: <a href="https://rubygems.org/gems/ttfunk">1.8.0</a></p> 200 <ul> 201 <li><a href="/docs/ttfunk/1.8.0/">Documentation</a></li> 202 </ul> 203 </article> 204 <article id="pdf-core"> 205 <h2>PDF::Core</h2> 206 <p>Latest version: <a href="https://rubygems.org/gems/pdf-core">0.10.0</a></p> 207 <ul> 208 <li> 209 <a href="/docs/pdf-core/0.10.0/">Documentation</a> 210 </li> 211 </ul> 212 </article> 213 </main> 214 </body> 215</html> 216
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.