joshua/janus
1
0
Fork 0
mirror of https://github.com/seigler/janus synced 2025-07-27 01:36:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: command bar bound to "Escape" key

Browse source
This commit is contained in:
Joshua Seigler 2016-10-13 11:41:41 -04:00
parent 22927bfd38
commit d08935c71e
4 changed files with 166 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

82
styles/main.css
View file

@ -8,7 +8,6 @@
:root {
box-sizing: border-box;
line-height: 1.5;
font-family: sans-serif;
font-size: calc(2vw + 2em);
}
@ -24,6 +23,10 @@ code {
h1 {
font-size: 1.5rem;
position: relative;
margin: 0 -10vw;
padding: 0 10vw 0.1em;
background-color: rgba(255, 255, 255, 0.2);
}
h2 {
font-size: 1rem;
@ -43,6 +46,25 @@ body {
overflow: hidden;
}
body.is-loading:after {
content: 'Loading...';
font-size: 0.5em;
line-height: 100vh;
color: white;
background-image: linear-gradient(45deg, #030, #000, #003);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 100;
}
body.simulate-projection {
filter: brightness(1.5) contrast(0.65);
}
main {
margin-top: 0;
perspective: 100vmin;
@ -51,6 +73,51 @@ main {
}
/* Components */
nav {
flex-wrap: wrap;
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0.25em 0.25em 4em;
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));
}
nav > label {
flex: 0 0 auto;
padding-right: 1ch;
}
nav > input {
flex: 1 1 auto;
padding: 0;
font-size: inherit;
border: none;
background: transparent;
color: inherit;
}
nav > input:invalid {
color: red;
}
ul.help {
width: 100%;
flex-shrink: 0;
font-size: 0.5em;
}
ul.help li {
display: inline-block;
background-color: hsla(0, 0%, 100%, 0.2);
border-radius: 0.5em;
padding: 0 0.5em;
}
section {
position: absolute;
z-index: 1;
@ -68,6 +135,12 @@ section {
transform-origin: 50% 50%;
}
/*
section > * {
transform: rotate(-7deg);
}
*/
[janus-timeline='past'] {
transition: transform ease-in 0.5s, opacity ease-in 0.5s, visibility step-end 0.5s;
}
@ -76,10 +149,8 @@ section {
transition: transform ease-out 0.5s, opacity ease-out 0.5s, visibility step-start 0.5s;
}
@media not print {
[janus-timeline='future'] {
visibility: hidden;
}
[janus-timeline='future'] {
visibility: hidden;
}
body.show-notes section [janus-timeline='future'] {
@ -119,6 +190,7 @@ img.cover {
width: 100%;
object-fit: cover;
z-index: -1;
transform: none;
}
body.show-notes section {