log actions

2 files changed, 57 insertions, 20 deletions

diff --git a/resources/css/battle.css b/resources/css/battle.css
index 1e52802..748dad1 100644
--- a/resources/css/battle.css
+++ b/resources/css/battle.css
@@ -66,39 +66,43 @@
 .exp-label {
   margin-right: 0.5rem;
 }
+
+
 .battle__monster-visual {
   flex-grow: 1;
   flex-basis: 50%;
   position: relative;
-}
-
-.battle__monster-sprite {
   text-align: center;
 }
 
-.battle__monster-img {
+.battle__monster-sprite {
   cursor: pointer;
   transition-property: filter;
 
   width: 90px;
 }
-.battle__monster-img.damaged {
-  filter: brightness(2);
-}
 
-.battle__technique-animation {
-  position: fixed;
-  z-index: 10;
+.battle__monster-sprite.damaged {
+  filter: brightness(2);
 }
 
-.battle__monster__trainer-sprite {
+.battle__trainer-visual {
   position: absolute;
   top: 0;
   right: 0;
+}
+
+.battle__trainer-sprite {
   width: 120px;
   max-width: 25vw;
 }
 
+
+.battle__technique-animation {
+  position: fixed;
+  z-index: 10;
+}
+
 .battle__monster-technique {
   background-color: beige;
   border: 2px solid #000;
@@ -123,13 +127,7 @@
 }
 
 @media (max-width: 600px) {
-  .battle__monster--has-trainer-sprite .battle__monster-sprite {
-    width: 30vw;
-  }
-}
-@media (max-width: 450px) {
-  .battle__monster--has-trainer-sprite .battle__monster-sprite {
-    width: auto;
+  .battle__monster--has-trainer-sprite .battle__monster-visual {
     text-align: left;
   }
 }
@@ -218,7 +216,6 @@
 #techniques {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
 
   background: beige;
 }
@@ -253,6 +250,30 @@
 }
 
 
+
+
+#log {
+  height: 20vh;
+  background-color: #fff;
+  border: 0.5rem solid rgba(0, 0, 0, 0.75);
+  padding: 0.5rem;
+  line-height: 1.75rem;
+  font-size: 1.25rem;
+  overflow-y: scroll;
+
+  transition-property: height, border-width, padding;
+  transition-duration: 0.25s;
+}
+
+#log.log--is-hidden {
+  height: 0;
+  border-width: 0;
+  padding: 0;
+}
+
+
+
+
 .action-feedback {
   position: absolute;
   z-index: 11;
diff --git a/resources/css/menu.css b/resources/css/menu.css
index eee0b5f..84c6c77 100644
--- a/resources/css/menu.css
+++ b/resources/css/menu.css
@@ -96,9 +96,25 @@
 #status {
   color: #fff;
   background-color: #000;
-  padding: 0.25rem;
+  padding: 0.5rem;
+
   display: flex;
   justify-content: space-between;
+  align-items: center;
+
+  font-size: 1.25rem;
+}
+
+#status > span {
+  display: flex;
+  align-items: center;
+}
+#status > span > span {
+  margin-left: 0.5rem;
+}
+
+#status .menu-button:hover {
+  background-color: rgba(255, 255, 255, 0.5);
 }