fix responsiveness

css/styles.css

@@ -14497,14 +14497,14 @@ a:hover {
 
 /* line 21, global.scss */
 .box {
-  background: #eceeef;
+  background: #d1efb5;
   border-radius: 3px;
 }
 
 /* line 26, global.scss */
 .container {
   width: 100%;
-  max-width: 1280px;
+  max-width: 1366px;
   padding: 0 20px;
 }
 
@@ -14585,7 +14585,6 @@ a:hover {
 /* line 99, global.scss */
 #map {
   width: 100%;
-  /*     height: 150px; */
   border-radius: 3px;
   overflow: hidden;
   padding: 10px;
@@ -14766,32 +14765,34 @@ header .breadcrumb {
   font-size: 0.75rem;
   padding: 5px;
   margin: 0;
-  /*         background-color: $light-grey; */
+  background-color: #d1efb5;
   border-radius: 0;
   width: 100%;
   position: absolute;
   left: 0;
   top: 70px;
-  color: #aaa;
+  color: #666;
   height: 30px;
+  z-index: 1;
 }
-/* line 107, header.scss */
+/* line 108, header.scss */
 header .breadcrumb .container {
   overflow: hidden;
   overflow-x: auto;
 }
-/* line 111, header.scss */
+/* line 112, header.scss */
 header .breadcrumb .container .crumbs {
   height: 20px;
   display: ruby;
 }
-/* line 114, header.scss */
+/* line 115, header.scss */
 header .breadcrumb .container .crumbs a {
-  color: #aaa;
+  color: #4e984a;
   text-decoration: none;
   transition: .4s;
+  cursor: pointer;
 }
-/* line 118, header.scss */
+/* line 120, header.scss */
 header .breadcrumb .container .crumbs a:hover {
   color: #666;
 }
@@ -14800,12 +14801,14 @@ header .breadcrumb .container .crumbs a:hover {
 .dropdown {
   border-top: 3px solid #71986e;
   border-bottom: 3px solid #71986e;
+  background: #d1efb5;
+  border-top: 3px solid #4e984a;
+  border-bottom: 3px solid #4e984a;
   border-radius: 3px;
   margin-bottom: 4px;
-  background: #eceeef;
   transition: .4s;
 }
-/* line 11, navigation.scss */
+/* line 15, navigation.scss */
 .dropdown .title {
   font-size: 0.75rem;
   font-weight: bold;
@@ -14814,10 +14817,11 @@ header .breadcrumb .container .crumbs a:hover {
   position: relative;
   cursor: pointer;
   background: #71986e;
+  background: #4e984a;
   color: white;
   transition: .4s;
 }
-/* line 22, navigation.scss */
+/* line 27, navigation.scss */
 .dropdown .title:after {
   content: '\f105';
   font-family: 'FontAwesome';
@@ -14825,23 +14829,23 @@ header .breadcrumb .container .crumbs a:hover {
   right: 10px;
   transition: .4s;
 }
-/* line 33, navigation.scss */
+/* line 38, navigation.scss */
 .dropdown:hover {
   border-top: 3px solid #4e984a;
   border-bottom: 3px solid #4e984a;
 }
-/* line 36, navigation.scss */
+/* line 41, navigation.scss */
 .dropdown:hover .title {
   background: #4e984a;
 }
-/* line 41, navigation.scss */
+/* line 46, navigation.scss */
 .dropdown .items {
   overflow: hidden;
   height: 0px;
   padding: 0 10px;
   margin: 0;
 }
-/* line 47, navigation.scss */
+/* line 52, navigation.scss */
 .dropdown .items li {
   font-size: 0.75rem;
   text-align: left;
@@ -14849,40 +14853,60 @@ header .breadcrumb .container .crumbs a:hover {
   padding: 10px 0;
   list-style: none;
 }
-/* line 54, navigation.scss */
+/* line 59, navigation.scss */
 .dropdown .items li a {
   color: #666;
   text-decoration: none;
   transition: .4s;
   cursor: pointer;
 }
-/* line 59, navigation.scss */
+/* line 64, navigation.scss */
 .dropdown .items li a:hover {
   color: #aaa;
 }
-/* line 63, navigation.scss */
+/* line 68, navigation.scss */
 .dropdown .items li:last-child {
   border-bottom: none;
 }
-/* line 70, navigation.scss */
+/* line 75, navigation.scss */
 .dropdown.active {
   border-top: 3px solid #4e984a;
   border-bottom: 3px solid #4e984a;
 }
-/* line 74, navigation.scss */
+/* line 79, navigation.scss */
 .dropdown.active .title {
   background: #4e984a;
 }
-/* line 76, navigation.scss */
+/* line 81, navigation.scss */
 .dropdown.active .title:after {
   transform: rotate(90deg);
 }
-/* line 80, navigation.scss */
+/* line 85, navigation.scss */
 .dropdown.active .items {
   height: auto;
 }
 
-/* line 1, homepage.scss */
+/* line 94, navigation.scss */
+.pages {
+  text-align: center;
+}
+/* line 96, navigation.scss */
+.pages a {
+  display: inline-block;
+  background: #d1efb5;
+  font-weight: bold;
+  border-radius: 3px;
+  margin: 4px;
+  color: #4e984a;
+  padding: 4px 8px;
+}
+/* line 105, navigation.scss */
+.pages a:hover, .pages a.selected {
+  color: white;
+  background: #4e984a;
+}
+
+/* line 1, sections/homepage.scss */
 .banner,
 .spot {
   height: 150px;
@@ -14890,16 +14914,16 @@ header .breadcrumb .container .crumbs a:hover {
   position: relative;
   padding: 5px;
 }
-/* line 9, homepage.scss */
+/* line 9, sections/homepage.scss */
 .banner .content,
 .spot .content {
-  background: #eceeef;
+  background: #d1efb5;
   position: relative;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
 }
-/* line 16, homepage.scss */
+/* line 16, sections/homepage.scss */
 .banner .content .title,
 .spot .content .title {
   position: absolute;
@@ -14914,7 +14938,7 @@ header .breadcrumb .container .crumbs a:hover {
   z-index: 1;
   text-transform: uppercase;
 }
-/* line 30, homepage.scss */
+/* line 30, sections/homepage.scss */
 .banner .content img,
 .spot .content img {
   position: absolute;
@@ -14926,60 +14950,84 @@ header .breadcrumb .container .crumbs a:hover {
   object-position: center;
   transition: .4s;
 }
-/* line 44, homepage.scss */
+/* line 44, sections/homepage.scss */
 .banner:hover .content img,
 .spot:hover .content img {
   transform: scale(1.2);
 }
 
-/* line 53, homepage.scss */
+/* line 53, sections/homepage.scss */
 .banner {
   height: 90px;
   margin-bottom: 4px;
   padding: 0;
 }
 
-/* line 59, homepage.scss */
+/* line 59, sections/homepage.scss */
 .contacts {
   padding: 15px 25px;
   font-size: 0.75rem;
 }
-/* line 62, homepage.scss */
+/* line 62, sections/homepage.scss */
 .contacts .fa {
   color: #4e984a;
   width: 25px;
   font-size: 1rem;
   height: 25px;
 }
-/* line 68, homepage.scss */
+/* line 68, sections/homepage.scss */
 .contacts b {
   color: #4e984a;
 }
 
-/* line 73, homepage.scss */
+/* line 2, sections/news.scss */
 .last-news {
   font-size: 0.75rem;
 }
-/* line 75, homepage.scss */
+/* line 4, sections/news.scss */
 .last-news .item {
-  border-bottom: 1px solid #eceeef;
+  border-bottom: 1px solid #d1efb5;
   padding: 8px 10px;
 }
-/* line 78, homepage.scss */
+/* line 7, sections/news.scss */
 .last-news .item .date {
   color: #aa0000;
 }
-/* line 81, homepage.scss */
+/* line 10, sections/news.scss */
 .last-news .item a {
   color: #666;
   text-decoration: none;
   transition: .4s;
 }
-/* line 85, homepage.scss */
+/* line 14, sections/news.scss */
 .last-news .item a:hover {
   color: black;
 }
 
+/* line 21, sections/news.scss */
+.news {
+  font-size: 0.75rem;
+}
+/* line 23, sections/news.scss */
+.news .item {
+  border-bottom: 1px solid #d1efb5;
+  padding: 8px 10px;
+}
+/* line 26, sections/news.scss */
+.news .item .date {
+  color: #aa0000;
+}
+/* line 29, sections/news.scss */
+.news .item a {
+  color: #666;
+  text-decoration: none;
+  transition: .4s;
+}
+/* line 33, sections/news.scss */
+.news .item a:hover {
+  color: black;
+}
+
 @media only screen and (min-width: 768px) {
   /* line 5, mediaqueries/viewports/_768up.scss */
   header {

home.php

@@ -32,7 +32,7 @@
     </div>
     
     <div class="col-12 my-2">
-        <p class="text-right"><a class="font-12" href="">Vai a tutte le news <i class="fa fa-angle-right"></i></a></p>
+        <p class="text-right"><a class="font-12" href="<?php echo $BASE_URL;?>/notizie">Vai a tutte le news <i class="fa fa-angle-right"></i></a></p>
     </div>
     
 </div>

js/scripts.js

@@ -1,6 +1,11 @@
 
 $(document).ready(function(){
     
+    if($(window).width() < 1024 && $(window).width() >= 768){
+        $('#menuRight .banner').clone().appendTo('#menuLeft');
+        $('#menuRight').empty();
+    }
+    
     $('.hamburger').on('click', function(){
         $(this).toggleClass('is-active');
         

menu-left.php

@@ -1,5 +1,5 @@
 
-<div class="col-12 col-sm-3 col-md-2 p-0">
+<div id="menuLeft" class="col-12 col-sm-3 col-md-2 p-0">
 
     <div class="dropdown active">
         <div class="title">Area Riservata</div>

menu-right.php

@@ -1,5 +1,5 @@
 
-<div class="col-12 col-sm-12 col-md-2 p-0">
+<div id="menuRight" class="col-12 col-sm-12 col-md-2 p-0">
     <div class="banner">
         <div class="content">
             <a href="#">

notizie.php

@@ -0,0 +1,22 @@
+<div class="row news">
+   
+    <div class="col-12">
+        <div class="section-title">Ultime notizie</div>
+        <p class="item"><a href=""><span class="date">07-12-2017 </span> - Chiusura Uffici sabato 9</a></p>
+        <p class="item"><a href=""><span class="date">07-12-2017 </span> - Chiusura Uffici sabato 9</a></p>
+        <p class="item"><a href=""><span class="date">07-12-2017 </span> - Chiusura Uffici sabato 9</a></p>
+        <p class="item"><a href=""><span class="date">07-12-2017 </span> - Chiusura Uffici sabato 9</a></p>
+    </div>
+    
+    <div class="col-12 my-2 pages">
+        <a class="font-12 selected" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
+        <a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
+        <a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
+        <a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
+        <a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
+        <a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
+        <a class="font-12" href="<?php echo $BASE_URL;?>/notizie/0">1</a>
+    </div>
+    
+</div>
+

scss/global.scss

@@ -25,7 +25,7 @@ a{
 
 .container{
     width: 100%;
-    max-width: 1280px;
+    max-width: 1366px;
     padding: 0 20px;
 }
 
@@ -98,7 +98,6 @@ a{
 
 #map{
     width: 100%;
-/*     height: 150px; */
     border-radius: 3px;
     overflow: hidden;
     padding: 10px;

scss/header.scss

@@ -95,14 +95,15 @@ header{
         font-size: $font-12;
         padding: 5px;
         margin: 0;
-/*         background-color: $light-grey; */
+        background-color: $light-grey;
         border-radius: 0;
         width: 100%;
         position: absolute;
         left: 0;
         top: 70px;
-        color: $grey;
+        color: $dark-grey;
         height: 30px;
+        z-index: 1;
         
         .container{
             overflow: hidden;
@@ -112,9 +113,10 @@ header{
                 height: 20px;
                 display: ruby;
                 a{
-                    color: $grey;
+                    color: $green;
                     text-decoration: none;
                     transition: .4s;
+                    cursor: pointer;
                     &:hover{
                         color: $dark-grey;
                     }

scss/main.scss

@@ -12,7 +12,8 @@
 @import "forms";
 @import "header";
 @import "navigation";
-@import "homepage";
+
+@import "sections/sections";
 
 
 

scss/navigation.scss

@@ -3,9 +3,13 @@
 .dropdown{
     border-top: 3px solid $light-green;
     border-bottom: 3px solid $light-green;
+    background: $light-grey;
+    
+    border-top: 3px solid $green;
+    border-bottom: 3px solid $green;
+    
     border-radius: 3px;
     margin-bottom: 4px;
-    background: $light-grey;
     transition: .4s;
     
     .title{
@@ -16,6 +20,7 @@
         position: relative;
         cursor: pointer;
         background: $light-green;
+        background: $green;
         color: white;
         transition: .4s;
         
@@ -82,3 +87,25 @@
         }
     }
 } 
+
+
+
+
+.pages{
+    text-align: center;
+    a{
+        display: inline-block;
+        background: $light-grey;
+        font-weight: bold;
+        border-radius: 3px;
+        margin: 4px;
+        color: $green;
+        padding: 4px 8px;
+        
+        &:hover,
+        &.selected{
+            color: white;
+            background: $green;
+        }
+    }
+}

scss/homepage.scss → scss/sections/homepage.scss

@@ -70,22 +70,4 @@
     }
 }
 
-.last-news{
-    font-size: $font-12;
-    .item{
-        border-bottom: 1px solid $light-grey;
-        padding: 8px 10px;
-        .date{
-            color: $red;
-        }
-        a{
-            color: $dark-grey;
-            text-decoration: none;
-            transition: .4s;
-            &:hover{
-                color: black;
-            }
-        }
-    }
-}
  

scss/sections/news.scss

@@ -0,0 +1,39 @@
+
+.last-news{
+    font-size: $font-12;
+    .item{
+        border-bottom: 1px solid $light-grey;
+        padding: 8px 10px;
+        .date{
+            color: $red;
+        }
+        a{
+            color: $dark-grey;
+            text-decoration: none;
+            transition: .4s;
+            &:hover{
+                color: black;
+            }
+        }
+    }
+} 
+
+.news{
+    font-size: $font-12;
+    .item{
+        border-bottom: 1px solid $light-grey;
+        padding: 8px 10px;
+        .date{
+            color: $red;
+        }
+        a{
+            color: $dark-grey;
+            text-decoration: none;
+            transition: .4s;
+            &:hover{
+                color: black;
+            }
+        }
+    }
+
+} 

scss/sections/sections.scss

@@ -0,0 +1,3 @@
+
+@import "homepage"; 
+@import "news"; 

scss/variables.scss

@@ -71,5 +71,5 @@ $green:         #4e984a;//#67a562;
 $light-green:   #71986e;//#2e981e;//#58984e;
 $red:           #aa0000;
 $grey:          #aaa;
-$light-grey:    #eceeef;
+$light-grey:    #d1efb5;
 $dark-grey:     #666;