mirror of
https://github.com/seigler/presentation-blockchains
synced 2025-07-26 17:16:11 +00:00
feat: incorporate updates to Janus
This commit is contained in:
Joshua Seigler
parent
36845011f8
commit
f32b318593
10 changed files with 1198 additions and 113 deletions
|
|
@ -1,30 +1,3 @@
|
|||
.credits > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img.thumbnail {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.row, .col {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row > div, .col > div {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title-page h1 {
|
||||
font-size: 2em;
|
||||
padding: 0.25em;
|
||||
|
|
|
|||
BIN
styles/browser-bar.png
Normal file
BIN
styles/browser-bar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
260
styles/main.css
260
styles/main.css
|
|
@ -7,15 +7,33 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--main-font: sans-serif;
|
||||
--monospace-font: monospace;
|
||||
--mouse-x: 0.5;
|
||||
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-size: calc(3vmax + 3vmin);
|
||||
font-family: var(--main-font);
|
||||
font-size: calc(5vw);
|
||||
cursor: default;
|
||||
line-height: 1.1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::selection {
|
||||
text-shadow: none;
|
||||
background: #FF0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(to right, currentcolor, currentcolor);
|
||||
background-position: 0 1.9ex;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 8px 0.08ex;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -23,25 +41,82 @@ li {
|
|||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, monaco, monospace;
|
||||
font-family: monospace;
|
||||
font-family: var(--monospace-font, monospace);
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-family: Consolas, monaco, monospace;
|
||||
background-color: hsla(0, 0%, 100%, 0.2);
|
||||
border-radius: 0.5em;
|
||||
padding: 0.1em 0.4em 0;
|
||||
margin: -0.1em 0 0;
|
||||
font-size: 0.7em;
|
||||
border-radius: 0.2em;
|
||||
padding: 0.1em;
|
||||
font-family: inherit;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
border: 0.1em solid;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: monospace;
|
||||
font-family: var(--monospace-font, monospace);
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5em;
|
||||
font-weight: 400;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
font-weight: 900;
|
||||
}
|
||||
h1, h2 {
|
||||
font-weight: bold;
|
||||
|
||||
sup {
|
||||
display: inline-block;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
display: inline-block;
|
||||
margin-bottom: -0.5em;
|
||||
}
|
||||
|
||||
img.thumbnail {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
iframe {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
quotes: "\201C""\201D""\2018""\2019";
|
||||
text-align: left;
|
||||
margin: 0 2em;
|
||||
}
|
||||
|
||||
blockquote > p::before, blockquote > p::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin: -0.2em;
|
||||
font-size: 4em;
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
blockquote > p::before {
|
||||
content: open-quote;
|
||||
}
|
||||
blockquote > p::after {
|
||||
content: close-quote;
|
||||
}
|
||||
|
||||
blockquote > cite {
|
||||
font-style: normal;
|
||||
font-size: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
blockquote > cite::before {
|
||||
content: '- ';
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
|
@ -52,6 +127,11 @@ body {
|
|||
margin: 0;
|
||||
background-color: black;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -81,6 +161,27 @@ main {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.row, .col {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.row--shrink, .col--shrink {
|
||||
flex: 0 1 auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Components */
|
||||
nav {
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -89,11 +190,11 @@ nav {
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0.25em 0.25em 4em;
|
||||
padding: 0.25em 0.25em 6em;
|
||||
transition: transform ease 0.5s;
|
||||
font-size: 0.5rem;
|
||||
z-index: 2;
|
||||
background-image: linear-gradient(to top, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.75));
|
||||
background-image: linear-gradient(to top, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 1));
|
||||
}
|
||||
|
||||
nav > label {
|
||||
|
|
@ -123,7 +224,7 @@ ul.help {
|
|||
|
||||
ul.help li {
|
||||
display: inline-block;
|
||||
background-color: hsla(0, 0%, 100%, 0.2);
|
||||
background-color: hsla(0, 0%, 40%, 0.6);
|
||||
border-radius: 0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
|
@ -144,16 +245,137 @@ section {
|
|||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
/*
|
||||
section > * {
|
||||
transform: rotate(-7deg);
|
||||
/* live-coding */
|
||||
|
||||
.live-coding {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
*/
|
||||
|
||||
.live-coding__code {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.live-coding__code textarea, .live-coding__code .highlight {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.1em;
|
||||
font-size: 0.4em;
|
||||
resize: none;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.live-coding__code textarea {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.live-coding__code .highlight {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.live-coding__code textarea::selection {
|
||||
background-color: black;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.live-coding__component {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.col > .live-coding__component {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.live-coding__component label {
|
||||
line-height: 1;
|
||||
color: var(--theme-color, inherit);
|
||||
}
|
||||
|
||||
.hidden,
|
||||
.live-coding input[type="radio"],
|
||||
.live-coding input[type="checkbox"],
|
||||
.live-coding input[type="radio"]:not(:checked) + .live-coding__component > .live-coding__code,
|
||||
.live-coding input[type="checkbox"]:not(:checked) + .live-coding__component > .live-coding__code {
|
||||
position: fixed;
|
||||
visibility: hidden;
|
||||
right: 110vw;
|
||||
}
|
||||
|
||||
.live-coding input[type="radio"]:not(:checked) + .live-coding__component,
|
||||
.live-coding input[type="checkbox"]:not(:checked) + .live-coding__component {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.row > .live-coding__component label {
|
||||
writing-mode: vertical-rl;
|
||||
text-align: right;
|
||||
transform: rotate(180deg);
|
||||
border-left: 0.1em solid var(--theme-color, currentcolor);
|
||||
line-height: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.col > .live-coding__component label {
|
||||
text-align: left;
|
||||
max-height: 1em;
|
||||
border-bottom: 0.1em solid var(--theme-color, currentcolor);
|
||||
}
|
||||
|
||||
/* adapted from Lea Verou's http://dabblet.com/gist/14cf7ecbd12505768478b36510f623c8 */
|
||||
.browser {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 0.5vmin;
|
||||
overflow: hidden;
|
||||
--chrome-height: 4vmin;
|
||||
padding-top: var(--chrome-height);
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.browser::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; right: 0; left: 0;
|
||||
border: solid;
|
||||
--right: 146; --left: 201;
|
||||
border-width: var(--chrome-height) calc(var(--right) / 38 * var(--chrome-height)) 0 calc(var(--left) / 38 * var(--chrome-height));
|
||||
border-image: url('browser-bar.png') 100% var(--right) 0 var(--left) repeat;
|
||||
}
|
||||
|
||||
.browser iframe {
|
||||
pointer-events: none;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* states and transitions */
|
||||
|
||||
[janus-timeline='past'] {
|
||||
transition: transform ease 0.5s, opacity ease 0.5s, visibility step-end 0.5s;
|
||||
}
|
||||
|
||||
section[janus-timeline='present'] [janus-timeline='past'] {
|
||||
transition: transform ease 0.5s, opacity ease 0.5s;
|
||||
}
|
||||
[janus-timeline='present'] {
|
||||
transition: transform ease 0.5s, opacity ease 0.5s, visibility step-start 0.5s;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue