brincando com css

gestaoRaul/templates/base.html

@@ -8,7 +8,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
-    <link rel="stylesheet" href="{% static 'base.css' %}">
+    <link rel="stylesheet" href="{% static 'pico.css' %}">
     <script src="{% static 'htmx_base.js' %}"></script>
     {% block 'head' %}
     
@@ -17,9 +17,9 @@
 </head>
 <div>
     
-    aqui o menu
+    <!-- aqui o menu -->
 
-    <div class="sidebar">
+    <nav >
         <ul>
             <li><a href="#">Home</a></li>
             <li><a href="{% url 'mesas' %}">Mesas</a></li>
@@ -28,10 +28,10 @@
             <li><a href="#">Categorias</a></li>
             <li><a href="#">Sobre</a></li>
         </ul>
-    </div>
-    <div class="content">
+    </nav>
+    <!-- <div class="content">
         <h1>Bem-vindo ao meu site!</h1>
-    </div>
+    </div> -->
 
 
 </div>

gestaoRaul/templates/static/comandas/css/comandas.css

@@ -1,14 +1,14 @@
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(3, 2fr);
+    grid-template-columns: repeat(4, 2fr);
     gap: 20px;
     max-width: 800px; /* Define a largura máxima do grid */
     margin: 0 auto; /* Centraliza o grid na página */
   }
 
 .card {
-    width: 220px;
-    height: 220px;
+    width: 120px;
+    height: 120px;
     background-color: #f2f2f2;
     border-radius: 15px;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
@@ -77,3 +77,11 @@ input, textarea {
     border-radius: 5px;
     border: 1px solid #ccc;
 }
+
+
+@media (min-width: 768px) {
+    .grid-containerid {
+        grid-template-columns: repeat(3, 1fr);
+      /* grid-template-columns: repeat(auto-fit, minmax(2%, 3fr)); */
+    }
+  }

gestaoRaul/templates/static/comandas/css/viewcomanda.css

@@ -1,6 +1,6 @@
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(2, 2fr);
+    grid-template-columns: repeat(1, 2fr);
     gap: 10px;
     max-width: 800px; /* Define a largura máxima do grid */
     margin: 0 auto; /* Centraliza o grid na página */

gestaoRaul/templates/static/comandas/js/comandas.js

@@ -1,5 +1,7 @@
 function openModal() {
     document.getElementById('Modal-create-comanda').style.display = 'block';
+    // HTMLDialogElement.show()
+    // HTMLDialogElement.showModal()
 }
 
 function closeModal() {