adding minimaps

earthrise-media · Jan 4, 2024 · 872a59f · 872a59f
1 parent 563f490
commit 872a59f
Show file tree

Hide file tree

Showing 2 changed files with 301 additions and 137 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -1,5 +1,5 @@
 :root {
-  font-family: PPEiko-thin, PPEiko-medium, PPEiko-heavy, PPEiko-light-italic ;
+  font-family: PPEiko-thin, PPEiko-medium, PPEiko-heavy, PPEiko-light-italic;
   line-height: 1.5;
   font-weight: 400;
 
@@ -14,27 +14,27 @@
 }
 @font-face {
   font-family: PPEiko-thin;
-  src: url('../fonts/pp-eiko/PPEiko-Thin.otf');
+  src: url("../fonts/pp-eiko/PPEiko-Thin.otf");
 }
 
 @font-face {
   font-family: PPEiko-medium;
-  src: url('../fonts/pp-eiko/PPEiko-Medium.otf');
+  src: url("../fonts/pp-eiko/PPEiko-Medium.otf");
 }
 
 @font-face {
   font-family: PPEiko-heavy;
-  src: url('../fonts/pp-eiko/PPEiko-Heavy.otf');
+  src: url("../fonts/pp-eiko/PPEiko-Heavy.otf");
 }
 
 @font-face {
   font-family: PPEiko-light-italic;
-  src: url('../fonts/pp-eiko/PPEiko-LightItalic.otf');
+  src: url("../fonts/pp-eiko/PPEiko-LightItalic.otf");
 }
 
 @font-face {
   font-family: PPEiko-black-italic;
-  src: url('../fonts/pp-eiko/PPEiko-BlackItalic.otf');
+  src: url("../fonts/pp-eiko/PPEiko-BlackItalic.otf");
 }
 
 body {
@@ -106,7 +106,7 @@ figure p {
   font-size: 1.5rem;
   background-color: #ffffff;
   max-width: 1000px;
-  margin: 0 auto; 
+  margin: 0 auto;
 }
 .step h1 {
   text-align: center;
@@ -120,28 +120,26 @@ figure p {
   height: 100vh;
   /* flex: 1; */
   background-color: #040406;
-  color: #F5C53B;
+  color: #f5c53b;
   padding: 1rem;
   margin-bottom: 2rem;
   /* center contents vertically */
   display: flex;
   flex-direction: column;
   justify-content: center;
-  background-image: url('../chicken-headshot-transparent80.png');
+  background-image: url("../chicken-headshot-transparent80.png");
   background-position: center;
   background-repeat: no-repeat;
   /* opacity: 0.8; */
-
-
 }
-#intro h1{
+#intro h1 {
   font-size: 5rem;
   font-family: PPEiko-heavy;
   text-align: center;
   padding: 0rem;
   margin: 0rem;
 }
-#intro p{
+#intro p {
   font-size: 2.5rem;
   font-family: PPEiko-medium;
   text-align: center;
@@ -161,12 +159,12 @@ figure p {
   font-weight: 900;
   color: #00ff4c;
 }
-.highlight{
-  background-color: #F5C53B;
+.highlight {
+  background-color: #f5c53b;
 }
 
 .button-1 {
-  background-color: #F5C53B;
+  background-color: #f5c53b;
   border-radius: 8px;
   border-style: none;
   box-sizing: border-box;
@@ -179,7 +177,7 @@ figure p {
   height: 40px;
   line-height: 20px;
   list-style: none;
-  margin: em auto; 
+  margin: em auto;
   outline: none;
   padding: 10px 16px;
   position: relative;
@@ -198,10 +196,9 @@ figure p {
   cursor: pointer;
   transform: translateY(-5px); /* Move the button up on hover */
   box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.4);
-
 }
 .button-1:active {
-  background-color: #F5C53B;
+  background-color: #f5c53b;
   box-shadow: none;
 }
 
@@ -210,45 +207,145 @@ figure p {
   position: absolute;
   top: 0;
   left: 400px;
-  margin: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
   width: calc(100% - 410px);
   height: calc(100% - 10px);
   border-radius: 10px;
   overflow: hidden;
-  background-color: #EDE6DA;
+  background-color: #ede6da;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
 }
 #control-panel {
   position: absolute;
   padding: 0;
-  margin: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+  margin-bottom: 2.5px;
   top: 0;
   left: 0;
   width: 390px;
-  height: 70%;
-  background-color: #EDE6DA;
+  height: 100px;
+  background-color: #ede6da;
   overflow-y: scroll;
   overflow-x: hidden;
   border-radius: 10px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
 }
-#static-frame{
-    position: absolute;
-    padding: 0;
-    margin: 5px;
-    bottom: 0;
-    left: 0;
-    width: 387px;
-    height: 27%;
-    background-color: #EDE6DA;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
-    border: 3px solid #f5c73b00;
+#dynamic-frame {
+  position: absolute;
+  padding: 0;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 2.5px;
+  margin-bottom: 2.5px;
+  top: 107.5px;
+  left: 0;
+  width: 390px;
+  height: calc((100% - 120px) / 2);
+  background-color: #ede6da;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+  /* border: 3px solid #f5c73b00; */
+  box-sizing: border-box;
+}
+#static-frame {
+  position: absolute;
+  padding: 0;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 2.5px;
+  margin-bottom: 5px;
+  bottom: 0;
+  left: 0;
+  width: 390px;
+  height: calc((100% - 120px) / 2);
+  background-color: #ede6da;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+  /* border: 3px solid #f5c73b00; */
+  box-sizing: border-box;
+}
+#curtain-1 {
+  position: absolute;
+  padding: 0;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 2.5px;
+  margin-bottom: 2.5px;
+  top: 107.5px;
+  left: 0;
+  width: 390px;
+  height: calc((100% - 120px) / 2);
+  background-color: #ede6da;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+  /* border: 3px solid #f5c73b00; */
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+#curtain-2 {
+  position: absolute;
+  padding: 0;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 2.5px;
+  margin-bottom: 5px;
+  bottom: 0;
+  left: 0;
+  width: 390px;
+  height: calc((100% - 120px) / 2);
+  background-color: #ede6da;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+  /* border: 3px solid #f5c73b00; */
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
+.static-frame.active {
+  border: 3px dashed #f5c53b;
+}
 
-#static-frame.active {
-  border: 3px dashed #F5C53B;
+#cafo-count {
+  text-align: center;
+  font-family: PPEiko-heavy;
+  padding: 0rem;
+  font-size: 3rem;
+  color: #000000;
+  /* text outline black */
+  /* -webkit-text-stroke: 2px #5b4b1d; */
+  /* background-color: #3b3b3b; */
+}
+#cafo-label {
+  text-align: center;
+  font-family: PPEiko-light-italic;
+  padding: 0rem;
+  font-size: 1rem;
+  /* background-color: #3b3b3b; */
 }
+.instructions {
+  text-align: center;
+  font-family: PPEiko-light-italic;
+  padding: 0rem;
+  font-size: 1rem;
+  margin: auto;
+  /* background-color: #3b3b3b; */
+}