Merge branch 'knowledgeBankUX' into 'dev'

added properly working hover efffects on the top- and bottom buttons :)

See merge request !110

client/KnowledgeBank/knowledgeBank.css

@@ -4,9 +4,9 @@
 }
 
 .maincontent-header{
-  background-color: #f0f0f0; /* Light gray background color */
-  border: 1px solid #ccc; /* Light border color */
-  border-radius: 8px; /* Rounded corners */
+  background-color: #f0f0f0; 
+  border: 1px solid #ccc; 
+  border-radius: 8px; 
 }
 
 .top-buttons{
@@ -16,27 +16,59 @@
 }
     
 
-.button-kunskapsbanken{
-    font-size: x-large !important;
-    font-family: 'Roboto',sans-serif;
-    font-weight: bold;
-    text-align: center;
-    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+.button-kunskapsbanken {
+  position: relative;
+  font-size: 1.7vw !important;
+  font-family: 'Roboto', sans-serif;
+  font-weight: bold;
+  text-align: center;
+  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+  border-radius: 8px;
+  border-style: none;
+  height: 13rem;
+  width: 22rem;
+  transition: ease .5s;
+  user-select: none;
+  overflow: hidden;
+}
 
-    border-radius: 8px;
-    border-style: none;
+.button-kunskapsbanken::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
 
-    height: 13rem;
-    width: 22rem;
-    
-    transition: ease .5s;
-    user-select: none;
+/* Add shadow only on small screens */
+@media screen and (max-width: 980px) {
+  .button-kunskapsbanken:hover::before {
+      opacity: 1;
+  }
+  .button-kunskapsbanken{
+    margin: 5px;
+  }
+
+}
+
+/* Add resizing effect on large screens */
+@media screen and (min-width: 981px) {
+  .button-kunskapsbanken:hover {
+      transform: scale(1.1); 
   }
 
-.button-kunskapsbanken:hover{
-    transform: scale(1.3);
+  .button-kunskapsbanken:hover::before {
+      opacity: 0.7; 
+  }
 }
 
+
  #buttons-kunskapsbanken-button1{
     background-image: linear-gradient(#c29ffa, #dfcdfa);
     color:white;