Skip to content
Snippets Groups Projects
Select Git revision
  • b3fffbf32f6ce9916ed60ffb3e695aa866f73070
  • master default protected
  • style-2021
  • newstyle
  • archive/2020
  • vanion-master-patch-78871
  • deinkoks-master-patch-08946
  • 2020
8 results

base.css

Blame
  • index.html 11.69 KiB
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>c3lingo · Live Interpretation for Chaos events</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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,
          a.block-link h2 {
            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;
            gap: 1em;
            margin: 2em -.5em;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
          }
          .main-grid > * {
            box-sizing: border-box;
            -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;
          }
          body.noscript .language-selection {
            display: none;
          }
          .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);
          }
    
          @media (prefers-color-scheme: dark) {
          body {
            background-color: #1e1e2e;
            color: #cdd6f4;
          }
          h1 {
            color: #eba0ac;
          }
          a.block-link, footer {
            background-color: #181825;
          }
          a.block-link:hover, a.block-link:active {
            background-color: #11111b;
          }
          a, a.block-link h1, a.block-link h2 {
            color: #89b4fa;
          }
        }
        </style>
      </head>
      <body lang="en" class="noscript">
        <div class="page">
          <nav>
            <div class="wrapper language-selection">
              <a href="#en" lang="en" data-lang="de">English</a>
              <a href="#en" lang="en" data-lang="fr">English</a>
              <a href="#de" lang="de" data-lang="en">Deutsch</a>
              <a href="#de" lang="de" data-lang="fr">Deutsch</a>
              <a href="#fr" lang="fr" data-lang="de">Français</a>
              <a href="#fr" lang="fr" data-lang="en">Français</a>
            </div>
          </nav>
          <main>
            <div class="wrapper">
    
              <header>
                <hgroup>
                  <h1>c3lingo</h1>
                  <p data-lang="en">Live Interpretation for Chaos events</p>
                  <p data-lang="de">Live-Dolmetschen für Chaos-Events</p>
                  <p data-lang="fr">Interprétation en direct pour les événements du Chaos</p>
                </hgroup>
              </header>
    
              <div class="main-grid">
    
                <a class="block-link" href="https://audio.c3lingo.org">
                  <section data-lang="en">
                    <h2>Live to the Audience</h2>
                    <p>For listeners sitting in the audience of conference talks as they happen, we provide low-latency interpreted streams here.</p>
                  </section>
                  <section data-lang="de">
                    <h2>Live ins Publikum</h2>
                    <p>Für Menschen, die die Vorträge direkt im Saal verfolgen, bieten wir hier Web-Streams mit niedriger Latenz an.</p>
                  </section>
                  <section data-lang="fr">
                    <h2>Dans les Amphithéâtres</h2>
                    <p>Pour celles et ceux qui se trouvent dans la salle, nous fournissons des streams à faible latence.</p>
                  </section>
                </a>
    
                <a class="block-link" href="https://streaming.media.ccc.de/">
                  <section data-lang="en">
                    <h2>Livestreams and Recordings</h2>
                    <p>If you’re not in the audience, the video and audio streams provided by the VOC are by far the easiest solution. You’ll find a choice of interpreted streams in the <b>Formats</b> tab.</p>
                  </section>
                  <section data-lang="de">
                    <h2>Livestreams und Aufnahmen</h2>
                    <p>Wenn du nicht im Publikum sitzt, sind die Video- und Audio-Streams des VOC die einfachste Lösung. Im Tab <b>Formate</b> findest du eine Auswahl von gedolmetschten Streams.</p>
                  </section>
                  <section data-lang="fr">
                    <h2>Livestreams et Enregistrements</h2>
                    <p>Si tu n’es pas dans le public, les streams audio et vidéo du VOC sont la solution la plus simple. Tu trouveras un choix de streams interprétés dans la section <b>Formats</b>.</p>
                  </section>
                </a>
    
                <a class="block-link" href="https://wiki.c3lingo.org/">
                  <section data-lang="en">
                    <h2>The c3lingo Wiki</h2>
                    <p>All about our work can be found in our wiki. Want to get started interpreting with us or want to know more about our work? Have a look here!</p>
                  </section>
                  <section data-lang="de">
                    <h2>Das c3lingo-Wiki</h2>
                    <p>Alles über unsere Arbeit kann in unserem Wiki gefunden werden. Du möchtest auch mal Dolmetschen ausprobieren oder mehr über unsere Arbeit wissen? Dann guck hier rein!</p>
                  </section>
                  <section data-lang="fr">
                    <h2>Le Wiki c3lingo</h2>
                    <p>Toutes les informations sur notre travail se trouvent dans notre wiki. Envie de commencer à interpréter avec nous ou d'en savoir plus sur notre travail&nbsp;? C’est par ici&nbsp;!</p>
                  </section>
                </a>
    
                <a class="block-link" href="https://speakers.c3lingo.org/">
                  <section data-lang="en">
                    <h2>Speakers’ File Drop</h2>
                    <p>If you’re a speaker we always appreciate getting slides, or better even notes, for us to prepare before the talk.</p>
                  </section>
                  <section data-lang="de">
                    <h2>Sprecher-Dateiablage</h2>
                    <p>Wenn du einen Vortrag hältst sind wir immer für Folien oder sogar Notizen dankbar, mit denen wir uns auf den Vortrag vorbereiten können.</p>
                  </section>
                  <section data-lang="fr">
                    <h2>Upload de fichiers pour les conférenciers</h2>
                    <p>Si tu es conférencière ou conférencier, nous apprécions toujours de recevoir des slides, voire des notes, pour nous permettre de mieux nous préparer avant ta conférence.</p>
                  </section>
                </a>
    
              </div>
    
            </div>
          </main>
    
          <footer class="main-footer">
            <div class="wrapper">
              <p>
                <a href="mailto:hello@c3lingo.org">hello@c3lingo.org</a>
                &middot; <a href="https://chaos.social/@c3lingo">Mastodon</a>
                &middot; <a href="https://legal.cccv.de/">
                  <span data-lang="en">Privacy/Legal</span>
                  <span data-lang="de">Datenschutz/Impressum</span>
                  <span data-lang="fr">Politique de confidentialité/mentions légales</span>
                </a>
              </p>
            </div>
          </footer>
        </div>
    
        <script type="text/javascript" defer>
          (function () {
            document.body.classList.remove("noscript");
    
            // In page navigation - for language switching
            document.body.addEventListener('click', function (ev) {
              if (!ev.target.href) return;
              var hash = ev.target.href.split('#')[1];
              if (!hash) return;
              document.body.lang = hash;
              ev.preventDefault();
            });
    
            // Autodetect language by default
            var lang = 'en';
            if (navigator.language && navigator.language.substr(0, 2) === 'de') lang = 'de';
            else if (navigator.language && navigator.language.substr(0, 2) === 'fr') lang = 'fr';
            document.body.lang = lang;
          })();
        </script>
      </body>
    </html>