Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix slide bugs #64

Merged
merged 3 commits into from
Jun 19, 2024
Merged

Fix slide bugs #64

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b3fe44
rename layouts folder to assets to remove layouts warning message
JaroCamphuijsen Jun 18, 2024
d170293
layout and transition tweaks, get rid of overlays when not active, ad…
JaroCamphuijsen Jun 18, 2024
99a1ab3
Merge branch 'main' into fix_slide_bugs
raar1 Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 layouts/nlesc-decorations.js → assets/nlesc-decorations.js
View file
Open in desktop
File renamed without changes.
47 changes: 28 additions & 19 deletions layouts/nlesc-decorations.scss → assets/nlesc-decorations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ $heading4Size: 1.5em;
// By default, all decorations are out of view/hidden
#overlay {
position: absolute;
transform: translateY(100vh);
inset: 0;
opacity: 0;
transition: opacity 1s;
Expand Down Expand Up @@ -80,7 +81,7 @@ $heading4Size: 1.5em;
}

#right-e {
transition: opacity 1s;
transition: opacity 1s .7s;
opacity: 0;
position: absolute;
top: -100%;
Expand All @@ -89,7 +90,8 @@ $heading4Size: 1.5em;
}

#left-e {
transition: left 1s, bottom 1s;
transition: opacity 1s .7s;
opacity: 0;
position: absolute;
width: 6%;
left: -100%;
Expand All @@ -103,12 +105,13 @@ $heading4Size: 1.5em;
position: absolute;
bottom: 0;
top: 0;
z-index: 1;
z-index: 2;
}

#touch-pane {
background-color: white;
transition: opacity 1s;
transform: translateY(100vh);
opacity: 0;
position: absolute;
left: 0;
Expand All @@ -126,9 +129,10 @@ $heading4Size: 1.5em;
}

#empowering {
transition: opacity 1s;
transition: opacity 1s .5s;
opacity: 0;
position: absolute;
transform: translateY(100vh);
left: 6%;
right: 52%;
bottom: 0;
Expand Down Expand Up @@ -189,21 +193,20 @@ $heading4Size: 1.5em;
}

#purple-half-circle-bottom {
opacity: 0;
transition: opacity 1s;
position: absolute;
background-color: $eSciencePurple;
left: -50%;
bottom: 0%;
left: 0%;
bottom: -100%;
width: 15%;
height: 15%;
border-radius: 20vw 20vw 0 0;
z-index: 2;
opacity: 0;
}

#purple-half-circle-top {
transition: top 1s;
opacity: 1;
position: absolute;
background-color: $eSciencePurple;
left: 0;
Expand All @@ -215,16 +218,16 @@ $heading4Size: 1.5em;
}

#purple-half-circle-logo {
transition: opacity 1s;
transition: bottom 1s;
background-color: $eSciencePurple;
transform: translateY(100vh);
width: 36%;
height: 30%;
border-radius: 28vw 28vw 0 0;
z-index: 2;
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
bottom: -100%;
img {
position: relative;
bottom: -34%;
Expand Down Expand Up @@ -274,10 +277,10 @@ $heading4Size: 1.5em;
}

// Define how decorations look when 'activated', using mixins to avoid repetition
@mixin white-overlay { #overlay { background-color: white; opacity: .8; } }
@mixin black-overlay { #overlay { background-color: black; opacity: .8; } }
@mixin blue-overlay { #overlay { background-color: $eScienceBlue; opacity: .8; } }
@mixin purple-overlay { #overlay { background-color: $eSciencePurple; opacity: .8; } }
@mixin white-overlay { #overlay { background-color: white; opacity: 1; transform: translateY(0vh);} }
@mixin black-overlay { #overlay { background-color: black; opacity: 1; transform: translateY(0vh);} }
@mixin blue-overlay { #overlay { background-color: $eScienceBlue; opacity: 1; transform: translateY(0vh);} }
@mixin purple-overlay { #overlay { background-color: $eSciencePurple; opacity: 1; transform: translateY(0vh);} }

@mixin logo-color { #logo-color { left: 3%; opacity: 1; } }
@mixin logo-white { #logo-white { left: 3%; opacity: 1; } }
Expand All @@ -292,18 +295,18 @@ $heading4Size: 1.5em;
@mixin purple-half-circle-top { #purple-half-circle-top { top: 0; } }
@mixin purple-half-circle-bottommiddle { #purple-half-circle-bottom { bottom: 0; left: 50%; opacity: 1; } }
@mixin purple-half-circle-bottomleft { #purple-half-circle-bottom { bottom: 0; left: 18%; opacity: 1; } }
@mixin purple-half-circle-logo { #purple-half-circle-logo { opacity: 1; } }
@mixin purple-half-circle-logo { #purple-half-circle-logo { bottom:0; opacity: 1; transform: translateY(0vh);} }

@mixin touch-pane { #touch-pane { opacity: 1; } }
@mixin empowering { #empowering { opacity: 1} }
@mixin touch-pane { #touch-pane { opacity: 1; transform: translateY(0vh);} }
@mixin empowering { #empowering { opacity: 1; transform: translateY(0vh);} }

@mixin blue-pane-left { #blue-pane { opacity: 1; left: 0; right: 50%;} }
@mixin blue-pane-right { #blue-pane { opacity: 1; left: 50%; right: 0;} }

@mixin right-e-top { #right-e { top: 10%; right: 0; opacity: 1; }}
@mixin right-e-bottom { #right-e { top: 67%; right: 0; opacity: 1; }}

@mixin left-e { #left-e { bottom: 30%; left: 0} }
@mixin left-e { #left-e { bottom: 30%; left: 0; opacity: 1;} }

@mixin globe { #globe { top: 38.6%; left: 46%; } }
@mixin mail { #mail { top: 46.6%; left: 46%; } }
Expand Down Expand Up @@ -378,6 +381,12 @@ $heading4Size: 1.5em;
color: white;
}
}
&.empty {
h1, h2, h3, p, ul{
text-align: left;
padding-left: 10%;
}
}

section.has-dark-background { h1, h2, h3 {
color: white;
Expand Down
2 changes: 1 addition & 1 deletion layouts/style.scss → assets/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

@import url('reveal.js/dist/reveal.css');
@import url('~/layouts/nlesc-decorations.scss');
@import url('~/assets/nlesc-decorations.scss');

p, ul, ol{
a{
Expand Down
2 changes: 1 addition & 1 deletion components/Slides.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import RevealMarkdown from "reveal.js/plugin/markdown/markdown.esm.js";
import RevealNotes from "reveal.js/plugin/notes/notes.js";
// import RevealMath from 'reveal.js/plugin/math/math.js'
import Search from "reveal.js/plugin/search/search.esm.js";
import Decorations from "~/layouts/nlesc-decorations.js";
import Decorations from "~/assets/nlesc-decorations.js";

onMounted(() => {
console.log("Slides Mounted");
Expand Down
2 changes: 1 addition & 1 deletion nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default defineNuxtConfig({
ssr: true,
target: "static",

css: ['~/layouts/style.scss'],
css: ['~/assets/style.scss'],

// https://nuxt.com/docs/api/configuration/nuxt-config
postcss: {
Expand Down
Loading