This repository has been archived on 2022-03-27. You can view files and clone it, but cannot push or open issues or pull requests.
presis/revealjs/alternative_energy/theme.scss

157 lines
2.3 KiB
SCSS

@import "../_assets/reveal.js/css/theme/black.css";
@import "../_assets/fonts/TeXGyreAdventor/index.css";
sup {
font-size: 0.75em !important;
margin-right: 0.2em !important;
}
.reveal,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
font-family: "TeX Gyre Adventor";
}
li.image {
list-style: square;
}
li.imageplus {
list-style: disclosure-open;
}
.legend {
position: fixed;
left: 0px;
top: 0px;
}
.footnote-legend {
font-size: 0.6em !important;
}
.footnote-legend li {
display: inline-block;
}
.footnote-legend li:not(:last-child)::after {
content: '|'
}
*:blank {
border: 5px red;
}
#kardaschow {
bottom: 0px;
//min-height: 50vh;
position: fixed;
top: 0px;
width: 100%;
// everything after the current visible and *every visible*
.current-fragment ~ .fragment,
.visible {
//height: 8%;
height: 60px;
h1 {
font-size: 1em;
}
}
// but not the current (important)
.current-fragment {
//height: 74% !important;
height: 609px !important;
h1 {
font-size: 2em;
}
.expand {
display: initial !important;
}
}
div {
overflow: hidden;
// only the movement and size change is animated
h1 {
transition: all .2s ease;
}
.expand {
display: none !important;
}
// per default: 28% high
&:not(.visible) {
//height: 30%;
height: 243px; // also shows when translating
// explot fragments initial hidden state
opacity: 1;
visibility: visible;
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
}
#type-1 {
background-color: #fc6769;
}
#type-2 {
background-color: #63c9ce;
}
#type-3 {
background-color: #f4e623;
// slow rotation of galaxy
/*img {
animation: rotate 300s infinite linear;
// easter egg
&:hover {
animation: rotate 1s infinite linear;
}
}*/
}
}
.expand {
img {
// remove upstream styles
margin: inherit !important;
background: inherit !important;
border: inherit !important;
box-shadow: inherit !important;
max-height: unset;
max-width: unset;
max-width: 95%;
max-height: 60%;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}