Select Git revision
Forked from
hub / hub
Source project has a limited visibility.
index.html 11.64 KiB
<!DOCTYPE html>
<html lang="de">
<head>
<title>Brdiging Bubbles Design</title>
<meta charset="UTF-8"/>
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ein Beispiel, wie ein Styleguide für eine Konferenz aussehen könnte."/>
<link rel="stylesheet" href="styleguide.css"/>
</head>
<body>
<header>
<img id="banner-img" src="svg/banner.svg"
alt="Einige neongrüne Streifen mit der Aufschrift Cyber; angelehnt an das in vielen Hacking-Spaces beliebte Cyber Klebeband"/>
</header>
<main>
<h1> Divoc - bridging bubbles - Styleguide </h1>
<!-- Lights on, reduce motion etc. -->
<section aria-labelledby="vision">
<h2 id="vision"> Gesellschaften in Blasen </h2>
<img src="img/bridging-bubbles-cityscape.jpg" id="vision-img"
alt="Eine Card10 schwebt in einer orangenen Seifenblase umgeben von Rauch auf einem leuchtenden Plateu. Auf dem Display ein text: Divoc - バブルス ブリッジ. Im Hintergrund ist eine grün schimmernde futuristische Stadt von Oben zu sehen. Ganz weit entfernt hinter einer Häusershlucht umgibt eine riesige blaue Seifenblase mit eine fliegende Untertasse. Die Antenne sieht etwas aus, wie der Berliner Fernsehturm."/>
<p>
Das Divoc Design nimmt soziale Blasen wörtlich. Nicht nur leben wir als Wesen in einer Blase, wir befinden uns in gigantischen Gesellschaften, die Blasen Bilden. </p>
<p>
Das Design des DiVOC orientiert sich daher an visuell an Retro-Scifi-Anime. Ein paar Cyberpunk Einflüsse sind auch gern gesehen. Aber vielleicht ist diese Assoziation, die wir da haben auch nur ein Zeichen der Blase, in der wir leben und eure erste Assoziation ist Fantasy? </p>
<p>
Wenn ihr mit euren eigenen Designs contributen möcht stellt euch die Fragen: Was macht die soziale Blase aus, in der ihr euch befindet und wir könnt ihr eure Gesellschaft umgeben von einer Blase repräsentieren?
</p>
<hr/>
</section>
<section aria-labelledby="logo">
<h2 id="logo">das Logo</h2>
<img src="svg/logo.svg" id="logo-img"
alt="Logo vor Hintergund. Ein grünes Kaninchen fliegt ein Seifenblasen-Ufo. Titel: DiVOC Untertitel: バブルス ブリッジ. Im Hintergrund sind ganz viele verschiedene bunte Kreaturen im gleichen Stil in Blasen: Otter, Aliens, Haie und Winkekätzchen "/>
<p>
Das DiVOC Bunny macht sich auch dieses mal wider zu euch in's Wohnzimmer auf und bekommt diesmal jedoch Gesellschaft: Kreiert euch im <a href="https://bb3.tils.pw">Logogenerator von Tilcreator</a> eine Kreatur für eure Profilbilder und Projekte.
</p>
<h3>mögliche Adaptionen</h3>
<div id="logo-alt-container">
<div id="logo-alt-first-container">
<p>Es fehlt noch eine Kreatur? Baut euch ein ganz eigenes Logo aus den Vorlagen im Gitlab. Neben aufgeräumten SVGs, die sich gut fürs Plotten eignen, gibt es da auch die Rohversionen zum hacken.</p>
<p>Oder noch viel besser: adaptiert euer eigenes Logo und nimmt dafür inspiration von unserem Design.</p>
<img src="svg/logoVariation.svg" id="logo-alt-img"
alt="Das gleiche Logo wie oben aber jetzt mit grellem, gelben Hintergrund."/>
</div>
<img src="svg/chaosWestLogoVariation.svg" id="logo-cw-img"
alt="Das Chaos West Logo im Farbschema des Events"/>
</div>
<hr/>
</section>
<section aria-labelledby="color-scheme">
<h2 id="color-scheme">das Farbschema</h2>
<div id="colors-container">
<div id="color-boxes">
<img class="color-preview-img" src="svg/colorsDark.svg"
alt="Ein Quadrat, in welchem das dunkle Farbschema gezeigt wird"/>
<img class="color-preview-img" src="svg/colorsLight.svg"
alt="Ein Quadrat, in welchem das helle Farbschema gezeigt wird"/>
</div>
<div id="color-lists">
<h3>Dunkel</h3>
<ul>
<li>Fließtext: #CDFFAB</li>
<li>Highlights, Überschriften: #00FF6E</li>
<li>Links, tertiäre Überschriften: #eb2d83</li>
<li>Haupthintergrund: #061210</li>
<li>Hervorgehobener Hintergrund: #2A0E1A</li>
</ul>
<h3>Hell</h3> <ul>
<li>Fließtext: #1A1A1A</li>
<li>Highlights, Überschriften: #DA1884</li>
<li>Links, tertiäre Überschriften: ##00A388</li>
<li>Haupthintergrund: #FFFFFF</li>
<li>Hervorgehobener Hintergrund: #FFFDBE</li>
</ul>
</div>
</div>
<hr/>
</section>
<section aria-labelledby="text-demo">
<h2 id="text-demo">Text-Demo</h2>
<span class="mock-h1">Überschrift 1</span>
<span class="mock-h2">Überschrift 2</span>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<span class="mock-h3">Überschrift 3</span>
<blockquote cite="https://archive.org/details/definibusbonoru02cicegoog">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</blockquote>
<ul lang="en">
<li>Hello!</li>
<li>Hey!</li>
<li lang="de">Listen!</li>
<li>Look!</li>
<li>Watch out!</li>
</ul>
<hr/>
</section>
<section aria-labelledby="ui-components">
<h2 id="ui-components">UI-Elemente</h2>
<div id="ui-components-container">
<button>Button</button>
<a href="#ui-components" class="ignore-visited">Link</a>
<a href="#ui-components" class="always-visited">Link (besucht)</a>
<br/>
<br/>
<label for="text-input-example">Eingabefeld:</label>
<input type="text" id="text-input-example"/>
</div>
</section>
<section aria-labelledby="customization">
<h2 id=customization">Customization</h2>
<h3>Farben</h3>
<fieldset class="customization-fieldset">
<legend>Dunkel</legend>
<label for="dark-text-color">Fließtext</label>
<input class="customization-color-input" id="dark-text-color" type="color"/>
<span id="dark-text-color-display"></span>
<label for="dark-highlight-color">Highlights, Überschriften</label>
<input class="customization-color-input" id="dark-highlight-color" type="color"/>
<span id="dark-highlight-color-display"></span>
<label for="dark-secondary-highlight-color">Links, tertiäre Überschriften</label>
<input class="customization-color-input" id="dark-secondary-highlight-color" type="color"/>
<span id="dark-secondary-highlight-color-display"></span>
<label for="dark-main-bg-color">Haupthintergrund</label>
<input class="customization-color-input" id="dark-main-bg-color" type="color"/>
<span id="dark-main-bg-color-display"></span>
<label for="dark-secondary-bg-color">Hervorgehobener Hintergrund</label>
<input class="customization-color-input" id="dark-secondary-bg-color" type="color"/> <span id="dark-secondary-bg-color-display"></span>
<label for="dark-tertiary-bg-color">Tertiäre Hintergrundfarbe</label>
<input class="customization-color-input" id="dark-tertiary-bg-color" type="color"/>
<span id="dark-tertiary-bg-color-display"></span>
<label for="dark-colors-container-background">Hintergrund für die Farbvorschau</label>
<input class="customization-color-input" id="dark-colors-container-background" type="color"/>
<span id="dark-colors-container-background-display"></span>
</fieldset>
<fieldset class="customization-fieldset">
<legend>Hell</legend>
<label for="light-text-color">Fließtext</label>
<input class="customization-color-input" id="light-text-color" type="color"/>
<span id="light-text-color-display"></span>
<label for="light-highlight-color">Highlights, Überschriften</label>
<input class="customization-color-input" id="light-highlight-color" type="color"/>
<span id="light-highlight-color-display"></span>
<label for="light-secondary-highlight-color">Links, tertiäre Überschriften</label>
<input class="customization-color-input" id="light-secondary-highlight-color" type="color"/>
<span id="light-secondary-highlight-color-display"></span>
<label for="light-main-bg-color">Haupthintergrund</label>
<input class="customization-color-input" id="light-main-bg-color" type="color"/>
<span id="light-main-bg-color-display"></span>
<label for="light-secondary-bg-color">Hervorgehobener Hintergrund</label>
<input class="customization-color-input" id="light-secondary-bg-color" type="color"/>
<span id="light-secondary-bg-color-display"></span>
<label for="light-tertiary-bg-color">Tertiäre Hintergrundfarbe</label>
<input class="customization-color-input" id="light-tertiary-bg-color" type="color"/>
<span id="light-tertiary-bg-color-display"></span>
<label for="light-colors-container-background">Hintergrund für die Farbvorschau</label>
<input class="customization-color-input" id="light-colors-container-background" type="color"/>
<span id="light-colors-container-background-display"></span>
</fieldset>
<h3>Schriftarten</h3>
<label for="body-font" class="font-input-label">Fließtext (Direktlink zur .ttf Datei)</label>
<input id="body-font" type="url" class="font-input">
<label for="header-font" class="font-input-label">Überschriften (Direktlink zur .ttf Datei)</label>
<input id="header-font" type="url" class="font-input"/>
<h3>Bilder</h3>
<label for="banner-img-input" class="img-input-label">Banner</label>
<input id="banner-img-input" class="img-input" type="url"/>
<label for="vision-img-input" class="img-input-label">Vision</label>
<input id="vision-img-input" class="img-input" type="url"/>
<label for="hr-img-input" class="img-input-label">Inhaltstrenner</label>
<input id="hr-img-input" type="url"/>
<label for="logo-img-input" class="img-input-label">Logo</label>
<input id="logo-img-input" class="img-input" type="url"/>
<label for="logo-alt-img-input" class="img-input-label">Logo alt</label>
<input id="logo-alt-img-input" class="img-input" type="url"/>
<label for="logo-cw-img-input" class="img-input-label">Logo alt 2</label>
<input id="logo-cw-img-input" class="img-input" type="url"/>
<button id="apply-customization-button">Vorschau</button>
</section></main>
<script src="js/customization.js" type="application/javascript"></script>
</body>
</html>