changes navbar responsive breackpoint, and font-family footer

src/components/footer/styles.scss

@@ -32,7 +32,6 @@
         font-size: 14px;
     }
     .subtitle{
-        font-family: 'Lexend Deca,sans-serif';
         font-style: normal;
         font-weight: 700;
         font-size: 20px;
@@ -41,7 +40,6 @@
         color: #FFFFFF;
     }
     .description{
-        font-family: 'Lexen Deca';
         font-style: normal;
         font-weight: 300;
         font-size: 16px !important;
@@ -50,7 +48,6 @@
         color: #FFFFFF;
     }
     .sub-description{
-        font-family: 'Lexen Deca';
         font-style: italic;
         font-weight: 300;
         font-size: 14px !important;

src/components/hexagono/index.js

@@ -47,7 +47,7 @@ const hexagono = ({props}) => (
    `,
 
    <>
-    <Hexa id={intl.formatMessage({ id: props.title })} className='is-hidden-mobile'>
+        <Hexa id={intl.formatMessage({ id: props.title })} className='is-hidden-touch'>
             <div className="contenido">
                 <p><b style={{color: 'black'}}>{intl.formatMessage({ id: props.title })}</b></p>
                 <div  className={props.styles.verticalCenter ? 'vertical-center' : 'texto'}>

src/components/navbar/index.js

@@ -56,6 +56,24 @@ export default (props) => {
         id="navbarColapse"
         className={isActive ? "navbar-menu is-active" : "navbar-menu"}
       >
+        <div>
+
+          <div className="navbar-brand">
+            <Link className="menu-logo" onClick={() => setIsActive(false)} to="/">
+              <img src={LogoDer} alt="Logo Democracia en Red" />
+            </Link>
+            <button
+              onClick={() => setIsActive((prevState) => !prevState)}
+              className={isActive ? "navbar-burger is-active" : "navbar-burger"}
+              aria-label="menu"
+              aria-expanded="false"
+              data-target="navbarColapse"
+            >
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+            </button>
+          </div>
         <div className="navbar-start">
           <Link
             className="navbar-item is-size-6 my-3 is-capitalized"
@@ -100,14 +118,15 @@ export default (props) => {
           >
             {intl.formatMessage({ id: "press.title" })}
           </Link>
-          {/* <Link
+            <Link
             className="navbar-item is-size-6 my-3 is-capitalized"
             onClick={() => setIsActive(false)}
-            to="/blog"
+              target="_blank"
+              to="http://blog.democraciaenred.org"
             data-target="blog"
           >
             Blog
-          </Link> */}
+            </Link>
 {/* 
           <a href="#press-slider" className="navbar-item is-size-6 my-3 is-capitalized">
             {intl.formatMessage({ id: "press.title" })}
@@ -119,10 +138,10 @@ export default (props) => {
           >
             {intl.formatMessage({ id: "contact" })}
           </PopupButton>
-          <div className="my-3 is-flex is-justify-content-space-between mr-2">
+            <div className="my-3  mr-2 media-wrapper">
             {socialMedia.map((media, index) => (
             <a
-              className="navbar-item is-hidden-desktop is-inline-block p-0"
+                className="navbar-item  is-inline-block p-0"
               href={media.link}
               target="_blank"
               rel="noopener noreferrer"
@@ -135,9 +154,7 @@ export default (props) => {
           ))}
           </div>
 
-          <p className="is-size-7 is-hidden-desktop has-text-white">
-            {intl.formatMessage({ id: "footer.copyright_1" })}
-          </p>
+
           <div className="lang-switch">
             <IntlContextConsumer>
               {({ languages, language: currentLocale }) =>
@@ -157,6 +174,10 @@ export default (props) => {
             </IntlContextConsumer>
           </div>
         </div>
+        </div>
+        <p className="is-size-7 has-text-white footer-navbar">
+          {intl.formatMessage({ id: "footer.copyright_1" })}
+        </p>
       </div>
     </nav>
   );

src/components/navbar/styles.scss

@@ -1,4 +1,5 @@
 @import "~bulma/sass/utilities/_all.sass";
+@import "../../pages/generalSet.scss";
 
 .navbar {
     transition: background-color 0.3s ease;
@@ -13,6 +14,8 @@
     border: none;
     background-color: transparent;
     outline: none !important;
+    margin-right: 1rem;
+    margin-top:.5rem;
     span {
         width: 30px;
         height: 2px;
@@ -54,57 +57,40 @@
     font-size: 1rem;
 }
 
-@include touch {
-    .navbar.is-active {
-        position: fixed;
-        height: 100%;
-        background-color: #4d4d4d;
+.navbar-menu{
+    .menu-logo{
+        display: none;
     }
-
-    .navbar-menu {
-        box-shadow: none;
-        .navbar-item {
-            padding: 0.2rem 0.75rem;
-        }
+    .navbar-start{
+        .media-wrapper{
+            display: none;
+           }
     }
-    .navbar-start {
-        position: relative;
+    .navbar-brand{
+        display: none;
     }
-    .navbar-start p {
-        position: fixed;
-        bottom: 2rem;
-        left: 1rem;
-        right: 3rem;
-    }
-    .lang-switch {
-        position: absolute;
-        bottom: -30px;
-    }
-    .navbar-item-lang {
-        display: inline-block;
+    .footer-navbar{
+        display: none;
     }
 }
-   
+
 @include desktop {
     .navbar {
         // margin-top: 1.5rem;
-        justify-content: flex-end;
+        justify-content: space-between;
         // top: -26px;
-
         .navbar-item {
             font-size: 18px;
         }
     }
-    .navbar-brand {
-        position: absolute;
-        left: 6rem;
-        transform: translateX(-50%);
-    }
+
     .navbar-menu {
         flex-grow: 0;
+
         .navbar-start {
             align-items: center;
             margin-right: 2rem;
+
         }
         .left-wrapper {
             position: absolute;
@@ -143,12 +129,93 @@
                 }
             }
         }
-        
+
     }
     @media screen and (min-width: 1024px){
         .is-size-2-desktop {
             right:100px;
         }
+    }        
+}
+@media screen and (max-width: 1278px){
+
+
+    .navbar-brand {
+        left: 6rem;
+    }
+
+
+    .navbar-menu {
+        box-shadow: none;
+        position: fixed;
+        top: 0;
+        right: 0;
+        height: 100vh;
+        background-color: #4d4d4d!important;
+        width: min-content;
+        &.is-active {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .menu-logo{
+            display: block;
+            img{
+                max-height: 3rem !important;
+            }
+        }
+        .navbar-item {
+            padding: 0.2rem 0.75rem;
+            margin-left: 1rem;
+        }
+        .navbar-brand{
+            display: flex;
+                .navbar-burger{
+                    margin-top: 0;
+                }
+        }
+        .footer-navbar{
+            padding: 1rem 2rem;
+            display: block;
+
+        }
+    }
+    .navbar-start {
+        position: relative;
+        display:flex;
+        align-items: start!important;
+        flex-direction: column;
+        margin-right: 2rem;
+        p {
+           position: fixed;
+           bottom: 2rem;
+           left: 1rem;
+           right: 3rem;
+       }
+       .media-wrapper{
+        display: flex!important;
+       }
+    }
+    .lang-switch {
+        position: absolute;
+        bottom: -30px;
+    }
+    .navbar-item-lang {
+        display: inline-block;
+    }
+
+}
+
+@media screen and (max-width: 576px){
+
+    .navbar-start {
+       .media-wrapper{
+        flex-wrap: wrap;
+       }
+    }
+    .navbar-menu{
+        &.is-active{
+            width: 100%;
+        }
     }
-
 }

src/pages/generalSet.scss

@@ -1,5 +1,6 @@
 $family-sans-serif: "Lexend Deca", sans-serif;
 $navbar-background-color: transparent;
+$navbar-breakpoint: 1278px;
 $navbar-item-color: #FFF;
 $navbar-item-hover-color: #FFF;
 $navbar-item-hover-background-color: transparent;