Add category selection, documentation, new styling and .ignore file

tomgroenwoldt · Mar 24, 2023 · ff15b4a · ff15b4a
1 parent 802e1a9
commit ff15b4a
Show file tree

Hide file tree

Showing 15 changed files with 385 additions and 103 deletions.
diff --git a/.ignore b/.ignore
@@ -0,0 +1,2 @@
+gifs
+gif_generation
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -14,6 +14,8 @@ getrandom = { version = "0.2.8", features = ["js"] }
 gloo-console = "0.2.3"
 gloo-events = "0.1.2"
 rand = "0.8.5"
+strum = { version = "0.24.1", features = ["derive"] }
+strum_macros = "0.24.3"
 wasm-bindgen = "0.2.84"
 web-sys = "0.3.61"
 yew = { version="0.20", features=["csr"] }
diff --git a/gifs/placeholder/ferris-rust.gif b/gifs/placeholder/ferris-rust.gif
diff --git a/gifs/placeholder/intense-stare-crabby-crab.gif b/gifs/placeholder/intense-stare-crabby-crab.gif
diff --git a/index.scss b/index.scss
@@ -5,28 +5,28 @@ body {
 }
 
 body {
-  background: #1d1c2d;
+  background: #1e1e2e;
   font-family: "Hack Nerd Font", monospace;
   color: rgb(205, 214, 244);
 }
 
 .main {
   display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 85%;
-  margin-bottom: -5%;
+  flex-direction: column;
+  width: 50%;
+  height: 100%;
 }
 
 .layout {
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: row;
 }
 
 .description {
-  margin: 0 10%;
-  padding: 10px;
-  height: 100%;
+  margin-top: 20%;
+  padding: 2%;
   text-align: center;
   border: 1px solid #7f849c;
   font-size: 2vh;
@@ -39,11 +39,29 @@ body {
   margin: auto;
 }
 
+.main-top-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  width: 50%;
+  height: 25%;
+}
+
+.main-bottom-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  width: 50%;
+  height: 25%;
+}
+
 .help {
   margin: 0 10%;
   border: 1px solid #7f849c;
   font-size: 1.5vh;
-  padding: 10px;
+  padding: 2%;
   .command {
     text-decoration: underline;
     text-decoration-color: white;
@@ -56,28 +74,63 @@ body {
   }
 }
 
+.categories {
+  margin: 0 10%;
+  padding: 2%;
+  display: flex;
+  flex-direction: column;
+  .title {
+    text-decoration: underline;
+    padding-bottom: 1%;
+    font-size: 1.5vh;
+  }
+  div {
+    font-family: "Hack Nerd Font", monospace;
+    font-size: 1.5vh;
+    border: 1px solid #7f849c;
+    color: rgb(205, 214, 244);
+    background: none;
+    margin: 0;
+    padding: 2%;
+  }
+  .active {
+    background-color: rgb(49, 50, 68);
+  }
+  .inactive {
+    color: rgb(108, 112, 134);
+    background-color: rgb(30, 30, 46);
+  }
+  .disabled {
+    disabled: true;
+    color: rgb(49, 50, 68);
+    background-color: rgb(17, 17, 27);
+  }
+}
+
 .gif {
-  width: 50%;
-  margin: auto;
+  width: 100%;
+  height: 50%;
+  margin: 0 auto;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   img {
     align: center;
     border: 1px solid #7f849c;
-    padding: 10px;
+    padding: 2%;
     max-width: calc(100% - 20px);
     max-height: calc(100% - 20px);
   }
 }
 
 .shortcut {
+  height: 100%;
+  width: 100%;
   display: flex;
-  align-items: center;
   justify-content: center;
-  height: 15%;
-  width: 50%;
-  margin: auto;
+  align-items: center;
+  align-text: center;
 }
 
 .plus {
@@ -86,11 +139,12 @@ body {
 
 .key {
   display: flex;
-  align-items: center;
   justify-content: center;
-  height: 75%;
+  align-items: center;
+  align-text: center;
+  height: 50%;
+  margin: 0 5%;
   aspect-ratio: 1 / 1;
-  margin: 5%;
   font-size: 4vh;
   border: 1px solid #7f849c;
   transition: all 0.2s ease-in-out;