Merge pull request #316 from ORNL-AMO/issue-279-c

Set bg images to bottom, up arrow sizing
ORNL-AMO · Mar 29, 2024 · 055a17c · 055a17c
2 parents 67b9fae + eb11d95
commit 055a17c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 11 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -170,8 +170,10 @@ $landfill-gasses:  #f06807;
 	&::before {
 		position: fixed;
 		z-index: -1;
-		background: url('images/lose-image-opt.jpg');
+		background: url('images/lose-image-opt-sm.jpg');
+		filter: none;
 		background-size: cover;
+		background-position: bottom;
 		top: -1 * $blur-radius;
 		left: -1 * $blur-radius;
 		bottom: -1 * $blur-radius;
@@ -187,6 +189,7 @@ $landfill-gasses:  #f06807;
 		background: url($image-url);
 		filter: blur(3px);
 		background-size: cover;
+		background-position: bottom;
 		top: -1 * $blur-radius;
 		left: -1 * $blur-radius;
 		bottom: -1 * $blur-radius;
@@ -290,7 +293,7 @@ $landfill-gasses:  #f06807;
 	font-weight: 1000;
 	font-size: 36px;
 	animation: fade-color 3s;
-	animation-delay: 0s;
+	animation-delay: 1s;
 	animation-fill-mode: both;
 }
 

diff --git a/src/components/LoseGame.tsx b/src/components/LoseGame.tsx
@@ -17,7 +17,6 @@ export default class LoseGame extends React.Component<LoseGameProps> {
             <div style={{ width: '100%', height: '100vh', position: 'relative' }}>
                 <Swiper
                     centeredSlides={true}
-                    className='mySwiper'
                 >
                     <SwiperSlide id='fade-to-white' className='lose-game-bg'>
                         <div style={{

diff --git a/src/components/WinGame.tsx b/src/components/WinGame.tsx
@@ -1,5 +1,5 @@
-import { Swiper, SwiperSlide, useSwiper, useSwiperSlide } from 'swiper/react';
-import { Navigation, Pagination, Scrollbar, A11y, Autoplay, EffectFade } from 'swiper/modules';
+import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
@@ -46,9 +46,7 @@ export default class WinGame extends React.Component<WinGameProps> {
                     clickable: true 
                   }}
                 onAutoplayTimeLeft={this.onAutoplayTimeLeft}
-                navigation={true}
-                 className='mySwiper'
-                 >
+                navigation={true}>
                     <SwiperSlide className='slide1-image'>
                         <SlideContent
                             statDivs={
@@ -178,9 +176,7 @@ function UnderlineSpan(props: UnderlineProps) {
     const underlinedText = {__html: props.text};
  return (
      <Fragment>
-         {/* <span>&nbsp;</span> */}
          <span className={animationCSS} dangerouslySetInnerHTML={underlinedText}></span>
-         {/* <span>&nbsp;</span> */}
      </Fragment>
  )
 }
@@ -194,7 +190,7 @@ function SlideContent(props: SlideProps) {
 
     return (
         <div style={{
-            marginTop: '200px',
+            marginTop: '100px',
             color: '#444',
             display: 'flex',
             flexDirection: 'row',

diff --git a/src/images/lose-image-opt-sm.jpg b/src/images/lose-image-opt-sm.jpg