mirror of
https://github.com/seigler/janus
synced 2025-07-27 01:36:11 +00:00
feat: backport lots of improvements from another project
This commit is contained in:
Joshua Seigler
parent
683e645028
commit
056ce5f777
6 changed files with 570 additions and 133 deletions
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 |
264
styles/main.css
264
styles/main.css
|
|
@ -7,15 +7,33 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--main-font: sans-serif;
|
||||
--monospace-font: monospace;
|
||||
--mouse-x: 100vw;
|
||||
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-size: calc(2vw + 2em);
|
||||
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,29 +41,83 @@ 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;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
margin: 0 -10vw;
|
||||
padding: 0 10vw 0.1em;
|
||||
background-color: hsla(0, 0%, 100%, 0.2);
|
||||
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 */
|
||||
|
|
@ -56,6 +128,11 @@ body {
|
|||
margin: 0;
|
||||
background-color: black;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +152,7 @@ body.is-loading:after {
|
|||
}
|
||||
|
||||
body.simulate-projection {
|
||||
filter: brightness(1.5) contrast(0.65);
|
||||
filter: contrast(0.8);
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -85,6 +162,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;
|
||||
|
|
@ -93,11 +191,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.5));
|
||||
background-image: linear-gradient(to top, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 1));
|
||||
}
|
||||
|
||||
nav > label {
|
||||
|
|
@ -127,7 +225,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;
|
||||
}
|
||||
|
|
@ -141,7 +239,6 @@ section {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
|
|
@ -149,34 +246,134 @@ section {
|
|||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
/*
|
||||
section > * {
|
||||
transform: rotate(-7deg);
|
||||
/* live-coding */
|
||||
|
||||
.live-coding {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
*/
|
||||
|
||||
.live-coding textarea {
|
||||
font-size: 0.5em;
|
||||
resize: none;
|
||||
flex: 1 1 auto;
|
||||
color: white;
|
||||
background: #333;
|
||||
border: none;
|
||||
padding: 0.1em;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.live-coding textarea::selection {
|
||||
background-color: black;
|
||||
color: var(--theme-color, white);
|
||||
}
|
||||
|
||||
.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 > textarea,
|
||||
.live-coding input[type="checkbox"]:not(:checked) + .live-coding__component > textarea {
|
||||
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-in 0.5s, opacity ease-in 0.5s, visibility step-end 0.5s;
|
||||
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-out 0.5s, opacity ease-out 0.5s, visibility step-start 0.5s;
|
||||
transition: transform ease 0.5s, opacity ease 0.5s, visibility step-start 0.5s;
|
||||
}
|
||||
|
||||
[janus-timeline='future'] {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
body.show-notes section [janus-timeline='future'] {
|
||||
visibility: visible;
|
||||
opacity: 0.25;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
body.show-notes section[janus-timeline='future'] [janus-timeline='future'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
section[janus-timeline='past'] {
|
||||
section[janus-timeline='past'], body:not(.show-notes) [janus-timeline='past'][janus-past='big'], body:not(.show-notes) [janus-timeline='future'][janus-future='big'] {
|
||||
transform: translate3d(0, 0, 0) scale(5);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
|
@ -196,16 +393,21 @@ section[janus-timeline='future'] {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
img.cover {
|
||||
img.cover, img.contain {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
transform: none;
|
||||
}
|
||||
img.cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
img.contain {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
body.show-notes section {
|
||||
transition: none;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue