fix(styles): increase CSS specifity for some selectors

Since `sideEffects` has been added to activate tree shakings, the
styles are imported in the wrong order in production build. There is an
open issue (again) on Next.js repo. I'm not sure it will be fixed soon
so in the meantime I had to increase the specifity of some selectors
to avoid broken styles.
I also fixed two minor layout errors:
* CV page widgets should use headings of level 2
* Homepage should wrap the cards in list items

1 files changed, 28 insertions, 27 deletions

diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss
index f6570ce..1a440f0 100644
--- a/src/components/organisms/forms/search-form/search-form.module.scss
+++ b/src/components/organisms/forms/search-form/search-form.module.scss
@@ -10,52 +10,53 @@
   transition: all 0.3s ease-in-out 0s;
 }
 
-.btn {
-  background: var(--color-bg-tertiary);
-  border: fun.convert-px(2) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
-  transition: all 0.25s linear 0s;
+.form {
+  display: flex;
+  flex-flow: row nowrap;
+
+  /* It needs to be nested because of wrong CSS ordering on production build. */
+  .btn {
+    background: var(--color-bg-tertiary);
+    border: fun.convert-px(2) solid var(--color-border);
+    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
+    transition: all 0.25s linear 0s;
+  }
+
+  &--no-label {
+    .btn {
+      align-self: stretch;
+    }
+  }
+
+  &--has-label {
+    .btn {
+      align-self: flex-end;
+      height: fun.convert-px(52);
+    }
+  }
 
-  &:hover,
-  &:focus {
+  .btn:hover,
+  .btn:focus {
     .icon {
       transform: scale(0.85) rotate(20deg) translateX(#{fun.convert-px(2)})
         translateY(#{fun.convert-px(3)});
     }
   }
 
-  &:focus {
+  .btn:focus {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
       var(--color-primary-dark);
   }
 
-  &:active {
+  .btn:active {
     .icon {
       transform: scale(0.7);
     }
   }
 }
 
-.form {
-  display: flex;
-  flex-flow: row nowrap;
-
-  &--no-label {
-    .btn {
-      align-self: stretch;
-    }
-  }
-
-  &--has-label {
-    .btn {
-      align-self: flex-end;
-      height: fun.convert-px(52);
-    }
-  }
-}
-
 .field {
   min-width: 0;