Adjust Style for mobile and stimulus

1 files changed, 34 insertions, 0 deletions

diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss
index 5042f7d..d7704ef 100644
--- a/app/assets/stylesheets/welcome.scss
+++ b/app/assets/stylesheets/welcome.scss
@@ -1,3 +1,37 @@
 // Place all the styles related to the welcome controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
+
+button[data-action="taxonomy#toggle"] {
+    position: absolute;
+    top: 9rem;
+    left: 0.7rem;
+    display: block;
+    cursor: pointer;
+    padding: 16px;
+    color: transparent;
+    z-index: 990;
+    background: transparent var(--icon-menu-off) top left/32px no-repeat;
+    border: none;
+    text-align: center;
+}
+button[data-action="taxonomy#toggle"].on {
+    background-image: var(--icon-menu-on);
+}
+
+[data-controller="taxonomy"] nav {
+    display: block;
+    position: fixed;
+    top: 9rem;
+    bottom: 0;
+    max-width: 35rem;
+    background-color: rgba(0,128,128,0.5);
+    z-index: -1;
+    display: none;
+    border-top-right-radius: 1rem;
+}
+[data-controller="taxonomy"] nav.on {
+    width: 89vw;
+    z-index: 900;
+    display: block;
+}