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: F1 to toggle next-slide preview

Browse source
This commit is contained in:
Joshua Seigler 2016-10-07 02:00:16 -04:00
parent a72967b38d
commit 31c44a39bb
4 changed files with 39 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

46
styles/main.css
View file

@ -6,10 +6,6 @@
padding: 0;
}
* + * {
margin-top: 1em;
}
:root {
box-sizing: border-box;
line-height: 1.5;
@ -25,32 +21,32 @@ body {
margin: 0;
background-color: black;
color: white;
/*background-image: url('30000-light-stripes.gif');
background-size: cover;
box-shadow: 0 0 10vmin black inset, 0 0 10vmin black inset;*/
overflow: hidden;
}
main {
margin-top: 0;
perspective: 100vmin;
transform-style: preserve-3d;
overflow: hidden;
height: 100vh;
}
/* Components */
section {
position: absolute;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
height: 100%;
margin: 0;
padding: 1em;
overflow: hidden;
text-align: center;
background-color: black;
transition: transform ease 1s, opacity ease 1s, visibility step-end 1s;
transform-origin: 50% 50%;
text-align: center;
}
[janus-timeline='past'] {
@ -60,15 +56,24 @@ section {
transition: transform ease 1s, opacity ease 1s, visibility step-start 1s;
}
[janus-timeline='future'] {
visibility: hidden;
@media only screen {
[janus-timeline='future'] {
opacity: 0.5;
}
}
@media not print {
[janus-timeline='future'] {
visibility: hidden;
}
}
section[janus-timeline='past'] {
transform: translate3d(0, 0, 100vmin);
transform: translate3d(0, 0, 0) scale(5);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
section[janus-timeline='present'] {
@ -77,7 +82,7 @@ section[janus-timeline='present'] {
}
section[janus-timeline='future'] {
transform: translate3d(0, 0, -25vmin);
transform: translate3d(0, -5vmin, 0) scale(0.8);
opacity: 0;
visibility: hidden;
pointer-events: none;
@ -85,7 +90,6 @@ section[janus-timeline='future'] {
section.image > img {
position: absolute;
margin: 0;
top: 0;
left: 0;
height: 100%;
@ -93,3 +97,17 @@ section.image > img {
object-fit: cover;
z-index: -1;
}
body.show-notes section[janus-timeline='present'] + section[janus-timeline='future'] {
transition: none;
transform: scale(0.25);
transform-origin: bottom right;
top: auto;
left: auto;
bottom: 0.4rem;
right: 0.4rem;
opacity: 1;
visibility: visible;
outline: 0.1rem solid white;
z-index: 3;
}