fixed responsive header (#33)

* fixed responsive header * fixed accessibility with images * fixed mobile version to handle uncentred title and buttons
GonzagaAccess · Oct 15, 2020 · a149ae8 · a149ae8
1 parent 87599f8
commit a149ae8
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/src/assets/css/components/header/about.css b/src/assets/css/components/header/about.css
@@ -26,4 +26,4 @@
     padding-left: 34px;
     padding-right: 54px;
   }
-}
+}
diff --git a/src/assets/css/components/header/index.css b/src/assets/css/components/header/index.css
@@ -1,7 +1,7 @@
-@import "./logo.css";
-@import "./menu.css";
-@import "./call.css";
-@import "./about.css";
+@import './logo.css';
+@import './menu.css';
+@import './call.css';
+@import './about.css';
 
 .header {
   padding-top: 1.25em;
@@ -11,7 +11,6 @@
   background-color: var(--blue);
 }
 
-
 @media screen and (max-width: 1423px) {
   .header {
     padding-bottom: calc(120px + 300px);

diff --git a/src/assets/css/components/header/menu.css b/src/assets/css/components/header/menu.css
@@ -1,33 +1,29 @@
 .header__menu ul {
   list-style-type: none;
-  justify-items: flex-end;
-  align-items: flex-end;
 }
 .header__menu .header__menu__item {
   display: inline-block;
 }
 .header__menu .header__menu__item__link {
   line-height: 1.2em;
   text-decoration: none;
-
   border-radius: 0.2em;
   display: block;
   padding: 0.793em;
-
   color: var(--text-light);
-
   transition-property: background, color;
   transition-duration: 0.5s, 0.5s;
   transition-timing-function: linear;
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  -ms-border-radius: 0.2em;
+  -o-border-radius: 0.2em;
 }
 .header__menu .header__menu__item__link:hover {
   background: var(--text-light);
   color: var(--blue);
 }
 
-
-
-
 @media screen and (max-width: 1423px) {
   .header__call h1 {
     font-size: 2.55em;
@@ -41,9 +37,9 @@
   .header__call__title {
     width: 100%;
   }
-  .header__call__image  {
+  .header__call__image {
     padding-top: 80px;
-     margin: 0 auto;
+    margin: 0 auto;
   }
 }
 
@@ -52,19 +48,28 @@
     padding-right: 54px;
     padding-left: 54px;
   }
+  .header__menu {
+    margin: 10px 30px;
+  }
 }
 
 @media screen and (max-width: 500px) {
-  .header__call__title  {
+  .header__menu ul {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+  }
+  .header__call__title {
     font-size: 13px;
     padding-right: 0px;
     padding-left: 0px;
   }
   .header__call_buttons {
     display: flex;
     justify-content: space-around;
+    padding: 5px;
   }
   .button {
     margin-right: 0px;
   }
-}
+}
diff --git a/src/index.html b/src/index.html
@@ -40,9 +40,7 @@
         <div class="header__call col-lg-6 col-lg-offset-3">
           <div class="row">
             <div class="header__call__title col-lg-6">
-              <h1>
-                Nós acreditamos em uma internet acessível à todos.
-              </h1>
+              <h1>Nós acreditamos em uma internet acessível à todos.</h1>
               <div class="header__call_buttons">
                 <a class="button" href="#" alt="Saiba mais">Saiba mais</a>
                 <a class="button" href="#" alt="Extensões">Extensões</a>
@@ -82,9 +80,7 @@ <h2 class="about__title">Quem Somos</h2>
 
       <main class="content row">
         <div class="content__activity col-lg-12">
-          <h2 class="content__activity__title title">
-            Extensões
-          </h2>
+          <h2 class="content__activity__title title">Extensões</h2>
 
           <p class="content__activity__subtitle subtitle">
             Escutando a sua nessecidade, desenvolvemos e disponibilizamos, de
@@ -96,7 +92,12 @@ <h2 class="content__activity__title title">
             <div class="content__activity__list__item col-lg-4">
               <div class="content__activity__list__item__icon__text">
                 <div class="content__activity__list__item__icon">
-                  <img src="./assets/images/icons/eye.svg" alt="eye-svg"/>
+                  <img
+                    alt=""
+                    aria-hidden="true"
+                    src="./assets/images/icons/eye.svg"
+                  />
+
                 </div>
                 <div class="content__activity__list__item__title">
                   Aprenda Braille
@@ -114,7 +115,11 @@ <h2 class="content__activity__title title">
             <div class="content__activity__list__item col-lg-4">
               <div class="content__activity__list__item__icon__text">
                 <div class="content__activity__list__item__icon">
-                  <img src="./assets/images/icons/ear.svg" />
+                  <img
+                    alt=""
+                    aria-hidden="true"
+                    src="./assets/images/icons/ear.svg"
+                  />
                 </div>
                 <div class="content__activity__list__item__title">
                   Access Legenda
@@ -133,7 +138,11 @@ <h2 class="content__activity__title title">
             <div class="content__activity__list__item col-lg-4">
               <div class="content__activity__list__item__icon__text">
                 <div class="content__activity__list__item__icon">
-                  <img src="./assets/images/icons/brain.svg" />
+                  <img
+                    alt=""
+                    aria-hidden="true"
+                    src="./assets/images/icons/brain.svg"
+                  />
                 </div>
                 <div class="content__activity__list__item__title">
                   Remember Me
@@ -152,7 +161,11 @@ <h2 class="content__activity__title title">
             <div class="content__activity__list__item col-lg-4">
               <div class="content__activity__list__item__icon__text">
                 <div class="content__activity__list__item__icon">
-                  <img src="./assets/images/icons/hand.svg" />
+                  <img
+                    alt=""
+                    aria-hidden="true"
+                    src="./assets/images/icons/hand.svg"
+                  />
                 </div>
                 <div class="content__activity__list__item__title">
                   Access Navegação
@@ -171,7 +184,11 @@ <h2 class="content__activity__title title">
             <div class="content__activity__list__item col-lg-4">
               <div class="content__activity__list__item__icon__text">
                 <div class="content__activity__list__item__icon">
-                  <img src="./assets/images/icons/eye.svg" />
+                  <img
+                    alt=""
+                    aria-hidden="true"
+                    src="./assets/images/icons/eye.svg"
+                  />
                 </div>
                 <div class="content__activity__list__item__title">
                   Access Cores
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,4 +26,4 @@ @@
         padding-left: 34px;
         padding-right: 54px;
       }
-    }
+    }