diff --git a/html/assets/css/style.css b/html/assets/css/style.css
index 4b2401b550f50c7d8322e60bfc8bff9e850daf31..1bf098788906b4492249e301d7d4f7f3289a3d43 100644
--- a/html/assets/css/style.css
+++ b/html/assets/css/style.css
@@ -41,7 +41,17 @@
1;
}
-.grade {
- grid-template-columns: 5rem 1fr 1fr 1fr 1fr;
+.grade-h-a-l {
+ grid-template-columns: 5rem minmax(110px, 1fr) minmax(160px, 1fr) 1fr;
+ grid-template-rows: repeat(auto-fit, 30px);
+}
+
+.grade-h-a-l-c {
+ grid-template-columns: 5rem minmax(110px, 1fr) minmax(160px, 1fr) 1fr;
+ grid-template-rows: repeat(auto-fit, 30px);
+}
+
+.grade-m-sv {
+ grid-template-columns: 5rem 1fr 1fr;
grid-template-rows: repeat(auto-fit, 30px);
}
diff --git a/html/index.html b/html/index.html
index d078fce4c779883cdbd24041d04eb6d3b7433d71..dd77126e08adbb055ab83703fdf0b1d51148021c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -10,7 +10,7 @@
<script src="assets/js/script.js" defer></script>
</head>
<body>
- <header class="borda-colorida z-20 overflow-auto pt-12 mb-0 flex flex-col items-center justify-center h-[100vh] bg-black sticky top-[calc(-100vh+56px)]">
+ <header class="pt-12 mb-0 flex flex-col items-center justify-center h-[80vh] bg-black sticky sm:top-[calc(-80vh+60px)] top-[calc(-80vh+110px)] z-10">
<svg class="absolute top-0 left-0 w-full h-full bg-fundo box-shadow-fundo opacity-50">
<rect width="1" height="1" fill="url(#background)" />
<lineargradient id="background">
@@ -343,12 +343,11 @@
<span class="p-1">Copa</span>
</div>
</div>
- <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+ <div class="grade-h-a-l overflow-auto w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Hall DINF</div>
<div class="bg-white text-center font-bold">Auditório DINF</div>
<div class="bg-white text-center font-bold">Lab 1-2</div>
- <div class="bg-white text-center font-bold">CAAD</div>
<div class="bg-white text-center col-start-1">09h30</div>
<div class="bg-white col-start-3 bg-green-200 text-center flex justify-center items-center row-span-3">
@@ -420,12 +419,11 @@
<span class="p-1">Copa</span>
</div>
</div>
- <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+ <div class="grade-h-a-l overflow-auto w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Hall DINF</div>
<div class="bg-white text-center font-bold">Auditório DINF</div>
<div class="bg-white text-center font-bold">Lab 1-2</div>
- <div class="bg-white text-center font-bold">CAAD</div>
<div class="bg-white text-center col-start-1">09h30</div>
<div class="bg-white col-start-4 bg-blue-200 text-center flex justify-center items-center row-span-4">
@@ -494,7 +492,7 @@
<span class="p-1">Copa</span>
</div>
</div>
- <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+ <div class="grade-h-a-l-c overflow-auto w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Hall DINF</div>
<div class="bg-white text-center font-bold">Auditório DINF</div>
@@ -565,7 +563,7 @@
<span class="p-1">Copa</span>
</div>
</div>
- <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2" style="grid-template-columns: 5rem 1fr 1fr">
+ <div class="grade-m-sv w-full overflow-auto grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Maratona</div>
<div class="bg-white text-center font-bold">Sala Virtual</div>
@@ -627,7 +625,7 @@
<span class="p-1">Copa</span>
</div>
</div>
- <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2" style="grid-template-columns: 5rem 1fr 1fr">
+ <div class="grade-m-sv overflow-auto w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Maratona</div>
<div class="bg-white text-center font-bold">Sala Virtual</div>