styling crc card: better shadow, better inputs

src/assets/base.scss

@@ -20,6 +20,12 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.9);
+
+  --shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px,
+    rgba(0, 0, 0, 0.16) 0px 2px 4px,
+    rgba(0, 0, 0, 0.12) 0px 4px 8px,
+    rgba(0, 0, 0, 0.08) 0px 8px 16px,
+    rgba(0, 0, 0, 0.07) 0px 16px 32px;
 }
 
 /* semantic color variables for this project */
@@ -102,6 +108,7 @@ h6 {
 
 h1 {
   font-size: 1.8em;
+  font-weight: bold;
 }
 
 h2 {
@@ -138,4 +145,22 @@ iframe.youtube {
   width: 100%;
   height: 500px;
   max-height: 35vh;
+}
+
+input {
+  box-shadow: inset 0 .0625em .125em rgba(10, 10, 10, .05);
+  max-width: 100%;
+
+  background-color: #fff;
+  border-color: #dbdbdb;
+  border-radius: .375em;
+  color: #363636;
+  border: 1px solid transparent;
+  align-items: center;
+  display: inline-flex;
+  height: 2rem;
+  justify-content: flex-start;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0 0.5rem;
 }

src/components/architecture/crc-card.vue

@@ -142,11 +142,12 @@ const removeCard = () => {
 <style scoped lang="scss">
 .crc-card {
   min-height: 200px;
-  background-color: #561b00;
+  background-color: var(--vt-c-black-mute);
   padding: 1rem;
   margin: 1rem 0;
   border-radius: 0.3em;
   font-family: var(--code-font-family);
+  box-shadow: var(--shadow);
 
   hr {
     margin-bottom: 1rem;
@@ -164,7 +165,7 @@ const removeCard = () => {
 
   .responsabilities {
     hr {
-      margin: 0 1rem;
+      margin-right: 1rem;
     }
   }
 
@@ -179,9 +180,6 @@ const removeCard = () => {
 }
 
 input.component-name {
-  background-color: rgb(76, 71, 71);
-  padding: 0 0.5rem;
-  border-radius: 0.5rem;
-  color: white;
+  margin-bottom: 0.5rem;
 }
 </style>