Merge pull request #468 from maykinmedia/fix/1078-frontend-a11y-issues

♿ [#1078] frontend a11y issues
maykinmedia · Feb 16, 2023 · c477504 · c477504
2 parents 6107ac5 + 604013e
commit c477504
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/open_inwoner/scss/components/Header/Header.scss b/src/open_inwoner/scss/components/Header/Header.scss
@@ -56,13 +56,17 @@ $vm: var(--spacing-large);
 
   .logo {
     height: 100%;
-    padding: 8px;
+    padding: 8px 8px 8px 0;
     box-sizing: border-box;
+    width: fit-content;
 
     @media (min-width: 768px) {
       height: auto;
-      grid-column: 1 / span 8;
-      margin: var(--spacing-large) 0;
+      grid-column: 1 / span 6;
+      margin: var(--spacing-large) var(--spacing-large) var(--spacing-large) 0;
+    }
+    @media (max-width: 767px) {
+      padding: 8px;
     }
   }
 
@@ -75,7 +79,7 @@ $vm: var(--spacing-large);
   &__menu &__button {
     appearance: none;
     background-color: transparent;
-    border: 1 px solid var(--color-gray-light);
+    border: 1px solid var(--color-gray-light);
     border-bottom: none;
     height: calc(2 * var(--row-height));
     width: calc(2 * var(--row-height));

diff --git a/src/open_inwoner/scss/components/Logo/Logo.scss b/src/open_inwoner/scss/components/Logo/Logo.scss
@@ -1,6 +1,13 @@
 .logo {
   &__image {
     max-width: 100%;
-    height: 100%;
+    height: auto;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+    @media (max-width: 455px) {
+      height: auto;
+    }
   }
 }
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -140,9 +140,9 @@
   --color-success-lighter: hsl(
     var(--color-success-h),
     var(--color-success-s),
-    // this was +50% but +57% is needed for 4.5:1 contrast
     calc(var(--color-success-l) + 57%)
   );
+  // color-success-l was +50% but +57% is needed for 4.5:1 contrast
 
   --color-font-primary: var(--color-white);
   --color-font-secondary: var(--color-white);