diff options
Diffstat (limited to 'site')
| -rw-r--r-- | site/assets/css/applets.css | 29 | ||||
| -rw-r--r-- | site/assets/css/css.css | 1 | ||||
| -rw-r--r-- | site/public/test/index.html | 16 | ||||
| -rw-r--r-- | site/public/test/style/index.html | 10 |
4 files changed, 43 insertions, 13 deletions
diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index ecba518c..315d72e0 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -16,8 +16,18 @@ flex-direction: row; justify-content: flex-start; } - +.q { + width: 100%; + padding: 5px; + font-size: 14pt; +} +.timing { + font-size: 9pt; + padding-top: 10px; +} .results { + margin-top: 10px; + padding-bottom: 10px; display: flex; flex-direction: row; flex-wrap: wrap; @@ -27,11 +37,15 @@ margin-left: 20px; margin-bottom: 40px; font-size: 8pt; + background: #000; + padding: 5px; + font-weight: 500; } .results > div img { + display: block; margin-bottom: 4px; - width: 200px; - height: 200px; + width: 190px; + height: 190px; background: rgba(255,255,255,0.05); } .results > div:nth-child(3n+1) { @@ -40,6 +54,15 @@ .query h2 { margin-top: 0; padding-top: 0; } +.img { + position: relative; +} +.img .bbox { + position: absolute; + color: rgba(255,0,0,1); + background: rgba(255,0,0,0.05); + border: 1px solid; +} .cta { padding-left: 20px; font-size: 11pt; diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 4f2d7c6e..003ac4a3 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -27,6 +27,7 @@ header { left: 0; width: 100%; height: 70px; + z-index: 1; background: #1e1e1e; display: flex; flex-direction: row; diff --git a/site/public/test/index.html b/site/public/test/index.html index b4d16036..41f8eda5 100644 --- a/site/public/test/index.html +++ b/site/public/test/index.html @@ -30,14 +30,14 @@ <section><h1>Megapixels UI Tests</h1> <ul> -<li><a href="/test/style">Style Guide</a></li> -<li><a href="/test/csv">CSV</a></li> -<li><a href="/test/datasets/">Dataset list</a></li> -<li><a href="/test/citations/">Citation list</a></li> -<li><a href="/test/map/">Citation map</a></li> -<li><a href="/test/face_search/">Face search</a></li> -<li><a href="/test/name_search/">Name search</a></li> -<li><a href="/test/gallery/">Modal image gallery</a></li> +<li><a href="/test/style/index.html">Style Guide</a></li> +<li><a href="/test/csv/index.html">CSV</a></li> +<li><a href="/test/datasets/index.html">Dataset list</a></li> +<li><a href="/test/citations/index.html">Citation list</a></li> +<li><a href="/test/map/index.html">Citation map</a></li> +<li><a href="/test/face_search/index.html">Face search</a></li> +<li><a href="/test/name_search/index.html">Name search</a></li> +<li><a href="/test/gallery/index.html">Modal image gallery</a></li> </ul> </section> diff --git a/site/public/test/style/index.html b/site/public/test/style/index.html index 6d99a236..ab13a589 100644 --- a/site/public/test/style/index.html +++ b/site/public/test/style/index.html @@ -54,10 +54,16 @@ <div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='Person 3. Let me tell you about Person 3. This person has a very long description with text which wraps like crazy'><div class='caption'>Person 3. Let me tell you about Person 3. This person has a very long description with text which wraps like crazy</div></div></section><section><blockquote><p>est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p> </blockquote> </section><section class='wide'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/wide-test.jpg' alt='This image is extremely wide and the text beneath it will wrap but thats fine because it can also contain <a href="https://example.com/">hyperlinks</a>! Yes, you read that right—hyperlinks! Lorem ipsum dolor sit amet ad volotesque sic hoc ad nauseam'><div class='caption'>This image is extremely wide and the text beneath it will wrap but that's fine because it can also contain <a href="https://example.com/">hyperlinks</a>! Yes, you read that right—hyperlinks! Lorem ipsum dolor sit amet ad volotesque sic hoc ad nauseam</div></div></section><section><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p> -</section><section class='applet_container'><div class='applet' data-payload='{"command": "javascript", "fields": ["var s = \"JavaScript syntax highlighting\";", "alert(s);"]}'></div></section><section><pre><code class="lang-python">s = "Python syntax highlighting" +</section><section><pre><code class="lang-javascript">var s = "JavaScript syntax highlighting"; +alert(s); +</code></pre> +</section><section><pre><code class="lang-python">s = "Python syntax highlighting" print(s) </code></pre> -</section><section class='applet_container'><div class='applet' data-payload='{"command": "No language indicated, so no syntax highlighting. ", "fields": ["But let's throw in a <b>tag</b>."]}'></div></section><section><p>Horizontal rule</p> +</section><section><pre><code class="lang-code">Generic code block. Note that code blocks that are not so marked will not appear. +But let's throw in a <b>tag</b>. +</code></pre> +</section><section><p>Horizontal rule</p> <hr> <p>Citations below here</p> <div class="footnotes"> |