mirror of
https://github.com/seigler/janus
synced 2025-07-26 01:06:11 +00:00
163 lines
5 KiB
HTML
163 lines
5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Tech Talk: Responsive Typography</title>
|
|
<link rel="stylesheet" href="libs/highlight.js/monokai-sublime.css">
|
|
<link rel="stylesheet" href="styles/main.css" charset="utf-8">
|
|
<script type="text/javascript" src="libs/prefixfree/prefixfree.min.js"></script>
|
|
</head>
|
|
<body class="is-loading">
|
|
<nav>
|
|
<label for="commandField">Command:</label>
|
|
<input list="commands" type="text" id="commandField" autocomplete="off" pattern="[0-9]+|[spcr]">
|
|
<ul class="help">
|
|
<li>
|
|
<strong>#</strong> - jump to a slide item
|
|
</li>
|
|
<li>
|
|
<strong>s</strong> - toggle projector simulation
|
|
</li>
|
|
<li>
|
|
<strong>p</strong> - toggle presenter mode
|
|
</li>
|
|
<li>
|
|
<strong>c</strong> - clone window
|
|
</li>
|
|
<li>
|
|
<strong>r</strong> - reset stored state
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
|
|
<section class="title-page" style="background: linear-gradient(to bottom, black 30%, rebeccapurple)">
|
|
<h1 style="font-size: 3.2em">Janus</h1>
|
|
<h2>A live-coding web presentation framework.</h2>
|
|
<p><kbd>Page Down</kbd> to continue</p>
|
|
<p><kbd>Esc</kbd> for commands</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>How to use</h2>
|
|
<p><kbd>Esc</kbd> <kbd>C</kbd> to clone the window. Cloned windows will stay in sync.</p>
|
|
<p>Move the new window to the projector screen and fullscreen.</p>
|
|
<p>In the presenter window, <kbd>Esc</kbd> <kbd>P</kbd> to eliminate transitions and preview the upcoming slide.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<blockquote>
|
|
<p>Blockquotes are pretty cool, right?</p>
|
|
<cite>Thomas Jefferson, probably</cite>
|
|
</blockquote>
|
|
</section>
|
|
|
|
<section id="demo1">
|
|
<div class="live-coding col" style="justify-content: center;">
|
|
<div class="browser" style="max-width: calc(100vw * var(--mouse-x)); min-width: 2em; margin-bottom: 0.2em;">
|
|
<iframe src="about:blank" frameborder="0"></iframe>
|
|
</div>
|
|
<div class="row" style="min-height: 50%">
|
|
<input type="radio" id="demo1-markup" name="demo1" janus-sync>
|
|
<div class="live-coding__component" style="--theme-color: #E34F26;">
|
|
<label for="demo1-markup">HTML</label>
|
|
<div class="live-coding__code">
|
|
<textarea name="html" cols="1" id="demo1-html" spellcheck="false" janus-sync>
|
|
<nav>
|
|
<a href="#">Home</a>
|
|
<a href="#">Shop</a>
|
|
<a href="#">Blog</a>
|
|
<a href="#">About</a>
|
|
</nav>
|
|
<div class="content">
|
|
<div class="sidebar">Ads ads ads ads</div>
|
|
<main>
|
|
<section>Content content content</section>
|
|
<section>Content content content</section>
|
|
<section>Content content content</section>
|
|
<section>Content content content</section>
|
|
</main>
|
|
</div>
|
|
<footer>© by us, forever. Neener neener.</footer>
|
|
</textarea>
|
|
<div class="highlight"></div>
|
|
</div>
|
|
</div>
|
|
<input type="radio" id="demo1-styles" name="demo1" checked janus-sync>
|
|
<div class="live-coding__component" style="--theme-color: #0070BA;">
|
|
<label for="demo1-styles">CSS</label>
|
|
<div class="live-coding__code">
|
|
<textarea name="css" cols="1" id="demo1-css" spellcheck="false" janus-sync>* { margin: 0; padding: 0; box-size: border-box; }
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
font-size: calc(1vw + 1em);
|
|
min-height: 100vh;
|
|
}
|
|
nav {
|
|
display: flex;
|
|
margin-bottom: -0.1em;
|
|
flex-wrap: wrap;
|
|
}
|
|
nav > a {
|
|
flex: 1 1 auto;
|
|
max-width: 7em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 0.5em;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
border: 0.1em solid black;
|
|
}
|
|
nav > a + a {
|
|
margin-left: -0.1em;
|
|
}
|
|
.content {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
.sidebar {
|
|
width: 7em;
|
|
order: 1;
|
|
border: 0.1em solid;
|
|
}
|
|
main {
|
|
flex-grow: 1;
|
|
}
|
|
section {
|
|
min-height: 3em;
|
|
border: solid;
|
|
border-width: 0.1em 0;
|
|
}
|
|
section + section {
|
|
margin-top: -0.1em;
|
|
}
|
|
</textarea>
|
|
<div class="highlight"></div>
|
|
</div>
|
|
</div>
|
|
<input type="radio" id="demo1-script" name="demo1" janus-sync>
|
|
<div class="live-coding__component" style="--theme-color: #F7DF1E;">
|
|
<label for="demo1-script">JS</label>
|
|
<div class="live-coding__code">
|
|
<textarea name="js" cols="1" id="demo1-js" spellcheck="false" janus-sync>// no JS needed
|
|
</textarea>
|
|
<div class="highlight"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>The End</h1>
|
|
</section>
|
|
|
|
</main>
|
|
<script type="text/javascript" src="libs/openjs-shortcut/shortcut.js"></script>
|
|
<script type="text/javascript" src="libs/behave/behave.js"></script>
|
|
<script type="text/javascript" src="libs/highlight.js/highlight.min.js"></script>
|
|
<script type="text/javascript" src="scripts/app.js"></script>
|
|
</body>
|
|
</html>
|