diff --git a/static/c3lingo.css b/static/c3lingo.css deleted file mode 100644 index fa5e9cdd0429ff1845cdee86b7ee442dc19afcd7..0000000000000000000000000000000000000000 --- a/static/c3lingo.css +++ /dev/null @@ -1,217 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - - -body { - font: 1em/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -} - -a { - text-decoration: none; -} -a:hover { - text-decoration: underline; -} - -a.block-link { - display: block; - color: inherit; - background-color: #ececec; - padding: 1em; -} -a.block-link:hover { - text-decoration: none; - background-color: #e2e2e2; -} -a.block-link:active { - background-color: #d9d9d9; -} -a.block-link h1 { - color: blue; -} - -/* For elements that occur next to block links but aren't clickable */ -.block-padding { - display: block; - padding: 1em; -} - -.wrapper { - max-width: 60rem; - margin: 0 auto; - padding: 0 1rem; -} - -.page { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - min-height: 100vh; -} - -main { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - padding: 3em 0; -} - -main header { - margin-bottom: 2rem; -} - -main header h1 { - font-size: 3em; - margin-bottom: 1rem; -} - -footer { - background-color: #ececec; - padding: 1em 0; -} - -.main-grid { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - margin: 2em -.5em; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.main-grid > * { - margin: .5em; - -ms-flex-preferred-size: 20em; - flex-basis: 20em; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -section h2 { - font-size: 1.4rem; - margin-bottom: 1rem; -} -section > * + * { - margin-top: .5rem; -} -section > * + h2 { - margin-top: 2rem; -} -strong, b, dt { - font-weight: 700; -} -dd + dt { - margin-top: .5rem; -} -.field { - border: 1px solid #ddd; - padding: .2em; -} -.field.blank { - user-select: none; - -moz-user-select: none; - pointer-events: none; - color: #999; -} -.language-selection { - text-align: right; - margin-top: 1rem; -} -.language-selection > * { - margin-left: 0.5em; -} - -body[lang="en"] [data-lang="de"] { - display: none; -} -body[lang="en"] [data-lang="fr"] { - display: none; -} -body[lang="de"] [data-lang="en"] { - display: none; -} -body[lang="de"] [data-lang="fr"] { - display: none; -} -body[lang="fr"] [data-lang="de"] { - display: none; -} -body[lang="fr"] [data-lang="en"] { - display: none; -} - -.callout { - padding: .5em; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); - border-radius: 3px; -} -.callout--error { - background-color: #f2cdcc; - color: #520000; -} -.callout--success { - background-color: rgb(217, 243, 220); - color: rgb(1, 71, 7); -} diff --git a/static/index.html b/static/index.html index fd00116aad8a636e417e70a8b72a75ac2fa434fd..1d4db7bb913a082ae4e58efd303b990f437d086f 100644 --- a/static/index.html +++ b/static/index.html @@ -4,7 +4,220 @@ <meta charset="utf-8"> <title>36C3 Live Translations</title> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="c3lingo.css?v2"> + <style> + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + body { + line-height: 1; + } + ol, ul { + list-style: none; + } + blockquote, q { + quotes: none; + } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } + + + body { + font: 1em/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + } + + a { + text-decoration: none; + } + a:hover { + text-decoration: underline; + } + + a.block-link { + display: block; + color: inherit; + background-color: #ececec; + padding: 1em; + } + a.block-link:hover { + text-decoration: none; + background-color: #e2e2e2; + } + a.block-link:active { + background-color: #d9d9d9; + } + a.block-link h1 { + color: blue; + } + + /* For elements that occur next to block links but aren't clickable */ + .block-padding { + display: block; + padding: 1em; + } + + .wrapper { + max-width: 60rem; + margin: 0 auto; + padding: 0 1rem; + } + + .page { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100vh; + } + + main { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 3em 0; + } + + main header { + margin-bottom: 2rem; + } + + main header h1 { + font-size: 3em; + margin-bottom: 1rem; + } + + footer { + background-color: #ececec; + padding: 1em 0; + } + + .main-grid { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 2em -.5em; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .main-grid > * { + margin: .5em; + -ms-flex-preferred-size: 20em; + flex-basis: 20em; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-negative: 0; + flex-shrink: 0; + } + + section h2 { + font-size: 1.4rem; + margin-bottom: 1rem; + } + section > * + * { + margin-top: .5rem; + } + section > * + h2 { + margin-top: 2rem; + } + strong, b, dt { + font-weight: 700; + } + dd + dt { + margin-top: .5rem; + } + .field { + border: 1px solid #ddd; + padding: .2em; + } + .field.blank { + user-select: none; + -moz-user-select: none; + pointer-events: none; + color: #999; + } + .language-selection { + text-align: right; + margin-top: 1rem; + } + .language-selection > * { + margin-left: 0.5em; + } + + body[lang="en"] [data-lang="de"] { + display: none; + } + body[lang="en"] [data-lang="fr"] { + display: none; + } + body[lang="de"] [data-lang="en"] { + display: none; + } + body[lang="de"] [data-lang="fr"] { + display: none; + } + body[lang="fr"] [data-lang="de"] { + display: none; + } + body[lang="fr"] [data-lang="en"] { + display: none; + } + + .callout { + padding: .5em; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); + border-radius: 3px; + } + .callout--error { + background-color: #f2cdcc; + color: #520000; + } + .callout--success { + background-color: rgb(217, 243, 220); + color: rgb(1, 71, 7); + } + </style> </head> <body> <div class="page">