ciclos

commit 2ff01c4930e1f8eede1faaf975e35740c5a22232

Author: Pedro Lucas Porcellis <pedrolucasporcellis@gmail.com>

Make navbar and general layout a little more responsive


 src/static/stylesheet.css | 58 ++++++++++++++++++++++++++++++++++++----
 src/templates/layout.html | 5 ++-


diff --git a/src/static/stylesheet.css b/src/static/stylesheet.css
index 6d91acfe5a8dbcadf0c934e267f7418254c9e696..2eec176352f2221ec0ac6836504aad5237887106 100644
--- a/src/static/stylesheet.css
+++ b/src/static/stylesheet.css
@@ -2,16 +2,58 @@ /*
  * Simple and minimal css
  */ 
 
+*, ::after, ::before {
+  box-sizing: border-box;
+}
+
 body {
-  margin: 40px auto;
-  max-width: 800px;
-  padding: 0 10px;
   color: #555;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 110%;
   text-rendering: optimizeLegibility;
   line-height: 1.6;
 }
+
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width:576px) {
+ .container {
+    max-width:540px;
+ }
+
+ .navbar {
+   flex-flow: row nowrap;
+ }
+
+ .navbar ul {
+   margin-left: 35px;
+ }
+}
+
+@media (min-width:768px) {
+ .container {
+    max-width:720px;
+ }
+}
+
+@media (min-width:992px) {
+ .container {
+    max-width:960px;
+ }
+}
+
+@media (min-width:1200px) {
+ .container {
+    max-width:1140px;
+ }
+}
+
 
 a {
   /*color: #3366CC;*/
@@ -143,25 +185,26 @@   background-color: #eee;
 }
 
 .navbar {
-  flex-flow: row nowrap;
-  justify-content: flex-start;
+  flex-flow: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
   position: relative;
   display: flex;
   align-items: center;
   padding: .5rem 1rem;
-
-  width: 100%;
 }
 
 .navbar ul {
   margin-bottom: 0;
   margin-top: 0;
+  margin-left: 0;
   padding-left: 0;
   list-style: none;
   
   display: flex;
   flex-direction: row;
   margin-right: auto;
+  width: 100%;
 }
 
 .navbar ul li {
@@ -169,5 +212,6 @@   margin-bottom: 0px;
 }
 
 .navbar ul li a {
+  width: 100%;
   text-decoration: none;
 }




diff --git a/src/templates/layout.html b/src/templates/layout.html
index 28513c53fb7a9a00d428b3c3cc3e5332e71a334a..1b3d7e41f3f6131fc92d11ad87ff09d6df3e97ad 100644
--- a/src/templates/layout.html
+++ b/src/templates/layout.html
@@ -2,6 +2,7 @@ 
 <html lang="pt-br">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     {% block title %}
     <title>{{ title or "Feira Virtual Bem da Terra" }}</title>
     {% endblock %}
@@ -10,7 +11,7 @@     
   </head>
 
   <body>
-    <nav class="navbar">
+    <nav class="navbar container">
       <a href="{{ url_for('basic.index') }}">Bem da Terra</a>
       <ul>
         <li> <a class="mr-5" href="{{ url_for('basic.about') }}">Sobre</a> </li>
@@ -33,7 +34,7 @@         {% endif %}
       </div>
     </nav>
 
-    <div class='container-content'>
+    <div class='container container-content'>
       {% block body %}
         
       {% endblock %}